Ionic - Introducion to Ionic

The purpose of Ionic is to build hybrid apps. We build mobile apps using HTML, CSS & JavaScript. In contrast to Swift of Java/Android, we leverage Angular to build scalable, interactive web apps when we build apps using Ionic. We do not need to know Swift, Java or Android. Building on the basic knowledge gained in the previous sections, you can build a full blown mobile app which looks like and performs exactly like a native app.

Getting started

Assuming you already have node installed, getting started with Ionic is very similar to getting started with typescript or Angular. All you need to do is “npm install”.

This should install Ionic and we are good to start building Ionic apps. A point to be noted in the context of creating an Ionic 3 app is that, at the time of writing this, Ionic 4 is the latest version of Ionic. In order to generate an Ionic 3 app, you have to specify “--type=Ionic-Angular” when starting a project.

Blank will create an empty project with no pages in it. We will do just that and take a look at what files are generated.

You are immediately given instructions on what to do next. Cd into the newly created folder Ionic3Project.

And type Ionic serve. This should open the app on the browser.

As you can see, the app opens on the browser and does not look like a mobile app. To get it looking right, click on Chrome’s utility menu and click on More Tools> Developer Tools.

You will see that the following tabs open up.

Click on the second icon on the top left.

The other way of looking at your app will be to type localhost:8100/Ionic-lab on your browser, and you can view the app as it would appear in each of the platforms that Ionic supports - iOS, Android and Windows.

You can use the pull down menu in the top right to enable/disable different platforms.

The Ionic start command on the Ionic cli creates folders and files in a similar fashion to the Angular CLI. In the tutorials we will use Ionic-lab to preview our code. We will also look at how the app can be run on Android and Apple devices, and also emulators that Xcode and Android studio have to offer. But for now, we will jump straight into building apps using Ionic. We will explore the files generated when the app is first created and then we’ll look at the basic components that can be used in a page.

App.html loads up the page “home”, which is an Angular component with its own html, CSS and ts. In this case the styles are managed through Sass rather than CSS. Hence the file extension, scss. Scss gives finer control on styles and theming.

The package.json contains all the dependencies the project needs and running “npm install” will download the dependencies into the node_modules folder. The Ionic.config.json contains instructions for build and test.

We’ll now look at specific files. We already know about app.ts (app.component.ts in Angular) and app.module.ts. And you may already know what to expect in those files - the ng-modules that Ionic needs to run the app will get imported and put into the metadata of the Angular app. Yes, we should remember that Ionic app is an Angular app that can use all the features of Angular in the mobile app.

We will now look at app.module.ts which bootstraps the app.

The browserModule allows the app to run in the browser.
NgModule bootstraps Angular as we have seen before. The Ionic module bootstraps the Ionic application.

By default, the “entryComponents are MyApp and the HomePage".

Further to this an Ionic native Status Bar and SplashScreen are loaded.

App.component.ts is the first component to be bootstrapped. Here is where the splashscreen is loaded. We will see native features in the next chapter.

For now, the constructor loads all the native components and the Platform object. The Platform object is used to get information about the current platform loaded - iOS/Android. We will see this as well in the next chapter.

You will also notice a folder called Pages. This is where the code for each page in the mobile app is put. By default there is a page called home, which again is an Angular component.

This component is referenced in the app.component.ts in the variable rootPage

In app.html. It is loaded.

At a basic level, a navigation controller is an array of pages representing a particular history (of a Tab for example). This array can be manipulated to navigate throughout an app by pushing and popping pages or inserting and removing them at arbitrary locations in history.

The current page is the last one in the array, or the top of the stack if we think of it that way. Pushing a new page onto the top of the navigation stack causes the new page to be animated in, while popping the current page will navigate to the previous page in the stack.

Nav is a standalone component for loading arbitrary components and pushing to new components on to the stack. Meaning that if we load a Nav component, and push other components to the stack, they will not affect the apps overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, but not make it tied to the apps URL.

The home page html has the html for what you see when you run Ionic serve.

In Summary, the app.module.ts bootstraps the application and loads appComponent. The nav in the app component loads the home page.

Starters

We just used the Ionic blank starter. Ionic 3 comes with three more starters - one with tabs, one with a left nav and another with Google maps. In this tutorial we will be using tabs to build a basic learning management system app where there will be a home page which will list courses. You can enroll for them and they appear in my enrollments.

Ion tabs

Now we already know how to generate a component in Angular. In a similar fashion, generate a page called Course. (In this page, we will list the courses in a learning management system as we proceed through this tutorial).

To create a project with tabs we issue the following command.

By cd-ing into the Ionic3Tabs and running Ionic serve, we get this:

Under the pages folder, you will find 3 pages created.

Pay attention to the html of tabs.

The variables tab1Root, tab2Root and tab3Root are declared in pages/tabs/tabs.ts

On clicking on each of these tabs, navigation will shift to the respective page.

If you take a look at the directive <ion-tab> it comes with properties root title and icon. The root refers to the component that will get loaded when the tab is clicked. Title is the title that will be displayed and Icon is the icon that will be displayed.

All the available icons can be accessed from https://Ionicframework.com/docs/v3/Ionicons/

Building the UI for a basic learning management app

In this section, we will use the tabs we just looked at along with a few more Ionic components to display an array of courses along with an “enroll” button. We will add a page and display courses that the current user has enrolled.

Then, we will create a popup to view course modules and content and allow the user to mark each item as complete.

We will finally add a contact form, so that the user can write a message to the LMS administrator.

First, we change the theme of the default app by changing the values of sass variables in themes/variables.css.

We then change the background color of the toolbar to the primary color by assigning it to the CSS element toolbar-background.

The variables can be accessed from any CSS file like this:

color($colors, primary, base)

Now we set the background of the toolbar to the base color, using the CSS element toolbar-background in app.scss

Instantly the colors of the tab buttons and the toolbar changes.

We change the background to grey and remove the text from the template.

In home.css

In home.html

We first design a card to display a course, and then put it in an array and display it.

The code for the card is as below.

Since this is an overlay we add additional CSS to display it accordingly. You can pick this up from the Ionic documentation for card.

The ion grid uses flex to lay out the elements on the screen.

We will now put this in a slider so that the user can slide the course categories.

The slider allows the user to slide horizontally through content. The property slidesPerView allows the user to partially see the next slider, encouraging him/her to slide further.

We will next, list the featured courses in a similar fashion.

So now, we have a decent landing page, we’ll go ahead and create a page that lists the courses the user has enrolled for.

For this, we need to generate a page and add a menu item for the same. We will then use an ion-list to list the courses the user has enrolled for.

First, we generate the page:

By using no-module, Ionic will not create a lazy-loaded page. We will see this later.

This command generates a page like this:

This then needs to be included in app.module:

And needs to be included as a tab in tabs/tabs.html:

And in tabs.ts we declare the variable tabsRoot:

We can now see the My Enrollments tab:

And on clicking on it the myEnrollments page loads up:

We then use the ion-list to display the details: