Ionic Tutorial: Building a complete mobile app with Ionic Framework
The goal of this Ionic tutorial is to build the most complete getting started with Ionic Framework guide ever built. We want to help beginners through their first steps on the Ionic world. As developers, we know that starting with a new technology can sometimes be a bit frustrating so want to help here.
To help you through your Ionic Framework learning process, we created an Ionic app with a question and answer format (Q&A), where users will be able to ask and answer questions. So in this complete tutorial we will go all the steps and concepts needed for you to create your first ionic app.
We will learn enough core Angular and Ionic to get started and gain confidence that Ionic can do whatever we need it to do. We will be covering a lot of ground at an introductory level, but we will find plenty of references to topics with greater depth.
NOTE: I recently updated this post to Ionic 5. Read the latest version.
What is Ionic Framework?
Ionic Framework is the beautiful, free and open source mobile SDK for developing native apps in one codebase. I have been developing apps with Ionic since ends of 2014. Everything was different then… 😨
More than 4 years later I can say that Ionic is a super solid and complete framework, not just to build mobile apps, but also to build desktop and progressive web apps (PWA).👏
You can think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. It’s like a kind of “Bootstrap for Native” but with all the support for a broad range of common native mobile components, slick animations, and incredible design.
What are you going to learn on this ionic tutorial?
In this ionic framework tutorial we will build an Ionic example app with a question and answer format (Q&A), where users will be able to ask and answer questions. The home page will have a list of categories. Each category will have a list of questions, and each question will have a list of answers. Users will also have the possibility to vote the questions and answers (up-vote, down-vote), plus a form for creating questions and answers, similar to StackOverflow.
If you are new to Ionic Framework you should consider reading these posts before: Ionic Framework introduction and key components, and then how to Setup your development environment to build Ionic apps. Also if you want to go a bit deeper you can check how should an Ionic App Architecture look like.
This tutorial takes you through the steps of creating an Ionic application in TypeScript. It guides you through every step from setup to a complete featured case, which illustrates the fundamental attributes of an ionic app: data binding, a sensible project structure, navigation, services, dependency injection and remote data access, among others.
We will learn enough core Angular and Ionic to get started and gain confidence that Ionic can do whatever we need it to do. We will be covering a lot of ground at an introductory level, but we will find plenty of references to topics with greater depth.
You can download the code of this ionic example app.
First we will explain how to get data from a local json, however, then we will explain how to pull data from a remote DB. The categories are stored in a local json, but questions and answers are stored in the remote DB and accessed through an API.
What are we going to build?
This ionic app consists in a CRUD (Create, Read, Update, Delete) of Questions and Answers where users can post new questions and answer others.
It will have the following functionalities:
- Manage Questions (Create, Update, Delete)
- Manage Answers (Create, Update, Delete)
- List all the Questions in a feed format
- List all the Answers of a particular Question
- Enable people to vote Questions and Answers (up-votes and down-votes)
This is how the final app will look like:
In this first part, you will learn how to:
- Initialize your application using Ionic CLI
- Create classes to represent the objects from the model
- Create services to access and handle data
- Create pages and components to represent the functionalities and display the user interface
Ionic Project structure
After following the setup instructions for creating a new project, let’s walk through the anatomy of this particular Ionic app.
Ionic’s app typical architecture includes:
- Modules: They help organize an application into cohesive blocks of functionality by wrapping components, pipes, directives, and services.
- Components: They are the most basic building block of an UI, and the main way we build and specify elements and logic on the page.
- Templates: They are used to define a component view. A template looks like regular HTML, with typical HTML element tags, but it also has some differences.
- Services: Almost anything can be a service, any value, function, or feature that your application needs. A service is typically a class with a narrow, well-defined purpose.
- External resources: Databases, API’s, etc, are fundamental as they will enable our app to interact with the outside world.
Read about the anatomy of an Ionic App to learn more about each of these core building blocks.
Now, let’s go deeper and map the project structure to the app’s architecture, so we can fully comprehend how all the pieces interact with each other.
Inside the src directory we find our raw, uncompiled code. This is where most of the work for an Ionic app will take place. When we run ionic serve, our code inside src/ is transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript the browser needs.
Let’s go through each of the files from our Ionic app to see what do we have inside.
App folder
app.component.ts
It defines the basic structure and initial navigation of the app. In our case we have a side menu navigation. In this file, we define which page would be the first one and the options and navigations of the side menu.
Here, we will also get notified when the platform is ready and our plugins (cordova, native stuff) are available. That enables you to do any higher level native things you might need.
app.html
Here we define the navigation and it’s root. In this template, we set up an ion-menu to function as a side menu, and then an ion-nav component to act as the main content area.
app.module.ts
This file is the entry point for our app. It includes the main Angular 4 module (NgModule) of our app. It is also the place where we should declare the vast majority of our dependencies (such as pages, custom components, services, etc) and ‘teach’ the main module how to use them.
app.scss
This is the main entry point for our app Sass files/styles. Here is the place you should include your app shared imports and global Sass you may use and apply globally. Additionally, this file can be also used as an entry point to import other Sass files to be included in the output css. This is NOT the place to include shared Sass variables. You have to define, adjust, add those in theme/variables.scss.
main.ts
This file is auto-generated by the Ionic CLI and it takes care of the bootstrapping of the app.
Pages folder
Each page has its own folder. Within that folder you will find every related file for that page. This includes the html for the layout, Sass for the styles and the javascript for the page component.
Let’s have a closer look at what I’m talking about by breaking down the feed page.
learn-feed.html
Here you will find all the layout for the page, this file is also known as the page template. Everything we do is crafted using cutting edge techniques and technologies. We always code towards customizability and ease of use. We also make use of the awesome ionic components.
learn-feed.ts
In the typescript file you will find the functionality and interactions of the page and is where the view logic should go. This file is also known as the page component.
learn-feed.scss
The styles specific for this page should go here.
This app structure makes it easy for you to know and concentrate in one place where you should change stuff.
Theme folder
Here you will find all the variables, mixins, shared styles, etc, that will make your app customizable and extendable. (and also beautiful)
Maybe you don’t know Sass? Briefly, it is a superset of css that will ease and speed your development cycles incredibly.
common
Under the theme/common folder you will find (classified by component/functionality) all the shared styles, this way we encourage code reuse and prevent DRY (Don’t Repeat Yourself).
variables.scss
This is the predefined ionic file where you should include all the sass variables you may use in your app. For example, all the colours used within the app. Having those in variables, will enable you to play around and try different colour schemes easily.
Services folder
This folder is for your app services. However, if you app is bigger (not just an example app) you may have your services more close to the modules or pages they serve.
In this ionic example app we will use services to access the data that will be presented in the app. In our case, we have two different kind of services. The ones that interact with the remote backend API to get the questions and answers and the one that interacts with the local data json file to get the categories.
In this first part we will only focus on the local data json files.
learn.model.ts
Angular relies heavily on typescript and object oriented programming. It is a good and recommended approach to follow these principles along the way. That is why we create models (typical typescript classes with object representations) to represent the data that’s going to be presented in the layout. That is what you will find in this file.
learn.service.ts
In this file you will find methods to access and pull the data that will be presented in the learn pages. In our case we are using sample data pulled from a local json file.
question.service.ts & answer.service.ts
In these files we will be handling the communication and interaction with our backend API.
Assets folder
All the images you may use in your app, as well as other assets, go here. In our case we simplified the data layer of some parts of the app by creating a json file with sample data.
Ionic App navigation
Before we start thinking about navigation, we must consider the type and amount of data you want to display in your app. Don’t forget you will use navigation to show and structure your data, that is why it should follow the information structure of your app and not the other way round.
It is important to keep the best practices for navigation design. This ensures that people will be able to use and find the most valuable features in your app.
You can find more information about the details of UI/UX of navigation in Essential Mobile Components — Navigation.
A little more about the navigation
Navigation in Ionic apps works like a simple stack, where we push new pages onto the top of the stack. This moves us forward in the app and shows a back button. To go backwards, we pop the top page off. Since we set the NavController in the constructor, we can call this.navCtrl.push(), and pass the page we want to navigate to, for example: this.navCtrl.push(OtherPage).
Data can also be passed to a view by passing an object to the push method like this.navCtrl.push(OtherPage, { id: “12”, category: “Books” });
Using push to navigate to a new page is simple, but Ionic’s navigation system is very flexible. Check out the navigation docs to see more advanced navigation examples.
The following code is how we handle navigation for the side menu component. We are not pushing pages the normal way. Instead, we set them as root pages clearing previous navigation stacks as this is the user experience we want to achieve.
//app.component.ts
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component, page.params);
}//app.html
<ion-menu [content]="content" [swipeEnabled]="false">
<ion-content class="menu-content">
<ion-list class="menu-list">
<button ion-item detail-none *ngFor="let page of pages" (click)="openPage(page)">
{{ page.title }}
</button>
</ion-list>
</ion-content>
</ion-menu>
The “internal” navigation of the app, on the other hand, is handled by pushing pages like this:
//learn-feed.ts
openDetails(params) {
this.navCtrl.push(LearnDetailsPage, params);
}Improve the design of your Ionic app
Ionic apps are made of high-level building blocks called components, which allow you to quickly construct an interface for your app. These include modals, popups and cards. They are reusable UI elements that serve as the building blocks for your mobile app, made up of HTML, CSS, and sometimes JavaScript. Every Ionic component adapts to the platform on which your app is running. This is called Platform Continuity and you can find more information in the Theming section of the Ionic Framework documentation.
In this example app, we have different layouts. For each view we need different UI components. Here’s a short list with the most important components we used for each view and a link to the specifics of the implementation of that view.
Learn feed view
A feed showing the different Ionic concepts you need to learn. Components: Ionic content cards.
Learn details view
A view to show the details of a particular concept. These details include a short explanation of the concept and a list of questions about this concept. Components: Ionic content cards
Question details view
A view to show the list of answers to a particular question. Components: Ionic content cards
Manage question view
A view to enable the creation and modification of a question. Components: Ionic modal and Ionic form inputs
Manage answer view
A view to enable the creation and modification of an answer. Components: Ionic modal and Ionic form inputs
In this example app we used some handy Ionic UI components like: Side menus, Content Cards, Modals and Form inputs.
Please feel free to dig the library of UI components that Ionic has in their components documentation page.
Forms are the pillar of any business applications. You can use forms to perform countless data-entry tasks such as: login, submit a request, place an order, book a flight or create an account. When developing a form, it’s important to create a good data-entry experience to efficiently guide the user through the workflow. To learn more about forms check the following article:
Ionic Data Integration
The key to an evolving app is to create reusable services to manage all the data requests to your backend.
As you may know, there are many ways when it comes to data handling and backend implementations. In this tutorial we will explain how to consume data from a static json file with dummy data. Then we will show you how to build and consume data from a backend API with Strongloop (a node.js framework perfectly suited for REST API’s) and MongoDB (to store the data).
Both implementations (static json and remote backend API) need to worry about handling data requests. This works the same and it’s independent on the way you implement the backend. We will talk about models and services and how they work together to achieve this.
We encourage the usage of models in combination with services for handling data all the way from the backend to the presentation flow.
Models
Domain models are important for defining and enforcing business logic in applications and are especially relevant as apps become larger and more people work on them.
At the same time, it is important that we keep our applications DRY and maintainable by moving logic out of components themselves and into separate classes (models) that can be called upon. A modular approach such as this, makes our app’s business logic reusable.
To learn more about this, please visit this great post about angular 2 domain models.
Ionic Services
Ionic is implemented on top of Angular 5 and it borrows it’s best parts. Angular 5 enables you to create multiple reusable data services and inject them in the components that need them.
Refactoring data access to a separate service, keeps the component lean and focused on supporting the view. It also makes it easier to unit test the component with a mock service.
To learn more about angular services, please visit Angular documentation about services.
In our case, we defined a model for the learn view data we are pulling from the static json file. This model is used by the learn.service.ts.
//learn.model.ts
export class CategoryModel {
slug: string;
title: string;
description: string;
background: string;
tags: Array<string>;
}//learn.service.ts
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Http } from '@angular/http';
@Injectable()
export class LearnService {
constructor(public http: Http){}
getFeedCategories(){
return this.http.get("./assets/categories/categories.json")
.map((res:any) => res.json());
}
}
We use this service in the learn-feed.ts view to load the Learn Feed categories.
//learn-feed.ts
ionViewWillEnter() {
this.learnService.getFeedCategories()
.subscribe(data => {
this.categories = data.categories
});
}Each time we add a new service remember that the Angular injector does not know how to create that Service by default. If we ran our code now, Angular would fail with an error.
After creating services, we have to teach the Angular injector how to make that Service by registering a Service provider.
According to the Angular documentation page for dependency injection there are two ways to register the Service provider:
- In the Component itself
@Component({
selector: 'my-heroes',
providers: [HeroService],
template: `<h2>Heroes</h2><hero-list></hero-list>`
})- In the Module (NgModule)
In our case, we register all services in the app.module.ts like this:
//app.module.ts
@NgModule({
declarations: [
MyApp,
LearnFeedPage,
...
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
SDKBrowserModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LearnFeedPage,
...
],
providers: [
LearnService,
...,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})Dependency Injection
One side note on the importance of Dependency Injection from the software architecture principles point:
Remember we just mentioned that we “inject” data services in the components that need them? Well, this concept is called Dependency Injection and it is super important to know more about this.
Do we new() the Services? No way! That’s a bad idea for several reasons including:
- Our component has to know how to create the Service. If we ever change the Service constructor, we will have to find every place we create the service and fix it. Running around patching code is error prone and adds to the test burden.
- We create a new service each time we use new(). What if the service should cache results and share that cache with others? We couldn’t do that.
- We are locking the Component (where we new() the service) into a specific implementation of the Service. It will be hard to switch implementations for different scenarios. Can we operate offline? Will we need different mocked versions under test? Not easy.
It is so ridiculously easy to avoid these problems that there is no excuse for doing it wrong.
Keep Learning Ionic Framework
In this ionic tutorial you learned how to create the main components of an Ionic mobile app. We also discussed about key concepts an ionic app such as project structure, ionic navigation and data integration.
Hopefully, you didn’t run into any issues with this Learn Ionic from scratch step by step tutorial, but if you did, feel free to post in the comments section below. Remember you can get the full source code of this Ionic app.
Would you like to keep learning about Ionic Framework? Find dozens of ionic framework tutorials in our tutorials section.
Now that you’ve learned the basics about Ionic Framework, you can continue learning the following:
- Forms and Validations in Ionic
- Add Facebook Login to your Ionic App.
- Monetize your Ionic App with AdMob
- Internationalize and Localize your Ionic app (Multilanguage)
- Add Google Login to your Ionic App.
Enjoyed reading this Ionic Tutorial?
Subscribe to keep learning Ionic! You will receive offers, new ionic tutorials and free code examples from IonicThemes.
Originally published at ionicthemes.com.
