DEV Community: Akshay090

Things I learned while building my side project

Akshay090 — Sun, 05 Jul 2020 19:25:15 +0000

TLDR : I build this project called gitify, by which you can interact with Git from browser extension. Check it out and give it a ⭐ if you like it.

Akshay090 / gitify

Interact with Git from browser extension.

🚀 Gitify

Interact with Git from browser extension.

🙋‍♂️ Made by @Akshay090

🌟 Features

Gitify makes working with Git fast ⚡ and easy.
Execute basic git commands from browser extension.

🤔 How it works

The browser extension interacts with a server running locally to execute git commands for you.
The gitifyServer works only on windows currently.

Browser Support


49 & later ✔	52 & later ✔	36 & later ✔	79 & later ✔	Latest ✔	Latest ✔	Latest ✔

📽 Demo

🚀 Get Started

Download extension for your browsere
- Download it from release page.
Load extension in browser
- Chrome
  - Go to the browser address bar and type chrome://extensions
  - Check the Developer Mode button to enable it.
  - Click on the Load Unpacked Extension… button.
  - Select directory chrome.
- Firefox
  - Load the Add-on via about:debugging as temporary Add-on.
  - Choose the manifest.json file in the directory
- Opera
  - Load the extension via opera:extensions
  - Check…

View on GitHub

Few months back I had discussed this idea of a browser extension with my friends from which I could clone and open a GitHub repository in VsCode instantly, as I like to check out projects form GitHub and it would be cool to interact with Git from browser.

Then after procrastination for months I decided to work on this, coincidentally there was also an online hackathon that weekend by MLH. Trust me if it wasn't for the hackathon I doubt if I would have ever started this project. That feeling to make a MVP in limited time is truly something.

I started out by listing the basic features I needed to implement : Git Clone, Open in VsCode. Hmm.. why not add Git Push and Pull, this covers most of the Git commands I use.

A browser extension alone can't communicate with Git, I also had to implement a server, this would run on the user system.

Building Browser Extension

The GitHub UI has changed recently. So I decided to not to go with the approach of injecting buttons into page and keep everything in browser extension Popup.

I decided to go with this starter repo : web-extension-starter, this is a really good starter project for building cross browser extension. I starter working with the react-typescript setup in it.

I was fairly new to both TypeScript and React Hooks, working with them was a really good learning experience. TypeScript can be annoying but trust me it's really worth it.

The most helpful and annoying tool was eslint. If it wasn't for eslint my Hooks code would have looked completely different. In the begining I would frequently use

// eslint-disable-next-line react-hooks/exhaustive-deps

I took some time to understand React Hooks, read this article by Dan Abramov, tried to solve the bugs where the Effect would fire multiple times and finally managed to work without using the exhaustive-deps.

React Hooks are really easy to understand but difficult to master. They feel like black magic sometimes. I had to use this useEffectDebugger to figure out some bugs.

Building the Server

Recently I started learning Golang, totally on a whim as I saw it on Coursera. I made some notes on it too, you can find it here.

So as you have guessed, I decided to write the server in Golang, as Golang generates binary it would be easy to distribute and install.

I used this simple-go-server as a starter. Initially I used to perform the git operation using go-git which is A Git implementation in pure Go, but later on I switched to os/exec.

To make it easy to use for others I had to convert this server code to something which can run in background so that it won't be too annoying. I came accross this project : kardianos/service. I tried out the example code and it worked perfectly in my system, but apparently I didn't know how to convert my server code to a system service, as there were no proper blog post on how to use it, with windows in particular.While researching I made this gist of projects which use kardianos/service.

I decided to switch to other options, like system tray.
To implement the System tray I choose trayhost, as I found it comparatively faster than the alternative systray. Then I added an icon to the generated exe by refering this repo.

I used gopherize.me to generate the logo/icon, you should definitely check it out.

Releasing with GitHub actions.

I used anton-yurchenko/git-release to Publish a GitHub Release, it publishes assets and works along with a Changelog.md file making the relases descriptive.

The gitifyServer runs the GitHub action in a windows runner and the one in gitify repo runs in ubuntu runner.

This project was really fun to build, it currently works on windows only as I don't have either mac or linux to test on them. If you would like to add support it would be really appreciated.

Here's how I made a CLI tool to work with Google Colab notebooks.

Akshay090 — Wed, 08 Apr 2020 21:21:16 +0000

What I built

colab-cli : a cli tool to automate workflow of google colab, create, download or add notebooks to google colab and organize them in google drive from cli.

How I built it

Hi, I recently started learning deep learning and google colab was my go-to place to try out all those notebooks's. I didn't like the entire UX of opening the projects from GitHub repos, saving to drive and then creating folders in the drive to organize all those notebooks's.

These were not the only problem if I had to commit my current version of the repo I had only one option to save a copy of GitHub, no option for GitLab or other services.

So the solution I came up to solve all those issues is colab-cli, with this tool I could easily open any notebook in google colab from my terminal with command colab-cli open-nb filename.ipynb.

This tool work by uploading the notebook to google drive with the same file structure as in the local git repo.

When I'm done with my work in google colab I use colab-cli pull-nb filename.ipynb in terminal to get all those changes locally. Now I'm free to git commit it and push it to anywhere.

If I make some changes to the notebooks locally and then again want to get back to colab with the modified file it's as easy as colab-cli push-nb filename.ipynb.

And when I'm starting out with a project from scratch, I begin by initializing git repo in it with git init as it's necessary. Then I can make a new ipynb by using colab-cli new-nb my_nb.ipynb. This command creates a new notebook file both locally and in gdrive, also open's it in colab to start working.

Demo

Link to Code

The complete project is opensource and you can find it at https://github.com/Akshay090/colab-cli
Instructions to get started are in the readme.md

What's the stack? did I run into issues or discover something new along the way?

It's written in python. I used Typer to make this CLI tool. Typer has really good tutorials and documentation to get started. The part of dealing with google drive API is handled by PyDrive. The packaging part is managed easily due to Poetry.

The main time-consuming part was writing this utilities to deal with folder and file creation and deletion.

I also use gitpython to get the git root of the current directory, but later I removed it after moving files from it which I needed, as it had various other dependencies, which increased my package installation time.

Some interesting things I learned from this project

folders are actually files with some metadata.
To create a new colab notebook from API I had to know the mime type of google colab notebooks, which was apparently not documented anywhere like the official google drive API page to get this mime type I searched across all the API request that google drive made to find that the mime type of google colab notebooks is: application/vnd.google.colaboratory.

This was a really interesting weekend project. I would really appreciate if you try it and give your feedback or help improve it further.

Additional Resources/Info

Typer Tutorial : https://typer.tiangolo.com/tutorial/
Building package with Poetry : https://typer.tiangolo.com/tutorial/package/
Post image source : https://unsplash.com/photos/4SHxst61_Sg

Break the chain: SMS chatbot for awareness in times of COVID-19

Akshay090 — Sun, 05 Apr 2020 20:11:43 +0000

What I built

Hi, I have built an SMS chatbot using Twilio, which helps the user to track COVID-19 cases across different states of India, get COVID-19 news and answers some questions on COVID-19.

The main idea of this project is to spread awareness regarding COVID-19 to a large number of people. So I decided to use Twilio SMS service for this project as an SMS facility is available to almost all mobile phones, this helps the information to reach people who don't use smartphones or computers.

I named this project break-the-chain as public awareness is one of the major factors in the fight against COVID-19. People should stay alert regarding the disease spread and take precautions like social distancing to stop the spread of COVID-19 aka. break-the-chain of COVID-19.

Demo

Link to Code

The complete project is opensource and you can find it at https://github.com/Akshay090/break-the-chain
Instructions to run project is in readme.

How I built it (what's the stack? did I run into issues or discover something new along the way?)

I initially went to twilio.com/code-exchange and searched for the chatbot, it showed me this project, I spent an hour with it trying to understand what it does, this project uses autopilot service of Twilio to apply NLP on SMS and calls actions bases on it. It felt too overwhelming for the basic idea I had. I learned a lot about express and pug from it.

So finally I decided to leave that project aside. I started working with flask as mentioned in this blog post and also referred this post to send and receive messages through WhatsApp, as SMS rates to an international number(bought in Twilio) cost 5 ₹ each. I upgraded the base project as per my requirements.

I looked across various public APIs for COVID-19 and realized I had to do web scraping to get details of COVID-19 cases of each state in India, as I didn't find any suitable working API for it.

The scraping is done on https://www.mohfw.gov.in/ through a flask script and data is stored in SQLite DB. There is also a flask script to get news from newsapi.org and store it in DB. After these two process, the user can interact with the bot from the preferred channel.

The latest addition I made to this project is a library called chatterbot it enables the bot to make small talks with a user with just 2 lines of code. This library was mentioned at the end of the second blog post mentioned above, else I would have missed it, 😅 thanks Twilio.

The project is a flask app, it uses:

SQLite database
sqlAlchemy for dealing with database
marshmallow for (de)serialization
Twilio python library
beautifulsoup4 for web scraping
newsapi.org python client
chatterbot for fallback small talks

Categories of project

This project falls into two categories

COVID-19 Communications: an app to help folks communicate during this challenging time, either to stay connected or to help resolve COVID-19 related challenges.
Interesting Integrations: an app that integrates Twilio with at least one other API.

Additional Resources/Info

Learn Flask : https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world
Automated responce to user Input : https://chatterbot.readthedocs.io/en/stable/
https://www.twilio.com/blog/build-a-sms-chatbot-with-python-flask-and-twilio
https://www.twilio.com/blog/build-a-whatsapp-chatbot-with-python-flask-and-twilio

How to build formiQR - leverage google form with help of firebase cloud function to be a complete event management platform

Akshay090 — Tue, 23 Apr 2019 14:11:29 +0000

In this post I would go through what is formiQR and how to build formiQR.

First of all what is formiQR and what problem it solves ?

formiQR aims to leverages google form with help of firebase cloud function to be a complete event management platform.

Initially I developed formiQR to help out a friend with an event, named MakerFest Vadodara. They needed a system, in which a user fills in the google form and then receive a personalized QR code, which they can scan at the event to conform their presence and also get other statistical data like how many people are present in the event, what age group they are, gender, etc.

Now,after successfully completing this project, I thought of organizing all the code and making a proper repo, as this might be helpful to someone.

So the proper git repo of the end product is at Club-DevBytes/formiQR and this is the blog post explaining it step by step.

I plan to break down this into 4 parts:

Sending data filled in google form to firebase and using triggers in google sheets
Sending personalized email from cloud function
A cloud function to implement a counter
Android app to scan QR and update data in firebase and display it

So lets begin with Part 1 :-)

Sending data filled in google form to firebase and using triggers in google sheets

We need to send the data in the google sheet linked to our google form to Firebase, for this we would be using Google Apps Script, which is a scripting language for light-weight application development in the G Suite platform.

To do that lets switch to the Tools > Script editor in the top bar

Then you need to add the following code in the Code.gs

The important details which need to be added in above code are:

FirebaseUrl and database secret, we will get it in next part
Your spreadsheet ID, which can be found in the url of the spreadsheet, as https://docs.google.com/spreadsheets/d/your-spreadsheetID/edit, you need to place this in the openById part of code.
Adding the Firebase App Library to send the data to firebase, for this go to Resources > Libraries > paste MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l in add library and add it. Select version 30 and you are done.
The dataToImport json object, contains the are the coloums in spread sheet which you really care, with the column header, you can select a particular column form it no as in data[i][1] and so on.

Now lets create a firebase project, so lets go to https://console.firebase.google.com and add project with an appropriate name.
Now click Database in the side Nav bar, and scroll down to Realtime Database and click create database(for now select test mode).

Now you can get your Firebase url form the page,

Finally the last part, the database secret, for that

click on the settings/cog wheel icon next to your project name at the top of the new Firebase Console
Click Project settings
Click on the Service Accounts tab
Click on Database Secrets
Hover over the non-displayed secret and click Show

Paste FirebaseUrl and database secret in the appropriate place in the code.gs and save it.

Try to run the addNewData function by selecting in the

Select function

and click the Run button beside it.
Have a look at firebase Realtime Database and all those data should be there.

Adding trigger to google sheets

Now we need a method where this function should run automatically on form submit.
That's where Triggers come handy, to set a trigger onSubmit follow the steps,
In the Script Editor:

Choose Edit > Current project's triggers. You see a panel with the message No triggers set up. Click here to add one now.
Click the link. Under Run, select the addNewData function which we want to be executed by the trigger. (That's onFormSubmit(), in this case.) Under Events, select From Spreadsheet.
From the next drop-down list, select On form submit. Click Save.
From this point on, the function will be triggered whenever a form is submitted to the spreadsheet.

If you plan to share your script, each recipient will need to repeat these steps.

Finally this is complete, now your data would be added to firebase on form submission.

You can even add a SYNC button in your google sheets to run addNewData function refer this link. This might come handy when you manually enter data to sheets, or need to sync data to firebase, when you delete it there, during the testing phase.

See you in Part 2 where we will be discussing Sending personalized email from cloud function.

A cloud function to implement a counter

Akshay090 — Tue, 23 Apr 2019 14:10:44 +0000

To add the counter we need to append the following code in the index.js, which we created in Part-2 post, please refer it before proceeding.

Code to implement the counter

We would be creating the atEvent node in the next blog, where it would be generated when we scan the QR with the android app.

To understand the path and the code in above gist, have a look at the Realtime database.

Understanding how to get this done took an effort, so if you don't get it they feel free to ask me in comments. This code is just of few lines, but it did it job perfectly to give me a bad time 😰

No lets us move to the next and the last part of this series here.

Android app to scan QR and update data in firebase and display it

Akshay090 — Tue, 23 Apr 2019 14:08:40 +0000

Before we start, here are some pics of the UI of the app we are building, this may help you to understand what is going on.

Default(No Internet)	Scanner	Details Loaded

To implement the QR Scanner I used the zxing library, which is the best way to do it,as per me.

The code to this is at

Club-DevBytes / formiQR

Leverages google form with help of firebase cloud function to be a complete event management platform

formiQR

Leverages google form with help of firebase cloud function to be a complete event management platform

The problem formiQR solves

If you have been to any hackathon or similar event, there the initial time is wasted in registration desk, where we need to say our name and then they go around searching it up. But with formiQR it happens in an instant with a QR scan, plus it works alongside google form, what can be more awesome than that 😄

What is formiQR ?

Overall Idea

First the user fills in the google form and instantly receives a QR code with an onboarding email.
During the event day, user shows the QR to the organizer to confirm the presence.
The organizer can see the real time statistics of the attendee present in the venue, with the specific details filled in the form initially, like age group, gender, grade,etc.

Why

…

View on GitHub

You should have a look at the structure of Realtime Database, this may be helpful

If you are new to firebase and android, you can lookup how to connect them both, there is already more than enough content regarding this topic.

If you need any help then feel free to ask in the comments.

Sending personalized email with dynamic QR from cloud function

Akshay090 — Tue, 23 Apr 2019 14:07:17 +0000

This is the second part of the series named Building formiQR.

By following the previous article, you may have a similar structure of Realtime Database,as

Note: You would not be having the atEvent and count node, as we would be writing code for them in other sections of the blog series.

So looking at our maker node or let say registered users, we have their name and email id. Now we need to set a cloud function, which would be able to get the name and email, at on create trigger on the node and send personalized email to them.

A small brief about firebase cloud function, if you are new to it, Cloud Functions for Firebase lets you automatically run backend code in response to events triggered by Firebase features.

Here is a post to get started with firebase cloud functions, you can follow it upto step 4 and then we need to add the following code to the index.js

You can go through the code, its very straightforward to understand, and the important details are in the comment section.

Before we proceed further, we need to make an email template, which we would be using to send personalized emails to our event attendees.

To generate an awesome email template, you can use https://stripo.email this is by far the best website I found to make email templates. PS: I am not sponsored by stripo, it's just that they are really awesome.

After designing your email template, export it as HTML and add it under functions/templates/makerEmail.html

Don't forget to add tags, which we would be replacing dynamically, like ##UNIQUE_NAME or ##UNIQUE_QR.

This method of using data.replace(/##UNIQUE_NAME/g, "MyNameHere"); is the most easiest method I found to generate personalized emails.

Finally we can deploy this cloud function, for that run

firebase deploy --only functions:mailFxn

Now when ever a node is created, the cloud function would automatically send them the personalized emails. Wait, how to send email to the ones already present in firebase realtime database,before we added this cloud function.

For that delete the nodes for the one already present, before adding the cloud function and press the SYNC button in the google sheet which we added at the end of previous article. That would recreate the onCreate Trigger and the cloud function would do the work.

So finally its over, see you in the next post.

DEV Community: Akshay090

Things I learned while building my side project

Akshay090 / gitify

Interact with Git from browser extension.

🚀 Gitify

🙋‍♂️ Made by @Akshay090

🌟 Features

🤔 How it works

Browser Support

📽 Demo

🚀 Get Started

Chrome

Firefox

Opera

Building Browser Extension

Building the Server

Releasing with GitHub actions.

Here's how I made a CLI tool to work with Google Colab notebooks.

What I built

How I built it

Demo

Link to Code

What's the stack? did I run into issues or discover something new along the way?

Additional Resources/Info

Break the chain: SMS chatbot for awareness in times of COVID-19

What I built

Demo

Link to Code

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Categories of project

Additional Resources/Info

How to build formiQR - leverage google form with help of firebase cloud function to be a complete event management platform

So lets begin with Part 1 :-)

Sending data filled in google form to firebase and using triggers in google sheets

Adding trigger to google sheets

A cloud function to implement a counter

Android app to scan QR and update data in firebase and display it

Club-DevBytes / formiQR

Leverages google form with help of firebase cloud function to be a complete event management platform

formiQR

Leverages google form with help of firebase cloud function to be a complete event management platform

The problem formiQR solves

What is formiQR ?

Overall Idea

Why

Sending personalized email with dynamic QR from cloud function