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 a New Database

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

Create new database

Create new database

Name your database todoDB and click Create.

Create todoDB database

Create todoDB database

Adding New Collection to Database

Create a new collection; click Create new collection.

Create a new collection

Create a new collection

Name your collection task and click Add.

Create task collection

Create task collection

Adding New Column to Collection

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

Create taskName collection

Create taskName collection

New taskName column appears in the table.

Create taskName column

Create taskName column

Now, using +Row enter a number of records. For example, add the following tasks:

  • Build an app.
  • Learn how to code.
  • Buy ice cream.
  • Go to the gym.

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

Mobile app

Creating a New App

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

Create a new app

Create a new app

Select Ionic 4 application type, name it TODO List and click Create:

Ionic 4 App create dialog

Ionic 4 App create dialog

Building the UI

Every new app comes with a default first page. Open Pages > Screen1:

Start screen

Start screen

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

Toolbar properties

Toolbar properties

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

List component

List component

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.

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

List properties

List properties

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;
}

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! Back to our app DESIGN view and add a Button to our ListItem1 element, then move it to the right side.

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)

Next, select ItemLabel1 and set its Text property to {{task.taskName}}.

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.
Click on the green button Create New > Page and give it a name AddTaskPage.

Note that "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

On the new page, change the Toolbar Title Text to Add new task. Drag and 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 to Ionic Back Button.
Next, set the following properties:

  • Back Button.Icon = arrow-back
  • Back Button.Text = Back
  • Back Button.Show = True
Back button properties

Back button properties

We would need an Input component to enter a new task. Let's add it to the page and set its properties like this:

  • Placeholder = Enter task
  • Label.Text = empty
  • [(ngModel)] = newTaskName

Add a Button for saving entered tasks on the app page and define its properties:

  • Text = Add Task
  • (click) = addTask()
Task page overview

Task page overview

Application Logic

Select the page Screen1 and click on the CODE tab.

Under the Variables tab, enter a new name: tasksList and click Add - choose its type as Any.
For the Functions, type: getTasksList and Add it as a Method.

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

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

getTasksList function code

getTasksList function code

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

For navigation to the Task Page, add another Method with name addTask; after that, just drag and drop the AddTaskPage into the code window. This will automatically add the code for navigation to this page.

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.

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 Database right after you delete one of them.

deleteTask code

deleteTask code

On the CODE tab of the "AddTaskPage", add a variable: newTaskName with type String.
Then, add a Method function named addTask drag and drop the todoDB_task_create_service into the function code; that will automatically add the invoke service code there.
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 the App

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

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.