How I build an announcement notifier app

#firebase #react #pushnotification #puppeteer

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 😉.