How to Integrate Figma, Slack, and WhatsApp APIs in DhiWise?
DhiWise is a programming automation platform where developers can convert their designs into developer-friendly code for mobile and web apps. DhiWise automates the application development lifecycle and instantly generates readable, modular, and reusable code.
Figma is a collaborative browser-based interface that enables the creation of websites, applications, logos, and more. In other words, it’s one of the most revolutionary web-based graphics editing and user interface design application.
And so is Slack; as the messaging platform of choice for organizations. And to top it all off, there is WhatsApp, allowing you to share business and personal messages with others. With DhiWise, it is now possible to integrate the relevant platform-specific utilities with the application of choice.
Context of my application (Figtion):
- To develop a dashboard with all the Figma listings associated with my account.
- To enable sharing multiple links with multiple people across different platforms like Slack and WhatsApp.
- View comments and version updates by just clicking on the listing.
- View the Figma listing based on the Creation and Updation filter.
- Copy the link directly from the list without even requiring it to open.
Functionalities:
- Once logged into Figtion, the user is redirected to the dashboard on successful login.
- The dashboard consists of a list of the Figma files, which can be selected and shared on WhatsApp and Slack without requiring you to open the Figma file every time.
- Also, the version logs and the comments made on a particular Figma can be viewed from the list itself.
- The Figma link can be accessed directly without requiring you to open it using copy feature and open feature.
How I did with DhiWise:
- Import Figma
(i) The Figma I used is https://www.figma.com/file/SzJLpe8iXuH9v7qxOzgI48/Figtion?node-id=0%3A1
2. Set Navigations
(i) To navigate from the login screen to the dashboard, I have set up navigation on the click event.
(ii)To open a particular Figma, I have used URL Navigation.
3. API Integration
APIs that I have integrated into Figtion with DhiWise are:
(i) Login API.
(ii) Figma’s API for listing.
(iii) WhatsApp API for text sharing in URL
(iv) Slack webhooks API for sending a group message.
(v) Figma’s versioning API for the version logs.
(vi) Figma’s commenting API for the comments list.
4. Build Application
(i) After integrating all the APIs, I built the application to generate the application code.
(ii) The generated code is readable and easy to modify and scale.
5. Synced with GitHub
(i) Once the code is generated, one can push it to GitHub and even download it. That’s how the generated code is perfectly bestowed.
6. Deploy on Vercel
(i) Vercel directly integrates with GitHub. Therefore, I just generated and added my Vercel token from https://vercel.com/account/tokens. This opens up with the “Application Preview”.
7. Got the code on my machine.
I cloned the Git repository in my local machine and started working with the generated code.
Tech Insights of API Integration:
- Login
(i) About the API
- The Login API that I used is the API provided by DhiWise. I first built the request in the API Runner that is provided by DhiWise.
- The POST request goes this way: “https://nodedemo.dhiwise.co/device/auth/login”.
- The header has “Content-Type”: “application/json”.
- The body requires a username and password that should match login credentials.
- There are three ways to add an API in DhiWise; Through Postman Collection, by importing a cUrl, and by building requests.
- I built the request in the API Runner and it looked like this:
(ii)Integration in DhiWise
Click on the log-in button from the view to integrate the API. To integrate API on the click event, select “Create Action” -> “API Integration”
STEP 1:
-Step 1 is all about selecting the API to integrate and handling the request. Select the login API.
-To provide the request body with the input value, select the key username and password to be bound to the username and password present in the view.
- Therefore, select “View” from the dropdown.
- This opens with the view which allows the selection of the view to bind. Click on the username input field from it.
-Repeat the same steps for the password.
STEP 2:
-Step 2 is all about handling the API response.
-This API does not require handling any response, let’s move further toward handling the actions to be performed on Success and Failure.
STEP 3:
-Step 3 is about managing the actions to be performed on success and failure events.
-To navigate to the Dashboard page on successful login, select navigation from the dropdown and select the Dashboard page to navigate.
-To display an alert message to the user onFailure, select Show Alert from the dropdown, select Alert Dialog and enter the error message.
That’s it !! My logIn API is successfully integrated with DhiWise in just 2 minutes!
2. Listing Figma files:
Figma’s Developer documentation provides a list of open APIs that are quite easy to integrate. I integrated three Figma APIs.
a) API for Figma Listing.
b) API for fetching Comments.
c) API for fetching Version History.
a) API for Figma Listing.
(i) About the API
- I used Figmas REST API “https://www.figma.com/api/recent_files?org_id=null”. I imported the cUrl in the API Runner
- The request type is “GET”. The headers are as shown below.
- The response returned by this API is as shown below
- “Meta” returns an object which contains “recent files” as the array of objects. These objects individually contain the file details about each file.
- In DhiWise, the supported response types are objects, object of an object, an array of objects, an array of strings, and an array of integers. Therefore, the response returned by this API can be easily integrated with DhiWise.
- Since this API doesn’t provide the authority to be accessed by us, I created a proxy server that acts as an intermediary between a client requesting a resource and the server providing the resource.
(ii) Integration in DhiWise
- As I require to display the data on a successful Login, this API is required to be integrated with the Lifecycle method OnMount(). Therefore, go to “Life cycle action” from the menu on the left. Select API Integration.
STEP 1:
- Select your API from this list.
- Since this API does not require handling requests, switch to handle the response of the API.
- Since the key that I want to bind, is in the format of an array of objects. I need to make sure that the component with which I am binding needs to be a list/grid/slider.
-My component was a list component as per my requirement.
STEP 2: To bind the response to the view, select the response key and bind that to the View.
-Here, the key that I want to bind with the view is “name” which is present in Meta >> Recent Files.
-Select View from the dropdown. This opens up the view to bind. I repeated the above steps to bind “thumbnail_url” with the image
STEP 3: It’s not necessary always to handle actions on success and failure. Therefore, my API Integration is completed here!!
-Since DhiWise offers you the flexibility to modify by providing readable and structured code, I made the following changes in my code to access the API.
b) API for version history.
(i) About the API
- APIs used for “Version History” and “Comments” are taken from the official documentation of Figma “https://www.figma.com/developers/api”.
- I generated the Figma access token from the playground that they provide.
- I imported the cUrl in the “API Runner” of DhiWise.
- The response returned by the API is stored in “versions” which is an array of objects.
(ii)Integration in DhiWise.
- I integrated this API in the modal in the lifecycle event following the same steps as above.
- Once my API is integrated, I did the following changes as shown below because this API provides version details about a particular file. Therefore, once my API is successfully integrated and after the code is generated, I made the manual changes to pass files dynamically.
- That’s exactly how I integrated the version and comments API in DhiWise.
3. WhatsApp and Slack API Integration.
- For sharing multiple links on WhatsApp, I used Text sharing “https://api.whatsapp.com/send?text=mytext”
- For sharing multiple links on Slack, I used hooks. You can get more details about its usage from “https://api.slack.com/messaging/webhooks”
And that’s it. Once you follow each of the mentioned steps in the letter, you can seamlessly integrate the mentioned platform-specific APIs using DhiWise.
More Insights:
Below is the detailed video for this use case:
GitHub Code: https://github.com/DhiWise/figtion.git
About Me:
I’m a Software Developer from DhiWise👩💻. It’s a pro-code dev tool that generates production-ready code for trending technologies/frameworks. Sign up for free!🤘
You can find me on LinkedIn to stay updated with the latest tech updates of DhiWise. 😃
