Hey Mo 🫡 honestly thanks for being so efficient with your tickets so far! we're going to keep on the Zoom gears for this week's ticket. Now that we can get an access token and create meetings on the ithacacommunityrecoverytest@gmail.com account, we want to be able to update our meetings. The deadline for this ticket is April 25th @ 11:59pm, but let me know if you need any extension. Alright, let's get into the details!
Git Thangs
Make sure to run git checkout master and git pull origin. Make sure to also run yarn install and yarn dev.
Once you can locally run the application, please make a branch called zoom-update-meeting. Make all changes on this branch.
Zoom Fax
As a reminder, here are the credentials of our ICR gmail account for testing just in case you need it for anything:
Also as a reminder, the Zoom App we are using is Server-to-Sever OAuth, meaning we set this account such that we have permission and authentication abilities to perform whatever functions we need in the backend (getting meetings, creating a meeting, etc). It is a type of application that allows for server-to-server authentication without requiring user interaction for authentication purposes. So instead of authenticating each user using OAuth, our system authenticates using the credentials of a Zoom account and is granted a token that can be used to make API requests.
Well, now we have the access token! Now all that's left is to supply this token to API requests using the Zoom API to update a meeting given it's meeting_id (very similar to creating and getting a meeting).
File System (Not OS File Systems)
One minor thing to lastly do is to separate your GET and POST zoom meeting functions from previous ticket into two different files. In the frontend/api/zoom/ folder, please make a folder called /GetMeeting/ and add a file route.ts to it. Add your GET function to this file and change any imports as necessary (as well as the path in the your handleClick functions in frontend/app/createmeeting/page.jsx).
Patching 'em Meetings
If you have taken a look at the medium fidelities on the figma file, there are a lot of fields to fill in when both making a meeting but also editing one. But these are all still possible when creating a meeting using the Zoom API. However, in this ticket, we'll be focusing on a specific request body that I added in frontend/app/createmeeting/page.tsx in createZoomMeetingRequestBody. So don't worry about how the request body should look like. Similar to creating a meeting, we will be patching with this whole request body to replace the old Zoom meeting object. So one thing we do need to focus on is creating the PATCH function to facilitate the connection between our application and Zoom, specifically prompting their PATCH /meetings/{meetingId} endpoint.
In the frontend/api/zoom/ folder, please make a folder called /UpdateMeeting/ and add a file route.ts to it. Here is where we will be making a PATCH request to our desired endpoint. Please add this to the .env file:
This will show you how to use the Access Token when making the PATCH request. Oh, on the topic of Acess Tokens, whenever before making a PATCH request to edit a meeting, please generate an Access Token to use in the request body when making a request to Zoom API, like this:
cons req = {
method: 'PATCH',
// A non-existing sample userId is used in the example below.
url: {URL + endpoint},
headers: {
authorization: 'Bearer {Access Token here}',
},
};
When we call your PATCH function from the testing page, the request body will come with both the createZoomMeetingRequestBody as well as a meeting_id. Please separate these two, as they are used in different places (meeting_id in endpoint URL and create meeting request body in the request body). Similar to your previous POST create a meeting function, please call your GET get a meeting function using the meeting id and return a Response object with the Meeting data and a status code or just a failure status code. If you need further clarification about anything, lmk!
If you need help with implementation details or how it looks like in code, please refer to this repository as it also uses the server-to-server oauth pipeline. It however does not use Node.js and uses Axios and Express instead. But I recommend taking a look at the middlewares/ folder for making the header (bottom of tokenCheck.js) and routes/api/meetings.js for updating a new meeting. While I do eventually want to use Redis as shown in this repo, it is not a priority. So for now, we'll just generate an access token for every request and send it as the header. If you make an assumptions about the code, please make sure to list them in the PR.
Testing your Zooming Limits
Navigate to frontend/app/createmeeting/page.jsx. A few things to do to this file. Make another button called 'Update' near the 'Create' button. It will take in the same fields and useStates as the Create a Meeting function. However, this time, make a text field and useState for inputting a meeting_id. This is can go anywhere, but place it close to the update button. Please append this meeting_id to the request body to send to your PATCH route. Connect to another handleClick function that will call your PATCH edit a meeting endpoint that you created. This function should look similar to other handleClick functions we implemented in the TestPage. Following that structure. Then console.log() the returned data. If all works out, log into the ithacacommunityrecoverytest@gmail.com account and take a screenshot of the edited zoom meeting scheduled (please record the before and after times in screenshots). Also, please take a screenshot of the console output and put it in a PR, along with a 2-3 sentence description of what you did!
jeugarte
commented
6 months ago
Hey Mo 🫡 honestly thanks for being so efficient with your tickets so far! we're going to keep on the Zoom gears for this week's ticket. Now that we can get an access token and create meetings on the
ithacacommunityrecoverytest@gmail.comaccount, we want to be able to update our meetings. The deadline for this ticket is April 25th @ 11:59pm, but let me know if you need any extension. Alright, let's get into the details!Git Thangs
Make sure to run
git checkout masterandgit pull origin. Make sure to also runyarn installandyarn dev.Once you can locally run the application, please make a branch called
zoom-update-meeting. Make all changes on this branch.Zoom Fax
As a reminder, here are the credentials of our ICR gmail account for testing just in case you need it for anything:
Also as a reminder, the Zoom App we are using is Server-to-Sever OAuth, meaning we set this account such that we have permission and authentication abilities to perform whatever functions we need in the backend (getting meetings, creating a meeting, etc). It is a type of application that allows for server-to-server authentication without requiring user interaction for authentication purposes. So instead of authenticating each user using OAuth, our system authenticates using the credentials of a Zoom account and is granted a token that can be used to make API requests.
Well, now we have the access token! Now all that's left is to supply this token to API requests using the Zoom API to update a meeting given it's meeting_id (very similar to creating and getting a meeting).
File System (Not OS File Systems)
One minor thing to lastly do is to separate your GET and POST zoom meeting functions from previous ticket into two different files. In the
frontend/api/zoom/folder, please make a folder called/GetMeeting/and add a fileroute.tsto it. Add your GET function to this file and change any imports as necessary (as well as the path in the your handleClick functions infrontend/app/createmeeting/page.jsx).Patching 'em Meetings
If you have taken a look at the medium fidelities on the figma file, there are a lot of fields to fill in when both making a meeting but also editing one. But these are all still possible when creating a meeting using the Zoom API. However, in this ticket, we'll be focusing on a specific request body that I added in
frontend/app/createmeeting/page.tsxincreateZoomMeetingRequestBody. So don't worry about how the request body should look like. Similar to creating a meeting, we will be patching with this whole request body to replace the old Zoom meeting object. So one thing we do need to focus on is creating the PATCH function to facilitate the connection between our application and Zoom, specifically prompting theirPATCH /meetings/{meetingId}endpoint.In the
frontend/api/zoom/folder, please make a folder called/UpdateMeeting/and add a fileroute.tsto it. Here is where we will be making a PATCH request to our desired endpoint. Please add this to the.envfile:Please once again use the base URL of the Zoom API endpoint in .env file. To reach the endpoint, please refer the documentation here: https://developers.zoom.us/docs/api/rest/reference/zoom-api/methods/#operation/meetingUpdate
This will show you how to use the Access Token when making the PATCH request. Oh, on the topic of Acess Tokens, whenever before making a PATCH request to edit a meeting, please generate an Access Token to use in the request body when making a request to Zoom API, like this:
When we call your PATCH function from the testing page, the
requestbody will come with both the createZoomMeetingRequestBody as well as a meeting_id. Please separate these two, as they are used in different places (meeting_id in endpoint URL and create meeting request body in the request body). Similar to your previous POST create a meeting function, please call your GET get a meeting function using the meeting id and return a Response object with the Meeting data and a status code or just a failure status code. If you need further clarification about anything, lmk!If you need help with implementation details or how it looks like in code, please refer to this repository as it also uses the server-to-server oauth pipeline. It however does not use Node.js and uses Axios and Express instead. But I recommend taking a look at the
middlewares/folder for making the header (bottom oftokenCheck.js) androutes/api/meetings.jsfor updating a new meeting. While I do eventually want to use Redis as shown in this repo, it is not a priority. So for now, we'll just generate an access token for every request and send it as the header. If you make an assumptions about the code, please make sure to list them in the PR.Testing your Zooming Limits
Navigate to
frontend/app/createmeeting/page.jsx. A few things to do to this file. Make another button called 'Update' near the 'Create' button. It will take in the same fields and useStates as the Create a Meeting function. However, this time, make a text field and useState for inputting a meeting_id. This is can go anywhere, but place it close to the update button. Please append this meeting_id to the request body to send to your PATCH route. Connect to another handleClick function that will call your PATCH edit a meeting endpoint that you created. This function should look similar to other handleClick functions we implemented in the TestPage. Following that structure. Then console.log() the returned data. If all works out, log into the ithacacommunityrecoverytest@gmail.com account and take a screenshot of the edited zoom meeting scheduled (please record the before and after times in screenshots). Also, please take a screenshot of the console output and put it in a PR, along with a 2-3 sentence description of what you did!