DEV Community: Suman Roy

Theoretical Aspects of API

Suman Roy — Wed, 25 Jan 2023 14:06:19 +0000

API is an acronym that stands for Application Programming Interface. It is a collection of communication protocols used by various applications to communicate between them. A programmer can make use of various API tools to make its program easier and simpler. Thus, in simple terms it acts as a bridge between two programs or applications to handle information and resources.

Real-life example of API

Let us take an example of when we are searching for a movie on a website like Netflix or something. We select the category of the movie and then all the movies are displayed on our screen for the genre. Well, this is all because our application/ device communicated and exchanged data with another application/program which is called server. Now, this server selects all the movies that suits the genre we selected, and sends them from the database to our screen.

Types of APIs

Web APIs - Web APIs are the apis which helps all the softwares and applications running on the web and they are easily accessible by HTTP protocols. These are extensively used in modern softwares around us.

Local APIs- These APIs generally offer middleware services or OS to applications. Local APIs have access to individual application components , which means that the delivery of services and information is more flexible.

Program APIs - Program APIs helps run a remote program in the local machine by using RPC's (Remote Procedural Calls)

Hardware APIs - They are a representation of hardware components on the software level. It allows us to automatically derive a hardware structure based on access patterns in software itself.

Protocols and Architecture

Enterprises increasingly rely on APIs to interact with customers and their partners. It is quite important which type of API is right for the needs before starting the development of service or the product.

APIs require clear architecture and protocols . These are the rules, structures and constraints that govern an API's operation. Today, there are three categories of API protocols or architectures: REST, RPC and SOAP.

REST - It stands for Representational State Transfer, is the most popular architecture for builiding APIs among the others. It relies on a client/server approach that separates front-end and back -end of the API and provides considerable flexibility in development and implementation of the application. REST is stateless, which means the API stores no data or status between requests. It also supports caching.

SOAP - It stands for Simple Object Access Protocol, is a messaging standard defined by the World Wide Web Consortium and broadly used to create web APIs, usually with XML (extensible markup language) . SOAP supports a wide range of communication protocols found across the internet, such as HTTP, SMTP and TCP/IP. It is style-independent, which enables developers to write SOAP APIs in varied ways and easily add features and functionality. It is tightly controlled with clearly defined standards.

RPC - It stands for Remote Procedural Calls, is a simple means to send multiple parameters and receive results, similar client/server approach like REST. RPC invokes executable actions or processes.

Advantages of using APIs

They make our product more efficient by reducing the needs of complex code or programs which gets difficult to maintain.
Flexibility is what makes it developer-friendly. Programmers can ask or integrate services as per their requirements.
As APIs are running by computers, they are more reliable than humans (more prone to making mistakes) and automates the process.
New functionalities can be easliy implemented.

Coming to the disadvantages, there are few of them. They are as follows :

They are not cost effective. Most of the times the APIs are quite costly, needs high maintanence and developer support.

Since they are the means of sending and receiving data, this layer of the software is prone to cyber attacks from hackers.

This is the end of the blog. I hope it cleared the basic understanding of the basic concepts of API and would help to integrate one in your project soon.

You can connect with me on :
LinkedIn
Github
Twitter

From React in web to react in mobile

Suman Roy — Mon, 23 Jan 2023 14:07:28 +0000

Transitioning from one domain to another is often overwhelming and confusing, whether you are looking for a job switch or want to get your hands dirty with certain technologies or like me, wants to explore.

In this blog, I'll briefly share how I got started with my first mobile app project. The problems I faced and the fixes.

In the beginning, I personally started with the simplest things like HTML, CSS and JS . With time I wanted to get started with MERN stack so, as suggested by most experienced people I learnt React and it didn't stop there. It took me couple months to be able to make a project with both client in React and server in Node , MongoDB as the database.

After making some projects, contributing to open source repositories, events like Hacktoberfest, participating in Hackathons, I thought of doing something different. Native mobile apps were out of option as I don't use macOS and Android Studio is ought to destroy my laptop for real ! Sorry , jk.

There were 2 options for me to get started with cross-platform app development. They were flutter and react native. For flutter, dart language is used. I, being familiar with React chose react native.

So, I found out from youtube and the official docs that react native is nothing different than react itself. We use react in web with the help of react-dom. In case of react native, we don't use the typical dom element tags like div, p, section, a, etc but we use pre-defined elements which are then converted to native elements for android and ios respectively. This is what happens over the hood.

To create a project, I used the explo-cli. It was suggested to use expo cli because it helps in a lot of ways :

Not much manual configurations required to get started, which helps a beginner to actually get their hands dirty instead of fixing configuration bugs.
Super fast. Expo makes the react project running in couple of minutes. This saves a lot of time for a beginner, who can focus on things which are more important.
Now, the fun part. The app can be developed without android studio, xcode on your smartphone only. Expo go app is required to remotely develop the app.

How did I use Expo go ?
So, once I had created the project using npx create-react-native-app app-name

Note that, I couldn't use expo init, the cli asked the users to migrate to npx create-react-native-app instead.

Then, I moved inside the project dir by using cd my-app. I used the expo start command to start the metro builder. The UI for metro server is no longer shown so everything is to be done from the cli. I had installed the Expo go app and scanned the QR code shown in the terminal.

Note that, ios users need to scan the QR with their camera app.

That was it, my project was running on my smartphone !! Whenever I changed the contents in my VSCode, it was instantly reflected to screen on my smartphone.

There are few things to remember while using the expo go app
The remote device (smartphone) needs to be connected to the same WLAN network with the local setup (computer).
If there is an error, like java socket timeout, using the command expo start --tunnel would fix it. This might be slower option but it works. This command requires a dependency @expo/ngrok.

I haven't gone through the debugging part yet, so I cannot tell. Apparently errors in code are reflected on the mobile screen, so one can fix it most of the time.

So, this was my experience. It might have been too long but I tried to keep it simple and to the point. Hope this could help my fellow developers to get started with their react-native journey.

If you find any problem or want to add something, comment down below so we work on it.

You can connect with me on :
LinkedIn
Github
Twitter

Unlocking the Power of HTTP: Navigating the Digital Highway

Suman Roy — Sun, 22 Jan 2023 16:26:14 +0000

Understand HTTP as a beginner

HTTP is an acronym for HyperText Transfer Protocol. This protocol is the foundation of the World Wide Web and is used to access data in it. It can be used to transfer the data in the form of plain text, hypertext, audio, video, and so on.

Let's discuss some of the features of http

Connectionless -> HTTP is considered to be a connectionless protocol. The whole process starts from the host(client) sending a request to the other host(server) and receiving a response. The connection formed between these 2 for sharing of resources is immediately dropped after the response is received.
Stateless-> HTTP is also considered to a stateless protocol. This is because the server gets the information from the client as long as it is connected with it (till server sends the response). In this way, the server does not retain any information about the client.
Media independent -> HTTP is also media independent. This means that any type of data can be sent to the server via HTTP protocol as long as the server knows how it can handle the data content. Thus, both the client and the server need to specify the content-type of the data.
Client server architecture -> This type of model usually involves a client and a server. Here, the server hosts, delivers and manages the resources requested by the client. The client in order to access resources, needs an address which is called URL( Uniform Resource Locator). This URL is consisted of 4 parts and they are :

Method : The method is the protocol used to retrieve the document from the hosted server. For example, http.
Host : The host is a computer which is storing the information. Generally computers store web pages. For example, www (not mandatory field)
Port : It is the port number of the server. This is also an optional field. It comes between the host and path and it should be separated from the host by a :.
Path : It is the pathname of the file (resource) where the information is stored. It contain / that separates the directories from the subdirectories and files.

I hope this blog was easy to understand the widely used protocol. If you have any queries, or think there is some error please comment down below ! Keep learning !

What is a state controlled form in React js?

Suman Roy — Sun, 15 Jan 2023 14:26:15 +0000

In this blog we are going to discuss controlled form in React js.

Pre-requisites : You only need to know basics of React and it's hooks. If you don't know, I am sure you can follow along as it is beginner friendly

So, for controlled form inputs, we are going to use

useState hook
onChange event

What is useState?
It is a react hook (special functions) that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value and a function for manipulating the state value.

What is onChange event ?
The onChange event in React detects when the value of an input element changes. It is triggered when the element loses focus.

Now, let's see the code

import {useState} from 'react';

export default function App() {
  const [name, setName] = useState("");

  const handleSubmit=(e)=>{
       e.preventDefault();
       // probably console log it or send to server via api
  } 

  return (
    <div className="App">
      <h1>
        React form
      </h1>
      <form onSubmit={handleSubmit}>
        <input 
        type="text"
        value={name}
        onChange={(e)=> setName(e.target.value)}
        placeholder="Enter name..."/>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Here, we have converted a normal form to a controlled form. It is because we are controlling the form data via states. The initial state is being taken value attribute, now whenever we change the input field, the onChange event will be triggered and setName function will be invoked to change the value of name to the input inside the field e.target.value. This way, we are letting React handle our form data in the component itself.

That is the end. If you have any query, drop it in the comment section below. If you think this blog has any error or wrong info, please let me know.

I hope I could help you understand the topic 😀. If yes, please share it with your friends and others so that this could benefit them too! Till then , keep REACT-ing ❤🚀

Follow me on:
Github
LinkedIn
Twitter

Here is why you need to use form tag!

Suman Roy — Mon, 12 Dec 2022 10:25:14 +0000

In this short blog we are going to see why wrapping input fields in a form tag is important

Note that, the only pre-requisite is HTML. Even if you are not familiar with HTML5, you can follow along. It is simply written.

In HTML(Hyper text markup language) we are familiar with a variety of elements ranging from semantic (form, section, article, li) to non-semantic (div, span) elements.

Often we require to accept data from users/clients. For example, when registering/signing up to a certain website, we enter our name, email and password.This data is usually entered in the input fields which are the elements of the form.

Following shows an example :

<form id="register">
    <input type="text" class="form-name" id="form-name" 
    placeholder="Enter your name.."/>
    <input type="email" class="form-email" id="form-email" 
    placeholder="Enter your email.."/> 
   <input type="password" class="form-password" id="form-password" 
    placeholder="Enter your password.."/>
    <button type="submit">Submit</button>
</form>

Note: The action tag in the form element is usually for the script which contains the logic of the backend, i.e., how this data is used in the server.

Now let's jump into the importance of it.

Once the data is filled up in their respective fields, it has to be submitted. When the user clicks on the submit button with attribute type="submit", the form will have an attribute action, which will get triggered automatically. Now, this reduces our work as we had to listen to the click event with javascript event listeners and deal with the data.
Often we have to make sure the user has filled in details before clicking submit. This is done by form validation using javascript. Now, if we wrap our input in form, we can use a boolean attribute known as required in the input tag. This will make sure, that all the required input fields are filled before submitting without writing extra code.

In the picture below, you can see how it looks like

3.A form is a semantic tag, a tag which conveys a meaning to both the browser and the developer. Using semantic tags helps assistive devices like screen readers, bots, web-crawlers better understand the content of the page in the website or web application and help in SEO and ranking of the site.

That is the end. I would personally suggest you to use form tag for forms. I hope I could bring clarity on the why of the topic. If you liked it, share it. Also, if you think there is something wrong or you have any questions, please drop a comment down below so that we can fix it.

Till then, keep developing ! 💙

Follow me on:
Linkedin
Github
Twitter

Deploy your static React app under 5mins

Suman Roy — Sun, 06 Nov 2022 15:16:55 +0000

We all have been to the stage where we had completed our first react app but didn't know how to showcase it publicly.
So, in this blog, I am going to show you how to host your react app for free.

Pre-requisites:

Make sure you have completed building a react app.
Have npm installed locally or globally.

Step 1
Once you are done with your react app, you need to create the build folder which will contain the index, stylesheets, icons, assets and manfiest files. This folder is responsible for serving your static content when deployed.
Use this command in the root dir of your app

npm run build

Step 2
There are so many platforms to host your static site like Netlify, Vercel, Github Pages, Cloudflare Pages, Forge, etc. We are going to use Netlify
So, you need to create an account on Netlify and log in.

Step 3
Click on the add new site button.

Then, click on the deploy manually button to deploy your build folder directly.

Step 4
Now, we have 2 options to deploy it. We can do it either by browsing our local files or dragging and dropping.

Click on the browse files to upload the folder from your local machine.
Drag the folder from your local and drop it in the middle.

Step 5
Now, Netlify will publish your site and host it for free. You will be provided a random url but you can change it to your preferance.

Note: The url for your site should be unique and will always end with netlify.app

Congratulations! ✨ You have hosted your react app successfully and now you can showoff your project to your friends, family and literally anyone on this planet 😉

If you have any query, drop it in the comment section below. If you think this blog has any error or wrong info, please let me know.

I hope I could help you somehow 😀. If yes, please share it with your friends and others so that this could benefit them too! Till then , keep REACT-ing ❤🚀

Follow me on:
Github
LinkedIn

Fetch vs Axios in Javascript

Suman Roy — Tue, 11 Oct 2022 15:22:08 +0000

Hello there ! 👋 In this blog, we are going to learn how to implement APIs by using Fetch API and Axios

Before we get started, the only pre-requisite needed for this tutorial is basic understanding of javascript.

Table of contents

What is fetch?
Syntax of fetch
What is axios?
Syntax for axios
Key differences b/w fetch and axios

What is Fetch ?

Fetch is a standard way of sending asynchronous api calls to the server in web applications. It is a feature of ECMASCRIPT6(ES6) and was introduced back in 2015.
The Fetch API provides a method called fetch () which is defined on the window object. It needs an argument which is the url of the endpoint (resource). This method returns a promise which is resolved to retrieve the response.

Let us see an example, where we are fetching some data from an endpoint

const fetchNames = ()=>{
   fetch("https://localhost:5000/api/names/")
      .then((res)=> res.json()) // successful req, change to json
      .then((data)=>{
       console.log(data); // data contains the json object
    })
     .catch(error=>{
       console.log(error); // something went wrong
    })
}

Note that, for Post request we also need to include the options
For example, we are sending a name with id to the server

const sendName=()=>{
    fetch("http://localhost:5000/api/user/", {
       // the method type 
       method : 'POST',
       // contents to send i.e., the body
       body: JSON.stringify({
        name : 'David',
        id:"1"
       }),
       // headers of the request
       headers:{
        'Content-type':'Application/json'  
       }
      })
      .then( res => res.json())
      .then( data=> console.log(data))
      .catch(error => console.log(error))
}

So, we know how fetch works. Now, let us see axios.

What is Axios?

Axios is a javascript library used to make HTTP requests from node js(runtime for javascript) or XMLHttpRequests (XHR) from the browser. This too supports the promise api that is native to ES6.

Example for showing how we can fetch data and post data using axios

 // get request
  const fetchNames = async()=>{
   // we are using asynchronous function so we need to await for 
   the req to be processed
   try{
     const response = await 
     axios.get('http://localhost:5000/api/names/');
     console.log(response.data)
   }catch(error){
      console.log(error);
  }
}

// post request
const postName = async()=>{
   // same as previous
   try{
      const response = await 
       axios.post('http://localhost:5000/api/users/',{
          name:'David',
          id:1
     });
     // log the data from the response 
      console.log(response.data);
   }catch(error){
     console.log(error); // something went wrong!
     }
}

Key differences between fetch and axios

Fetch	Axios
Fetch is built-in for most modern web browsers, so no installation is required	Axios is a stand-alone third party package (library) which requires installation
Fetch has no url in the request object	Axios has url in it's request object
It doesn't have XSRF (cross-site request forgery) protection	It has XSRF protection in-built
Request is made then the response is converted to json	Here, the response is automatically transformed to json
Request has body which is converted to string	Request has data which contains the object itself
Abort requests by using Abort controller web api	Has request-timeouts for cancelling requests or use AbortController

Hopefully, I have been able to clear the methods of making api calls to the server. If you have understood, then like the post, comment and share so that others can benefit from this.
Thank you for reading this far! Keep developing ! ❤❤

Stack Using SLL for beginners

Suman Roy — Sun, 02 Oct 2022 07:55:56 +0000

Let us write the code for implementing stack using linkedlist
Pre-requisites : brief knowledge of linkedlist operations.
Before we get started let us know what is Stack?
A stack is a data structure which follows the LIFO principle. It is abbreviation for Last-In-First-Out. Technically, the last item that is inserted into the data structure can be taken out first.
Applications for stack can be seen in real life, such as a stack of books, files, the cylindrical container for ping pong balls, the biscuit wrapper,etc.

The operations that can be performed on Stack data structure are push(insertion), pop(deletion) and peek(top element).

The code :
1.Defining the structure for our nodes

#include <stdio.h>
#include <stdlib.h>

struct Node{
    int data;
    struct Node* next;
};
// global top pointer
struct Node* top=NULL;

2.Writing print function for printing the elements
We traverse through the list from top until we reach null and print all the data for the nodes.

void print(){
    struct Node *traverse = top;
    while(traverse!=NULL){
        printf("%d ",traverse->data);
        traverse = traverse->next; // iterate
    }
    printf("\n");
}

3.Addition(push) of new element(node) to our stack(list)
Pushing new element to stack is same as insertion of node in the beginning of the list.

void Push(int x){
    struct Node* newNode = (struct Node*)malloc(sizeof(struct Node));
    newNode->data = x;
    newNode->next = NULL;
    if(top==NULL){
        top = newNode;
        print();
        return;
    }
    // link fix with first node
    newNode->next = top;
    top = newNode;
    printf("Stack after insertion : \n");
    print();
}

4.Deletion(popping) element(node)from the stack(list)
Popping from stack is same as deleting node from the beginning of the list.

void Pop(){
    if(top == NULL){
        printf("Stack is empty!!\n");
        return ;
    }
    struct Node *temp = top->next;  // one node skipped i.e., deleted
    top->next = NULL;
    top = temp;
    printf("Stack after deletion: \n");
    print();
}

5.Peek(show top) element(node)
Peeking is showing the top element of the array if it exists else the stack is empty

void peek(){
    if(top == NULL) printf("Stack empty!\n");
    else printf("Top element is: ",top->data);
}

6.Now we write the main function and interface for the user interaction using switch case

int main(){
    top = NULL;
    int choice;
    printf("Enter 1 for push, 2 for pop, 3 for peek: ");
    scanf("%d",&choice);
    // switch statement
    switch(choice){
        case 1:
            int value;
            printf("Enter the value for insertion : ");
            scanf("%d",&value);
            Push(value);
            break;
        case 2:
            Pop();
            break;
        case 3:
            peek();
            break;
        default: 
                printf("Wrong choice!");
                break;

    }
    return 1;
}

Now, run the program in your editor and make sure to try out different values of insertion and deletion to make sure the edge cases are being followed. If you find any bug, comment down below!
Thank you 👋

A Simple Card hover animation for beginners

Suman Roy — Fri, 12 Aug 2022 16:48:17 +0000

We will be looking at a very simple card hover animation made using html and css only. If you are aware of css properties, you will understand this but if you are a total beginner I would recommend to learn the basics of CSS.

Step 1 : Writing our markup i.e., HTML

We need a parent wrapper and a child which contains some text content. It can be anything of your choice as long as it looks good.

 <body>
   <div class="parent">
     <div class="child-text">
       Hi there! Howdy? I am fine. Fun fact? I use vanilla css for most of my projects because I love it!! 
   </div>
 </body>

Step 2 : We will add the basic resets and stylings to our body. Note that the code has been written in codepen so, there are no meta tags for the markup.

/* resets */
*,{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
/* styles for the body */
body{
  height:100vh;
  width:100vw;
  overflow:hidden;
  display:grid;
  place-content:center;
  background:#000000;
}

The body is displayed as grid, with its contents center. You can also use transform property or flexbox to center the wrapper div.

Step 3: Watch carefully how we design the parent div, which contains the child div. It has a random background image, you can use any image or color or gradient background of your choice.

The position is** relative**, it is very important, we will get to know!
Overflow **is **hidden. We hide our overflow as the child div will be moved in Y axis , towards the bottom.

.parent {
  height:20rem;
  width:20rem;
  overflow:hidden;
 position:relative; 
  border-radius:10px;
  background:url('https://media.istockphoto.com/photos/clouds-on-sky-picture-id184103864?k=20&m=184103864&s=612x612&w=0&h=m1yaRvpLy-e76e6ZbX2QkCbsGFhubVaaDntDOpL2zYE=') no-repeat center/cover;
  cursor:pointer;
  text-align:center;
}

*Step 4 *: We will use a black overlay. This is because we want the text in the child div(transparent background) to have contrast with the overlay.

For this we are using before pseudo class. This is going to have position as absolute and would have a background of black ( with very low opacity).

.parent::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:-1;
  background:rgb(0,0,0,0.4);
}

Step 5 : Now, we style our child div, which is the hero for this card animation.

This div can be styled anyhow, the only thing to remember is to have a **transform property **on it. It transforms this div in any direction explicitely. Here we have transformed it in -Y axis by 15rem.

/* the child container with the text */
.child-text{
  margin-top:4rem;
  font-size:1.5rem;
  color:white;
  text-shadow:1px 0 1px black;
  padding:1rem;
  transition:transform 500ms ;
  transform:translateY(15rem);
  cursor:pointer;
}

Step 6: We are almost done! All we have now is to position the child div correctly on hover over the parent div.
When the parent is hovered, the child will have its transform property of translate in y axis to 0. This makes the child pop up. To slow the effect down, we have used transition of 500ms.

.parent:hover .child-text{
  transform:translateY(0rem);
}

Step 7 : Before we are ready with the card, lets add some coolness to our parent div. We have added drop shadow and box shadow, you can also use borders, or new background color.

.parent:hover{
  border-radius:10px;
  box-shadow:0 0 10px white;
  filter:drop-shadow(0 1px 2px black);
  transform:scale(0.98);
}

Step 8: We have finished our card. Wow, that was a lot wasn't it? 😅 The only way to become good at it, is by practising. Try experimenting with this code and you will be amazed how you can make some sleek animations with little bit of change here and there!

I hope I could teach you something new and useful. If you are reading this, make sure to share it with your friends who are new to CSS and needs help with their beautiful projects. Happy CSS'ing!! ❤