Tutorial step 7: Uploading a template and creating an app

Product
App Cloud
Created by Grant Goodman.

In the seventh and final step of this getting started tutorial, we will create an app template, upload it into the App Cloud Studio, and see how easy it is to create and customize an app from the template.

Getting Started with Step 7

Make sure you have completed the set-up steps described in the tutorial introduction. The files for Step 7 should now be in {your-web-server-root}/documentation/getting-started/step7/

Create a template

An App Cloud template is a zip file. It consists of:

  • a template manifest file, which must be named manifest.json and must be at the root level of the template zip.
  • All needed JavaScript libraries, which will include app-cloud-sdk.js, the App Cloud JavaScript library, and any other code used by your app.
  • All of the HTML view files that make up your app.
  • All of the CSS files used by your app.

For the Hello World app, all these files can be found in {your-web-server-root}/documentation/getting-started/step7/. Create the Hello World app template by creating a zip file from all the files in that folder.

What's the point of a template?

By using templates, App Cloud enables you to take the development work you do to create a single template and re-use it for multiple apps that have a similar structure, but different looks and contents. Using a template also enables you to change the look and content of your app even after it's published. In Step 6, we added configurations to the template that expose configurable options for the app in the Studio.

Loading the template into the Studio

Next, load the template into the App Cloud Studio:

  1. Sign into the App Cloud Studio and select Templates.
  2. Click Upload a New Template.
  3. Browse in your file system to select the template zip file you created, or just drag the template zip file onto the App Cloud Studio Templates page.

Create an app from the template

Next, create an app from the template:

  1. Select the template you just uploaded.
  2. Click Create an App with this Template.
  3. Enter an App Name and click Continue.
    The Apps page displays the Hello view of the app.

Configure the app

Now you can see how the data, settings, and styles entries from the template manifest expose configuration in the App Cloud Studio:

  1. Click Settings. The Page Title field shows the default value from the template manifest, hola mundo. You can now change that text to whatever you want. Hello world!, for example.
  2. Click Go Back and then click Styles. For each of the three styles, you can pick a color by clicking in the square to the left of the style name. There are three color pickers you can choose from, because our UI designers are generous that way. You can:
    • Enter a hex value for the color you want, like 68A01D. App Cloud automatically supplies the leading #.
    • Drag the horizontal scroll bar to the color you want.
    • Use the larger square panel to fine-tune the shade.
    Then click Save.

Read more about template manifests and configuration:

What's next

This has been a simple tutorial to introduce you to the basics of creating an app with App Cloud. To continue learning about App Cloud: