DEV Community

loading...
Cover image for How I build an announcement notifier app

How I build an announcement notifier app

cha_m_ra profile image Chamara Abeysekara ・2 min read

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,

infrastructure

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;
});

Enter fullscreen mode Exit fullscreen mode

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)
})

Enter fullscreen mode Exit fullscreen mode

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 πŸ˜‰.

Alt Text

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

Discussion (3)

pic
Editor guide
Collapse
kalani23 profile image
kalani23

Wow.. nice work Chamara!

Collapse
kkalhara2 profile image
Kusal Kalhara

Great Stuff Chamara

Collapse
vinoo_jayakody profile image
Vinoo Jayakody

Nice work!