DEV Community

Zoom profile image just-zoomit
just-zoomit for Zoom

Posted on • Edited on

Part 1: Section 1 - Building a meeting application in React with Zoom APIs and SDKs

About The Project

Welcome to my blog! I'm so happy you are interested in learning how to build on the Zoom Developer platform. In this blog, we'll be exploring Zoom Developer tools and showing you how to embed a Meeting Conference solution in your very own React Application. We'll be using Zoom's Rest APIs and Meeting SDK to integrate the Zoom Meeting SDK application into a website.

This blog is going to be a two-part series, and in each part, we'll be covering different aspects of the project. Here is the break down:

  • The first part, we'll start with setting up the Node Js express backend,adding Zoom's Rest API, and the Meeting SDK JWT endpoint used for authorized use of the Meeting SDK.

  • The second part, we'll move on to setting up the frontend, then we'll finish by building out the different components.

Throughout the blog post, I'll also be including links to the specific Zoom documentation that we'll be using, so you can easily reference it while building your project. So, don't worry if you're new to building apps with Zoom Developer tools, we've got you covered. We'll be explaining how React JS, Node JS, the Express JS Web Framework, and Zoom Developer tools can help you embed the Zoom Meeting and Webinar experience in your app or website.

Here's a sneak peek of what you'll be creating:

Built With

  • React
  • Node.js / Express
  • Zoom Developer Tools:
    • Rest APIs & Meeting SDK

Prerequisites

Getting Started

Before building with Zoom developer tools, you will need to create a Zoom account, a Zoom Marketplace server-to-server app for using Zoom Rest APIs, a Meeting SDK app to authorize your Meeting SDK, and also you need to have Node installed locally.

Need to create a Zoom account? Don't worry, you can find the links to the documentation to guide you through the process below. If you have already installed node and meet the prerequisites, you are ready to get started. Let's go!

Step 1 — Setting Up the Backend

With a React front-end connected to a Node.js / Express backend server, you've got everything you need to embed Zoom Meeting Conference into your application with ease and efficiency! Let's start by setting up the backend.

Open your terminal and create a new file directory in any location on your local machine that you find convenient. You can name it whatever you'd like, but for this example, we'll call it "zoom-clone".



  mkdir zoom-clone
Enter fullscreen mode Exit fullscreen mode

Now, enter into that file directory:



  cd zoom-clone
Enter fullscreen mode Exit fullscreen mode

The next step is to initialize the project with a package.json file. This file will contain some information about your app and the dependencies that it needs to run. In your text editor, run the following command : 



 $ npm init
Enter fullscreen mode Exit fullscreen mode

When prompted enter the package name and entry point for incoming requests:




$ package name: zoom-clone-production #Add This
$ version: (1.0.0) 
$ description: 
$ entry point: (index.js) server.js #Add This
$ test command: 
$ git repository: 
$ keywords: 
$ author: Your Name.
$ license: (ISC)
Enter fullscreen mode Exit fullscreen mode

Should now see the package.json



{
  "name": "zoom-clone",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Your Name",
  "license": "ISC"
}
Enter fullscreen mode Exit fullscreen mode

Step 2 — Setting Up the Node Server

To run your JavaScript code on the backend, you need to spin up a server that will compile your code. This tutorial uses a Express server with Node.js HTTP framework. Why ? Because it handles a lot of things out of the box and requires little code to create fully functional RESTful APIs.

To use Express, install it using npm. We will also install cors which is package that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.



  npm i express cors
Enter fullscreen mode Exit fullscreen mode

Now, create a file named server.js inside, this will be the entry point. It will handle the routing of incoming requests.



  touch server.js
Enter fullscreen mode Exit fullscreen mode

In the server.js file, type the following code and save. 



const express = require("express");

const app = express();
const cors = require("cors");
app.use(cors())

app.use(express.json());

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

const port =  30010;

app.use((req, res, next) => {
  res.send('Welcome to Express');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});
Enter fullscreen mode Exit fullscreen mode

The first two lines of the code import the express module and create an Express app, named "app". This app has methods for routing HTTP requests, configuring middleware, and rendering HTML views. CORS is enabled below that to handle issues when accessing the API from different domains. The middle part of the code defines a route using the app.get() method, which returns the string "Backend is Working!" when an HTTP GET request is made to the site root. The last block starts the server on port 30010, prints a message to the console, and returns the string "Server is running on port 30010". The example response can be seen by visiting localhost:30010 in the browser

It’s time to start your server to see if it works. Open your terminal in the same directory as your server.js file and type:



  node server.js
Enter fullscreen mode Exit fullscreen mode

Navigate to http://localhost:30010/, you should see the following in your browser: 



Welcome to Express
Enter fullscreen mode Exit fullscreen mode

Start server from the root folder

Right now, you have to restart the server every time a change is made. To automatically see updates, let's install nodemon to automatically restart Web Server.

Create a new directory named backend for your project and change into the new directory:



//
mkdir backend
cd backend
Enter fullscreen mode Exit fullscreen mode

Then add the script server.js file inside, and then from the root run install nodemon as dependencies:



npm i nodemon
Enter fullscreen mode Exit fullscreen mode

Then in your package.json add a start property to the script object call nodemon to start the server :



...

 "scripts": {
    "start": "nodemon backend/server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

...
Enter fullscreen mode Exit fullscreen mode

Now, from the root, test for automatically Web Server restart: 



  npm run start
Enter fullscreen mode Exit fullscreen mode

If everything goes well, you should see the Server is running on port 30010 in your terminal and 'Welcome to Express' in your browser .

Terminal 



#Terminal OutPut: 

➜  zoom-clone-production npm run start

> zoom-clone-production@1.0.0 start
> nodemon backend/server.js

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node backend/server.js`
Server running on port 30010
Enter fullscreen mode Exit fullscreen mode

Browser 




 Browser URl : http://localhost:30010/api

 Welcome to Express
Enter fullscreen mode Exit fullscreen mode

Step 3 — Zoom Developer Tools Utilities

To use Zoom's Rest API and Meeting SDK in your app or website, there are a few things we'll need to handle on the server-side app:

1.) Generating a Meeting SDK JWT Signature for authorized use of the Meeting SDK.

2.) Obtaining a Zoom Access Token to authenticate and authorize users to make requests.

The Zoom Meeting SDKs use a Meeting SDK key and secret to generate a SDK JWT for authorized use of the Meeting SDK. And the Zoom API uses the OAuth 2.0 authorization framework (rfc6749) to authenticate and authorize users to make requests. If you're new to Meeting SDKs authorization and OAuth 2.0, don't worry! I'll be providing links to the documentation to help you understand it better.

Setup .env file

It is important to keep API keys and other sensitive information in a separate file. It is also best practice to keep this information separate from version control for security reasons. The .env file provides a centralized location for storing environment variables, allowing for easy access and management of sensitive information. Additionally, using a .env file helps to keep sensitive information organized and secure, ensuring that it is not accidentally committed to version control.

To implement this solution, let's add a create a .env file in the root of the app:



  touch .env
  npm i dotenv
Enter fullscreen mode Exit fullscreen mode

Then, add your variables and values to it:



PORT = 30010
Enter fullscreen mode Exit fullscreen mode

Now, in the backend/server.js, import dotnet.env: 



const express = require("express");
const app = express();

const cors = require("cors");
const dotenv = require("dotenv");

dotenv.config();
const port = process.env.PORT || 30015;
app.use(cors())
app.use(express.json());

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.use((req, res, next) => {
  res.send('Welcome to Express');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});
Enter fullscreen mode Exit fullscreen mode

Structure backend folders

When it comes to structuring the backend folders for a Node.js Express application that integrates with a third-party API, it's important to organize your code into separate folders to make it easier to manage and maintain. By breaking your code into smaller, more manageable pieces, you can ensure that your code is easy to understand and debug. So let’s create the following folders directories:

  • routes - contains the routing logic for your application.

  • api - contains API calls to Zoom Rest API services

  • zoomControllers - contain business logic functions for making API calls or processing data

  • middleware - contains the middleware functions for your application

Create API Directory

Create API directory along with the associated api.js file.



// Working Directory : backend/

mkdir api
cd api
touch zoomAPI.js
Enter fullscreen mode Exit fullscreen mode

Within the API folder, add the following code to the zoomAPI.js file.



 // Working Directory : backend/api/
 // File: zoomAPI.js


 const thirdPartyAPICall = () => {
    try {

        // Make API Call Here 
      return "Third Party API Call";
    } catch (err) {
      // Handle Error Here
      console.error(err);
    }
  };

  module.exports = {
    thirdPartyAPICall,
  };
Enter fullscreen mode Exit fullscreen mode

Create controllers Directory

Create controllers directory along with the associated zoomControllers.js file. 



// Working Directory : backend/
// File: zoomControllers.js

mkdir controllers 
cd controllers
touch zoomControllers.js
Enter fullscreen mode Exit fullscreen mode

Within the Controllers folder,add the following code to the zoomControllers.js file.



// Working Directory : backend/controllers/
// file: zoomControllers.js

const asyncHandler = require("express-async-handler");
const {
  thirdPartyAPICall,
  } = require("../api/zoomAPI.js");


const ThirdPartyAPICall = asyncHandler(async (req, res) => {

    const thirdPartyAPI = thirdPartyAPICall();

    if (thirdPartyAPICall === undefined) {
        res.status(400);
        throw new Error("No API Call found");
      } else {
        res.status(201).json({ thirdPartyAPI });
      }
  });

  module.exports = {
    ThirdPartyAPICall,
  };
Enter fullscreen mode Exit fullscreen mode

Create routes Directory

Create routes directory along with the associated zoomRoutes.js file.



// Working Directory : backend/
// File: zoomRoutes.js

mkdir routes 
cd routes
touch zoomRoutes.js
Enter fullscreen mode Exit fullscreen mode

Within the routes folder,add the following code to the zoomRoutes.js file.



// Working Directory : backend/routes/
// file: zoomRoutes.js

const express = require('express');
const router = express.Router();
const {

    ThirdPartyAPICall,

  } = require("../controllers/zoomControllers.js");

router.route('/').post();

// Get routes Test with Postman
router.route("/thirdparty").get(ThirdPartyAPICall);

module.exports = router; // Export the router so it can be used in server.js
Enter fullscreen mode Exit fullscreen mode

In the backend/server.js, add this following line: 



...
const zoomRoutes = require("./routes/zoomRoutes")

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.use("/api/zoom", zoomRoutes); // Add this line

...
Enter fullscreen mode Exit fullscreen mode

Backend folder structure

Here's how the backend folder structure should look:



backend/
    api/
        zoomAPI.js
        ...
    controllers/
        zoomControllers.js
        ...
    middlewares/
        ...
    routes/
        zoomRoutes.js
        ...
    server.js
 node_modules
 .env
 .gitignore
 package.lock.json
 package.json
 README.md
Enter fullscreen mode Exit fullscreen mode

Be sure to keep the API keys and other sensitive information in a .env file, and not to include it in version control.

Testing the API 



npm i express-async-handler
npm run start
Enter fullscreen mode Exit fullscreen mode

Now, open postman, create a GET method and navigate to http://localhost:30010.

Image description

Test all the API endpoints and make sure they are working. For the endpoints that require body, send JSON back with the necessary fields since it’s what you set up in your code.

Sample GET request:



GET localhost:30010/api/zoom/thirdparty
Body
raw
Enter fullscreen mode Exit fullscreen mode

Sample GET value:



{
    "thirdPartyAPI": "Third Party API Call"
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

In this tutorial, you were guided through the process of setting up Node.js Express and organizing your files in a way that makes maintenance a breeze. You also learned how to use the .env file to securely store sensitive information such as API keys and secrets.

In the next tutorial, you'll delve deeper into the application by adding the backend logic. See you in the next tutorial.

Top comments (3)

Collapse
 
usamawizard profile image
USAMA •

Thanks for the blog post , It helped me a log in understanding the SDK , I personally have been using AntMedia server for my conferencing need.
It also provided me with flutter sdk through which I was very easily able to ship my solution to customers on android as well as IOS. I just curious does Does Zoom SDK provides flutter SDKs ?

Collapse
 
passion117 profile image
passion117 •

Thanks
I want to learn 2 part.
I mean I want to learn to develop frontend.
Thanks

Collapse
 
himansh34713662 profile image
Himanshu Soni •

where is link for next tutorial

Read next

bryan_alejandrofuentesg profile image

Post de prueba

Bryan Alejandro Fuentes Guzman -

amaresh_adak profile image

Stop Fighting with Media Queries! Use CSS Container Queries Instead

Amaresh Adak -

khalid7487 profile image

Passing pros child to parent component in react typescript

Md. Khalid Hossen -

erikaheidi profile image

Working with Git Branches and Pull Requests

Erika Heidi -