How to Integrate Typeform, Telegram, and Google Sheets APIs in DhiWise?

As a startup, when was last you sent surveying forms to your user base? If it has been a while, you can always get the ball rolling by integrating platform-independent surveys with your mobile application. And if you think it is too much work, DhiWise has your back — allowing you to access most APIs and options without looking elsewhere.

DhiWise is a programming 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.

Typeform is a platform for building forms and managing surveys with ease. With Typeform, it’s effortless to create a form and share it. Also, the responses collected from the form are readable and organized enough to make decisions.

Telegram is a freemium cross-platform cloud-based instant messaging service. Some of the most amazing features of Telegram are unlimited server storage, media compression, group member number capacity, channel creation, multi-platform support, secret chats, bots, voice and video calls, and much more. This makes it one of the most widely used applications.

Google Sheets allows users to create and collaborate on online spreadsheets in real time from any device. It helps in making data-driven decisions and analyzing them to the best of the view. Its smart AI, accessible sharing facility, and speedy integrations with other Google apps make it handier to use.

About the System:
A Survey Management System uses Typeform APIs to create a form and share it instantly to the respective Telegram group using Telegram APIs at the click of a button.

-Furthermore, responses received from the Typeform can be synced to Google Sheets.

-Also, messages can be sent to the Telegram group.

Functionalities:

One can log into Survey Management System using Google Authentication, and on successful login, the user is redirected to the dashboard.

The Dashboard is the space that enables form creation. It has a list of options like radio, dropdown, rating, textarea, etc that can be used as form fields.

Once the form is created, it can be shared easily to Telegram just with a click or can generate a link and share it with the group from the system itself. Moreover, messages too can be sent to the group.

Also, the responses received from the Typeform can be synced to Google Sheets making it easy to view and share.

How I did with DhiWise:

1. Import Figma

• The Figma I used: https://www.figma.com/file/Vgr9yGWjcB1ye6OtrMRMjr/Survey-Management-System?node-id=0%3A1

2. Set navigations

• To navigate amongst the web pages, I have set up navigation amongst them.

3. API Integration

• APIs that I have integrated Survey Management System with DhiWise are:

(i) Typeform APIs for form creation.

(ii) Telegram APIs for sending messages.

(iii) Typeform APIs for retrieving responses.

(iv) Google Sheets API for writing data to Google Sheets

4. Build Application

• After integrating all the APIs, I built this application to generate the code.
• The generated code is readable and easy to modify and scale.

5. Synced with GitHub

• Once the code is generated, one can push it to GitHub and download it. That’s how the generated code is perfectly bestowed.

6. Deploy on Vercel

• 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:

1. Login

(i)Google Authentication

• Setting up Google Authentication manually would take around a handsome amount of time.
• With DhiWise, this can be done in just less than 5 minutes. All you need to do is generate a Client Id from the Developers Console and set it in the .env file after building the application and downloading it.

(ii)Integration in DhiWise

STEP 1: Click on the log-in button from the view to do authentication. To perform “authentication” on the click event, select “Create Action” -> “Authentication”.

Setting action

STEP 2: Select authentication type as “Google” and you’re good to go!

Google Auth

2. Typeform API for form creation:

(i) About the API

• I used the Typeform APIs. “https://api.typeform.com/forms”. I built this request in the “API Runner”. The request type is “POST”. The header requires “Content-Type”: “application/JSON”
• The request body contains all the form data we require to send to the server to create a form.
• The main field “title” stands for Form Title.
• It further contains “fields” as an array of objects. This contains “type” as to what is the field type and “title” as the name of the question. A type like “multi-choice” has properties as an object.
• The response returned by this API is as shown below.

• In DhiWise, the supported response types are object, the 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.

(ii) Integration in DhiWise

• As I require to call this API on the “Finish” button, after adding all the fields. Therefore, to do so

STEP 1: Click on the finish button from the view to integrate API on the click event.

- To integrate API on the click event, select “Create Action” -> “API Integration”

- This opens up with a list of APIs. Select your API from this list.

- This API requires handling requests in the request body, but the values will differ each time. Therefore, I’d manually manage the request body once the application is built and downloaded.

STEP 2: Once the request is managed, I need to handle the response. Since the key that I want to bind is in the format of an object. I want to bind the form link i.e “display” field with the textbox. This will be hidden by default. It becomes visible when the form is posted!

3. Telegram API for sending group messages.

(i) About the API

• To consume the API, I’ve set up a bot in Telegram. For more details visit “https://core.telegram.org/bots/api”
• I used the Telegram APIs. “https://api.typeform.com/forms”. I built this request in the “API Runner”. The request type is “GET”. The header requires chat_id and text as “Query Parameters”.
• The response returned by this API is as shown below. It returns the details of the sender, the chat details, and the message details.

The response returned by the API

(ii)Integration in DhiWise.

• I integrated this API into the success of the Typeform API.
• The steps I followed for the API Integration are the same as above. It is the concept of “Nested API Integration”.
• Once my API is integrated, I changed to dynamically pass the link in Telegram’s API request to share it as a message in the group.

4. GoogleSheet’s API for syncing Typeform’s response to Google Sheets.

(i)About the API

• To write Typeform’s response value to Google Sheets, the following API has been used.
• “https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}”
• The method of the request is “PUT”.
• This API requires OAuth2 authentication which I’d set up in Postman.

• The request body would require “range” referring to the range of cells in the Google Sheets, “majorDimension” refers to the dimension as in rows or columns and values refer to the data to be written in the Google Sheets.
• The response returned by this API is as shown below.

(ii)Integration in DhiWise.

• I integrated this API into the success of the Typeforms response API.
• I integrated this API with the concept of “Nested API Integration” following the above steps.
• Once my API is integrated, I made the following changes as shown below in the request and response to pass the data in Google Sheet’s API request dynamically.

Conclusion

With DhiWise by your side, you can easily integrate the requisite survey management features with the concerned application. And that’s not it. You can even ensure that multiple survey management platforms work in sync regardless of the content you offer to the users to engage with. Starting from Typeform to Telegram to Google Sheets, DhiWise and its love for seamless API integrations have you covered.

Get your hands on the code:

GitHub Code: https://github.com/DhiWise/Survey-Management-System.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. 😃