This is how I automate my mundane task of check for any announcements daily. This app track any announcements regarding my degree program. With the ongoing situation there are announcements that I need to be informed about so, what I do is visit bit.lk daily and check if there's anything new. Because with COVID-19 they might just cancel the exams π! Checking whether thereβs any new updates to me, is very boring and why bother doing it yourself when you can get a machine to do it for you? Also, I like automating stuff! This to me, is a great opportunity to use web scraping, cloud function and FCM.
I decided to use Puppeteer for web scraping, Firebase cloud functions to trigger the web crawler, Firebase Cloud messaging to push notifications to my mobile and a React app to show the announcements. It looks something like this,
The application start with cloud function that trigger four times a day which uses Puppeteer to crawl into the web page and get me those π new announcement which get posted.
exports.crawler = functions.runWith({
timeoutSeconds: 150,
memory: '1GB'
}).pubsub.schedule('0 */6 * * *').onRun(async (context) => {
await init();
return null;
});
When using Puppeteer make sure use add args: ['--no-sandbox']
into launch options save you lots of time thinking why the function is failing for no reason whatsoever π. And also the function need more memory and increase of the timeout. Firebase function scheduler use both Unix Crontab and App Engine syntax when passing the time I went with Unix Crontab and I used crontab guru to get the syntax for run it every 6 hours.
Then I save any new announcement to the Firestore while I do that I, a function is listening to new announcement adding. It triggers the function to push notification to saved devices.
exports.onAnnouncementCreate = functions.firestore.document("announcements/{announcementsId}").onCreate(async (snap, context) => {
await broadcastNotification(snap.data(), context.params.announcementsId)
})
The purpose of the React app is very simple it shows announcements that I have captured and allow a user to subscribe to push notification. Users can subscribe by clicking the bell icon π in the top right corner; yes I know! It is not that obvious, but I can't think of anywhere else. I have animated it just to bring attention to it though π.
Thatβs how I build an announcement notifier app, just using a few components that is available in Firebase.
check it out - https://bit-notify.web.app/
github - https://github.com/chamra/bit-notify
Top comments (3)
Wow.. nice work Chamara!
Great Stuff Chamara
Nice work!