Register your app

#Overview

When you decide to build an app for Hygraph, you must register it on the platform.

In this tutorial, we are only going to complete the basic information in the General, Permissions and Elements tabs.

If you want in depth information about the app registration process, along with all the options available, as well as all possible actions you can take in the registration form, click here.

Let's get started:

Navigate to User settings > Your apps, then click on the + Add new app button. This will lead you to the App registration form.

Your apps

#General

In the General tab of the app registration process, fill in the following information:

App registration - General

• Name: This is the name of your app. For this example, write App SDK Demo.
• Description: A description for what your app does. For this example, write Example App Framework Application.
• Avatar URL: URL that indicates where your logo is hosted. For this example, use https://i.pravatar.cc/300?img=69.
• API ID: Write your API ID here. The ID is globally unique, so the form will let you know if the name is taken. This field only allows alphanumeric characters, underscores and hyphens, and you must start with a lowercase letter. This field becomes read-only once the app is created.
• Setup URL: The setup URL is the form that displays when you install an app for the first time in Hygraph. For this example, write http://localhost:3000/setup.

#Permissions

This section shows the access details of your app.

App registration - Permissions

For this tutorial, we suggest you give read/write permissions but you can select your own.

#Elements

App registration - elements

#Field element

• Elements: Add an element by clicking on + Add element:
  • Name: Name of your element. For this example, write Custom field.
  • API ID: Your element's API ID. For this example, write appCustomField.
  • Type: This is the element type. For this example, select field from the dropdown menu.
  • URL: The element's dedicated URL. For this example, write http://localhost:3000/custom-field.
  • Description: It's the description that will appear under your field name in the Schema. For this example, write Custom field.

After you've filled in all the information provided for this example, you can save your app by clicking on the Register app button.

The next step is to develop your application. Click here to continue.

#Sidebar element

• Elements: Add an element by clicking on + Add element:
  • Name: Name of your element. For this example, write Google SERP Preview.
  • API ID: Your element's API ID. For this example, write appFormSidebar.
  • Type: This is the element type. For this example, select formSidebar from the dropdown menu.
  • URL: The element's dedicated URL. For this example, write http://localhost:3000/google-serp-preview.
  • Description: It's the description that will appear under your field name in the Schema. For this example, write Google SERP Preview.

After you've filled in all the information provided for this example, you can save your app by clicking on the Register app button.

#Page element

• Elements: Add an element by clicking on + Add element:
  • Name: Name of your element. For this example, write Custom page view.
  • API ID: Your element's API ID. For this example, write custom-page-view.
  • Type: This is the element type. For this example, select page from the dropdown menu.
  • URL: The element's dedicated URL. For this example, write http://localhost:3000/page.
  • Description: It's the description that will appear under your field name in the Schema. For this example, write Custom page view.

After you've filled in all the information provided for this example, you can save your app by clicking on the Register app button.

#Resources

• App Framework: Overview to our App Framework, which extends Hygraph capabilities, offering the possibility of creating your own custom apps and sharing them with other users.
• Migrate to apps: A guide on migrating from UIX to app.
• Register an app: Documentation for developers on how to register an app on the Hygraph platform.
• Using app tokens: Document on how to generate an app token for your app during installation.
• Install an app: Step by step guide on how to install an app in your Hygraph project.
• Delete an app: Documentation for developers on how to delete an app you have created.
• Next.js starter: Document that guides you through the process of developing an app with a custom field using our Next.js starter.
• API Reference: Our App Framework API Reference.