Forem: Mohmed Ishak

Building Powerful Custom Internal Tools with ToolJet

Mohmed Ishak — Wed, 06 Jul 2022 01:22:16 +0000

PS - Been a long time since I published an article.

So you’re a startup (or a huge corporate) and you want to organise your data? Maybe you’re storing employee data on Google Sheets and want to build a CMS like tool to view/add/delete/update data. Or, you might have a PRODUCTION database, say a MySQL database but you want to build a tool so anyone in your team can manage that database. Or, you might want to build a dashboard to show analytics of your data. So, how do you do it? There are 3 options, let’s review them:

Option 1: Code the tool by yourself. Terrible idea. You have to spend time on it. Your developers would waste their time building internal tools.
Option 2: Use third-party tools to build internal tools. Better idea, but still not ideal. There might be some tools to help you but they’re scattered everywhere (you need to use multiple tools for your organisation needs) and you need to pay a lot to use these tools.
Option 3: Use an open-source (more developer support so app keeps getting updated/fixed all the time), powerful, low-code/no-code tool to build custom internal tool, if possible FOR FREE. But, do such tool exists???

I’m excited to break it to you and such tool does exist. Introducing Tooljet, a free (with paid plans), open-source, low-code tool to build and deploy custom internal tools. Tooljet integrates seamlessly with all your favourite software/data source such as various databases (PostgreSQL, MongoDB, MySQL, Elasticsearch, Firestore, DynamoDB, Redis and more), any API endpoint (with authorization too), and external services (Stripe, Slack, Google Sheets, Airtable and so much more). If you need to use this tool immediately, head over to Tooljet’s site to learn more.

Anyway, in this tutorial, I’ll show you how you can connect and query RESTful API with Toolject, but as I said earlier, it could do much more than that.

Head over to this link and sign up.
Upon registration, you will see the something like below. Click create new application.
Give it a name. Default is “v1”.
You’ll see something like shown below. To your left, you have a couple of buttons, one of them being the Sources button, in which you can configure any data source, say from a database, or an API endpoint, or spreadsheet, and much more. To your right, you have a whole lot of UI elements such as table, inputs, charts, PDF component, graphs, and even ability to add custom components. For this tutorial, our source of data will be a public API endpoint, so please click the Create query button to your bottom left.
Click REST API.
Make a GET request to the following endpoint: https://jsonplaceholder.typicode.com/comments

In an actual project, you can use your own endpoint - no problem! Then click Preview to see whether data is successfully fetched, and when you’re confident on your config, click Create & Run.

If you did it correctly, you’ll see the response data like I did. Here’s my result: See that JSON? Yeah it’s cool, but it’ll be even cooler if we can grab some keys and display them in a table, so let’s do that. So, from your right, drag and drop the Table component.
If you hover over your table, to your top left, you’ll see a gear icon, click that.

Before we proceed, let’s make things clear, okay? From the JSON response earlier, let’s pick the id and name for simplicity.

For that reason, click the icon with 6 dots for each column at the section to your right for this table.
Change those 2 column names to id and name respectively. Delete the extra column. Click Save & Run. The results will now be displayed in a table.

Pretty cool, huh? This tool supports other HTTP verbs too like POST, DELETE, etc. So, what did you understand from this tutorial? I hope you understood that you’ve just found an open-source tool to create and query REST APIs really quickly with no code at all. How convenient! My advice? Use this tool now, or bookmark this article for future use. Tooljet doesn’t only support REST API but also integration with popular databases, third-party services and so much more.

As a professional software developer as a popular airlines in Malaysia, I can assure you that Tooljet is really powerful and is a must-use tool for any pro developer or any organisation. If you want to learn more about Tooljet, you can head over to Aviyel’s page on Tooljet here. See you later.

Ever Wondered How To Develop International Websites With Multiple Languages?

Mohmed Ishak — Tue, 01 Mar 2022 18:11:24 +0000

I've never cared about creating sites/apps in any other language asides English. The problem is, not everyone knows English, and a few weeks ago, my company required my team and I to develop an app for them with multi-language support. How can you implement this feature?

If you find this article interesting/useful, you owe me a like.

Disclaimer

I'm about to teach you how to implement translation in React/React Native, but don't worry if you use other library/framework. I'm sure there's an alternative and it would work similar with the solution I'm about to tell you.

The Naive Approach

If you're an original thinker, here's how you'd do it. You might store a global variable, whether using Redux or Context API for each language you're supporting. That variable will be changed whenever the user changes the language. Also, the app will be dependent on that variable, and you might write explicit if-else or switch-case statements to render right content depending on the language. If you're slightly more advanced, you'd create separate JSON files for each language which would have key-value pairs of content and access them accordingly.

The Ideal Approach

The previous method involves too much manual tasks. What if there's a library that could handle all these long, repetitive steps and abstract all the complexities?

There's a NPM package called react-i18next which solves this problem (it's also capable of more powerful stuffs too).

Step 1: install dependencies

npm install react-i18next i18next --save

Step 2: add translation files

Let's assume we're gonna support English and Arabic. Go ahead and add new files in these directories.

src/translations/english/common.json

{
    "message": {
        "greeting": "Welcome."
    }
}

src/translations/arabic/common.json

{
    "message": {
        "greeting": "أهلا بك"
    }
}

Step 3: edit index.js

import ReactDOM from 'react-dom';
import {I18nextProvider} from "react-i18next";
import i18next from "i18next";

import App from './App';
import englishContent from "./translations/english/common.json";
import arabicContent from "./translations/arabic/common.json";

i18next.init({
    interpolation: { escapeValue: false }, 
    lng: 'en',                              
    resources: {
        en: {
            common: englishContent             
        },
        ar: {
            common: arabicContent
        },
    },
});

ReactDOM.render(
    <React.StrictMode>
        <I18nextProvider i18n={i18next}>
            <App/>
        </I18nextProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

Step 4: translate!

Use the t function and supply key from your JSON file as shown below. You can access this function from any file.

import {useTranslation} from "react-i18next";

function Component() {
    const {t, i18n} = useTranslation('common'); 
    // "common" because that's the name of files we created.
    // There are variations to this,
    // but I don't want to confuse you (you can
    // check the docs for more info)

    return <h1>{t('message.greeting)}</h1>;
}

export default Component;

But How Do You Change Language?

If you paid attention to the code, in index.js, we used en and ar keys to represent English and Arabic. So, now we just need to change these keys to that of desired language using built-in function from i18next when the user switches the language (by clicking a button or something) and the changes will be reflected immediately.

function Component() {
    const [t, i18n] = useTranslation('common');
    return <div>
        <h1>{t('message.greeting', {framework:'React'})}</h1>
        <button onClick={() => i18n.changeLanguage('en')}>English</button>
        <button onClick={() => i18n.changeLanguage('ar')}>عربي</button>
    </div>
}

You can learn more from the official docs here.

If you find this article useful, you owe me a like. 😜

Scared Of Chrome Dev Tools? How To Inspect API Calls Without Getting Overwhelmed.

Mohmed Ishak — Mon, 14 Feb 2022 14:43:55 +0000

So, you know a frontend library and a backend language and built a bunch of full stack apps? Cool.

What's not cool is when you're working in a frontend team and you have little to no communication to backend team (or when there's limited docs).

Or, what if you've joined a new team, and the frontend codebase is wwwaaaaaaaaayyyyyyyyyyy too overwhelming and you don't know exactly what request you're sending to the backend and what response you're getting?

I'm Gonna Teach You How To Use Inspect Network Calls In Chrome Dev Tools

I'm sure you're wondering why we're not using Postman. The reason is because with Postman, you can hit a specific API endpoint with whatever headers or body you set. With Chrome Dev Tools, you can see which set of API endpoints your app is calling when you perform some action (say when you click a button), and so you'll understand you app's behaviours better.

Anyway, head over to https://dev.to, right click on any area, and click the Inspect tab. Then in Chrome Dev Tools, click the Network tab. You should see something like this.

Keep an eye on the clear icon on top left to clear a bunch of records which you will see in while.

Hit the Latest tab on DEV Community's website. On your Dev Tools, you'll see a bunch of API calls.

If it's a type of xhr, that means, it's an API call (XMLHttpRequest). Some of them might be ambiguous while others would seem kinda familiar.

What did you learn from this? To put it simple, if you click a button, and you expect it to call the backend, and if it's not reflected on Chrome Dev Tools as you expected, it's time to fix your code!

Also, do take note of query string parameters. Under Payload tab, you'll see query string parameters (used in backend) which are appended to your base URL. For example, for the URL https://www.youtube.com?user=ishak&limit=20&category=latest, the query string parameters are:

user: ishak
limit: 20
category: latest

That's it guys. If Chrome Dev Tools seems less scary to you know, you owe me a...



LIKE 👍

Quick Summary - The Technologies That Tech Corporates Use To Build Software (For Beginners)

Mohmed Ishak — Sat, 15 Jan 2022 07:25:22 +0000

function introduction() {
  if (you've already been working in a large tech team) {
    console.log("This article is probably not for you.");
  } else if (you're a curious guy on the topic) {
    console.log("This article is for you.");
  }
}

introduction().then(() => likeThisPost() && shareThisPost());

Anyway, how does a large team work together to build a software product?

[1] Communication Channel

To communicate, there are a whole lot of options. Some prefer to use internal tools, while others prefer software like Discord or Slack. Videoconferencing? You guessed it - Google Meet, Microsoft Teams, or Zoom.

[2] Code Collaboration

GitHub or GitLab. I see that newer companies start to transition to GitLab because it's offers more convenience when dealing with CI/CD pipeline. Nonetheless, they're both good.

[3] Documentation

For every software, there's gonna be a documentation so it's easier for anyone in the team or future engineers to test and work on it. One popular tool is Atlassian Confluence which lets you to write amazing documentations and collaborate with your team members.

[4] Frontend, Backend, & Other Tools

For web frontend, it really is up to the company, but React.js + Next.js seems to be very popular. Angular is popular too but it just stresses out the developers a bit. For backend, currently Node.js is popular, but a lot of companies are transitioning to Go because it's faster, more secure, and costs less in the cloud generally. For mobile app development, although Flutter seems to be slightly more popular among individual developers, large tech corporates and startups prefer to use React Native because it works so well. On top of that, it is super similar to React, so a web dev can in a company can transition to mobile app dev easily and vice versa. For database, most of them use both relational (MySQL/PostgreSQL) & non-relational (MongoDB & Redis). There is much more to this, but this is a pretty good overview in my opinion.

[5] Project Management & Testing

To manage project, usually Jira is used where the project manager would divide a project to specific tasks and assign them to developers. After development & testing, the devs can mark each task as done and so on. Jira is much more complex, but this is the essence of it. Anyway, to test apps, they'd use a lot of tech for load testing and so on, but one example I wanna tell you is Appium & Selenium, which allow you make automated testing. This means that once the test is run, the testing program would click buttons, fill up forms, and perform any task that a human could do in an app automatically (of course, you have to program the workflow). Encountered bugs will be reported to senior quality assurance engineer, usually.

That's it guys. Leave a like before you go. ;)

Checking Vulnerabilities in Termux Android Application Using MobSF

Mohmed Ishak — Tue, 04 Jan 2022 09:10:33 +0000

Read full article for free on Aviyel here.

Termux, as a mobile app has gained recent traction in the last few months. Today, we’re going to test it using another app called MobSF (Mobile Security Framework) by dragging and dropping that app into MobSF and viewing key insights on Termux’s security, because the truth is, modern developers don’t really know how to efficiently view security vulnerabilities in their apps, and the only way we secure our apps usually (including me) is by writing some test cases, not committing environment variables to the repository.

What is Termux?

Termux is just an example of an Android app that we’re going to test, and this means you can replace it with any app you want like WhatsApp APK or anything. Termux is an Android terminal emulator and Linux environment app that works on your Android. If this sounds confusing, basically using a computer, you always have access to powerful terminals, but not from a mobile phone. Because of this, you cannot perform useful tasks that you would do from a computer using a phone such as using SSH to connect to a remote server. Here are some of the cool features of Termux which are advertised:

Secure: you can securely access remote servers using SSH client from OpenSSH from your smartphones. Basically, your phone now has access to a powerful terminal through emulation.
Feature packed: you have full control over which terminal you want to use such as Bash, Zsh, and so on.
Customizable: Termux is already powerful by default but they don’t stop you from installing additional packages/libraries from the APT package management system from some popular distros of Linux such as Ubuntu and Debian.
Very flexible: you can connect a Bluetooth keyboard to your phone and use keyboard shortcuts that you would use on your computer and all the commands will work.

If you’d like to know more about Termux, you can view the homepage here. The homepage looks simple, but when you click the link that will redirect to its wiki, you’ll access more pages and you’ll realize how powerful Termux is in though. But remember, the goal of this article is to teach you how to test any app using Mobile Security Framework (MobSF), so let’s take a look at that.

What is Mobile Security Framework (MobSF)?

Mobile Security Framework or MobSF is an automated and comprehensive open source mobile security tool (Android/iOS/Windows) that can check vulnerabilities for your application and do everything of that nature easily. This includes things like penetration testing, malware analysis, and so on. It’s a very complex app but so easy to use. It supports mobile app binaries such as APK, IPA, and so on so all you have to do is just drag and drop your mobile app file to this tool and it’ll do all the magic of finding security vulnerabilities behind the scenes. Why is this cool and useful? Because honestly, modern developers (including me) tend to learn the shiny new mobile development technologies such as React Native, Flutter, and so on, but they don’t know how to test the security of their app. Sure, they do know how to make secure decisions every now and then such as not committing secrets to repositories, securing databases, and so on, but still, that’s just the basics. MobSF helps you by identifying all kinds of security vulnerabilities which I’ll explain later in this article. For now, let’s just get started with installing it.

How to Install MobSF?

There are two ways to install it, one is using the manual method (advantage: you can perform dynamic analysis which is more relevant, disadvantage: setting it up on your machine may be slightly complicated). The next is by using Docker (advantage: you just need to install Docker and type in a command and everything that MobSF needs to run on your machine will be automatically downloaded without you having to do anything and MobSF will be available to access on your browser in localhost:8000, disadvantage: you cannot perform dynamic analysis using real-time data).

I will show you both ways. First, the manual way. If you want to run MobSF this way on your machine, you need to install other technologies in your machine depending on your OS.

Therefore, download the required technologies from here.
Next, clone the repository which is available on GitHub (just open a terminal in your computer and type: git clone https://github.com/MobSF/Mobile-Security-Framework-MobSF.git.What the above command means is that you are cloning (means downloading)
MobSF which is hosted on GitHub to your machine.
Next, get into that folder using this command: cd
Next, run setup.bat file by typing: setup.bat

If you face any errors, don’t worry. You can Google them or just read the official instructions/docs here. MobSF will be available in localhost:8000 on your browser (I mean just type localhost:8000 in the URL bar and you’ll be able to access it).

Remember I told you there are two ways to install MobSF? Above is the first way and the second way is to use Docker. Although both of these ways have their own disadvantages, I prefer to use Docker because I’m just used to pulling Docker images and honestly, there’s a million percent better chance that you will be able to run software using Docker rather than trying to run it manually.

To run using Docker, just make sure you have Docker installed first. If not, install it here.
Now, make sure the Docker engine is turned on. If you don’t know how, you can search it on Stack Overflow, but I’m sure you know about it.
Now, type: docker run -it --rm -p 8000:8000 opensecurity/mobile-security-framework-mobsf:latest

With this command, Docker will pull the MobSF image from Docker Hub and run it in your machine. If you don’t know Docker, let me explain it in a way that you’d understand. Basically, you just have to install Docker and type the above command. Then, Docker will automatically install MobSF, Git, Python, and every tech it is dependent on without you having to download them. Now, you just need to head over to localhost:8000 to access MobSF.

How to Analyze Security Vulnerability with MobSF Now That You Are Running It on Termux?

First, we want to test Termux, right? So, download Termux here. You don’t have to install it on your mobile phone. Before I explain further, I want to say that the version of Termux I downloaded for the sake of writing this article is version 0.117 and the version of MobSF is version 3.4.5 (beta).

Just to make sure we’re on the same page, once you launched MobSF earlier, you should have seen something like the screenshot below on your browser (URL: localhost:8000).

Actually, there’s only one step here. Just drag and drop that APK file to MobSF and wait for the report.

How to Read Security Report from MobSF?

If you followed all the instructions, you just made a static analysis which is so powerful. But, if you’d like to see more real-time analysis you can try dynamic analysis after reading this article by following instructions here. Anyway, here’s how your screen will look like after the static analysis.

You may click these individual tabs to your left and I’m sure you’ll be able to understand it because of how descriptive MobSF is, but now I’ll just highlight some of the important stats.

First, signer certificate. It shows whether the APK is signed or not, who signed it, serial number, and so on so you’ll know who developed it and related data.
Next, this is a serious one. It tells you all the permissions this app would ask alongside the severity. Not sure if you can read the small texts below, but based on the report generated for Termux version 0.117 by MobSF version 3.4.5 (beta) as in the screenshot below, one of the permissions is android.permission.REQUEST_INSTALL_PACKAGES which allows an application to request installing packages. If users allow it, Termux can try and trick users into installing additional malicious packages. If you think I explained all this info at this point from my knowledge, that’s not right. Actually, all these are explained in the report.

It will also check your code line by line and analyze it, and tell you what’s wrong in terms of security. As in the screenshot below, it says that “App can read/write to External Storage. Any App can read data written to External Storage”, and the severity is high. It even tells you which file(s) contain this vulnerability.

There are so much more insights MobSF gives you such as binary analysis, APIs that are used, hardcoded secrets, and so much more. I leave it up to you to explore by yourself because it’s pretty easy since all you need to do is to click those tabs on your left and check the stats one by one and mark the ones you need the most for your future use.

So that’s all about MobSF. All while, honestly (like super honestly), I didn’t know how to test the security of the apps I’ve built, but now things seem to be so much easier with MobSF. I’ll just let MobSF do all the hard work of finding vulnerabilities while I’ll focus on building features for my apps. As for Termux, it can do so much more and if you’d like to know more, you can read a discussion on Termux I stumbled upon earlier here.

The conclusion is, just because you might not know how to test securities in your mobile apps, don’t skip this part because this is too crucial. Even if you know how to test the security of your mobile apps, you can still use MobSF to test your apps as the developers have done the hard work (you don’t need to) to implement a whole lot of features that will be helpful in testing mobile app security. If you like this article, do share it with your friends cause MobSF and Termux are so cool and it only takes you a couple of seconds to share it with your friends in exchange for the amazing exposure I’ve given you to test the security of your mobile apps.

The 1 JavaScript Mistake That Costed Me 2 Days (As A Pretty Experienced Developer)

Mohmed Ishak — Mon, 13 Dec 2021 15:36:43 +0000

Hey, guys! Do you still remember the first time you encountered a serious bug in programming? I'm sure you got stuck like crazy and couldn't move on for days, weeks, or even months. In this article, I'll share with you a particular mistake that costed me 2 days, and my sanity.

Array From Hell in Node.js

Here's the task you wanna accomplish. Look at the code snippet below.

const endAVotingSession = asyncHandler(async (req, res) => {
  const votingSession = await VotingSession.find({
    _id: mongoose.Types.ObjectId(req.params.id),
  });

  let arrayThatWillBeModified = votingSession.candidates;

  for (let i = 0; i < arrayThatWillBeModified.length; i++) {
    // Modify the array
  }

  await VotingSession.updateOne({ _id: mongoose.Types.ObjectId(req.params.id) }, 
    {
      candidates: arrayThatWillBeModified
    }
  );
});

What we're doing is that we're grabbing an array that is returned by MongoDB, and then modifying it, and finally updating it.

The question is, will it work?

Nope. It will throw an error. Wanna know the error? It took me 1 to 2 days to solve it. The error is, in the line which I wrote...

let arrayThatWillBeModified = votingSession.candidates;

...we as developers might assume that candidates is an array (WHICH IS ABSOLUTELY TRUE), and we would do all sorts of things with it like I did here, where I wrote a loop that presumably modified the array.

The problem is, that array (votingSession.candidates) is a Mongoose array, and it seems that you can't just modify it. Instead, you need to convert it to JavaScript array, and then you can modify your array. The solution:

let arrayThatWillBeModified = votingSession.candidates.toObject();
// .toObject() converts Mongoose array to JavaScript array

The not so cool thing is, even if you log that Mongoose array in console, everything would appear fine, and you'll see an array with the right data. That's it for today guys. If you like this article, leave a like. Thank you.

How To Easily Create Cool Progress Bar in Your Web App?

Mohmed Ishak — Thu, 02 Dec 2021 14:54:43 +0000

Hello, devs! Do you see the picture above? That blue line is a progress bar. It tells you how much if a web app has loaded or not. It is not super important for a web app, but it really helps you to retain user's attention while the page loads for a second or two. So, how do you create that?

Of course, we're gonna use a package because someone else worked hard already to implement this, so why not use it? The package is called NProgress. In this article, I'll teach you how to implement it using Next.js, but if I'm sure you'll be able to implement it in other technologies such as plain React and so on.

Step 1

Install NProgress package with this command:

npm install nprogress

Step 2

In any main file such as _app.js (Next.js devs would know), just import these stuffs I've imported (refer code snippet below). Then, inside your component, paste the first three lines which I wrote under function JustAComponent() { ...

import nprogress from "nprogress";
import Router, { useRouter } from "next/router";

function JustAComponent() {
  Router.onRouteChangeStart = () => nprogress.start();
  Router.onRouteChangeComplete = () => nprogress.done();
  Router.onRouteChangeError = () => nprogress.done();

// ...
}

Step 3

Now it's time to style your progress bar. Add a file called nprogress.css in your codebase and link your app to it. In my case, since I'm using Next.js, I connected that CSS file using the link tag.

<link rel="stylesheet" type="text/css" href="/nprogress.css" />

Step 4

If you copy and paste the code snippet below, you'll be able to see the exact bar which I shared at the very top of this article, but feel free to play around with it and change stuffs like color, width of progress bar, etc.

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: var(--progressBar);
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  background-color: #3943b7;
  width: 100%;
  height: 5px;
}

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px var(--progressBar), 0 0 5px var(--progressBar);
  opacity: 1;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

Done. If you like this article, all I need is just a like. :)

How to Create Awesome README File For Your GitHub Repository

Mohmed Ishak — Sun, 21 Nov 2021 07:55:24 +0000

Hello, devs! If your README file doesn't look good, no one will be interested on your repo. So, how do you create nice READMEs? One way is to learn markdown format and use your creativity to make amazing READMEs, but in my opinion, this is waste of time because markdowns are not used directly in your app, but only for documentation reasons. What is there's a tool that lets you create cool READMEs real quick without you having to learn or know the boring markdown?

Luckily, there's a tool that allows you to do exactly that with a WYSIWYG editor. You just need to click some buttons, drag and drop, and type the content of your README without writing confusing markdown symbols, and that tool is....

readme.so

With this tool, you just have to select a component from the section to your left such as installation component or feedback component, and this site will give you boilerplate with markdown template, and you just need to edit the content to your liking. The view on your very right shows how the actual README file will look like once published. When you're happy, just copy the entire code and paste it in your repo's README.

Yeah, thank you.

Why Chatwoot is My Favorite Open Source Project? Integrations, Integrations, and Integrations.

Mohmed Ishak — Wed, 10 Nov 2021 10:44:57 +0000

Full article available on Aviyel for free (leave a like here before you check it out on Aviyel)

When you’re a business owner or you work in a large team, you’ll probably be overwhelmed by the number of messages that you receive from customers via mail, Telegram, Twitter, Facebook (recently rebranded to Meta) Messenger, and so on. Chatwoot solves this problem by integrating all your social media platforms into a single dashboard so you can connect with your customers from one app. It is an open-source project so you can be assured with engineers working 24/7 to improve this product from all over the world. Moreover, the live chat feature allows your agents to communicate with the customers instantly, leaving no chance for user dissatisfaction.

Plus, it ensures that all customers from all different types of social media would not be neglected. This is important because the success of a business in my opinion starts with you taking care of the customer and working backward.

You never build fancy software without knowing whether the customers need it first.

In this post, I’ll take you through Chatwoot’s architecture and how you can integrate the self-hosting customer engagement platform with your social media channels.

Chatwoot Architecture

To know more, you may refer to the architecture written in official docs. To run Chatwoot in production (means to deploy it live for public use), you need these components:

Chatwoot web servers (built using Ruby or Node.js)
Chatwoot workers (such as Sidekiq for Ruby)
PostgreSQL database
Email service (such as SendGrid by Twilio)
Object storage (such as AWS S3)

If you have got these parts in your application (which might look complicated in my article but I can assure you it’s not), Chatwoot will do its magic and allow you to seamlessly interact with a whole lot of customers effortlessly. There are two recommended methods for deploying Chatwoot which I don’t want to write here because they’re documented clearly in the official docs, and they are using Heroku or Caprover. You can also use Docker which may get slightly complicated for beginners, but if you are a little friendly towards docker-compose and Nginx, you’re good to go.

Why Choose Chatwoot?

Chatwoot doesn’t have any bloatware features, but only the ones you need. Here are some of the features of Chatwoot that bought me in:

Integrations with platforms that businesses really use in 2021 include Slack, Dialogflow, Calendly, Shopify, WooCommerce, WordPress, Stripe, FullContact, and so on.
Create campaigns: That means when you have a lot of contacts (customers) saved, you can select a list of users and send a one-time message such as festive greetings, promotions, etc. On the other hand, you can also create ongoing campaigns where Chatwoot would take a much personalized approach where you can send a certain message if a user stayed on your page for x minutes (and there’s a lot of variations of conditions you can create) by just clicking a couple of buttons in the simple UI.

Canned responses: Basically, you don’t want to manually type out the repetitive responses to your customers. So you can set type ‘/’ followed by a shortcode which you will set such as “greet” to automatically fill the input box with the long greeting message.
Interactive messages: With this, your customers wouldn’t only get text messages but also interactive ones where they can make selections, order a product, and so on in the chatbox itself.

And a lot of other features like managing contacts easily, conversation workflow (users say something like ‘hi’ and a certain reply is given and the conversation is carried in this manner without you having to answer them), multilingual support, etc.

Integrations in Chatwoot

First, let me show you how to integrate all your social media to Chatwoot’s powerful dashboard.

First, register to Chatwoot here. I believe there’s no need for me to explain this step-by-step as it could bore you (and I’m sure you would know how to register). You can also contribute to Chatwoot on Github easily.

Upon registration, you will see your dashboard. If this dashboard looks complicated, trust me, this looks very clean compared to other alternatives to Chatwoot. Click “Inboxes” in the column to your left and then click “Integrations”.
You’ll see options(s) such as Slack integrations and so on. As of writing this article, I only saw the Slack option being displayed as the other platforms are set to be integrated in the near future. If you want to integrate your Slack account, click connect for the Slack option. You can also use Chatwoot with Rasa.
Enter your Slack URL in the displayed form, grant the required permission, and that’s it.

With this, you can sync your Slack messages with Chatwoot in its dashboard. To connect with WhatsApp, Twitter, or other social platforms, you should click the same “Inboxes” button like in the previous step and then click “Add Inbox”. The rest of the steps are easy, just provide the information that is asked. For instance, if you select WhatsApp, you need to provide your phone number, Twilio Account SID, and a little more data and you’re good to go.

Installing Chatwoot to Your System

Now, I’ll explain how to install Chatwoot using Next.js because I believe that Next.js is most likely to be used by companies in 2021 to build websites as it has a bunch of powerful features such out of the box as code-splitting, server-side rendering, image optimization, etc.

Anyway, just like previous instructions that I’ve written in this article, click the same “Inboxes” button in the left column on your Chatwoot app and click “Add Inbox”. Then click “Website” because you want to integrate Chatwoot to your site.

Fill up the necessary details such as your website URL, and so on. At the end of the step, you’ll be given a short script based on the information you’ve given like the following image. Refer to this source.

Remember the script Chatwoot gave you? In your project folder, add a file named chatwoot.js or whatever you want to call and paste the script (without script tag because we’re using Next.js, not vanilla JavaScript).
Go to index.js file and add the script. Here’s a simple template.

import Script from "next/script";
function Home() {
 return (
  <>
       <h1>
         All implementation stay as usual, but just add the script 
         below
       </h1>
    <Script src="/chatwoot.js" />
  </>
 );
}
export default Home;

Done. You’ll see a clickable blue button at the bottom right of your site which will pull up Chatwoot’s chat box and Chatwoot will be up and running in no time.

That’s all for today. As you can see, Chatwoot is very powerful and convenient to use. Even if you don’t need this tool right now, do remember it as you’ll surely need it in the future when you build bigger projects or work in a larger team. If you find this article useful, drop a like and share this with your friends and the tech community that you’re in.

Also, Aviyel is partnering with Chatwoot to scale open source projects within communities. You can checkout Aviyel discussions and follow their Twitter space.

The Simplest (I Genuinely Promise) Way To Seed/Populate Fake Data In MongoDB Using Node

Mohmed Ishak — Thu, 28 Oct 2021 22:32:34 +0000

Only this short and concise explanation is mine, but credits to Maximilian Schwarzmüller from Academind for teaching me this trick.

Hey guys, have you ever wondered how to seed some mock data to your MongoDB database, whether for development/demo purposes or in actual production app? In this article, I will show you the easiest way to populate MongoDB database with very little code, and no, you wouldn't use fancy methods like the following ones.

Step 1: Make Sure Your Backend Is Up and Running



// a bunch of codes go here...
import connectDb from "./utils/connectDb.js";

// MongoDB database connection
connectDb();

// To recognize incoming request as JSON object
app.use(express.json());
// a bunch of codes go here...

I bet a portion of your index.js or server.js file looks like this. The above is just a sample code snippet to make sure we're on the same page. Basically, if your backend which uses MongoDB is up and running, you're all set to seed the data. If not, you can Google how to set up a Node.js and Express.js server and it's easy as there are tons of tutorials teaching you how to do so.

Step 2: Create Seed Script

Create a file called seedScript.js or whatever you want to call it. Before you populate your data, you must have a model/schema, and I'm sure you know that. In this file, all you need to do are 3 things:

Import relevant model
Create an array of fake data which will satisfy that model
Make a simple function to loop through that array and save each documents

Here's a sample. You can copy and paste my code, but change whatever necessary. As for the variable called done and function seedData, just copy them blindly (if you're rushing) from the following code snippet.



import Driver from "../models/driverModel.js";
import mongoose from "mongoose";

const drivers = [
  new Driver({
    name: "Tony Stark",
    location: {
      x: 2,
      y: 4,
    },
  }),
  new Driver({
    name: "Amelia",
    location: {
      x: 6,
      y: 19,
    },
  }),
];

// You can blindly copy the code snippet from the next line onwards
let done = 0;

export const seedData = async () => {
  try {
    await Driver.deleteMany({});

    for (let i = 0; i < drivers.length; i++) {
      drivers[i].save(function (err, result) {
        done++;
      });
    }
  } catch (err) {
    console.error(err);
  }

  console.log("Mock data is seeded from seed script.");
};

Here's the explanation. First, all you're doing is creating an array of objects where each object will be saved as document in MongoDB. Then, if you take a look at the seedData function, what's happening is that we're deleting previous data (in case you have populated them before) and freshly populating them for every new connection.

Step 3: Don't Forget to Call That Function

In your index.js or server.js, or whatever entry point file of yours, just call that function. In this case, I'm calling that function after connecting to database and after using express.json() middleware. It works for me, and I haven't really tried other arrangements.



// A bunch of codes go here...

// MongoDB database connection
connectDb();

// To recognize incoming request as JSON object
app.use(express.json());

// Mock data seeding
seedData();

// A bunch of codes go here...

That's it. Thank you for reading.

This Free Tool Lets You Create World Class Documentation for React Components

Mohmed Ishak — Mon, 11 Oct 2021 16:52:31 +0000

Full article available on Aviyel for free (leave a like here before you check it out on Aviyel)

Hello, developers! I bet you know React and love it, but let’s time travel to the time when you didn’t know about it. You didn’t know where to start, so you probably watched a video of a guy telling you about React and found yourself stuck in tutorial hell. But look at you now. You are well versed with React and can easily create documentation for React components in one go.

Why Do Developers Require Documentation?

When software solves a problem and makes the lives of others (including developers) easy, it’s good software. But what truly drives a large fanbase is the developers behind it. Imagine if React didn’t exist and you created it over a weekend or two. Not many people would try it out and your tech will be forgotten (the worst-case scenario), someone else would create similar tech better than yours unless you document your tech, driving more users and developers.

Documentation is simply a report (without strict format) on how to use a tech usually created by its creators so others can get friendly with that tech and figure out its usages easily. Imagine if your beautiful documentation for a tech you created (the tech doesn’t necessarily need to be big like the entire React library or Angular framework) got noticed by popular software engineers like Clément Mihailescu, or Akshay Saini and they try your tech and love it. The next thing you know is that your code becomes popular and you either get employed at your favorite company or turn that tech into a startup and become successful and wealthy. Your documentation, if open sourced might widen new avenues of community growth, collaboration and might connect you with big shots of the industry as well.

Is It Difficult To Create Good Docs?

Is it difficult to super cool and professional docs like the following ones? If you want to do it manually by implementing all the fancy UI components, yes, of course. Have you checked out Expo’s (a toolchain built on top of React Native) documentation? They don’t just write a bunch of texts describing how to use their components, rather they’ve got editable codes for components, which means the users are able to edit the displayed code snippet (e.g. “color = black” to “color = yellow”) right on the site and the changes will be immediately visible on screen. With this, users are able to grasp the behavior of a component in an interactive way, which is the ideal way to learn for a developer. You can also check out Flutter and Material UI for inspiration on creating better documentation.

What is the Best Way to Document Your React Components?

You can have all the money in the world and hire the best web developers to manually create a beautiful site for your documentation but to be honest, that’s just so time-consuming and a burden to make all parts of docs consistent and by the time you try to make it consistent, the entire team is exhausted just to make a doc? Thankfully, the open source community has put in tons of work to create a tool that will help you to create high-quality, professional, powerful, and sleek software documentations. And, before you think that I’m about to make you pay to use that software, well no, the tool I’m about to share with you is absolutely free!
Image source: Medium

It’s Docz. Docz is a popular state-of-the-art open-source tool that allows anyone to create clean and highly customizable custom software documentation sites with fairly minimal effort. Think of it as using Canva to create cool posters. It has got 21.7k stars on GitHub which is a huge thing in software development. Here are some of the features and cool things about Docz:

Built with Gatsby, a hot open-source framework that is used to create blazing fast static sites that are Progressive Web Apps. And no, you don’t need to know Gatsby to use this tool.
Based on MDX. MDX is Markdown + JSX. Now you don’t need to understand confusing symbols to create markdowns, but just a bunch of easy-to-use JSX-like syntax.
Supports TypeScript. It provides native TypeScript support. Everyone likes TypeScript. If you don’t, you probably haven’t spent enough time using it, or you haven’t looked at a large codebase because almost all large JavaScript projects are built using TypeScript.

Quick Start Guide

Before I show you how to use Docz, if you’ve plenty of time, do read the official docs to get a good overview of this tool. If not, keep reading.

Add Docz as a dependency in your project. Pick one of the commands below depending on your package manager (npm/yarn). Please take note that react and react-dom versions in your app must be greater than 16.8.0. Otherwise, this will not work so upgrade them. Make sure react and react-dom are installed to run the commands;

yarn add docz

npm install docz

Add a .mdx file anywhere in your project, you are not required to adhere to any file architecture or conventions. You can just copy and paste this code.

---
name: Button
route: /
---

import { Playground, Props } from 'docz'
import Button from './Button'

# Button

<Props of={Button} />

## Basic usage

<Playground>

  <Button type="submit">Click me</Button>

  <Button>No, click me</Button>

</Playground>

Only a few easy steps are left. Check out the complete article for free on Aviyel. I assure you that this free tool will help you in ways you didn't expect in your software development journey.

4 Useful React Tricks I Bet You Didn't Know Before (Some Are Too Trivial But Useful)

Mohmed Ishak — Thu, 30 Sep 2021 07:35:40 +0000

Hello, React devs! Think you know React? You probably do, but there are a couple of cool tricks only a handful of React devs would know which I'm about to share with you. If any of these tips are new to you, you owe me a like.

[1] Use JSX Extension For React Components

To be honest, I don't know if .jsx extension for components make your React app faster, but it certainly helps to differentiate component files and other files in your project directory. Plus, in VS Code, you'll see a React logo beside .jsx files instead of JavaScript logo so you can be assured that you're a React developer at all times.

[2] Save One Line of Code

Save one line of code by removing the following line because it's unnecessary to import React from React 17 onwards.

import React from "react";

[3] Modularize Components

So, you have structured your React project well with descriptive files and folders, but what about individual components? I bet they look like the following picture.

The problem is that you're writing your JSX expressions one after another and the codes look like a long, boring article. What you need to do instead is you need to separate groups of related JSX expressions to individual methods and compose those methods together in the return statement (which is responsible for displaying UI on the screen).

function Cart() {
  const loadAllProducts = (products) => {
    return (
      <div>
        {products.map((product) => (
          <Card
            product={product}
          />
        ))}
      </div>
    );
  };

  const loadCheckout = () => {
    return (
      <div>
        <h1>Checkout</h1>
      </div>
    );
  };

  return (
    <div>
      <div>
        <div>
          {loadAllProducts(products)}
        </div>
        <div>{loadCheckout()}</div>
      </div>
    </div>
  );
}

See what I did there? Instead of cramming all my JSX expressions after the return keyword, I wrote individual, meaningful methods before the return keyword and composed them afterwards. With this, you can clearly see all the working parts in a component.

[4] Weird Hack to Reload Component

There are various ways to reload your component but sometimes, you'll get stuck because you might perceive useState() and useEffect() Hooks to run a certain way and they wouldn't which could leave you frustrated. Thankfully, there's a way to reload your component whenever you want to using the following technique.

function Product({ reload = undefined, setReload = (f) => f }) {
  // a bunch of codes go here...

  const showRemoveFromCart = (removeFromCart) => {
    return (
      removeFromCart && (
        <button
          onClick={() => {
            // remove the product from cart
            setReload(!reload);
          }}
        >
          Remove from cart
        </button>
      )
    );
  };

  // return...
}

This is a demo component which isn't fully implemented. Anyway, you need to pass two arguments just like in this function. In this case, one is reload and another is a function to set the reload value. If it doesn't make sense don't worry, because all you need to do is, whenever you want this component to be re-rendered, use the setReload() method (you can name it anything you want) and flip the value of reload argument just like I did in showRemoveFromCart() method. Your component will refresh immediately. Of course, whichever component that consumes this component must have state variable + method to set that variable from useState() Hook which will be passed down to this component.