Today we’ll have a look at how easy it is to schedule zoom meeting into Angular. We will create a basic Angular app and set up a Node.js (Zoom Integration API) backend using Node, Express.js Let’s start with a bit of background
Prerequisites
There are some prerequisites for this article. You need to have Node js and Angular CLI installed. To follow along with this tutorial, you will need :
- Create Zoom Account
- Create Zoom JWT APP
- Basic knowledge of Node.js, Angular
Setting up Node API Server
We will set up a NodeJs server for managing REST API (Zoom Integration API ) in our Angular application to schedule Zoom meeting. run following command to initialize node project and install required dependencies to build node REST API server.
// to initialize project
npm init
// to install dependencies
npm install express --save
npm install request --save
npm install body-parser cors --save The above command will take some time to install the package. After the setup, you should have one directory node_modules and two files package.json.
Next, create file name it index.js inside the application folder and edit the index.js file to look like the code shown below:
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const request = require("request");
const app = express();
const port = 3000;
app.use(cors());
app.use(cookieParser());
app.use(bodyParser.json());
app.post("/schedule-meeting", (req, res) => {
// we will implement it later.
res.send('Hello World!')
});
app.listen(port, () =>
console.log(`Hello world app listening on port ${port}!`)
); Create API endpoint to schedule zoom meeting
Next, we’re going to create a simple API to schedule a zoom meeting.
app.post("/schedule-meeting", (req, res) => {
const playload = req.body;
const config = {
token:"<your zoom JWT app token>",
email: "<your registerd email id>",
};
try {
var options = {
url: `https://api.zoom.us/v2/users/${config.email}/meetings`,
method: "POST",
auth: {
bearer: config.token,
},
json: true,
body: {
start_time: playload.date,
duration: playload.duration,
topic: playload.topic,
type: 2,
},
};
request(options, (error, response, body) => {
console.log(response.statusCode);
if (!error && response.statusCode === 201) {
res.send({ message: "meeting has been successfully created " });
} else {
console.log(body);
res.send({ message: body.message });
}
});
} catch (e) {
res.status(500).send(e.toString());
}
}); Setting up Angular application
Create a base folder and navigate to the folder. Then, using a terminal or command prompt and run the following command:
ng new zoomapp The command will create an Angular app in the folder with preinstalled libraries required by an Angular app to run. get inside the project folder and create a component to schedule Zoom meeting. run the following command to create the component.
ng g c scheduleMeeting The following code snippet is an HTML template file. We’ll be creating the template for the schedule component. The below snippet includes HTML with Angular Material components (card, mat input, and date picker).
<mat-card class="meeting-container">
<mat-card-header>
<mat-card-title>Schedule Meeting</mat-card-title>
</mat-card-header>
<mat-divider></mat-divider>
<form class="form" [formGroup]="scheduleMeetingForm" (ngSubmit)="onSubmit()">
<mat-card-content>
<div class="full-width-element">
<mat-form-field appearance="outline" >
<mat-label>Topic</mat-label>
<input matInput placeholder="Topic" formControlName="name">
</mat-form-field>
</div>
<div class="inline-block-element">
<mat-form-field appearance="outline">
<mat-label>Date</mat-label>
<input matInput [matDatepicker]="picker" formControlName="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Time</mat-label>
<input matInput placeholder="Time" type="time" formControlName="time">
</mat-form-field>
</div>
<div class="inline-block-element">
<mat-form-field appearance="outline">
<mat-label>Duration (hours)</mat-label>
<input type="number" matInput placeholder="Duration" formControlName="duration_hours">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Duration (minutes)</mat-label>
<input type="number" matInput placeholder="Placeholder" formControlName="duration_minutes">
</mat-form-field>
</div>
</mat-card-content>
<mat-divider></mat-divider>
<mat-card-actions>
<button mat-button mat-raised-button color="primary">Save</button>
</mat-card-actions>
</form>
</mat-card> Put the following code in the schedule component.ts file. In the following code snippet, we have created an instance of a FormGroup and named it as scheduleMeetingForm. scheduleMeetingForm is our top-level FormGroup.
constructor(
private _fb: FormBuilder,
private _httpClient: HttpClient,
private _snackBar: MatSnackBar
) { }
ngOnInit(): void {
this.initForm();
}
private initForm(): void {
this.scheduleMeetingForm = this._fb.group({
name: ['', Validators.required],
date: ['', [Validators.required]],
time: ['', [Validators.required]],
duration_hours: ['', [Validators.required]],
duration_minutes: ['', [Validators.required]],
})
}
onSubmit() {
} Under the scheduleMeetingForm, we have five FormControl instances each representing the properties topic(zoom meeting topic), date (meeting date), time(meeting time), duration ( in an hour), and duration( in minutes).
Making It All Work Together
In the last step, we have created an HTML template for the schedule zoom meeting component. now we need to do is to create the onSubmit method in our component class.
onSubmit() {
if (this.isFormValid) {
this.scheduleMeeting();
}
}
private scheduleMeeting() {
const payloads = this.scheduleMeetingForm.value;
this._httpClient.post(`${environment.API_URL}/schedulemeeting`, payloads).subscribe((res: any) => {
this.displayMessage(res.message);
}, (error: any) => {
this.displayMessage(error.message);
})
}
private displayMessage(message: string) {
this._snackBar.open(message, "Okay", {
duration: 5000
});
}
private get isFormValid(): boolean {
return this.scheduleMeetingForm.valid;
} In the code above, scheduleMeeting method is called “/schedule-meeting” REST API endpoint to create zoom meetings and messages will be displayed based on the response code.
We are done with the configuration of the angular app, node API, and zoom create API . now you can start the application.
Run the appication
You can run the angular app with the command: ng serve and run the server with command: node index.js
// start angular app
ng serve
// run nodejs server
node index.js Related Post
We learned how to schedule zoom meetings with node and Angular in this tutorial. more Zoom and angular Posts.
Source code available for download
The source code is available on GitHub for the Zoom schedule meeting using Node js and Angular
URL: https://github.com/decodedscript/schedule-zoom-meeting-with-node