Learning Path: Ionic: Application Development with Ionic 2
4.5 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
67 students enrolled

Learning Path: Ionic: Application Development with Ionic 2

Build fully-featured cross-platform mobile applications with Ionic 2 and Angular 2
4.5 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
67 students enrolled
Created by Packt Publishing
Published 5/2017
English [Auto]
Current price: $119.99 Original price: $199.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create custom UIs using Angular 2 directives
  • Create beautiful animations and graphics in your application
  • Embed videos and other media into apps
  • Access native device functionalities, such as a camera and maps, using ngCordova
  • Theme your application based on the various platform styles available
  • Publish your application to a variety of platforms
  • Customize an Ionic 2 application using the power of SASS variables
  • Interact with users and gather relevant information using a form
Course content
Expand all 57 lectures 05:01:41
+ Introducing Ionic 2
22 lectures 01:17:59

This video will provide an overview of the course.

Preview 03:33

Starting a project can sometimes mean installing tons of things and can be quite a lengthy process before everything is up and running. However, this is not the case with Ionic 2, which offers a great CLI and a "start" command to bootstrap code, including a side menu, several pages, and so on.

Bootstrapping an Ionic App

It is important for developers to be familiar and comfortable with the structure of the project. We'll take a look at the location of some of the different elements of the project, configurations, dependencies, hooks, and actual app components.

Exploring the Project Structure

The app needs to be served, but this depends on its status. Let's take a look at which way of serving is better. The live reload server is an obvious winner for ease of use and debugging, while the new lab view helps us think about the experience on both Android and iOS. Emulators give a better idea as to the real experience that users will have; finally, the device can be used when the app is close to finalized.

Lab, Device, and Emulator

Apps always contain several pages. We need to create them and ensure that they are navigable.

Preview 03:05

Ionic2's navigation system is very different from the previous version. We will take a look at how the stack is used and the difference between the root and the other pages.

Navigation Concepts in Ionic 2

Navigation concepts are acquired; it is time to apply them to our application.

Navigating to Pages

We need to present the list of search results in a visually attractive list. Ionic makes this easy with the ion-list and ion-icon components, and Angular allows us to repeat the items using ngFor as well as bind the values of attributes to the DOM elements' properties.

Preview 05:15

The app executes a search on the iTunes API. This requires a search bar that will react when the user presses "enter". We'll use the search bar component to present the query input and bind to the keyup as well as cancel events.

Adding a Search Bar

The search should be targeted to a specific country's iTunes API. So, we will create a settings page in which we'll use a radio to select the country.

Using a Radio Buttons List

We need to load real data from an API. For this, we need HTTP_PROVIDERS to be provided and the HTTP service to be dependency injected.

Preview 04:07

Some APIs do not allow cross-origin calls. Also, having logic coded inside the component itself isn't a good practice. So, we'll create our own service and make use of Jsonp to get around the cross-origin restrictions

Creating Your Own Service

Filtering and other calls for actions are vital in any app but not easy to present smartly in a mobile application. Action sheet is a great solution to this issue; it displays a nice overlay, and we can code what happens when we click on each button.

Preview 03:39

Temporary or intermediary pages are often necessary in applications. Although we know we can navigate to a page with a Back button, a modal makes more sense sometimes from a user-experience perspective. We will create such a modal and pass the track we clicked on as part of the navigation to display a preview of this track.

Creating a Modal Preview

Cell phones often face a shortage of space. So relying on a bulky button is rather outdated. Pull-to-refresh is an amazing user experience tool that allows you to pull a list of items and refresh it with new ones.

Adding a Pull-to-refresh

The application needs to communicate with the user. Through the use of various dialogs, an alert, a confirm box, and a prompt, we will make the app clearer and more interactive with the user.

Preview 05:32

Tasks run in the background can be confusing to the user; they can't see that something is happening. Loaders or progress indicators take care of this issue and give users a clear statement that their request is being processed.

Adding a Loader
Building a Form

Though the app looks really nice, it is rare that your corporate colors match the out-of-the-box Ionic feel. Ionic uses a large number of SASS variables, which you can override in order to make the app feel more like your own.

Preview 03:06
Navigation with params

It is sometimes troublesome and also less declarative to work on data only within the controller. Pipes allow us to modify data from within the template. They are typically used to filter arrays or format content (dates, pluralization, and currency)

Using a Pipe
+ Ionic 2 Solutions
35 lectures 03:43:42

This video gives overview of the entire course.

Preview 03:53

The aim of this video is to setup an environment for creating apps

Setting Up a Development Environment

The aim of this video is to get started with the creation of a sample app

Creating a HelloWorld App Via the CLI

The aim of this video is to create an app via the Ionic Creator

Creating a HelloWorld App Via Ionic Creator

The aim of this video is to view the App using a web browser

Viewing the App Using Your Web Browser

The aim of this video is to use Ionic CLI to view our App

Viewing the App Using the Ionic CLI

The aim of this video is to view our app in Xcode

Viewing the App Using Xcode for iOS

The aim of this video is to view our app using Android

Viewing the AppU Genymotion for Android

The aim of this video is to view our app using Ionic view

Viewing the App Using Ionic View

Working with multiple pages makes work faster and easier. This video will enable you to do that.

Preview 12:24

Menu navigation is important for the user to switch between two pages in the app. In this video, you will learn how to add the navigation menu.

Adding the Left and Right Menu Navigation

When you create pages, you also need to create the options when the user selects a particular option from the page. The navigation should happen properly.

Navigating Multiple Pages with State Parameters

Everyone loves food, right? We will first start with a basic pizza ordering component.

Preview 04:56

Components and directives are different in Angular 2. This video will help you understand the difference by creating a user input directive.

Creating a Custom Username Input Directive

Pipes are used to represent data in a different format in the view. We will learn how to build a pipe for that.

Creating a Custom Pipe

Communication across the pages and components makes rendering information easy. It prevents trips to the backend. Therefore, you will need a shared service.

Creating a Shared Service to Provide Data to Multiple Pages

The aim of this video is to Create a form to test our input validation.

Preview 13:39

It's not always possible to have the backend available when you are developing the frontend. The aim of this video is to learn how to retrieve data.

Retrieving Data via Mocked API Using a Static JSON File

The aim of this video is to integrate with a real backend service for the payment process.

Integrating with Stripe for Online Payment

The aim of this video is to add a video with autoplay in the background

Preview 05:56

The aim of this video is to show a physics-based animation, which is a bouncing button that can show and hide a top quote box in our app

Creating a Physics-Based Animation Using Dynamics.js

The aim of this video is to create a gesture to the animation

Animating the Slide Component by Binding a Gesture to the Animation State

The aim of this video is to create some animation in the background of your login page

Adding a Background CSS Animation to the Login Page

Authentication is important in any app you develop. It provides security to your users. This section will simplify the authentication concept as much as possible.

Preview 07:53

Push notifications encourage users to open the app even if they are not currently using it. This section will help you set up a push notification server using Ionic.

Building an iOS App to Receive Push Notifications

The push notification server for Ionic and iOS operates in the same way. This section will enable you to do the same with an Android API.

Building an Android App to Receive Push Notifications

This section will help you make an app that takes photos from the camera plugin or directly from your device.

Preview 07:04

If you develop an app with shareable content, you can use the native device to share via the device’s social accounts. This prevents logging in from a separate browser and the user has multiple sharing accounts to select from.

Sharing Content Using the Social Sharing Plugin

When a user installs an app, there are terms of service they need to agree to. However, in case the app is not updated, they agree to the old terms. So, it is advisable to keep the terms of service separate from the app. The user could directly be directed to the app website using the InAppBrowser plugin.

Displaying a Term of Service Using InAppBrowser

Mapping features in app are always useful to find your location and the directions to the desired location. This section will help you in achieving that, using Ionic Native’s Google Maps.

Creating a Taxi App Using the Google Maps Plugin and Geocode Support

When you develop an app, you want it to look attractive and good on every platform. Also, you don’t want to run the app on different platforms separately and debug them. Ionic 2CLI provides you with integration, so you could view all the themes in the same browser window. This video will enable you to do that.

Preview 04:44

Every mobile platform has a different theme design. Ionic 2 has built-in features to support the theme changes based on the detected platform, so you could focus on the app experience rather than spending time on the platform.

Customizing Themes Based on the Platform

When the number of users for your app increases, you will not be able to keep track of everyone’s versions. Also, your backend might require parameters from the newer app. In this case, you need to detect the app version locally, so you can notify the users for an update requirement. This video will help you in developing an app that will do the same.

Preview 05:17

Publishing an app is the final step and would be frustrating if you are not prepared. This section will arm you with whatever you require to publish your app.

Building and Publishing an App for iOS

Building and publishing an Android app is easier than doing the same for an iOS app. You will see how to do that in this video.

Building and Publishing an App for Android
  • Since Ionic is built on top of AngularJS and Apache Cordova, you will need to have basic knowledge about these frameworks. You also need to be familiar with HTML and CSS.

Developing real-time apps is the need of the hour, and apps that deal with humongous amounts of user data and real-time information that needs to be updated frequently are in high demand. Currently, one of the most popular frameworks for this task is the Ionic Framework.

Application Development with Ionic 2 is Packt’s Video Learning Path, which is are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

This course will get you started with Ionic and help you create Angular 2 components that interact with templates.

You will learn to bootstrap an application and enhance one cool feature at a time. Each feature will cover one of the essential components of an app: user experience, logic and data, and the user interface.

You’ll then work with Cordova to support native functionalities on both iOS and Android. Also, you’ll learn to use the default themes for each platform as well as customizing your own.

By the end of this Video Learning Path, we will have built an entire awesome iTunes Browser app along with learning how best to deploy your app to different platforms.

About the Authors:

Mathieu Chauvinc is a Managing Director at Red Ape Solutions, where he aspires to keep the company at the bleeding edge of web technologies. On a daily basis, he leads the tech team of 15 and collaborates with them in building complex single page applications and neat hybrid mobile apps. He has been involved in web technologies for over a decade, from Django to Node.js and Go, SQL to NoSQL, Mootools to Angular 2, continuously trying to keep the right balance between the excitement of new frameworks and the stability of proven ones. He always has a special place in his heart for Python and Django.

Hoc Phan is a technologist with a wide range of experience in front-end development, cloud computing, and big data. He started programming at the age of 12, with Pascal and Assembly, on his Intel 80286 computer. He learned to start practicing right away, even before figuring out the important concepts. Hoc worked on many JavaScript projects in the past by teaching himself the framework using various online sources. He was one of the first few developers who tested Ionic for its feasibility as a JavaScript replacement for a device's native language.

Who this course is for:
  • If you are familiar with HTML, Javascript, and AngularJS and want to build real-time applications with Ionic 2, then this is the perfect course for you!