DEV Community: Chandrika Deb

Connect your Chatwoot to Netlify integration in 10 minutes

Chandrika Deb — Sun, 05 Jun 2022 14:31:47 +0000

Did it ever strike your mind to implement a conversational chatbot or a chat option on your website? But alas! You were not aware of an amazing tool that would help you to implement a functional chatbot without writing 1000 lines of code! If that’s the case, you need not worry, as Chatwoot is here as an excellent solution!

So, what is Chatwoot?

In a nutshell, Chatwoot is a customer support tool for instant messaging channels which can help businesses to provide exceptional customer support.

Chatwoot is predominantly a customer engagement suite with a range of features. Keep track of conversations across different communication platforms, automate bot conversations, etc. The software can significantly decrease your time and effort to keep track of your customers on the go.

Some of the highlights of the features that Chatwoot provides to carve its niche in the software and business industry are its shared inbox, cloud compatibility, privacy, custom menus, and multiple integrations with platforms like Rasa, DialogFlow, etc.

Read this blog till the end to explore how to integrate a live chat feature of Chatwoot into your web application deployed on Netlify. I’ll be using a simple weather app created using HTML, CSS and JavaScript, and some open-source APIs.

Why do you need a chatbot?

More and more customers expect businesses to be available and responsive online. Having a communications system with your customers and prospects shall help you build a human connection, understand them better, and serve them faster.

Chatbots assist customers in getting from point A to point B as quickly and smoothly as possible without feeling left behind or disoriented. Consider a chatbot to be a small guide that assists customers in navigating their way through the information on your website. Chatbots are virtual assistants for websites.

They help solve common troubleshooting problems that users might face while browsing through a website. It is cost-effective as you don’t have to appoint a customer care agent. Long story short, it improves the overall experience of a website.

How to Connect your Chatwoot to Netlify Website?

Let us quickly start by implementing the Chatwoot tool.

Create a new account on Chatwoot by following this link, or login into your existing account.
Enter your details and click on Submit.

Once you are logged in, the main Chatwoot Dashboard would look something like the below snapshot.

Now click on +New Inbox option in the left pane. It shows multiple channels where we want to integrate our Chatbot feature.

Select the Website option as we want to deploy the chatbot in our weather website on Netlify. Fill in your website details and customise your chatbot colour and greetings.

Click on Create Inbox. On Add Agents page, you would have to select a few members of your project’s support staff who would act as site responder. For this blog, that would be me.

Yay!! Our inbox is ready. Copy the JavaScript code, this would come handy in our next step. A website token is generated and it is unique to every user, we will hide that so people won’t misuse the token.

Let’s now put this piece of code in our original weather app!

Read further on Aviyel's platform to make something like this!

Using MDX with Docz Has Never Been This Easy!

Chandrika Deb — Wed, 27 Oct 2021 15:17:05 +0000

Code documentation seems to be a cumbersome process for most developers. However, with the right set of practices and manageable tools, the task gets a bit painless. For me, Docz is the go-to tool for documentation needs as it creates SEO-friendly, interactive, production-ready documentation sites in a heap of minutes. The Gatsby-powered OSS has helped me to cut down the overheads of building and maintaining custom documentation sites. If you are an open source contributor, you can contribute to Docz here.

FYI- It is already popular on GitHub with 21k stars ⭐ and 26k weekly downloads. In a nutshell, 👀 Docz is a zero-config, typescript-supported OSS with customisable themes and plugins to style your document.

The software uses MDX ( .mdx files) extensively to render desirable formatting features in your doc. For a heads-up, MDX is short for Markdown with JSX. It finds use cases in building React components to Markdown files and speeds up the document workflow. With MDX, you can make interactive charts, alert components and directly add them to your documentation. That’s how MDX does all the heavy-lifting formatting for your doc. Now that you have a fair idea about Docz and MDX, let’s dive deep into the integration- using Docz with MDX.

The Use Cases: Docz with MDX

Did you ever stumble upon questions like “I want to build a new component for my new feature? Is it already there? If yes, what it does? Does it work the same I want it to be?” The foremost use-case of Docz and MDX is to create documentation that can be shared and used over and over by a developer network in an organisation.

You can also use the feature to build reusable React components for your front-end project. The combination also finds use in agile software development to bookmark several documentation phases including Implementation Details, SRS, Design Documents, Test Cases, and End User Documents.

If you are settled with Docz, use the tool to create an online resume. That’s how you have an edge to impress your interviewer and showcase your front-end skills.

To read full article, please visit Aviyel 🚀

The One-Stop Web Development Roadmap to follow in 2021

Chandrika Deb — Sun, 31 Jan 2021 16:05:15 +0000

I’m writing this piece to help fellow coders, even the first-timers who have an aim to earn the title of a Web Developer in 2021 and also to be able to develop meaningful projects. This article will definitely help you take the right path in your From Zero to Mastering Web Development journey as a concrete roadmap to follow throughout!

The Roadmap has no section of pre-requisite skills as such, but there is the First Stage of learning every developer should be well versed in before diving into the actual development part. I’ve termed this set of skills as - Let’s Warm Up!

Then comes the two faces of the same coin - the Front-End and Backend areas of web development. These two stages are solely based on your interests, whether you like to see and create visual designs, layouts or enjoy handling and querying databases.

So, let’s begin with our first common stage of - Let’s Warm Up!

Let’s Warm-Up

This stage includes the basic skills that we need to grasp firmly before we move on to the next stage. The list of learnings of this stage are as follows:

Command-Line Basic: This is a fundamental skill every techie should know before diving into the world of GitHub. Basic Linux/DOS commands, and how to effectively use the terminal is a must to proceed further.
Tutorials:

Video
Site

Git and GitHub: The basic needs in the life of a coder are these two - version control system - Git and the hub of code repositories, to learn, share and contribute - GitHub. To learn about them, there are numerous articles, videos, and tutorials on the internet.

Tutorials:

Web Protocols: Basic knowledge of HTTP, HTTPS, and SSH is enough to proceed with the actual roadmap to be a web developer.

Data Structures and Algorithms: The basic building blocks are to be well versed with the language of your interest. It can be either Java, Javascript, or Python. Being confident in this section can earn you fortunes.

Tutorials:

Java - Site
General - Video

Fluency in Programming: It is of utmost importance to understand that the tools, frameworks, and libraries are of no use unless and until you can bind them all together in a language seamlessly. An idea of how common programming languages like C, C++, Java or Python, etc. works well enough to kick start your dev journey.

After having skimmed through these basic learning stages which I’ve termed as warming up, we are ready to explore the Front-end and Backend areas of Web Development.

Front-end Development

Mastering the front-end, the UI/UX is not as easy a task as it seems to be. We will proceed step-by-step in this stage and would urge my readers to proceed to the next framework, only when they are capable of developing the given projects using the particular and above-mentioned tools/frameworks only!

HTML and CSS: Mastering the plethora of web development begins with basic HTML and CSS. The structure and styling of the web pages, elements, layouts, everything can be done only using these two pillars. Some tutorials to follow and the project that is expected from you to build after having learned these are given below:

Tutorials:

Project Ideas:

A greeting card web page
Basic Portfolio Website

Javascript/Typescript: You may be thinking that HTML/CSS web pages are nowhere close to the website l imagined to build. Well, Javascript is a magic language you can say which will bring the magic potion of interactivity and responsive flow to your dull website. Along with some Typescript knowledge, you will be all set to be known as a front-end developer!

Tutorials:

Project Ideas:

To-do-list app
Food/Weather web app using some API
Redefine your portfolio website

React.js: This is one of the most popular frameworks currently, mainly because of its easy implementation and the ability to deliver modern one-page websites in a limited time frame due to reusable components. React.js framework is originally developed by Facebook and is open-sourced.

Tutorials:

Project Ideas:

Twitter/Instagram Clone web app
Messaging/Chatbot web app
Social media app
Redefine your portfolio website a bit more!

Angular.js/Vue.js/Next.js: These are other frameworks having support for Javascript or Typescript and are used to build modern webpages within limited time constraints. I’m a beginner in these technologies right now. You can check out the tutorials below if you wish to master these:

Tutorials:

👀
A note to my readers, if they want to be a full-stack developer, that is mastering both front-end and back-end technologies, then one can proceed to the backend learning stage when they have successfully surpassed learning Javascript! Not being sarcastic here though as Javascript is really an ocean to swim through! Best of luck. 🚀

Backend Development

There are several options to choose from in the case of backend development - Python, Ruby, Spring, PHP, Django, and much more! There are no step-by-step tech stacks here as in the case we witnessed for the front-end. You can pick one that suits your needs and you are ready to go!

Java and Spring: This is my favorite stack as I’ve been using this extensively at work for over six months. You can make complete functional enterprise applications using Java and Spring as backend technology. I would recommend you to begin with this tech and explore the subsequent technologies thereafter.

Tutorials:

Python and Django: The go-to-choice for Pythonistas for developing a backend in Python is to use the Django framework. It is in itself a full-stack framework with an attractive default UI. Moreover, Django websites are easy to deploy on sites like Heroku.

Tutorials:

Node.js: If you want to develop your whole website, integrated with the backend in Javascript, then choosing Node.js is the best bait!

Tutorials:

Site
Video

PHP and MySQL: This had been the first choice during my college years to build something fast and dynamic. If you are a novice, I would highly recommend starting your backend journey learning PHP and MySQL.

Tutorials:

Site
Video

Ruby: Ruby language has the web development framework Rails which is used as a backend technology. You can explore more about it by referring to the tutorials.

Tutorials:

Video
Video

So, with this, I wish all the best to my readers and sincerely hope they would have a firm grip over the web development technologies and refer to the above roadmap, to begin with, the learning journey.

Thank you!

Chandrika Deb 👀 ❤️
Checkout my Website!

How to make a Twitterbot?

Chandrika Deb — Sat, 05 Dec 2020 15:01:03 +0000

🚀 Installation

Clone the repo

$ git clone https://github.com/chandrikadeb7/Girlscript-Twitter-Bot.git

Install tweepy Python module

$ pip install tweepy

💡 Working

Sign up for a Twitter Developer Account

Create a separate Twitter account for your bot.
Sign up for Twitter Developer Account from this site - Apply for a Twitter Developer Account
Enter the necessary fields and await for email confirmation.
Click on Create an app
Enter the details and keep safe the access tokens generated.

Enter your generated access tokens and consumer keys in the file credentials.py

consumer_key = ''
consumer_secret = ''
access_token = ''
access_token_secret = ''

Edit the retweet and other details in the file config.py

# This is hastag which Twitter bot will search and retweet. You can edit this with any hastag .For example : '#javascript'
QUERY = '#anything'

# Twitter bot setting for liking Tweets
LIKE = True 

# Twitter bot setting for following user who tweeted
FOLLOW = True

# Twitter bot sleep time settings in seconds. For example SLEEP_TIME = 300 means 5 minutes.
# you can decrease it or increase it as you like.Please,use large delay if you are running bot all the time  so that your account does not get banned.

SLEEP_TIME = 300

🔑 Deployment

Sign up for a free account in Heroku
Click on New -> Create new app
Enter the app-name in lower case and select your nearest region.
Choose Heroku CLI for deployment. Follow the steps given in Deploy tab.
Once the build is successful enable the Free Dynos option from Overview tab.

👏 And it's done!

👀 Checkout?

See here

[Face Mask Detection - My major project]

Chandrika Deb — Wed, 20 May 2020 06:33:18 +0000

Face Mask Detector

Demo Link: https://youtu.be/AAkNyZlUae0

chandrikadeb7 / Face-Mask-Detection

Face Mask Detection system based on computer vision and deep learning using OpenCV and Tensorflow/Keras

Face Mask Detection

Face Mask Detection System built with OpenCV, Keras/TensorFlow using Deep Learning and Computer Vision concepts in order to detect face masks in static images as well as in real-time video streams.

👇 Support me here!

😇 Motivation

Amid the ongoing COVID-19 pandemic, there are no efficient face mask detection applications which are now in high demand for transportation means, densely populated areas, residential districts, large-scale manufacturers and other enterprises to ensure safety. The absence of large datasets of ‘with_mask’ images has made this task cumbersome and challenging.

PPT and Project Report sharing costs ₹1000 ($15)

If interested, contact me at chandrikadeb7@gmail.com

🌟 Purchase on Gumroad

⌛ Project Demo

🎥 YouTube Demo Link

💻 Dev Link

⚠️ TechStack/framework used

⭐ Features

Our face mask detector doesn't use any morphed masked images dataset and the model is accurate. Owing to the use…

View on GitHub

Built it using Caffe based face detector model along with MobileNetV2 for fine tuning using transfer learning. The dataset was made custom using Bing search API, RMFD and Kaggle datasets of real "with_mask" images. Used Python script with Keras, and TensorFlow as the backend.

This idea came in my mind mainly due to the current situation of Covid-19. Will be presenting this idea for my final presentation of my college semester in mid-June.

I love to write tech blog for beginners. You can visit them here: https://medium.com/@chandrikadeb7