Getting Started with your UI App
A Gtmhub UI app is a web application that loads within the context of a Gtmhub account and enables users to interact with Gtmhub using your app. The technology you pick when developing your UI App is up to you. In the end all that really matters is for you to provision an http server which serves your UI app static content on a public URL which Gtmhub will use to load it.
Building a Gtmhub UI app can be broken down to the following steps:
- Develop a web application
- Install and use the UI Apps SDK in your app
- Bring up an http server that servers your UI App on a public URL
- Upload your app to the Gtmhub Marketplace ot test it
- Once ready submit your app for review
We will walk you through the steps of building a simple UI App. It will load in the Objective or Key Result side view screen in a Gtmhub account and enable users to create a Task under the current item they are viewing.
For the purposes of this tutorial we will use:
- Express framework
- ngrok - to help us expose our local server publicly and test the app in a Gtmhub account
Before we begin, ensure you have the above technologies installed on your machine.
Download and run the demo app
The demo UI app that this tutorial walks you through is available on GitHub. Follow the steps below to clone it locally, install the needed packages and run it.
As a first step, clone the repo locally:
- Open a terminal
- Execute the following command
git clone https://github.com/gtmhub/gtmhub-plugin-demo.git
- Once the repo is cloned locally, navigate to the project directory and run the following command to install the npm packages:
- After the successful installation of all packages, in a terminal window run the integrated server to start serving the app on your localhost:
- By default, the demo UI App runs on http://localhost:5000/ click on this link http://localhost:5000/hello-world or copy it and navigate to it in your browser.
- If everything is correct you should see the Hello world app is working! message.
Congratulations, you have installed the demo UI App and you can proceed with the next steps in Public localhost