DEV Community: Dexter

Let's create our own IDE in Next.js

Dexter — Sun, 30 Jul 2023 08:18:01 +0000

Having a suitable code editor is crucial during the coding process, as it plays a significant role in one's coding journey. Finding the right editor that suits your needs can greatly benefit your programming experience. Let’s create one ourselves now.

Introduction

In this tutorial, we'll explore the process of building a functional web development Integrated Development Environment (IDE) using React within a Next.js application. Initially, we'll focus on creating an IDE that offers support for HTML, CSS, and JavaScript. Subsequently, we'll enhance the IDE by adding the capability to execute our code.

Setting up the application

To begin, let's generate a fresh Next.js project. We'll create the project within a directory named "web-editor" and make sure to enable JavaScript and ESLint for it.

npx create-next-app ide --js --eslint

This will create the folder and installs all the dependencies. The main file where we are going to be working is page.js inside src/app.

Now enter the folder (cd ide) and start the development server:

npm run dev

Visit http://localhost:3000 to check the running application. If everything is working, you should see a working web page.

Creating the Editor

For building the editor in Next.js, we'll utilize monaco-react a library that enables us to integrate the monaco-editor seamlessly into our React application. The advantage of using this library is that we can avoid the complexities of configuring webpack, rollup, parcel, or similar tools that are typically required for incorporating the monaco-editor into our project.

To start using this we first need to install it:

npm install @monaco-editor/react

After installing the Monaco-react package, you would have to go to the docs and then you'll see how to include it in your project.

Copy and paste the below code in Page.js file:

'use client'

import Editor from '@monaco-editor/react';

export default function Home() {
  return (
    <Editor height="100vh" defaultLanguage="javascript" defaultValue="// some comment" />
  )
}

You should see some like this.

We now have an Integrated Development Environment (IDE) integrated into our web page. This IDE allows users to write and edit code directly on the webpage. By default, the editor is set to support JavaScript, but users have the flexibility to change the language according to their preference. Now, let's take some time to explore and understand the code implementation of this IDE.

Numerous props are available for us to customize the editor according to our preferences. These props include options like height, defaultLanguage, defaultValue, Theme, and many others. By leveraging these props, we can easily make various changes and adjustments to the appearance and behavior of our editor to suit our specific needs and requirements.

To ensure that our IDE supports HTML, CSS, and JavaScript, we need to add support for all three languages. For this purpose, we will use a prop called path which enables us to manage the current file we are working on. This path prop plays a crucial role in maintaining three distinct states, allowing us to seamlessly switch between the different files corresponding to HTML, CSS, and JavaScript code, making it possible to work on each of them effectively.

I am also going to install fontAwesome as it will allow us to use different icons in our editor that we need.

Copy and paste the below cmd:

npm i --save @fortawesome/react-fontawesome@latest
npm i --save @fortawesome/free-brands-svg-icons@latest

Copy and paste the below code in Page.js:

'use client'

import { useState } from 'react';
import Editor from '@monaco-editor/react';
import styles from './page.module.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHtml5, faCss3, faJs } from '@fortawesome/free-brands-svg-icons'

const files = {
  'script.js': {
    name: 'script.js',
    language: 'javascript',
    value: "someJSCodeExample",
  },
  'style.css': {
    name: 'style.css',
    language: 'css',
    value: "someCSSCodeExample",
  },
  'index.html': {
    name: 'index.html',
    language: 'html',
    value: "someHTMLCodeExample",
  },
};

export default function Home() {
  const [fileName, setFileName] = useState('script.js');

  const file = files[fileName];

  return (
    <>
    <div className={styles.topBar}>
    <button className={styles.htmlButton} disabled={fileName === 'index.html'} onClick={() => setFileName('index.html')}>
      <div><FontAwesomeIcon icon={faHtml5} /></div>index.html
      </button>
      <button className={styles.cssButton} disabled={fileName === 'style.css'} onClick={() => setFileName('style.css')}>
      <div><FontAwesomeIcon icon={faCss3} /></div>style.css
      </button>
      <button className={styles.jsButton} disabled={fileName === 'script.js'} onClick={() => setFileName('script.js')}>
      <div><FontAwesomeIcon  icon={faJs} /></div> script.js
      </button>
    </div>
    <Editor
      height="100vh"
      theme="vs-dark"
      path={file.name}
      defaultLanguage={file.language}
      defaultValue={file.value}
    />
  </>
  )
}

Our project should look something like this.

The IDE doesn’t look the best as of now so let’s start working on that. I am also going to add a button to the code.

Copy and paste the below code in page.js

"use client";
import { useState } from "react";
import Editor from "@monaco-editor/react";
import styles from "./page.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHtml5, faCss3, faJs } from "@fortawesome/free-brands-svg-icons";
import { faPlay } from "@fortawesome/free-solid-svg-icons";

const files = {
  "index.html": {
    name: "index.html",
    language: "html",
    value: "",
  },
  "style.css": {
    name: "style.css",
    language: "css",
    value: "",
  },
  "script.js": {
    name: "script.js",
    language: "javascript",
    value: "",
  },
};

export default function Home() {
  const [fileName, setFileName] = useState("index.html");
  const file = files[fileName];

  return (
    <>
      <div>
        <div className={styles.topBar}>
          <button
            className={styles.htmlButton}
            disabled={fileName === "index.html"}
            onClick={() => setFileName("index.html")}
          >
            <div>
              <FontAwesomeIcon icon={faHtml5} />
            </div>
            index.html
          </button>
          <button
            className={styles.cssButton}
            disabled={fileName === "style.css"}
            onClick={() => setFileName("style.css")}
          >
            <div>
              <FontAwesomeIcon icon={faCss3} />
            </div>
            style.css
          </button>
          <button
            className={styles.jsButton}
            disabled={fileName === "script.js"}
            onClick={() => setFileName("script.js")}
          >
            <div>
              <FontAwesomeIcon icon={faJs} />
            </div>{" "}
            script.js
          </button>
          <button className={styles.playButton} id="runCode">
            <div>
              <FontAwesomeIcon icon={faPlay} />
            </div>{" "}
            Run
          </button>
        </div>
        <Editor
          height="100vh"
          theme="vs-dark"
          saveViewState={true}
          path={file.name}
          defaultLanguage={file.language}
          defaultValue={file.value}
        />
      </div>
    </>
  );
}

This is all the CSS we will need in our project Copy and paste the below code in page.module.css file.


.topBar{
  background-color: #242424;
  display: flex;

}

.jsButton,.cssButton, .htmlButton, .playButton, .closeButton {
  padding: 10px;
  font-size: 0.9rem;
  background-color: #242424;
  color: white;
  display: flex;
  flex-direction: row;
}

.closeButton{
  font-size: 1.2rem;
  box-shadow: 0 4px 10px 0 rgba(0,0,0,.2);
  font-weight: 700;
}

.htmlButton svg{
  color: rgb(248, 48, 48);
}

.cssButton svg{
  color: rgb(21, 130, 255);
}

.jsButton svg{
  color: rgb(243, 243, 16);
}

.playButton svg {
  color: rgb(46, 192, 46);
}

.closeButton svg {
  color: rgb(248, 48, 48);
}

.jsButton div,.htmlButton div, .cssButton div, .playButton div, .closeButton div {
  padding-right: 2px;
  margin: 1px;
}

.split{
  display: flex;
  flex-direction: row;
}


.editor {
  position: absolute;
}

.outputiframewindow {
  width: 50vw;
  height: 45vh;
  background-color: white;
}

.websiteWindow{
  position: absolute;
  z-index: 1;
  top: 30vh;
  left: 25vw;
}

.buttonBlock {
  background-color: #F0F4F4;
  box-shadow: 0 4px 10px 0 rgba(0,0,0,.2);
}

This is how our IDE should look like now:

We are now entering the exciting phase of the project where we focus on implementing the functionality to run the code within our IDE. To make it easier to understand, we will break down this process into several steps, ensuring a clear and systematic approach to this crucial part of our project. Let's dive into each step one by one and bring the code execution feature to life in our IDE.

Steps

The first step is to ensure that we can preserve the current state of the IDE, which involves saving the HTML, CSS, and JavaScript code entered by the user so that we can execute it later.
To achieve this, we will utilize the useState hook, a powerful feature in React, which enables us to create and manage state variables. These state variables will store the code entered by the user, and we'll update them whenever the user runs the code.
To keep track of the changes made in the IDE, we'll employ the onChange event, which will allow us to detect any modifications made to the code and save those changes accordingly.
Now that we have the user's code stored, the next step is to figure out a way to execute it. For this purpose, we will leverage an iframe, a popular HTML element that will facilitate code execution within a sandboxed environment, ensuring a safe and separate execution space for the code.

Copy and paste the below code in page.js file.

"use client";
import { useState, useEffect, useRef } from "react";
import Editor from "@monaco-editor/react";
import styles from "./page.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHtml5, faCss3, faJs } from "@fortawesome/free-brands-svg-icons";
import { faPlay, faCircleXmark } from "@fortawesome/free-solid-svg-icons";

const files = {
  "index.html": {
    name: "index.html",
    language: "html",
    value: "",
  },
  "style.css": {
    name: "style.css",
    language: "css",
    value: "",
  },
  "script.js": {
    name: "script.js",
    language: "javascript",
    value: "",
  },
};

export default function Home() {
  const [fileName, setFileName] = useState("index.html");
  const [htmlCode, setHtmlCode] = useState("");
  const [cssCode, setCssCode] = useState("");
  const [jsCode, setJsCode] = useState("");

  function handleEditorChange(value) {
    file.value = value;
  }

  const file = files[fileName];

  useEffect(() => {
    const runBtn = document.getElementById("runCode");
    const clsBtn = document.getElementById("closeWindow");
    runBtn?.addEventListener("click", () => { 
      setHtmlCode(files["index.html"].value);
      setCssCode(files["style.css"].value);
      setJsCode(files["script.js"].value);
      document.getElementById("outputWindow").style.display = "block";
    });

    clsBtn?.addEventListener("click", () => {
      document.getElementById("outputWindow").style.display = "none";
    });
  }, []);

  return (
    <>
      <div>
        <div className={styles.topBar}>
          <button
            className={styles.htmlButton}
            disabled={fileName === "index.html"}
            onClick={() => setFileName("index.html")}
          >
            <div>
              <FontAwesomeIcon icon={faHtml5} />
            </div>
            index.html
          </button>
          <button
            className={styles.cssButton}
            disabled={fileName === "style.css"}
            onClick={() => setFileName("style.css")}
          >
            <div>
              <FontAwesomeIcon icon={faCss3} />
            </div>
            style.css
          </button>
          <button
            className={styles.jsButton}
            disabled={fileName === "script.js"}
            onClick={() => setFileName("script.js")}
          >
            <div>
              <FontAwesomeIcon icon={faJs} />
            </div>{" "}
            script.js
          </button>
          <button className={styles.playButton} id="runCode">
            <div>
              <FontAwesomeIcon icon={faPlay} />
            </div>{" "}
            Run
          </button>
        </div>
        <Editor
          height="100vh"
          theme="vs-dark"
          saveViewState={true}
          path={file.name}
          defaultLanguage={file.language}
          defaultValue={file.value}
          onChange={handleEditorChange}
          value={file.value}
        />
      </div>
      <div className={styles.websiteWindow} id="outputWindow">
        <div className={styles.buttonBlock}>
          <button className={styles.closeButton} id="closeWindow">
            <div>
              <FontAwesomeIcon icon={faCircleXmark} />
            </div>
          </button>
        </div>
        <iframe
          title="output"
          srcDoc={`
  <html>
    <body>${htmlCode}</body>
    <style>${cssCode}</style>
    <script>${jsCode}</script>
  </html>
`}
          className={styles.outputiframewindow}
        />
      </div>
    </>
  );
}

This is how our final project looks.

Conclusion

We have learned how to create a WebDev IDE on Next.js, we can see that we can run HTML, CSS and JavaScript in our IDE.

Further possible improvements include adding better UI/UX, adding saving code feature, uploading files, creating different themes and a lot more.

I also have a similar project with a lot of different features added you can check it out here https://ide.lamtell.com/.

You can check the code here - Github

An Intro to NIM: The Python-Like Programming Language Used By Malicious Ransomware Developers

Dexter — Wed, 12 Jul 2023 16:40:00 +0000

What if I tell you there is a language similar to Python in terms of syntax but closer to C++ or sometimes even better in terms of speed and these are just some of its charms and this is just tip of the iceberg

You would probably say that I am mad but wait we are in for a treat just bear with me.

So, what exactly is Nim?

Nim first version 0.8.2 was launched in the year 2008 it was developed by Andreas Rumpf. According to the official docs, "Nim is a statically typed compiled systems programming language. It combines successful concepts from mature languages like Python, Ada and Modula."

Some awesome features it offers.

Syntax is similar to Python that helps a lot of programmers while switching it surely helped me, we will see code examples to help you understand it visually.
You can compile your programs for most systems like windows, iOS, linux, android, Nintendo Switch, embedded systems this basically means that cross compilation is possible for many platforms. Go through this to find out more Nim Compiler User Guide
Inspired by C++ and Rust, Nim's memory management is deterministic and customizable with destructors and move semantics. It is ideal for hard-realtime embedded systems.
Nim can be used for all backend and frontend requirements because it can be compiled into C, C++, or JavaScript.

Example for Cross Compilation from windows

#To cross compile, use for example:
#The code will compile and give e executable for linux

nim c --cpu:i386 --os:linux --compileOnly --genScript myproject.nim

We can simply add C or C++ code in the same Nim file this help us in using Win-Api easily.
Its speed is comparable to C++ making it ideal for many task that are simply not possible with python because of its speed.

I think we have enough reasons to know that it’s something one should look into.

Installing NIM

Go to this link to install Nim.

nim-lang.org

once you have installed Nim you should be able to run nim --version without any problems.

You first line of Nim

# This is a comment

echo "Hello World"

To create an executable nim compile main.nim

We can run main.nim file from cmd or use nim compile --run main.nim this will create and run the executable.

Take input from cmd prompt.

var name: string = readLine(stdin)
echo "Hi, ", name, "!"

#Input Harry

#Output
Hi Harry

Some comparisons to see how awesome Nim is.

Source: https://github.com/lh3/biofast

We see that sometimes Nim is even faster than C++.

Before ending I would Like to Show one of my Own Creations that Got me to Nim. Caution use this at your own risk.

#This will encrypt each and every file in that folder given in the path variable.

import os
import strformat
import base64
import nimcrypto

func toByteSeq*(str: string): seq[byte] {.inline.} =
    @(str.toOpenArrayByte(0, str.high))

let
    password: string = "myKey" # Our secret key
    path: string = "path_of_folder_we_want_to_encrypt"

for file in walkDirRec path:
   let fileSplit = splitFile(file)
   if fileSplit.ext != ".encrypted":
    echo fmt"[*] Encrypting: {file}"
    var
        inFileContents: string = readFile(file)
        plaintext: seq[byte] = toByteSeq(inFileContents) 
        ectx: CTR[aes256]
        key: array[aes256.sizeKey, byte]
        iv: array[aes256.sizeBlock, byte]
        encrypted: seq[byte] = newSeq[byte](len(plaintext))
    iv = [byte 183, 142, 238, 156, 42, 43, 248, 100, 125, 249, 192, 254, 217, 222, 133, 149]
    var expandedKey = sha256.digest(password)
    copyMem(addr key[0], addr expandedKey.data[0], len(expandedKey.data))

    echo len(inFileContents)

    ectx.init(key, iv)
    ectx.encrypt(plaintext, encrypted)
    ectx.clear()

    let encodedCrypted = encode(encrypted)
    let finalFile = file & ".encrypted" 
    moveFile(file, finalFile)
    writeFile(finalFile, encodedCrypted)

In the end, I would like to say that Nim is an awesome language that has a lot of potentials and will surely make great use. I would like to say everyone who liked this blog should help the community grow and spread the word. It doesn't matter how good this language is if it is not used It will surely die. Make Nim Famous

Let's build a Google Maps clone with React, Leaflet, and OneSDK

Dexter — Mon, 15 May 2023 09:23:46 +0000

We will build a project similar to Google Maps. The project will cover some basic features of Google Maps, like pinpointing specific locations on the map or planning of routes between locations. Moreover, users can use geocoding to lookup the location of a postal address.

We will use React and React Leaflet on the frontend, and Node.js, Express.js, and Superface OneSDK on the backend.

You can find the final project on GitHub.

Front-end: Setting up a map with markers

Let’s start by creating an empty React project (using create-react-app):

Open your terminal and navigate to the directory where you want to create your project folder.
Run the following command to create a new React project (Replace <project-name> with the desired name for your project):
```
npx create-react-app <project-name>
```
Navigate into the project folder using the following command:
```
cd <project-name>
```
Open the project in your code editor.
In the src folder, locate the App.js file. This will be the main file where we will make changes for the project. Remove all code in this file.
Optionally remove all unnecessary files, such as test files, default logos etc.
Run the project:
```
npm start
```

Adding the map component

To add a map component, you have many options, like Google Maps or Mapbox, but these are not free. We will use Leaflet, an open-source JavaScript library. With Leaflet, you can easily create interactive maps and add markers, pop-ups, and other types of data visualizations. Leaflet support various providers for map assets, but we will stick with the default, OpenStreetMap.

Leaflet has many official and third party plugins and wrappers. Since we’re using React, we can use React Leaflet which provides components for rendering Leaflet maps in React.

First install leaflet, react-leaflet and leaflet-defaulticon-compatibility. The last package fixes compatibility with Webpack bundler (used by create-react-app) to correctly load images from Leaflet's package.

npm install react-leaflet leaflet leaflet-defaulticon-compatibility

Paste the following code inside App.css file:

/* in src/App.css */

.leaflet-container {
  width: 100vw;
  height: 100vh;
}

And finally, add the following code to App.js file and check if it works:

// src/App.js

import './App.css';

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet-defaulticon-compatibility';

function App() {
  return (
    <div className="App">
      <MapContainer center={[51.505, -0.09]} id="mapId" zoom={13}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </MapContainer>
    </div>
  );
}

export default App;

If you setup Leaflet correctly, you should see just a map on your page. ![Screenshot of website with map and zoom controls.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v6g5o3xdggkdkvtkhzr.png)

Adding markers on a map

To pinpoint locations on the map, we can use the Marker and Popup components from React Leaflet. The Marker component allows you to add a marker (pin) to a specific location on the map, while the Popup component displays additional information when the marker is clicked or tapped.

Add the following code in App.js:

// src/App.js

import './App.css';

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet-defaulticon-compatibility';

function App() {
  const position = [51.505, -0.09];
  return (
    <div className="App">
      <MapContainer center={[51.505, -0.09]} id="mapId" zoom={13}>
        <Marker position={position}>
          <Popup>Hello World</Popup>
        </Marker>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </MapContainer>
    </div>
  );
}

export default App;

Our map should have a marker and a message will show when we click on it. ![Screenshot of website with a map and a marker in the middle with a pop-up with text “Hello World”.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw17ylla4hrp2wq9uekn.png)

Back-end: Pinpointing location entered by the user

Now that we understand how to add markers, we can start by pinpointing an address entered by the user. This will involve using a geocoding API to convert the address into a set of coordinates, which can then be used to place a marker on the map.

We will set up a backend API for the map using Node.js and Express. Once a user enters an address, it is translated to location coordinates using a geocoding API – this part will be handled by Superface. We will use the returned coordinates to place the marker on a map.

Setting up the server project

Within the project folder, create a new folder named server to store the server-side code with empty package.json file.

mkdir server
cd server
npm init -y

Next, install Express.js to handle server-side requests.

# in server/ folder
npm install express

Finally, create an empty server.js file in this folder.

Implementing geocoding with OneSDK

I've decided to use Superface to handle API integration because it makes the process incredibly simple. With Superface, I don't have to deal with the hassle of API documentation and I can use multiple providers with the same interface. Additionally, the Superface catalog offers many ready-made API use cases, making it a valuable tool to have in your toolkit.

Start by installing Superface OneSDK into your server app:

# in server/ folder
npm i @superfaceai/one-sdk

Then implement a use case. We are going to use Geocoding use case with Nominatim provider. But you can, of course, use a different provider. Copy the example code into your server.js file and make a few changes, so we can send the information we will receive from the user:

// server/server.js

const { SuperfaceClient } = require('@superfaceai/one-sdk');
const sdk = new SuperfaceClient();
async function run(loc) {
  // Load the profile
  const profile = await sdk.getProfile('address/geocoding@3.1.2');

  // Use the profile
  const result = await profile.getUseCase('Geocode').perform(
    {
      query: loc,
    },
    {
      provider: 'nominatim',
    }
  );

  // Handle the result
  try {
    const data = result.unwrap();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

run('Taj Mahal');

Run this function and the coordinates will be returned:

# in server/ folder
$ node server.js
{ latitude: '27.1750123', longitude: '78.04209683661315' }

Adding location search

The initial step is to create an input field for the user to enter a location. Upon submission, we will send the location data via a fetch request and use it to determine the coordinates of that location.

Additionally, I am going to use Font Awesome to add icons to our project. This will make it visually appealing and add to its overall design:

cd .. # Go back from server to the main directory with React project
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome@latest

Now we can use the icons in our project. Paste the following code into App.js file:

// src/App.js

import './App.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLocationDot } from '@fortawesome/free-solid-svg-icons';

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet-defaulticon-compatibility';

function App() {
  const position = [51.505, -0.09];

  return (
    <div className="App">
      <form className="inputBlock">
        <input
          type="text"
          id="location"
          name="location"
          required
          placeholder="Enter location"
        />
        <button type="submit" className="addloc">
          <FontAwesomeIcon icon={faLocationDot} style={{ color: '#1EE2C7' }} />
        </button>
      </form>
      <MapContainer center={[51.505, -0.09]} id="mapId" zoom={13}>
        <Marker position={position}>
          <Popup>Hello World</Popup>
        </Marker>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </MapContainer>
    </div>
  );
}

export default App;

Paste the CSS code below into App.css:

/* add to src/App.css */

/* Location form */
.inputBlock {
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 2vw;
  bottom: 2vh;
  padding: 10px;
  z-index: 500;
}

.addloc {
  padding: 5px;
}

.inputBlock input {
  border: 2px solid rgb(41, 38, 38);
  font-size: 1.2rem;
}

.inputBlock button {
  background-color: #282c34;
  font-size: 1.5rem;
  border: 2px black solid;
}

The map should now include a search box in the bottom right corner. ![Screenshot of map with a search box in the bottom right corner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc022x3grzu9vs4ocsof.png)

To preserve the entered location and display it on the map as a pinpoint, we need to retrieve its coordinates using the fetch function and store them using the useState hook.

Paste the following code into App.js file:

// src/App.js

import './App.css';
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLocationDot } from '@fortawesome/free-solid-svg-icons';

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet-defaulticon-compatibility';

function App() {
  const [locationMarkers, setLocationMarkers] = useState([]);

  async function handleMarkerSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const inputLocation = formData.get('location');

    const res = await fetch(
      '/api/geocode?' +
        new URLSearchParams({ location: inputLocation }).toString()
    );
    if (!res.ok) {
      const err = await res.text();
      alert(`Something went wrong.\n${err}`);
    } else {
      const data = await res.json();
      let newLocation = {
        address: data.location,
        lat: data.coordinates.latitude,
        long: data.coordinates.longitude,
      };
      setLocationMarkers((locations) => [...locations, newLocation]);
    }
  }

  return (
    <div className="App">
      <form className="inputBlock" onSubmit={handleMarkerSubmit}>
        <input
          type="text"
          id="location"
          name="location"
          required
          placeholder="Enter location"
        />
        <button type="submit" className="addloc">
          <FontAwesomeIcon icon={faLocationDot} style={{ color: '#1EE2C7' }} />
        </button>
      </form>
      <MapContainer center={[51.505, -0.09]} id="mapId" zoom={13}>
        {locationMarkers.map((loc, key) => {
          return (
            <Marker key={key} position={[loc.lat, loc.long]}>
              <Popup>{loc.address}</Popup>
            </Marker>
          );
        })}
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </MapContainer>
    </div>
  );
}

export default App;

And the following code into server.js :

// server/server.js

const express = require('express');
const app = express();
const { SuperfaceClient } = require('@superfaceai/one-sdk');
const sdk = new SuperfaceClient();
const PORT = 5000;
app.use(express.json());

async function geocodeLocation(loc) {
  // Load the profile
  const profile = await sdk.getProfile('address/geocoding@3.1.2');

  // Use the profile
  const result = await profile.getUseCase('Geocode').perform(
    {
      query: loc,
    },
    {
      provider: 'nominatim',
    }
  );

  // Handle the result
  const data = result.unwrap();
  return data;
}

app.get('/api/geocode', async (req, res) => {
  try {
    const location = req.query.location;
    const coordinates = await geocodeLocation(location);
    res.json({ location, coordinates });
  } catch (error) {
    res.status(500).json(error);
  }
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Now we will need to start the backend server.

cd server/
npm start

To access the backend server from our React application, we can use requests proxying in Create React App. The server runs on port 5000, so we'll add the following line to the top package.json file in our main project:

"proxy": "http://localhost:5000"

You may need to restart create-react-app server. After doing that, you should be able to search for locations and see markers on your app.

Routing between two locations

Setting up Routing Machine

To create routes between two locations with Leaflet, we will use a Routing Plugin. This plugin will enable us to display routes on the map.

There are many plugins that we can use. I will go with Leaflet Routing Machine.

First, install the package:

npm install leaflet-routing-machine@3.2.12

Create a RoutingMachine.js file in src folder and copy and paste the below code. This will allow us to create route between the two different locations we pass to waypoints

// src/RoutingMachine.js

import L from 'leaflet';
import { createControlComponent } from '@react-leaflet/core';
import 'leaflet-routing-machine';
import 'leaflet-routing-machine/dist/leaflet-routing-machine.css';

const createRoutineMachineLayer = ({ waypoints }) => {
  const instance = L.Routing.control({
    waypoints: waypoints.map(({ latitude, longitude }) =>
      L.latLng(latitude, longitude)
    ),
    draggableWaypoints: false,
  });

  return instance;
};

const RoutingMachine = createControlComponent(createRoutineMachineLayer);

export default RoutingMachine;

Then, we will import this RoutingMachine.js component into our App.js file and provide it with the coordinates of two different locations as props.

Copy and paste the following code in App.js file:

// src/App.js

import './App.css';
import { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLocationDot, faRoute } from '@fortawesome/free-solid-svg-icons';

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet-defaulticon-compatibility';

import RoutingMachine from './RoutingMachine';

function App() {
  const [locationMarkers, setLocationMarkers] = useState([]);
  const waypoints = [
    {
      latitude: 51.505,
      longitude: -0.09,
    },
    {
      latitude: 51.467,
      longitude: -0.458,
    },
  ];

  async function handleMarkerSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const inputLocation = formData.get('location');

    const res = await fetch(
      '/api/geocode?' +
        new URLSearchParams({ location: inputLocation }).toString()
    );
    if (!res.ok) {
      const err = await res.text();
      alert(`Something went wrong.\n${err}`);
    } else {
      const data = await res.json();
      let newLocation = {
        address: data.location,
        lat: data.coordinates.latitude,
        long: data.coordinates.longitude,
      };
      setLocationMarkers((locations) => [...locations, newLocation]);
    }
  }

  return (
    <div className="App">
      <form className="inputBlock" onSubmit={handleMarkerSubmit}>
        <input
          type="text"
          id="location"
          name="location"
          required
          placeholder="Enter location"
        />
        <button type="submit" className="addloc">
          <FontAwesomeIcon icon={faLocationDot} style={{ color: '#1EE2C7' }} />
        </button>
      </form>
      <MapContainer center={[51.505, -0.09]} id="mapId" zoom={13}>
        {locationMarkers.map((loc, key) => {
          return (
            <Marker key={key} position={[loc.lat, loc.long]}>
              <Popup>{loc.address}</Popup>
            </Marker>
          );
        })}
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        {waypoints ? <RoutingMachine waypoints={waypoints} /> : ''}
      </MapContainer>
    </div>
  );
}

export default App;

With Routing Machine added, you should see a route between two static waypoints. ![Screenshot of map with two markers and a red route between them, with navigation instructions in top right corner.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bijg5ifszek60ugr78o.png)

Routing inputs

We will add input fields for the user to enter two distinct locations, the starting point and the final destination. Then we will ask for coordinates from the server using fetch and pass them as properties to the RoutingMachine.js component. We will also create another route in the server.js file to handle requests for calculating the route between the two locations.

Copy and paste the code in App.js:

// src/App.js

import './App.css';
import { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLocationDot, faRoute } from '@fortawesome/free-solid-svg-icons';

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet-defaulticon-compatibility';

import RoutingMachine from './RoutingMachine';

function App() {
  const [locationMarkers, setLocationMarkers] = useState([]);
  const [waypoints, setWaypoints] = useState();
  const [showRoutingForm, setFormView] = useState(false);

  useEffect(() => {}, [waypoints]);

  async function handleMarkerSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const inputLocation = formData.get('location');

    const res = await fetch(
      '/api/geocode?' +
        new URLSearchParams({ location: inputLocation }).toString()
    );
    if (!res.ok) {
      const err = await res.text();
      alert(`Something went wrong.\n${err}`);
    } else {
      const data = await res.json();
      let newLocation = {
        address: data.location,
        lat: data.coordinates.latitude,
        long: data.coordinates.longitude,
      };
      setLocationMarkers((locations) => [...locations, newLocation]);
    }
  }

  async function handleRouteSubmit(event) {
    event.preventDefault();
    // Reset previous waypoints
    if (waypoints) {
      setWaypoints();
    }
    // Hide the form
    setFormView(false);

    const formData = new FormData(event.target);
    const locations = formData.getAll('location');
    const res = await fetch('/api/route', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json;charset=UTF-8',
      },
      body: JSON.stringify({ locations }),
    });
    if (!res.ok) {
      const err = await res.text();
      alert(`Something went wrong.\n${err}`);
    } else {
      const data = await res.json();
      setWaypoints(data.waypoints);
    }
  }

  return (
    <div className="App">
      <form className="inputBlock" onSubmit={handleMarkerSubmit}>
        <input
          type="text"
          id="location"
          name="location"
          required
          placeholder="Enter location"
        />
        <button type="submit" className="addloc">
          <FontAwesomeIcon icon={faLocationDot} style={{ color: '#1EE2C7' }} />
        </button>
      </form>
      <div className="routeBlock">
        <div className="addRoutes">
          {showRoutingForm && (
            <form onSubmit={handleRouteSubmit}>
              <div className="posOne">
                <input
                  type="text"
                  name="location"
                  required
                  placeholder="Staring Point"
                />
              </div>
              <div className="posTwo">
                <input
                  type="text"
                  name="location"
                  required
                  placeholder="End Point"
                />
              </div>
              <button className="addloc">Find Path</button>
            </form>
          )}
          <FontAwesomeIcon
            icon={faRoute}
            style={{ color: '#1EE2C7' }}
            onClick={() => {
              setFormView((showRoutingForm) => !showRoutingForm);
            }}
          />
        </div>
      </div>
      <MapContainer center={[31.505, 70.09]} id="mapId" zoom={4}>
        {locationMarkers.map((loc, key) => {
          return (
            <Marker key={key} position={[loc.lat, loc.long]}>
              <Popup>{loc.address}</Popup>
            </Marker>
          );
        })}
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        {waypoints ? <RoutingMachine waypoints={waypoints} /> : ''}
      </MapContainer>
    </div>
  );
}

export default App;

Add the below CSS code in App.css:

/* add to src/App.css */
/* Routing form */
.routeBlock {
  position: absolute;
  left: 0.5vw;
  bottom: 2vh;
  z-index: 500;
  padding: 5px;
  font-size: 2rem;
  border: 2px solid rgb(41, 38, 38);
  background-color: #282c34;
}

.routeBlock input {
  font-size: 1rem;
}

And here’s the final version of server.js file:

// server/server.js

const express = require('express');
const app = express();
const { SuperfaceClient } = require('@superfaceai/one-sdk');
const sdk = new SuperfaceClient();
const PORT = 5000;
app.use(express.json());

async function geocodeLocation(loc) {
  // Load the profile
  const profile = await sdk.getProfile('address/geocoding@3.1.2');

  // Use the profile
  const result = await profile.getUseCase('Geocode').perform(
    {
      query: loc,
    },
    {
      provider: 'nominatim',
    }
  );

  // Handle the result
  const data = result.unwrap();
  return data;
}

app.get('/api/geocode', async (req, res) => {
  try {
    const location = req.query.location;
    const coordinates = await geocodeLocation(location);
    res.json({ location, coordinates });
  } catch (error) {
    res.status(500).json(error);
  }
});

app.post('/api/route', async (req, res) => {
  try {
    const locations = req.body.locations;
    if (locations.length !== 2) {
      res.status(422).json({ error: 'Expected 2 waypoints' });
      return;
    }
    const waypoints = await Promise.all(
      locations.map((location) => geocodeLocation(location))
    );
    res.json({ waypoints });
  } catch (error) {
    res.status(500).json(error);
  }
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Final file structure

google-maps-clone
├── package.json
├── package-lock.json
├── public
│   └── index.html
├── README.md
├── server
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
└── src
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js
    └── RoutingMachine.js

Conclusion

In this tutorial, we have learned how to create a Google Maps-like application using Leaflet and React. We've utilized Geolocation API to identify location coordinates and place markers, as well as creating a route between two different locations. You can find the final project on GitHub.

superfaceai / google-maps-clone

Let's build a basic Google Maps clone! Complementary code to the tutorial.

Google Maps clone with React, Leaflet, and OneSDK

A complementary code to the tutorial Let's build a Google Maps clone.

Provides the following features:

Displaying a map
Adding markers to the map using location search
Display route and routing instructions between two places

Uses the following libraries:

React with Create React App
Leaflet
- React Leaflet
- Leaflet Routing Machine
- leaflet-defaulticon-compatibility to fix icons bundling in Create React App
Express for backend
OneSDK with Geocoding use case

Uses the following providers:

OpenStreetMap map tiles
Nominatim for geocoding (via OneSDK)
OSRM for routing (via Leaflet Routing Machine)

Warning The choice of providers is for low volume, development purposes only. Leaflet Routing Machine recommends different routing provider for production. For geocoding, various other providers are supported.

Setup

Clone the repository

git clone https://github.com/superfaceai/google-maps-clone.git

Install dependencies for both the frontend and backend

cd google-maps-clone
npm install
cd server
npm install
cd ..

Usage

…

View on GitHub

There are many more features that can be added to enhance this map project. For example real-time tracking of the user's location, integrating voice assistance for routing, using IP geolocation API, customizing marker icons, and much more.

Check out more geocoding integrations

If you have suggestions on what features to add, or if you'd like to show how you've used this tutorial, leave a comment or come tell us on our Discord. Don't be shy!

Let's build a contact form with Next.js

Dexter — Thu, 29 Dec 2022 12:58:17 +0000

Most of the websites have a contact page where you can send a message to reach the owner. They look something like this:

In this article, we will create a similar form with React in Next.js. First, I will create a front-end part with the form, and then I will build an API route which will send the form to your email.

Setting up the application

First, let’s create a new Next.js project. We will create it in a contact-form folder, with JavaScript and ESLint enabled:

npx create-next-app contact-form --js --eslint

This will create the folder and installs all the dependencies.

Now enter the folder (cd contact-form) and start the development server:

npm run dev

Visit http://localhost:3000 to check the running application.

Creating the form

The main file where we are going to make changes is pages/index.js. Remove the original code inside the file and paste the following code:

import React from 'react';

export default function Home() {
  return (
    <form className="container">
      <h1>Get in touch</h1>
      <div className="email block">
        <label htmlFor="frm-email">Email</label>
        <input
          id="frm-email"
          type="email"
          name="email"
          autoComplete="email"
          required
        />
      </div>
      <div className="block phone">
        <label htmlFor="frm-phone">Phone</label>
        <input
          id="frm-phone"
          type="text"
          name="phone"
          autoComplete="tel"
          required
        />
      </div>
      <div className="name block">
        <div>
          <label htmlFor="frm-first">First Name</label>
          <input
            id="frm-first"
            type="text"
            name="first"
            autoComplete="given-name"
            required
          />
        </div>
        <div>
          <label htmlFor="frm-last">Last Name</label>
          <input
            id="frm-last"
            type="text"
            name="last"
            autoComplete="family-name"
            required
          />
        </div>
      </div>
      <div className="message block">
        <label htmlFor="frm-message">Message</label>
        <textarea id="frm-message" rows="6" name="message"></textarea>
      </div>
      <div className="button block">
        <button type="submit">Submit</button>
      </div>
    </form>
  );
}

This code creates a form with the following fields:

email
first name
last name
phone number
message

All fields are required except for the message.

To add style to the form, replace the contents of styles/globals.css file with the following code:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  background: #1e1e1e;
  min-height: 100vh;
  display: flex;
  color: rgb(243, 241, 239);
  justify-content: center;
  align-items: center;
}

.block {
  display: flex;
  flex-direction: column;
}

.name {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container {
  font-size: 1.3rem;
  border-radius: 10px;
  width: 85%;
  padding: 50px;
  box-shadow: 0 54px 55px rgb(78 78 78 / 25%), 0 -12px 30px rgb(78 78 78 / 25%),
    0 4px 6px rgb(78 78 78 / 25%), 0 12px 13px rgb(78 78 78 / 25%),
    0 -3px 5px rgb(78 78 78 / 25%);
}

.container input {
  font-size: 1.2rem;
  margin: 10px 0 10px 0px;
  border-color: rgb(31, 28, 28);
  padding: 10px;
  border-radius: 5px;
  background-color: #e8f0fe;
}

.container textarea {
  margin: 10px 0 10px 0px;
  padding: 5px;
  border-color: rgb(31, 28, 28);
  border-radius: 5px;
  background-color: #e8f0fe;
  font-size: 20px;
}

.container h1 {
  text-align: center;
  font-weight: 600;
}

.name div {
  display: flex;
  flex-direction: column;
}

.block button {
  padding: 10px;
  font-size: 20px;
  width: 30%;
  border: 3px solid black;
  border-radius: 5px;
}

.button {
  display: flex;
  align-items: center;
}

textarea {
  resize: none;
}

Our form should look something like this:

Now we need to find a way to store the input entered by the user. I will use FormData which is natively supported in all current browsers. It loads fields from the form, so they can be then submitted to the server.

Inside the pages/index.js file, paste the following code (notice the new handleSubmit function):

import React from 'react';

export default function Home() {
  async function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    console.log(data);
  }

  return (
    <form className="container" onSubmit={handleSubmit}>
      <h1>Get in touch</h1>
      <div className="email block">
        <label htmlFor="frm-email">Email</label>
        <input
          id="frm-email"
          type="email"
          name="email"
          autoComplete="email"
          required
        />
      </div>
      <div className="block phone">
        <label htmlFor="frm-phone">Phone</label>
        <input
          id="frm-phone"
          type="text"
          name="phone"
          autoComplete="tel"
          required
        />
      </div>
      <div className="name block">
        <div>
          <label htmlFor="frm-first">First Name</label>
          <input
            id="frm-first"
            type="text"
            name="first"
            autoComplete="given-name"
            required
          />
        </div>
        <div>
          <label htmlFor="frm-last">Last Name</label>
          <input
            id="frm-last"
            type="text"
            name="last"
            autoComplete="family-name"
            required
          />
        </div>
      </div>
      <div className="message block">
        <label htmlFor="frm-message">Message</label>
        <textarea id="frm-message" rows="6" name="message"></textarea>
      </div>
      <div className="button block">
        <button type="submit">Submit</button>
      </div>
    </form>
  );
}

Now when you attempt to submit the form, you should see FormData in developer console.

Submitting the form to API

We will submit the form data to the API with [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) – no need for additional dependencies.

The form submission logic goes to the handleSubmit function. Here is the complete code in pages/index.js:

import React from 'react';

export default function Home() {
  async function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    try {
      const response = await fetch('/api/contact', {
        method: 'post',
        body: new URLSearchParams(data),
      });
      if (!response.ok) {
        throw new Error(`Invalid response: ${response.status}`);
      }
      alert('Thanks for contacting us, we will get back to you soon!');
    } catch (err) {
      console.error(err);
      alert("We can't submit the form, try again later?");
    }
  }

  return (
    <form className="container" onSubmit={handleSubmit}>
      <h1>Get in touch</h1>
      <div className="email block">
        <label htmlFor="frm-email">Email</label>
        <input
          id="frm-email"
          type="email"
          name="email"
          autoComplete="email"
          required
        />
      </div>
      <div className="block phone">
        <label htmlFor="frm-phone">Phone</label>
        <input
          id="frm-phone"
          type="tel"
          name="phone"
          autoComplete="tel"
          required
        />
      </div>
      <div className="name block">
        <div>
          <label htmlFor="frm-first">First Name</label>
          <input
            id="frm-first"
            type="text"
            name="first"
            autoComplete="given-name"
            required
          />
        </div>
        <div>
          <label htmlFor="frm-last">Last Name</label>
          <input
            id="frm-last"
            type="text"
            name="last"
            autoComplete="family-name"
            required
          />
        </div>
      </div>
      <div className="message block">
        <label htmlFor="frm-message">Message</label>
        <textarea id="frm-message" rows="6" name="message"></textarea>
      </div>
      <div className="button block">
        <button type="submit">Submit</button>
      </div>
    </form>
  );
}

The handleSubmit sends data inside a POST request to the /api/contact route. We also wrap the FormData object in URLSearchParams to send data as application/x-www-form-urlencoded which is automatically decoded by Next.js API routes handler.

Handling form submission in the API route

Now we need to handle the form submission on the server. We are going to use Next.js API routes for that. API routes are located in pages/api folder. Let’s create pages/api/contact.js file which corresponds to the API route /api/contact.

First inside the pages/api/contact.js file paste the following code to test if we receive the data on the server.

export default function handler(req, res) {
  console.log(req.body);
  res.send(200);
}

Try submitting the form now, you should see the data logged on the terminal. And now we are getting to the juicy part.

Sending emails with SendGrid and Superface

When a user submits the contact form, we want to send the submitted information to the website owner. First, we need to pick some email providers and study their API and SDK. Or we can use Superface with any provider.

Superface makes API integrations super easy. We don’t have to deal with API docs, and I can use many providers behind the same interface. Furthermore, I can use more ready-made API use cases from the Superface catalog. It’s a tool worth having in your toolbox.

Set up SendGrid

I’m going to use SendGrid as an email provider with Superface. Create your account, get your API key with Full Access and verify Single Sender Verification.

On Superface side, pick the use case, i.e.: Send Email.

Sending emails from the API route

Superface use cases are consumed with OneSDK, so we will have to install it.

npm i @superfaceai/one-sdk

On Superface in Send Email use case, select sendgrid as a provider. We can use most of the code from the example in our API route handler, we just need to pass data correctly from the request.

Paste the following code into your pages/api/contact.js file:

const { SuperfaceClient } = require('@superfaceai/one-sdk');

const sdk = new SuperfaceClient();

// Just check if all required fields are provided
function formValid(body) {
  return body.email && body.phone && body.first && body.last;
}

export default async function handler(req, res) {
  const body = req.body;

  if (!formValid(body)) {
    res.status(422).end();
    return;
  }

  const profile = await sdk.getProfile('communication/send-email@2.1.0');
  const message = `
    Email: ${body.email}
    Phone: ${body.phone}
    Name: ${body.first} ${body.last}
    Message: ${body.message} 
    `;
  const result = await profile.getUseCase('SendEmail').perform(
    {
      from: process.env.FROM_EMAIL,
      to: process.env.TO_EMAIL,
      subject: 'Message from contact form',
      text: message,
    },
    {
      provider: 'sendgrid',
      security: {
        bearer_token: {
          token: process.env.SENDGRID_API_KEY,
        },
      },
    }
  );

  try {
    const data = result.unwrap();
    console.log(data);
    res.status(201).end();
  } catch (error) {
    console.error(error);
    res.status(500).end();
  }
}

You can notice that we are referring to some environment variables in the code (for example process.env.SENDGRID_TOKEN). We can store these in .env files. In the root of your project, create a .env.local file with the following contents (make sure to edit values):

# Email address verified in Single Sender Verification
FROM_EMAIL=from@example.com
# Email address where you want to send the submissions to
TO_EMAIL=to@example.com
# Sendgrid API key
SENDGRID_API_KEY=SG.abcdef...

Our app is ready. Run (or restart) the development server with npm run dev and try to submit the form!

Conclusion

We have learned how to create a form in Next.js, submit the form with FormData and fetch, handle the submission in the API route and send it through an email.

Further possible improvements include adding CAPTCHA or honeypot fields to prevent spam submissions, improving form data validation with checks of phone and email address, format the submission as HTML, or providing a nicer feedback to the user upon submissions.

Besides sending an email, we can do a lot more with submissions, like sending data to CRM or Slack, or handle newsletter subscriptions. But that’s for another time – follow our profile or sign up for our monthly newsletter, so you don't miss our future tutorials.

Creating a weather app with IP geolocation API in Node.js

Dexter — Fri, 04 Nov 2022 14:21:51 +0000

In this blog, we will learn how to integrate two APIs in a single project and make them talk to each other. We will create a Node.js app that will use an IP geolocation API and a weather API. I believe many developers created a weather app as one of their learning projects. Today, we can move a bit forward and add another API to make the weather app smarter.

In a typical weather app, you’d need to enter your location, but in our project, we will find out the current location using an IP geolocation API.

Below we have a basic structure of our app. We can see that there are three important steps involved:

Getting device’s IP address
Calling IP geolocation API with the IP address as a parameter and saving the returned object
Calling weather API with state and city as parameters and outputting the result to the user

Setting up the server

We are going to use Node.js and Express to create our app.

mkdir geo-wea
cd geo-wea
npm init -y
npm i express

We will use modern ES Modules. For Node.js to handle them correctly, go to package.json file and add "type": "module". The result should look something like this:

{
  "name": "geo-wea",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1"
  }
}

Create index.js file with the following code:

import express from 'express';

const app = express();
app.listen(3000, () => {
  console.log('Server listening on 3000');
});

Now to check if everything works, run the application:

node index.js

Extracting device's IP address

Every request a device sends to a server will always have an IP address of the device.

Now we need to read an IP address of the device connecting to our application. Express can read it from the incoming connection. Typically, our application will run behind a reverse proxy, which will pass the original IP address in HTTP headers. Express won’t read this header by default, but you can instruct it to trust the IP address passed in headers from the proxy:

app.set('trust proxy', true);

To learn more, check Public vs. Private IP Address: What's the Difference.

We can read the IP address from the ip property of the incoming request (req). Replace index.js with the following code:

import express from 'express';
const app = express();
app.set('trust proxy', true);

app.get('/', async (req, res) => {
  const ip = req.ip;
  res.send(ip);
});

app.listen(3000, () => {
  console.log('Server listening on 3000');
});

Now, when you visit your application running locally or on CodeSandbox, you should see your IP address.

Note: I am using CodeSandbox for this example because if I run the server on my PC, it would see me connecting from localhost or local IP address.

Installing Superface SDK

I am going to use Superface for API integration as it makes the integration super easy. Since we will use two APIs in this project, normally I’d have to go through two different API docs, but with the mighty power of Superface, I don’t need to. Learn one to conquer all.

First, install Superface OneSDK in your app:

npm i @superfaceai/one-sdk

We will ue the following use cases from the Superface catalog: IP geolocation lookup and Current Weather In City.

IP geolocation API

This allows us to identify the country, state, and city based on the IP address of your device. To find out more about IP geolocation, check my previous article.

Now we have to pick a provider to use. I will use ipdata. Create an account on ipdata.co to get your API key.

Back in Superface, select ipdata provider, copy and paste the code from the example into your index.js file. Replace <your apikey from ipdata> with the API key you got from ipdata and the public IP address you into the ipAddress property.

Here is the resulting code:

import express from 'express';
import { SuperfaceClient } from '@superfaceai/one-sdk';

const app = express();
app.set('trust proxy', true);

const sdk = new SuperfaceClient();

async function run(ip) {
  // Load the profile
  const profile = await sdk.getProfile('address/ip-geolocation@1.0.1');

  // Use the profile
  const result = await profile.getUseCase('IpGeolocation').perform(
    {
      ipAddress: ip,
    },
    {
      provider: 'ipdata',
      security: {
        apikey: {
          apikey: '<your apikey from ipdata>',
        },
      },
    }
  );

  // Handle the result
  try {
    const data = result.unwrap();
    return data;
  } catch (error) {
    console.error(error);
  }
}

app.get('/', async (req, res) => {
  res.send(await run(req.ip));
});

app.listen(3000, () => {
  console.log('SERVER RUNNING AT PORT 3000');
});

Now just run your app with node index.js, visit localhost:3000, and you should see a result:

Weather API

Moving on to the third step: calling the weather API with the data returned by IP geolocation API. This API will return to us the current weather in the city we provide. Find Get Current Weather In City in Superface catalog and choose a provider. For this tutorial, I will use openweathermap.

Create an account on OpenWeatherMap.

Same as before, copy and paste the code from the example. Replace <your apikey from openweathermap> with the API key you got from OpenWeatherMap and pass in the city you got from the call to Geocoding API. Rename the run function, to something more descriptive. Here’s the resulting code:

import express from 'express';
import { SuperfaceClient } from '@superfaceai/one-sdk';

const app = express();
app.set('trust proxy', true);

const sdk = new SuperfaceClient();

async function findCity(ip) {
  // Load the profile
  const profile = await sdk.getProfile('address/ip-geolocation@1.0.1');

  // Use the profile
  const result = await profile.getUseCase('IpGeolocation').perform(
    {
      ipAddress: ip,
    },
    {
      provider: 'ipdata',
      security: {
        apikey: {
          apikey: '9a511b6fc8334e1852cfbbd4ff3f1af3c42ed6abc75e96a1648b969a',
        },
      },
    }
  );

  // Handle the result
  try {
    const data = result.unwrap();
    return data;
  } catch (error) {
    console.error(error);
  }
}

async function weather(city) {
  // Load the profile
  const profile = await sdk.getProfile('weather/current-city@1.0.3');

  // Use the profile
  const result = await profile.getUseCase('GetCurrentWeatherInCity').perform(
    {
      city: city,
      units: 'C',
    },
    {
      provider: 'openweathermap',
      security: {
        apikey: {
          apikey: '9a7c7994ccda87a3f8bb2767d5ca48db',
        },
      },
    }
  );

  // Handle the result
  try {
    const data = result.unwrap();
    return data;
  } catch (error) {
    console.error(error);
  }
}

app.get('/', async (req, res) => {
  try {
    let city = await findCity(req.ip);
    res.send(await weather(city.addressLocality));
  } catch (error) {
    console.log(error);
  }
});

app.listen(3000, () => {
  console.log('SERVER RUNNING AT PORT 3000');
});

Now run your app with node index.js you should see the result:

You can find the final result on CodeSandbox.

Find location using IP address in Node.js

Dexter — Fri, 07 Oct 2022 07:24:19 +0000

Ever wondered why Google shows you content based on your location, or ads you see on websites are customized to your location? All this happens because of geolocation which makes it possible to identify the country, state and sometimes even the city based on your IP address of your device.

To get a device geolocation from an IP address, we can use services with access to different databases that have this information. One of the most used ones are Regional Internet Registries. There are five of these registries, each responsible for various parts of the world. Other than that, there are companies further improving this data (secondary sources).

Now we know what the IP geolocation is, why it is used, and how it works, we’ll now move to using it with Node.js and Express. I will build an API which returns data about my IP address. I will use ipdata as a data provider and Superface for communication with a 3rd party API.

Setting up the server

Create a new Node.js project in an empty folder:

mkdir IP-Geo
cd IP-geo
npm init -y
npm i express

Since we are using ES6, go to package.json file and add "type": "module" . The result should look something like this:

{
  "name": "ip-geo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1",
  }
}

Create index.js file with the following code:

import express from 'express';
const app = express()
app.listen(3000, () => {
    console.log("Server listening on 3000")
})

Now to check if everything works, run the application:

node index.js

Getting client public IP address

Now we need to read an IP address of the device connecting to our application. Express can read it from headers if it runs behind a proxy, which is a very common setup. To enable this, add the following line into the index.js file:

app.set("trust proxy", true);

Note: I am using Codesandbox for this example because if I run the server on my PC, it would see me connecting from localhost or local IP address. To learn more, check Public vs. Private IP Address: What's the Difference.

We can read the IP address from the ip property of the incoming request (req). Replace index.js with the following code:

import express from 'express';
const app = express();
app.set('trust proxy', true)

app.get('/', async (req, res) => {
    const ip = req.ip
    res.send(ip);
})

app.listen(3000, () => {
    console.log("Server listening on 3000")
})

Go to http://localhost:3000 and you see your IP address:

Integrating API to retrieve geolocation

Now we will integrate the API in our app to get geolocation from the IP we have extracted.

I am going to use Superface for API integration as it makes the integration super easy. I don’t have to deal with API docs, and I can use many providers using the same interface. Furthermore, I can use more ready-made API use cases from Superface catalog. It’s a tool worth having in your toolbox.

First, install Superface OneSDK in your app:

npm i @superfaceai/one-sdk

Then choose your use case. We are going to use IP geolocation lookup.

Now we have to pick a provider to use. I will use ipdata. Create an account on ipdata.co to get your API key.

Back in Superface, copy and paste the code from the example into your index.js file. Replace with the API key you got from ipdata and the public IP address you have extracted into the ipAddress property.

Here is the resulting code:


import express from "express";
import { SuperfaceClient } from "@superfaceai/one-sdk";
const app = express();
app.set("trust proxy", true);

const sdk = new SuperfaceClient();

async function run(ip) {
  // Load the profile
  const profile = await sdk.getProfile("address/ip-geolocation@1.0.1");

  // Use the profile
  const result = await profile.getUseCase("IpGeolocation").perform(
    {
      ipAddress: ip
    },
    {
      provider: "ipdata",
      security: {
        apikey: {
          apikey: "9a511b6fc8334e1852cfbbd4ff3f1af3c42ed6abc75e96a1648b969a"
        }
      }
    }
  );

  // Handle the result
  try {
    const data = result.unwrap();
    return data;
  } catch (error) {
    console.error(error);
  }
}

app.get("/", async (req, res) => {
  res.send(await run(req.ip));
});

app.listen(3000, () => {
  console.log("SERVER RUNNIHG AT PORT 3000");
});

Now just run your app with node index.js , go to http://localhost:3000/, and you should see the result.

You can find the resulting code on CodeSandbox and see it running here: https://forv0o.sse.codesandbox.io/

Checkout out this video to find out more on

Sending Email in Node.js

Dexter — Mon, 01 Aug 2022 02:10:00 +0000

Superface.ai is a language and a protocol for abstracting integrations to application use-cases. It allows use-case discovery and distribution of integration code at runtime.

Implementing API Integration becomes easy with Superface.ai because you just need to learn it and you can implement more just 40 use-cases without having to learn how to implement all of them separately.

Now I'll show you how you can send email with node.js using Superface.ai. First create a node.js package.json file using

npm init -y

Then you have to install the superface sdk you need to install this to use superface

npm install --save @superfaceai/one-sdk

Then choose your use-case we are going to use Send Email in the Communication section. Install communication/send-email for this use-case. Depending upon the what you want you can install different packages like for face detection computer-vision/face-detection etc.

npx @superfaceai/cli install communication/send-email

Now you have configure the provider you want to use I am going with sendgrid. First create your on sendgrid account get your api key and verify Single Sender Verification

npx @superfaceai/cli configure sendgrid -p communication/send-email
//use set for Win 10
export SENDGRID_TOKEN=<your-value-from-sendgrid>

I am using https://emailfake.com/ to get some temporary email. Some alternative options

https://10minutemail.com/

https://mytemp.email/

After setting up your provider copy paste the code from the example

const { SuperfaceClient } = require('@superfaceai/one-sdk');

        const sdk = new SuperfaceClient();

        async function run() {
          // Load the installed profile
          const profile = await sdk.getProfile('communication/send-email');

          // Use the profile
          const result = await profile
            .getUseCase('SendEmail')
            .perform({
              from: 'cedesdxesxd@24mail.top',
              to: 'cedesdxesxd@omdiaco.com',
              subject: 'Your order has been shipped!',
              text: 'Hello Cedes, your recent order on Our Shop has been shipped.',
            });

            try {
                const data = result.unwrap();
                console.log(data)
              } catch (error) {
                console.error(error)
              }
        }

run();

Everything is done now just run your code as we can see email is received

Now you can implement API integration for more than 40 use-cases learning just Superface.ai

To learn how to send email in Node.js

Original Blog - https://blog.lamtell.com/blog/superfaceai-new-era-for-api

Github Code - https://github.com/cigar-galaxy82/Email-Node.js