How I build an announcement notifier app

Chamara Abeysekara — Tue, 02 Feb 2021 13:19:06 +0000

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

LaraCRUDJS

Chamara Abeysekara — Sun, 17 Mar 2019 09:19:47 +0000

So for the post, I thought I write about something that I developed a few months back. This a JavaScript library I have written to manage CRUD functions.

You can find it no GitHub https://github.com/chamra/laraCRUDJS

Once you downloaded the zip you can place laraCRUD.js file in your assets folder and reference it in your app.balde.php file.

<script src="{{ assets('js/laraCRUD.js') }}"></script>

after that, it's all a matter of time you create an object from CRUD class

const crud = new CRUD()

you can override all defaults from the constuctor. default is,

{ //form element id this.form = "formData"; //modal id that include the form this.modal = "#formModal"; //form submit buttom id this.submitButton = "#btnSubmit"; //propertie for datatables this.datatables = ""; //resource url this.url = ""; //unable page refresh afer a form a submit this.refreshPage = false; //current status of the form to be update or create this.update = false; //csrf token this.token = document.head.querySelector('meta[name="csrf-token"]'); //selected items auto increment id this.id = 0; }

calling the method initCRUDFunctions() on crud will in initiate basic crud function you need for the instance.

crud.initCRUDFunctions()

for example - https://github.com/chamra/laraCRUDJS/blob/master/example/main.js

Help is always welcome, so fork me ✌!

DEV Community: Chamara Abeysekara

How I build an announcement notifier app

LaraCRUDJS