Create Todo App

In this tutorial, we will create a simple todo app using this platform. Focusing on familiarizing yourself with the platform, start from creating resource with entity, create workflow from scratch, and create a simple screen and setting up the navigation and then deploy the app.

Goal of this tutorial

We aim to achieve the following goals in this tutorial and hope you will be able to:

• Create a simple todo app
• Familiarize yourself with the platform
• Learn how to create resource with entity
• Learn how to create workflow from scratch
• Learn how to create a simple screen
• Learn how to set up the navigation
• Learn how to test the app
• Learn how to deploy the app

Prerequisites

For this tutorial, you need to have an active account on the platform. If you don't have an account yet, you can register an account on the platform by following the steps in the Account section.

Step 1: Create App

First, you need to create an app on the platform. Here are the steps to create an app on the platform:

1. Open the platform website or click this
2. Click the New App button on the right side to create a new application
3. Pop up will appear, choose the app you want to create, you can choose blank for create app from scratch or choose template for create app from template
4. Click Next button
5. Then fill in the application name, the app slug, and description what you want
6. Click Create button
7. Done, your application has been created

Step 2: Create Resource with Entity

After creating the app, you need to create a resource with an entity. Here are the steps to create a resource with an entity:

1. Navigate to Resource tab in composer page (Read more about Composer
2. Start adding entity by clicking + (plus) button
3. add following entity:
   • Name: Todo
   • Fields:
     • Name: title, Type: text
     • Name: content, Type: text
     • Name: status, Type: boolean
4. Click Save button on the bottom of the page
5. if you think that's enough, click Migrate button

Additional information about entity, you can read the Entity section

Step 3: Create Workflow

We just created a resource with an entity, now we need to create a workflow to manage the logic and data flow of our app. In this step, we will create a workflow from scratch. There two way to create a workflow, from scratch or generate from entity.

For this tutorial, we will create 2 workflows, list todo workflow and create todo workflow.

Learn more about generating workflow from entity in Generate from Entity section

Note: This step will focus on creating a workflow from scratch. If you want to familiarize yourself with the platform, you should create a workflow from scratch.

a. List Todo Workflow

List todo workflow is a workflow to list all todo data from the entity that we have created. Here are the steps to create a list todo workflow:

1. Navigate to Workflow tab
2. Start adding workflow by clicking + (plus) button
3. Drag task symbol to the workflow canvas in between start and end symbol
4. Now we need to add arrow that link start, task, and end symbol. we can do that by clicking the start symbol and then the action menu will appear, click on the arrow symbol and then drag to the task symbol, the same thing we do to link task symbol to end symbol
5. To rename the task, double click the task symbol and then fill in the name of the task. For this tutorial, we will name the task list_todo
6. On the right side of the page, you will see the task properties, inside the Resource Mapping section, fill the fields below:
   • Resource: Entity
   • Entity Name: todo
   • Entity API: todo_list
7. Click Save button on upper right of the page

b. Create Todo Workflow

We have created a list todo workflow, now we need to create a create todo workflow. this workflow is used to create a new todo data. the process is similar to the list todo workflow, here are the steps to create a create todo workflow:

1. Navigate to Workflow tab
2. Start adding workflow by clicking + (plus) button
3. Drag task symbol to the workflow canvas in between start and end symbol
4. Now we need to add arrow that link start, task, and end symbol. we can do that by clicking the start symbol and then the action menu will appear, click on the arrow symbol and then drag to the task symbol, the same thing we do to link task symbol to end symbol
5. To rename the task, double click the task symbol and then fill in the name of the task. For this tutorial, we will name the task create_todo
6. On the right side of the page, you will see the task properties, inside the Resource Mapping section, fill the fields below:
   • Resource: Entity
   • Entity Name: todo
   • Entity API: todo_create
7. Click Save button on upper right of the page

Step 4: Create Screen

After creating the workflow, we need to create a screen to display the data and manage the user interface of our app. In this step, we will create a simple screen to list all todo data and create a new todo data.

a. List Todo Screen

List todo screen is a screen to display all todo data from the entity that we have created and we also create button to navigate to create todo screen. Here are the steps to create a list todo screen:

1. Navigate to Screen tab
2. Start adding screen by clicking + (plus) button on the left sidebar
3. Fill in the screen name, for this tutorial, we will name the screen List Todo
4. Click Add button
5. Now we need to add a component to the screen, click + Component button on the top of the page
6. Drag Table component to the screen canvas
7. Fill in the component properties, fill the fields below:
   • Data Source Type: Workflow
   • Workflow: list_todo
   • Task: list_todo
8. Change the tab to column on the component properties, then click + New Column button to add a column
9. Fill in the column properties, fill the fields below:
   • Header: Title
   • Accessor: title
10. Add another column by clicking + New Column button
11. Fill in the column properties, fill the fields below:
    • Header: Content
    • Accessor: content
12. Remove the Id and Name column by clicking the trash icon on the right side of the column
13. Add component Box and Button to the screen canvas, put the button component inside the box component and align the box component to the right side of the table component
14. Fill in the button properties, fill the fields below:
    • Label: Create Todo
    • Enable show icon
    • Icon: plus (+)
    • Set on click to:
      • Type: Navigation
      • Destination: Create Todo

b. Create Todo Screen

We have created a list todo screen, now we need to create a create todo screen. this screen is used to create a new todo data. the process is similar to the list todo screen but we will add a form component to the screen so the user can input the data. Here are the steps to create a create todo screen:

1. Navigate to Screen tab
2. Start adding screen by clicking + (plus) button on the left sidebar
3. Fill in the screen name, for this tutorial, we will name the screen Create Todo
4. Click Add button
5. For this screen, we will add a form component to the screen canvas, click + Component button on the top of the page
6. Drag Form component to the screen canvas
7. Fill in the component properties, fill the fields below:
   • Workflow: create_todo
   • on success redirect to: List Todo
8. Add input component to the form component, by doing the same step as adding a form component
9. Fill in the input component properties, fill the fields below:
   • Input Type: text
   • Field: title
   • Label: Title
10. Add textarea component to the form component
11. Fill in the textarea component properties, fill the fields below:
    • Field: content
    • Label: Content
12. Add box and button component, put the button component inside the box component
13. Align the box component to the right side of the form component
14. Fill in the button component properties, fill the fields below:
    • Label: Create
    • Type: submit

Done, now we have created a simple todo app. so far, we have created a resource with an entity, created a workflow from scratch, and created a simple screen. Next, we will set up the navigation.

Additional information about screen, you can read the Screen section

Step 5: Set Up Navigation

After creating the screen, we need to set up the navigation to create a sidebar and manage the navigation of our app. In this step, we will set up the navigation to navigate between list todo screen and create todo screen.

1. Navigate to Navigation tab
2. Start adding navigation by clicking + (plus) button on the left sidebar
3. Fill in the navigation properties, fill the fields below:
   • Menu Name: List Todo
   • Select Screen: List Todo
   • Icon: list (pick what you want)
4. click Add Menu button

Now the list todo is now on the sidebar. Next we will add create todo to the sidebar, but this one is different, we will add create todo as a sub menu of list todo.

1. Click + (plus) button on the left sidebar
2. Fill in the navigation properties, fill the fields below:
   • Parent Menu: List Todo
   • Menu Name: Create Todo
   • Select Screen: Create Todo
   • Icon: plus (pick what you want)
3. click Add Menu button

Done, now we have set up the navigation. so far, we have created a simple todo app, set up the navigation, and now we will test the app.

Step 6: Test and Deploy the App

This step is to test the app that we have created. In RUN System Platform, we have two environment, first is sandbox (or development) and second is production environment. In sandbox environment, you can test the app without affecting the production environment. To do that, you can click the Play button on the header of the page.

The app will be opened in a new tab, and you can test the app. If you think the app is ready, you can deploy the app to the production environment. We can continue to the last step to deploy the app.

Step 7: Deploy the App

You have tested the app and now you want to deploy the app to the production environment. First, we need to go to the app settings by clicking the Settings (Gear Icon) button on the header of the page, or you can click Deploy button on the header of the page.

As you can see, there is a select box to choose Resource, Website, and Mobile. That's because we can deploy the app partially, but for this tutorial, we will only deploy the Resource and the Website.

Read more about app architecture in Architecture section

a. Deploy Resource

Resource are the backend of the app, it holds the logic and data flow of the app. Here are the steps to deploy the resource:

1. Click Resource select box
2. Create version by clicking + Add Version button
3. Pop up will appear, and fill version proerties below:
   • New Version: v0.0.1
   • Changelog: first version
4. Click Create button
5. Change tab to Deployment and click Request Deploy button
6. Select the version that you have created and the note, then click Request button
7. Current status of the deployed app still pending, you can either approve or reject the deployment by clicking the Approve or Reject menu in three dot icon on the right side of each deployment
8. Fill feedback if you want and click Approve button

Now the resource has been deployed. Next, we will deploy the web.

b. Deploy Website

Web are the frontend of the app, it holds the user interface of the app. The steps to deploy the web are similar to the resource, here are the steps to deploy the web:

1. Click Webite select box
2. Create version by clicking + Add Version button
3. Pop up will appear, and fill version proerties below:
   • New Version: v0.0.1
   • Changelog: first version
4. Click Create button
5. Change tab to Deployment and click Request Deploy button
6. Select the version that you have created and the note, then click Request button
7. Current status of the deployed app still pending, you can either approve or reject the deployment by clicking the Approve or Reject menu in three dot icon on the right side of each deployment
8. Fill feedback if you want and click Approve button

Done, now the app has been deployed to the production environment. You can access the app by clicking the Open button on the header of the page.

Read more about deployment in Deployment (*coming soon*) section

Conclusion

In this tutorial, we have created a simple todo app using the platform. We have familiarized ourselves with the platform, created a resource with an entity, created a workflow from scratch, created a simple screen, set up the navigation, tested the app, and deployed the app. We hope you have learned how to create a simple app using the platform and are ready to create your own app.