# Use templates to create apps

### What you will create

Create a travel app using one of the provided templates. The template inserts the required YAML in the correct format. Use the template as a base on which to build when creating a jig. If the template by default provides the functionality you need, publish your Jigx project to use the jig on your mobile device. \
**Build time:** 5 mins

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2FU6vCSaKgIZlvGAQCAvn3%2FGS-TravelTemplate.PNG?alt=media&#x26;token=92722de3-7e46-488d-ab6a-ee6cf19f5edf" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
Before you start building your first solution, ensure you have created a [Jigx's account](https://docs.jigx.com/getting-started/creating-an-account) and [Install the Jigx Builder](https://docs.jigx.com/getting-started/install-the-jigx-builder).&#x20;
{% endhint %}

#### Step 1: Create a new solution in Jigx Builder

1. Open VS Code, and click on the Jigx Builder **icon** in the left navigation bar. Select the **Create New Jigx Solution** button.
2. Type **World Travel** in the Solution title field and press enter. This name displays at the top of your solution on the Home Hub in the Jigx App.
3. The *Solution name* field automatically pre-populates with the solution's system name world-travel. Press **Enter.**
4. For this solution select the **business** category.
5. Select a local folder where the project files are saved too. Your Jigx default solution files open in the VS Code editor with the .jigx extensions ready for editing.

{% columns %}
{% column %}

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2FJmdnMGGLGGYlk8TCvhp3%2FTravel-newProject.png?alt=media&#x26;token=a512169d-41cf-4164-a0e9-b795c8a0bce7" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2FXZsrm3c4TTINpXjB9Iqn%2Ftravel-scaffolding.png?alt=media&#x26;token=f2986d2c-95ba-4b7d-bc52-6033a970c370" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

#### Step 2: Choose a template

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2F5pKAkk8hZ1GueQ4Oyy0t%2FT-configure.gif?alt=media&#x26;token=af8c578f-a22f-443a-8403-7f45615516bb" alt=""><figcaption></figcaption></figure>

1. In Explorer expand the **jigs** folder and click on `myfirstjig.jigx` file. The Jigx auto-complete popup displays.
2. Click on **use template** to open the list of templates.
3. Under **Default** hover-over \*\*Default jig 6 \*\*and click the blue insert button.
4. The jigx file is populated with the YAML for the template.
5. Change the title to ***Thailand*** as the `title` for your jig.
6. The `myfirstjig.jigx` file is already referenced in the `index.jigx` file which is the home screen file (Home Hub).

{% columns %}
{% column %}

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2FFumnDhSCLzlG1poOOkTq%2FTravel-template.png?alt=media&#x26;token=17e52e75-65ec-4ce6-ad0f-ec318a4fc016" alt="" width="375"><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2FFYK4BZlyw3KlSGhLSbnx%2FTravelSelect.png?alt=media&#x26;token=cc1e7d1e-e1db-4561-9dac-075c9660c204" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

#### Step 3: Publish the solution

{% columns %}
{% column %}

1. In VS Code click on the Jigx Builder **icon** in the left navigation bar.
2. In the Jigx Explorer hover over the **world-travel** node till you see the **publish** **icon (rocket)**. Click on the icon to start the publishing process.
3. Enter your Jigx username and press **Enter**.
4. Enter your Jigx password and press **Enter**. The publishing process starts and the progress shows in the bottom right corner of the VS Code editor. A message displays when the solution is successfully published.&#x20;
   {% endcolumn %}

{% column %}

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2Fb3AHi7LWKunBxtDMpbG0%2FTravel-publish.png?alt=media&#x26;token=250a755b-d064-4552-b3f9-010aef83de1c" alt="Publish Jigx project"><figcaption><p>Publish Jigx project</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

#### Step 4: Open the app on your mobile device

{% columns %}
{% column %}

1. On your mobile device **tap** the Jigx app icon.
2. Sign into the app with your [Jigx account](https://docs.jigx.com/getting-started/creating-an-account) details.
3. The app opens the [Home Hub](https://docs.jigx.com/building-apps-with-jigx/ui/home-hub) screen displaying the **World Travel** solution.
4. Tap on the icon to display the **Thailand** destination screen.&#x20;

{% endcolumn %}

{% column %}

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2FU6vCSaKgIZlvGAQCAvn3%2FGS-TravelTemplate.PNG?alt=media&#x26;token=92722de3-7e46-488d-ab6a-ee6cf19f5edf" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% hint style="success" %}
Yes it is that simple to build apps in Jigx. Explore further by either editing the YAML in `myfirstjig.jigx`; or adding additional files under the jig folder, add another template, reference the file in `index.jigx` and publish the solution.&#x20;
{% endhint %}

### What's next?

Why not build your own app? See how to [plan your app](https://docs.jigx.com/getting-started/planning-your-app), then learn how to [create an app from scratch](https://docs.jigx.com/getting-started/create-an-app-from-scratch) or explore the various available UI elements in Jigx by adding the **Jigx-samples** [prebuilt solution](https://docs.jigx.com/getting-started/use-pre-built-solutions) to your organization and viewing the solution in the Jigx App.
