DEV Community: Kevin A Mathew

Hacking an IoT App at the Civo Hackathon, 2021

Kevin A Mathew — Sun, 05 Dec 2021 17:25:53 +0000

Overview

Civo organised its very first hackathon and we got a chance to work on a great project with a skilled team. Thanks to Civo for the experience. Our project, Home Smart Home, won the Best IoT Hack prize.

See the video demo!

Meet the team
About the project
How we built the project
Our experience with Civo
What's next for our project
Repo links

Meet the team

Our team comprises of three members with varied experiences and expertise ranging from full-stack web development to programming microcontrollers like NodeMCU ESP8266 and RaspberryPi.
Here's a brief introduction of each of the members:

Atchyut is a full-stack developer with expertise on both the front-end and back-end development he was behind the ReactJS PWA UI app we developed as a part of this hackathon.
Kevin is a backend developer with expertise working with NodeJS, Python and Elixir, which he used to build the back-end application for our app with the Phoenix web framework.
Hardik is a lecturer at Dayalbagh Educational Institute, Agra, with expertise with Python, ML, AI & IoT. He built the IoT backend using C++ and a NodeMCU ESP8266 microcontroller which queries our backend API and talks to the smart devices. He's also programmed the microcontroller to turn non-smart devices into smart devices by just attaching it to a switchboard.

While the three of us have strong expertise in what we do, we're all DevOps and cloud enthusiasts and that is the reason we came together and built this project as a part of the Civo hackathon

About the project

Home Smart Home, H2S, allows its users to register their smart devices and control them remotely. As an MVP, users can turn their devices on and off right from their internet-enable devices, however, we plan to incrementally update this to keep adding new features.

Our initial goal was to build a simple platform to allow a layperson to be able to get into the world of IoT and smart devices. The innovation behind our app is that, users can even turn their non-smart devices to smart-devices with little to no programming knowledge and highly available hardware using some utilities that our Hardik is currently developing.

As for the app itself, we initially planned on going with a React Native mobile app, but ended up going with a ReactJS PWA since we wanted the users to not just be limited to using a smartphone to automate their homes. Now, they can pretty much use any smartphone, tablet or computer in order to automate their homes.

How we built the project

Our app consists of a front-end PWA, a back-end API layer and the actual IoT Component. Here's a breakdown for each of these components:

Front-end PWA App - This app was built using ReactJS, Tailwind CSS, React hooks for state management and CRA's PWA Capabilities

Back-end API Layer - Our back-end currently consists of the API layer that both, the front-end app as well as the IoT component, use in order enable, disable, turn-on, turn-off, register smart devices into our system. Our app is built on the Phoenix framework using Elixir programming language and PostgreSQL DB. This is the component that we've deployed on a Civo Compute instance.

IoT Component - Our IoT component contains various utilities that are built using C++ and run on top of an NodeMCU ESP8266 microcontroller. The utilities are subscribed to our back-end API on a pub-sub model whenever there are changes in the DB, they query the API and communicate with the smart devices.

Our Experience with Civo

Our experience with the Civo platform has been great, while we were all new to DevOps, the guides on the Civo website helped us in deploying our backend micro-service on Civo. It's been a great experience and we definitely plan on using the platform as we scale up. It is remarkable how fast the Compute instance and the Kubernetes cluster were created.

What's next for our project

We plan to make our PWA available to as many users as possible. We've also started enhancing our platform to be able to have more features such as being able to control various aspects of a smart device than only being able to turn it on/off. With this, we're also developing kits that users can use in order to turn their non-smart devices to smart-devices. We believe there's a lot of hidden potential in what we build and that we're onto something really good.

For now, the goal is to enable as many users as possible to use our platform for free, while the platform itself will always remain free, we plan to add a monetization model the kits that we produce to enable non-smart devices to behave like smart-devices and that would be our fundamental business model.

However, at the place we're currently at, there's so many directions we can go in and we're really excited to build on top of this.

Links to the repos

Setting Webhooks for Facebook Apps

Kevin A Mathew — Thu, 27 May 2021 17:38:14 +0000

Introduction

Webhooks are a way to get your application to produce a certain behaviour depending on the occurrence of a specific event. Webhooks contain the data or the payload that you would need to identify the event to trigger the corresponding behaviour.

For example, imagine you created a bot that monitors the price of a certain product on an ecommerce website. Once the price hits a certain value on the website, the bot will notify you that such an event has occurred. Now, it may be so that the price takes a lot of time, maybe even days, to reach that value that the bot is set to look for and until that time, the bot is always in a running state monitoring the price. This will be an inefficient approach since the code would have to be running 24x7. If you're running it on a cloud server, it's going to be an expensive bot for not that substantial value that it provides.

But what if the website itself sent a notification to your bot? That would mean that the bot just has to live on a server and doesn't need to be active. It has to be active only when the notification is received from the website. The event will be sent as a POST request to the URL where your bot exists and then the bot does its work. Cool, right? And handy!

This will also give your bot a real time behaviour.

Working with Facebook Apps

Facebook allows developers to create apps that interact with Facebook for various purposes. To do this, Facebook created the Graph API which helps in facilitating actions on Facebook for your app. The Graph API Explorer is an excellent tool that helps you run APIs on the browser. It also helps you to get the correct URLs and structure your requests.

Here's a quick list of things you need:

A Facebook app.
A program that can accept HTTP requests. I'll be using Node.js here with the Express.js framework to handle the requests.
Ngrok to expose your localhost on the internet.

This tutorial assumes that you know how to set up basic Facebook apps.

So, let's get cracking.

1. Create a server.

Here's the Node.js code that creates a server and listens on port 5000.



   const app = require('express')()

   // express middleware
   const bodyParser = require('body-parser')
   app.use(bodyParser.urlencoded({ extended: false }))
   app.use(bodyParser.json())

   const PORT = 5000
   // start server  
   app.listen(PORT, () => console.log(`Listening on port ${PORT}`))

Run this code and the server will be up listening to any
incoming requests.

2. Start Ngrok on the same port `5000`.

To do this, run the command ngrok http 5000. On running the command, the following view will appear on the terminal:

Here, you can see which URLs are being forwarded and the requests that have been received on those URLs. You want to use the HTTPS URL for this purpose since it's a requirement set by the Graph API. For this example, it is https://7ac66c7f726f.ngrok.io

3. Setup the Webhook product.

On your app dashboard, scroll down to Add Products to Your App. Look for Webhooks and click on Set up.

At the pane on the left hand side, click on Webhooks. You should see something like this

4. Handle webhook endpoint.

Before we add a callback URL, we need to add some more code. This step handles the requests coming to the webhook endpoint. While registering a webhook, Facebook will send a request to the URL that you provide along with the endpoint and it will expect a response from the endpoint, which is the challenge code. This has to be echoed back to Facebook only then will the URL be registered.




app.get('/webhook', (req, res) => {

      const VERIFY_TOKEN = "random string"
      // Parse the query params
      const mode = req.query['hub.mode'];
      const token = req.query['hub.verify_token'];
      const challenge = req.query['hub.challenge'];

      // Checks if a token and mode is in the query string of the request
      if (mode && token) {

        // Checks the mode and token sent is correct
        if (mode === 'subscribe' && token === VERIFY_TOKEN) {

          // Responds with the challenge token from the request
          console.log('WEBHOOK_VERIFIED');
          res.status(200).send(challenge);

        } else {
          // Responds with '403 Forbidden' if verify tokens do not match
          res.sendStatus(403);      
        }
      }
})

The final code is as follows

5. Subscribe to an object

Click the drop down menu and select any object you want. I'll select the User object here and then click on Subscribe to this object which will open this modal

Enter the https URL from Ngrok along with an endpoint. The endpoint can be anything and it should be able to receive HTTP POST requests. The string in the Verify Token field can be anything. It is just a security measure put in place to see that the request is coming from the right source to the right destination. You may or may not choose to put a check in the code. Then click on Verify and Save. This will then take you to a page where you can choose the subscriptions you need.

The GET request is only for registering the callback URL to an object. To handle actual events, make sure to write a POST route to the same endpoint (in this example, webhook). This route will handle the behaviour of the bot/app.
Most of these subscriptions are available after verification, but if you click on the Test button, you'll be able to see a sample request sent to your endpoint.

Click on Send to My Server and you'll see the request.

If you open Ngrok's web interface, you'll be able to see the details associated with each request on your browser.

I hope this tutorial helped you in setting your own webhook with your Facebook app. I certainly had some trouble getting it done myself and so, I though of writing up this blog to help anyone else save time.

Thank you for your time. Until next time, ciao.

You can reach out to me on