Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Ionic 4 Todo List Tutorial

Introduction

In this tutorial, you’ll learn how to build a mobile app that displays a list of data from a cloud database. The app communicates with the database via a REST API.

Before you begin

  • Tutorial level: beginner; your first mobile app.
  • Prerequisites: an Appery.io account.

Database

Creating New Database

  1. Create a new database from the Databases tab, click Create new database.
Create new database

Create new database

  1. Name your database todoDB and click Create.
Create todoDB database

Create todoDB database

Adding New Collection to Database

  1. Create a new collection; click Create new collection.
Create a new collection

Create a new collection

  1. Name your collection task and click Add.
Create task collection

Create task collection

Adding New Column to Collection

  1. Select the task collection from the list. Click + Col. Name your column taskName, select the String type and click Create column.
Create taskName collection

Create taskName collection

  1. New taskName column appears in the table.
Create taskName column

Create taskName column

  1. Now, using +Row enter the number of records. For example, add the following tasks:
  2. Build an app.
  3. Learn how to code.
  4. Buy ice cream.
  5. Go to the gym.

The database is now ready for our app. Let's move onto the app creation itself.

Mobile App

Creating New App

  1. Create a new app from the Apps tab, click Create new app.
Create a new app

Create a new app

  1. Select the Ionic 4 application type, name it TODO List and click Create:
Ionic 4 App create dialog

Ionic 4 App create dialog

Building UI

  1. Every new app comes with the default first page. Open Pages > Screen1:
Start screen

Start screen

  1. Click on the Toolbar title in the app screen and change it to the My Todo App by changing the Text property on the right menu:
Toolbar properties

Toolbar properties

  1. In our app, we would need a List component for showing the records that we have in the database. From the components PALETTE, drag & drop a List component to the screen; it should look like this:
List component

List component

  1. Click on the second List item - ListItem2 and click on the red cross to delete it. We won't need the second list item since we are going to use a dynamic service for displaying lists in our app.

You can use the OUTLINE menu for navigating between App UI components.

  1. In the PROPERTIES menu, select ListItem1 and set its property Class value to todoListItem; also, add the attribute *ngFor = let task of tasksList:
List properties

List properties

  1. Let's now add some flavor to our list element and customize its color. Open the SCSS tab and add the following code:
.todoListItem:nth-child(odd) {
    --background: #f2f2f2;
}
  1. Click Save and see if the SCSS file applied correctly and the styles (the color changed to grey) have applied on the app DESIGN overview.

Adding Buttons

Okay - it looks good!

  1. Go back to our app DESIGN view and add a Button to our ListItem1 element, then move it to the right side.
  2. Now, click on the Button and set following properties:
    • Text = empty
    • Color = danger
    • Icon.Style = remove icon
    • Icon.Slot = Icon Only
    • (click) = deleteTask(task._id)
  3. Next, select ItemLabel1 and set its Text property to {{task.taskName}}.
  4. Finally, add another Button component to the ToolbarButtons area, and set its properties to:
    • Text = empty
    • Color = primary
    • Icon.Style = add icon
    • Icon.Slot = Icon Only
    • (click) = addTask()
Buttons layout overview

Buttons layout overview

Apps Task Page

For adding a new Todo task in our app we would need a separate page - let's create it.

  1. Click on the green button Create New > Page and give it a name AddTaskPage.

Note that the Create navigation route for this page checkbox is marked, you can find and edit all routes in the Project menu > Routing asset.

Create new page

Create new page

  1. On the new page, change the Toolbar Title Text to Add new task. Drag & drop the Button element into the Toolbar Buttons area; we will use it as the Ionic Back Button of the app. For this, the following should be set in the button PROPERTIES menu: change the Component value to Ionic Back Button.
  2. Next, set the following properties:
    • Back Button.Icon = arrow-back
    • Back Button.Text = Back
    • Back Button.Show = True:
Back button properties

Back button properties

  1. We would need an Input component to enter a new task. Let's add it to the page and set its properties like this:
  2. Placeholder = Enter task
  3. Label.Text = empty
  4. [(ngModel)] = newTaskName
  5. Add a Button for saving entered tasks on the app page and define its properties:
  6. Text = Add Task
  7. (click) = addTask()
Task page overview

Task page overview

Application Logic

  1. Select the page Screen1 and click on the CODE tab.
  2. Under the Variables tab, enter a new name: tasksList and click Add - choose its type as Any.
  3. For the Functions, type: getTasksList and Add it as Method.
  4. Click Create New > Database Service and choose the todoDB from the list, expand the task collection services drop-down, select all the services and click Import selected services. For this tutorial, we will use only create, list and delete services:
Import database services

Import database services

  1. After importing database services, they will appear on the left side in the Project tree under the Services folder todoDB. Drag & drop the todoDB_task_list_service into the code window of getTasksList(); it will automatically add the invoke service code there.
  2. Replace the console.log(res); with this.tasksList = res;:
getTasksList function code

getTasksList function code

  1. Add another Method function, name it ionViewWillEnter and, in the code, enter: this.getTasksList();
    This line of code will get the list of tasks from the database on every screen opening.
List function code

List function code

  1. For navigation to the Task Page, add another Method with name addTask; after that, just drag & drop the AddTaskPage into the code window. This will automatically add the code for navigation to this page.
  2. At this point, we can test our app in the browser - click the Test button and check that tasks will appear on the app screen, and you can navigate to the AddTasksPage by clicking on the + button in the toolbar; similarly, ensure that the back navigation works too.
  3. Next, add a Method named deleteTask with taskId as an argument. Drag and drop the service todoDB_task_delete_service into the function code window; it will automatically add the invoke service code. Add the following edits to the code: to params block add "_id": taskId and replace console.log(res); with this.getTasksList(); this will reload the list of tasks from the database right after you delete one of them.
deleteTask code

deleteTask code

  1. On the CODE tab of the AddTaskPage, add a variable: newTaskName with type String.
  2. Then, add a Method function named addTask drag & drop the todoDB_task_create_service into the function code; that will automatically add the invoke service code there.
  3. Locate the data block and add: "taskName": this.newTaskName and add/replace console.log(res); with these lines:
    this.newTaskName = "";
    this.Apperyio.navigateTo("Screen1");:
addTask code

addTask code

Testing App

You are now ready to test the app. Click the TEST button in the App Builder to launch the app in the browser.

Updated 2 days ago

Ionic 4 Todo List Tutorial


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.