GitHub App to Build Form using Typeform and Probot
GitHub is a cloud-based software development website that uses Git as version control. Github is the brand ambassador of open source software development and gives developers the ability to collaborate on software development and host the source code as well. The code is hosted as the content of a repository. As the scope for Github increases, the Github apps have helped to reduce the complexity of software development, maintenance, and management.
Probot is a framework that allows to build Github Apps. It has a rich method library that can implement any github event response. Typeform helps to build engaging forms. Typeform also has an API platform as well, for programmatic form creation, deletion, and manipulation.
In this article, we will use Probot to build a Github app and integrate it with a typeform.
Optional software to be used: Postman(to experiment and work with Typeform API)
Framework used: Probot
We’ll also use the probot-commands and request npm module to input the command.
Initial setup of Github app
To setup the github app, one can go through the probot’s documentation. As setup is not the focus of this article, we’ll remix a Probot app on Glitch. The link for this setup can be found here.
The README.md in the Glitch remix has a fantastic guide on setting up the app.
To check for the proper app set up, run the default code that got supplied with the app install by making an issue on the repo(presuming the app is installed on the repo).
Output: The bot(github app) should write a comment like below.
If this is not the output, it means that the app is not properly installed and one should consult the docs here.
After the app setup is complete and initial tests are done(to ensure the app is configured properly and working), its time to install the npm modules that we’ll need.
We’ll need probot-commands and request module for this app. To install them, go to ‘package.json’ file from the navigation pane on the left side. On the top-left corner of the editor, find a button labeled ‘
Add Package‘. Using this button, add ‘
probot-commands‘ and ‘
request‘ to the app.
After these two modules are added, go to ‘index.js’ file(using the navigation pane in the left side) and add
on top of index.js file.
Setting up Typeform
We’ll use Typeform for this app. We’ll need a ‘Personal Access Token‘ to use Typeform in our app.
- First, go to Typeform and sign-up/login.
- Now, go to Settings and then to ‘Personal Access Tokens’ under Profile section.
- Alternatively, directly click here and set up the tokens.
- The token that you generate should be copied and stored somewhere for persistence. Use this token and add it to ‘.env’ file in the Glitch app
Now that app is working, probot-commands and request modules are set up, and typeform is properly integrated, we’ll have a look at the code.
Find the index.js file here(please note that these are code snippets and exactly copy-pasting this code might not work).
For this demo, to set up the ‘request'(that needs to be made to the Typeform servers to create the form), Postman(the software) is used. Besides this, this reference is used to create the form.
looking at the code(consult the index.js from here):
The form gets built.
Future scope/activity for you:
- add code to stop accepting responses to the form using ‘probot-scheduler‘
- think a more intuitive way to utilize typeform apiMy Personal Notes arrow_drop_up