Hands-On App Development with Ionic

In order to maintain the state of the app via MobX, it is crucial to understand how it works, and what are its key features.

   •  Get an introduction to core MobX features

   •  Learn and understand MobX Actions and Store

   •  Learn and understand MobX computed Values and Reactions

In order to work with MobX in our Ionic application, we need to include some packages in the project to integrate MobX in our app.

   •  Open terminal and navigate to the project root

   •  Run npm install --save mobx-angular mobx

   •  Add MobxAngularModule to imports in the file app.module.ts

Since we’re using MobX, we always want to have the reactive state management pattern in the app. With MobX, we have to use the @observable operator for this. We’ll start using it for the notes in the app.

   •  Create the notes array in the home page

   •  Loop over the notes array in template to create notes elements

   •  Convert the notes array to @observable and use mobxAutorun directive

In MobX, the best practice is to only use @action to update the state. In order to use it, we must understand how it works.

   •  Create an @action inside the home page

   •  Configure MobX to use only @action(s) to update the state

   •  Add/create notes using the created @action

Since we are adding notes, we should be able to remove them as well. And we will do that by archiving the notes and filtering them out using computed values. For that, we need to understand how @computed values work so we can use that as filters.

   •  Update the UI to contain create and remove note buttons

   •  Use @computed values to show archived notes differently

   •  Understand the difference between @computed and non-computed values in MobX

In order to manage the state of the application, we need to create a store in MobX. You need to know how stores work in MobX and what the best practices are for creating and managing a store.

   •  Create a model for the store

   •  Create a service that acts as a store for notes

   •  Use the @action(s) and @observable(s) from the created store

In order to view notes, we must create a list of notes on the home page. And for that, we need to know some core UI components offered by Ionic.

   •  Update the notes list UI with Ionic cards

   •  Add and style the actions on notes cards

   •  Distinguish active and archived notes using ngClass

Now that we have the form in place. We need to add or edit the notes using this form inside the manage-note component.

   •  Modify the manage note component to contain a mode variable

   •  Modify manage-note component UI based on the current mode

   •  Add/update note using the form values from manage-note component

Explore creating and submitting user form.

   •  Retrieve users’ information

   •  Submit the details

Explore creating and updating notes.

   •  Explore how to create notes

   •  Understand notes

In order to archive notes, we need to understand how we can filter out archived notes from the view. Also learn how to allow the user to filter notes. We need to learn about Ionic popover for this.

   •  Create filters popover with filter options

   •  Create a computed value named filteredNotes

   •  Archive notes to reflect on the filters

In order to use the persistent DB in our application. We need to use cordova-sqlite. So, we will be installing the package in our project and will then perform the operations using cordova-sqlite.

   •  Add cordova-sqlite-storage to the project

   •  Install @ionic-native/SQLite package

   •  See an example from Ionic’s documentation

In order to create, read, update, and delete notes with persistent database, we need to create an instance of the database in the app. We shall modify our existing store to work with that database.

   •  Create the notes service

   •  Create SQLite storage service and initiate database at app start

   •  Implement CRUD operations with database

Fetch notes from the database.

   •  Fetch note from an ID

   •  Create the note

Delete notes using Cordova SQLite.

   •  Update the notes

Create a new service named StorageService.

   •  Create same methods in StorageService as we have for SqliteStorageService

   •  Use StorageService instead of SqliteStorageService in the NotesService

   •  Test it out with the CRUD operations

While the app currently works great in Android and iOS using SQLite, we can serve this app on browsers as a web app, thanks to Ionic. But in that case, our database won’t work, as SQLite doesn’t work in browsers.

   •  Install @ionic/storage package

   •  Creating a new service called LocalStorageService

   •  Add CRUD methods to LocalStorageService and integrate with StorageService

We want our notes to be rich. For that we want to attach an image to the notes we create. In order to achieve that, we will use @ionic-native/camera package with some ionic magic.

   •  Install the cordova-plugin-camera plugin and @ionic-native/camera package

   •  Create a new service that is PictureService

   •  Use PictureService to capture images and prepare in base64 format

So far, we were able to capture/take pictures, but we will not be saving them with the notes. That requires some modifications in our INote interface, our Note class and our ManageNoteComponent as well.

   •  Modify the INote interface to include imagePath

   •  Modify Note class to include imagePath

   •  Implement CRUD operations with Database

For a good user experience, we must provide a way to view the images in the best way possible. For that, we will use the PhotoViewer plugin to show images in a natural way.

   •  Install the com-sarriaroman-photoviewer plugin

   •  Install the @ionic-native/photo-viewer plugin

   •  Display picture in Photo Viewer on note’s image click

So far, we are only allowing the user to pick images using the camera. But in most applications, the option to pick from a picture gallery also exists. We will add the same feature in our application.

   •  Create an Action Sheet with different options for image capture

   •  Configure source type in the captureImage method

   •  Implement Remove Picture functionality as well

In order to show the user notifications or reminders, we must use something called Local Notifications. For that, we will install the Ionic Native package and the Cordova plugin.

   •  Install cordova-plugin-local-notification and @ionic-native/local-notifications package

   •  Configure a test local notification

   •  Test the local notification on the device

In order to work with the local notifications effectively, it is a great idea to learn about local notifications in depth to understand what kind of notifications there are, and how we can use them.

   •  Understand local notification permissions and actions

   •  Understand local notification triggers and grouping

   •  Understand local notification events and methods

In order to save the reminder time with the notes, we must do some adjustments to our database. We will add a column named reminderTime in our DB for that.

   •  Create a column named reminderTime in the DB

   •  Add reminderTime property to INote interface and Note class

   •  Set default value of reminderTime as an empty string

Now that we have our DB and our models ready with reminderTime, we will modify the add/edit note form such that the user can select a reminder time there.

   •  Add a clock icon on notes form for reminder time

   •  Use the <ion-datetime> element for reminder time input

   •  Use a method from date-fns for minimum time value validation

To persist the notes with reminder time, we need to save the reminder time with the note itself, in the database. For that, we will use the value picked by user, using the note form, and will then save it into the database.

   •  Access the value from the form to save reminder time

   •  Add reminderTime to the note being saved to database

   •  Schedule a local notification when the note is created

If the user edits a note and updates the reminder time, we will unschedule the notification scheduled before, if any, for the same note. And then, we will schedule a local notification with the new reminder time.

   •  Check if the note being updated has reminder time

   •  If the updated note has reminder time, then update it

   •  Schedule a notification, if required, for the new reminder time

The user might want a note. In that case, if a local notification was already scheduled, we should cancel it. We will do that by unscheduling the local notification.

   •  Check if the note being removed has a notification scheduled

   •  Add the check when the user archives a note

   •  Unschedule/clear the notification if it exists

The default name of an ionic app is MyApp. We will want to change that, especially now, that we are almost done with the core work.

   •  Change the app’s name to IONOTES in the config.xml

   •  Update the about page layout

In order to work with the local notifications effectively, it is a great idea to learn about local notifications in depth to understand what kind of notifications there are, and how we can use them.

   •  Add a button in settings page to clear all notifications

   •  Show an Alert to confirm the action before performing it

   •  Clear all notifications once the Action is confirmed

Before upgrading to Ionic 5, an Ionic 4 app should be upgraded to the latest 4.x version, so the transition to version 5 is smooth.

• Uninstall ionic from global modules and install @ionic/cli globally

• Install @ionic/angular@4.11.0 in the project

• Run ionic info to verify the package version

To upgrade to Ionic 5, we need to upgrade both our @ionic/angular package to v5, and our @angular packages to v9.

• Install @ionic/angular@latest and @ionic/angular-toolkit@latest in the project

• Upgrade to Angular v8 from v7

• Upgrade to Angular v9 from V8

After upgrading to Angular v9 and Ionic v5, we have some breaking changes. In this video, we are going to resolve those.

• Upgrade MobX and mobx-angular to latest version in the project

• Fix [checked] attribute issue with <ion-radio> elements

• Update the builders for ionic / cordova builds

In this video, we will summarize what we have covered in this course.

• Review the contents explained in the course