Ionic Tutorial: Building a complete mobile app with Ionic 3


Updated on June 17, 2018
Ionic Tutorial: Building a complete mobile app with Ionic 3

45 Min READ! BeginnersIonic 3UX

In this Ionic tutorial we will build an example app with a question and answer format (Q&A), similar to StackOverflow. We will go through the core concepts of an Ionic 3 App such as Project Structure, Navigation, UI/UX and Data Integration.


Why have we built this Ionic tutorial?

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 3 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.

What is Ionic Framework?

And why you should use it

For those who’ve only heard about Ionic Framework but aren’t 100% sure about what it is, here’s a short introduction.

Ionic framework is free and open source. It allows you to build mobile apps easily using web technologies. The good news is: if you can manage to create websites, then you know how to build mobile apps. Ionic Framework offers the best web and native app components for building highly interactive, native and progressive web apps.

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.

Also, it allows developers to design apps for every app store and mobile web, using a unique base code.

If you want to learn more about Ionic I advise you to read our Ionic Framework introduction and key components tutorial.

Well, now that we’ve cleared up what Ionic Framework is and the kind of things that can be built with it, I want to talk a bit about IonicThemes.

We aim to assist developers and contribute to the software industry by creating high quality content that helps in learning how to make better products. At our core, we’re a company about empowering people with tools and services to develop new skills and make a living. Sharing our experiences and providing easy to implement solutions is at the core of IonicThemes soul.

At IonicThemes we want to help you learn more about Ionic and also help you creating robust, complete but above all nice and user-friendly applications. Most programmers have a lot of difficulties designing and don’t tell me they don’t because as programmers we have to go through this every day. It wasn’t until we started working with a team of designers that we really realized the difference between a good design and using Ionic’s default components. In other words, don’t get me wrong, the Ionic team did an excellent job in the default components designs, but in my opinion, you need to give your app a little love before publishing it.

As Max Lynch Ionic Framework CEO said: “IonicThemes helps you get a real app up and running fast by handling all the boilerplate and design that normally takes weeks. Any Ionic developer should consider getting one and getting to work that much more quickly!”

I honestly think that Ion2FullApp ELITE is the best and most complete Ionic template that you’ll be able to find and it’s also worth mentioning that we update it and add features and improvements regularly. Some of the features you’ll be able to find in this template are: WordPress Integration, Firebase Integration, examples of how to use google maps, google places and geolocation, video playlists, image management, internationalization and much more…

Ion2FullApp ELITE
Ion2FullApp ELITE
Ion2FullApp ELITE

At IonicThemes we work with a team of designers and experts in User experience to create templates that have nice and flexible components that are easy to integrate into your app.

Ionic buttons, forms, ionic cards, ionic images, you name it. We have a piece of article written for every single one of the categories included on the platform.

Note: this tutorial is for Ionic 3. If you are looking for an Ionic 1 starting guide go to Building a Complete Mobile App with Ionic Framework 1 Step by Step.

It’s time to start!

What are you going to learn on this ionic tutorial?

Ionic getting started guideIn this ionic framework tutorial we will build an Ionic 3 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.

In our previous tutorials we discussed about Ionic Framework introduction and key componentsand also how to Setup your development environment to build Ionic apps. We also learned how should an Ionic App Architecture look like. If you are new to ionic framework you should consider reading these posts before.

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.

If you click “GET THE CODE” button from above, you will get the code of the full 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:

ionic 3 example app
ionic 3 example app
ionic 3 example app

Now 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 Architecture

Ionic Project ArchitectureAfter 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 3 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 app’s file and see what do we have inside.

App folder

ionic App folderapp.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 is an ionic auto-generated file and it takes care of the bootstrapping of the app.

Pages folder

ionic pages folderEach 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 centralize in one place where you should change stuff.

Theme folder

ionic theme folderHere you will find all the variables, mixins, shared styles, etc, that will make your app customizable and extendable.

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

ionic services folderThis 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 4 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 json file.

question.service.ts – answer.service.ts

In these files we will be handling the communication and interaction with our backend API. We won’t cover these on this tutorial.

Assets folder

ionic assets folderAll 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

Ionic NavigationNavigation in Ionic 3 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 this.navCtrl in the constructor, we can call this.navCtrl.push(), and pass it the page we want to navigate to. We can also pass it an object containing data we would like to pass to the page being navigated to. 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.

For example, this 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 that 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);
}

Some notes about navigation UX in Ionic Apps

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.

Good navigation, like good design, is invisible.

We can classify navigation patterns in many ways, but for this post we followed this convention: Primary Navigation and Secondary Navigation.

Primary Navigation Patterns

Persistent Navigation

Persistent navigation encapsules menu structures like Tab Menu or the List Menu. When you open an app with this type of navigation, you’ll notice right away what are the options for the primary navigation.

Some of the mobile persistent navigation patterns you can use in your Ionic apps are:

  • Springboard or Launchpad
  • Cards
  • Lists
  • Gallery
  • Tab Menu
Transient Navigation

Transient navigation has to be revealed in an explicit way through a gesture or tap. This is because of the change in screen size with smartphones, which have made designers to think “outside of the box”, literally. These normally include Side Menus and other off-canvas elements.

Transient as a term means staying a short time, which is how the following navigation menus actually work. They are normally hidden until we make an action to reveal them; then making a selection and they disappear again.

Some of the mobile persistent navigation patterns you can use in your Ionic apps are:

  • Side Drawer or Side Menu
  • Toggle Menu

When to use them?

It’s important to ask yourself these questions when deciding when to use persistent and transient navigation on your ionic app:

  • Is your application “flat”? Are the menu categories equivalent in hierarchy, and are there just a few primary categories (i.e., three to five) in the app?
  • Do your users need the menu to be always visible for quick access?
  • Do the menu categories have status indicators, like the number of unread emails, for instance?

Did you answer any of these questions with a yes? Then you’ll probably need to choose persistent navigation.

Secondary Navigation Patterns

You can combine a primary navigation pattern with a secondary navigation pattern to help you better navigate the information structure. The primary navigation patterns may also serve as secondary navigation patterns. It’s common to see Tabs with Tabs, Tabs with Lists, Tabs with a Dashboard, a Springboard with a Gallery, and more.

Some of the mobile secondary navigation patterns you can use in your Ionic apps are:

  • Page Swiping
  • Scrolling Tabs
  • Accordion

You can find more information about the details of Ionic Navigation in Essential Mobile Components – Navigation.

Improve the design of your Ionic app

ionic ui and uxIonic 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
      • Ionic form inputs
  • Manage answer view
    • A view to enable the creation and modification of an answer.
    • Components:
      • Ionic modal
      • 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.

Responsive Grid

The grid in ionic framework is a powerful mobile-first flexbox system for building custom layouts. It is heavily influenced by Bootstrap’s grid system.

The grid is basically composed of three units — a grid, row(s) and column(s). It works like this: columns will expand to fill their row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns and breakpoints can be fully customized using Sass. Learn more about the responsive grid in ionic framework.

Sass Variables

We love Sass because it’s like css with super powers and because they go hand in hand with Ionic! Sass variables allow you to define a value once and then use it in multiple places. Variables begin with dollar signs $ and are set like CSS properties. You can change the value of the variable in one place, and all instances where it is used will be changed, too. For example, to define the main color of your app, you could create a variable $main-color: red;

RTL Support

Did you know that Ionic offers full LTR and RTL support for apps of all languages? If you have any custom styles that are applied to your app, you might want to use some built in mixins that will address the multi-directional needs.

To help you with rtl support in ionic apps we created a specific tutorial and example app that you can find in Internationalize and Localize Your Ionic App.

Ionicons

Chances are that you will need icons inside your ionic app. That’s why the Ionic team built super beautiful and free icons that you can use to make your apps prettier.

Icons can be used on their own, or inside of a number of Ionic components. One nice feature of Ionicons in Ionic apps is when icon names are set, the actual icon which is rendered can change slightly depending on the mode the app is running from (iOS, Android or Windows phone).

For a full list of available icons, check out the Ionicons docs.

Data Integration

Data servicesThe 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. In a future tutorial 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 domain models.

Services

Ionic 3 is implemented on top of Angular 4 and it borrows it’s best parts. Angular 4 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());
  }
}

And 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

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.

We get it. Really we do. But 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 3 tutorial you learned how to create the main components of an Ionic 3 mobile app. We also discussed about key concepts an ionic app such as project structure, ionic navigation and data integration.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. That’s why we created Ion2FullApp ELITE – The most complete Ionic 3 Starter App to help you save hundreds of hours of development and design time.

Some of the features you’ll be able to find in this ionic 3 template are: WordPress Integration, Firebase Integration, examples of how to use google maps, google places and geolocation, video playlists, image management, social logins, internationalization and much more.

Ion2FullApp ELITE
Ion2FullApp ELITE
Ion2FullApp ELITE

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 3 app by clicking the GET THE CODE button from the beginning of this page.

Would you like to keep learning about Ionic Framework? Find dozens of ionic framework tutorials in our tutorials section.

Now that you’ve learned more about Ionic Framework, why don’t you give a chance to these Ionic 3 Tutorials?

Enjoyed reading this Ionic Tutorial?

Subscribe to keep learning Ionic! You will receive offers, new ionic tutorials and free code examples from IonicThemes.

Subscribe

Related Ionic Templates

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: