Stolen to the Weasley family, monitor each of your family members whereabouts.
Each family member will update their own status using a telegram
bot you'll have to set up.
The data will be stored in a firebase
database you'll maintain.
The clock will refresh itself every now and then, no need to refresh any page!
And the whole thing can be hosted at netlify
at no cost! ๐ธ
It's recommended to set up the dependencies before netlify
itself.
It should take no more than 10 minutes and you can start using your clock right away after deploying it ๐
Create a new project in the firebase
console (there's no need to add analytics to it).
Once created, head over to the database section and provision a new realtime database in test mode.
Modify and run the following curl
command specifying your database name in the address, the statuses you want in your clock and the people that will be displayed.
curl -X PUT 'https://{your-database-name}.firebaseio.com/.json' \
-H 'Content-Type: application/json' \
--data-raw '{
"statuses": [
"dentist",
"prison",
"lost",
"quidditch",
"dying",
"tailor",
"bed",
"holidays",
"forest",
"work",
"garden",
"school",
"home"
],
"people": {
"ron": {
"name": "Ron",
"status": "bed"
},
"ginny": {
"name": "Ginny",
"status": "quidditch"
},
"fred": {
"name": "Fred",
"status": "dying"
},
"george": {
"name": "George",
"status": "work"
}
}
}'
Reach out to BotFather
within telegram and use the /newbot
command.
Simply follow their instructions (give your bot a name and username) so you can get your bot access token back.
After that, you're free to customize your bot a bit setting up a profile picture for it (/setuserpic
) and other niceties, but I'll let you explore that yourself.
Now you're gonna need the telegram chat ID
for each person that will be using the clock.
To get that, each person will have to reach out to IDBot
and trigger the /getid
command to get their chat ID.
You can also complete this step yourself for now and come back to it once the clock is running.
Click the deploy to netlify
button above.
At some point, you'll be asked to configure environment variables.
It's here where you'll need to enter data that you got in previous steps:
-
The
ACCEPTED_MEMBERS
variable controls who can interact with the bot. It follows the\w+:\d+( \w+:\d+)+
format, where\w+
is the key for that person's entry in firebase and\d+
the number you got after spending a quality minute withIDBot
. Add a singleACCEPTED_MEMBERS
entry, splitting eachname_id:chat_id
pair with a space, something likeron:123 ginny:456
. -
The
FIREBASE_ADDRESS
variable let the functions running withinnetlify
know where the data is stored. Usehttps://{your-database-name}.firebaseio.com
as value, replacing the subdomain in that address. -
Lastly, the
TELEGRAM_TOKEN
variable will be used to send replies from anetlify
function to you. Use the value you previously got when talking toBotFather
, something likenumber:string
.
Continue the set up process until the end and let netlify
do its magic.
After these steps, you'll be able to see your clock in the provided address (something like https://{subdomain}.netlify.app
).
The last step is to let the telegram bot
you created know where to send the messages it receives.
For that, a webhook
will be released as part of your netlify
deploy.
Run the following curl
command, replacing the {telegram_token}
placeholder in the address and the {subdomain}
from the body.
curl -X GET 'https://api.telegram.org/bot{telegram_token}/setWebhook' \
-H 'Content-Type: application/json' \
--data-raw '{
"url": "https://{subdomain}.netlify.app/.netlify/functions/webhook"
}'
That's it, you're ready to go! โกโกโก Start talking to your bot ๐ค and see how the clock updates (it will take 20 seconds at most!) ๐ฐ๏ธ
The clock UI is being powered by a vue.js
application.
The clock itself is a bunch of svg
elements put together.
All the credit goes to Marta, who helped compose the svg
in a way that could be understood and maintained.
The data itself comes from firebase
, although it reaches the UI through a netlify lambda function
written in go
.
This prevents the firebase
address to leak into the UI.
The webhook that telegram
uses to update the statuses is another go
lambda function
.
Some validations โchat ID, statusโ are being performed as part of the execution.
+----------+ +--------------------------+ +-------------------+
| telegram | ----> | netlify webhook function | ----> | firebase database |
+----------+ +--------------------------+ +-------------------+
^
|
+----------+ +---------------------------+ |
| clock UI | ----> | netlify statuses function | ------------+
+----------+ +---------------------------+
Security around the firebase
data is coming at some point.
At the same time, support to display people faces, as opposed to their initial, is also coming!
Besides those, feel free to tweak and extend the clock to your needs, we'd love to see what you come up with! ๐