website: https://tinway.org
github: https://github.com/tinway/tinwayJS
Web Apps for Bots: https://core.telegram.org/bots/webapps
Example
1. Create index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>tinwayJS - A JavaScript library for building user interfaces</title>
</head>
<body>
<div id="app"></div>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script type="module" src="app.js"></script>
</body>
</html>
2. Create app.js
import {run} from './tinway.js'
let start = () => {
let id = document.getElementById('id')
id.innerHTML = window.Telegram.WebApp.initDataUnsafe.user.id
let first_name = document.getElementById('first_name')
first_name.innerHTML = window.Telegram.WebApp.initDataUnsafe.user.first_name
let last_name = document.getElementById('last_name')
last_name.innerHTML = window.Telegram.WebApp.initDataUnsafe.user.last_name
}
run({
html:'./main.html',
start: start
})
import file tinway.js
function run() renders a web page!
- html: Path to html file.
- start: Run a function after rendering the page.
3. Create html file main.html
<div id="id"></div>
<div id="first_name"></div>
<div id="last_name"></div>
4. Add page to telegram bot
-
go to telegram bot https://t.me/BotFather
-
Send command /setmenubutton
-
Choose a bot
-
Please enter a valid URL. https is required
-
Enter a title to be displayed on the button instead of “Menu”
Telegram bot webpage created
And here the fantasies of developers are endless 🙂
tinwayJs starts a new open web journey! more cool features to come!
Leave a Reply