Take this
course

Software Development / Web Development

Beginning Ionic Hybrid Application Development

Explore Ionic to build elegant, native-looking applications for iOS and Android

Description

Mobile-first is the perspective developers have to think from to meet the demand of creating modern applications which are highly connected, accessible, and built for longevity.


Ionic enters this space as a powerful SDK which leverages AngularJS and Apache Cordova to enable the development of applications which look and perform like native ones, written purely in HTML, CSS and JavaScript. The value of Ionic for web developers is that grants the flexibility of developing mobile applications for major mobile platforms without getting into the complexity of working with native frameworks and languages.


Beginning Ionic Hybrid Application Development delivers your first steps into developing elegant, feature-rich cross-platform mobile applications with the framework, whilst taking advantage of its AngularJS backbone, and the Cordova API set.


We start off installing Ionic, exploring various commands such as start, serve, platform, run, and emulate, giving you a basic foundation of working with the Ionic CLI. We will then walk through built-in templates, themes, and headers, before creating an Ionic list, rendering data for it, and taking a look at creating services to manage our data efficiently.


Next, we start to incorporate greater sophistication by adding elements such as infinite scroll and pull-to-refresh, implementing data persistence, and focus on generally enhancing the user experience. Finally, we will talk about deploying our application to an emulator for testing purposes, and discuss Cordova plugins that can add even more functionality. By the end of the video you will have developed a full-featured, multi-platform mobile Ionic application.

Full details

Curriculum

  • Getting Started with Ionic
    The Course Overview
    Ionic is a new framework that is unfamiliar to many. We now introduce this framework.
    1:46
    Installing Ionic
    Installing open source projects is rarely easy. We use the ionic box to make things as easy as possible. • Install VirtualBox • Install Vagrant • Install the ionic box and then use the vagrant up command to install the virtual machine that contains the development environment
    3:03
    Ionic Commands
    Ionic has dozens of commands. Let’s use some of them to get more familiar. • Use the help command to list all available commands • Use the templates command • Use the resources command
    3:13
    Ionic Starter Templates, Themes, and Headers
    Ionic has half a dozen templates. Let’s start getting familiar with some of them. • Use the start command to create a template • Use the serve command to run the app in the browser • Use the Start menu to create the coffee app
    5:32
  • Programming Ionic
    The Ionic App Structure
    Ionic uses a program structure unfamiliar to many developers. The starter templates create the basic structure of the app. • Discuss the app structure
    4:23
    What Is a Route?
    Understanding routing is critical to creating apps with Ionic. Ionic uses the very popular ui-router library. • Learning what is routing • Understanding how to work with routes
    3:33
    Adding Menu Items
    Menus are a very familiar programming metaphor. Creating menus and adding items is easy in Ionic. • Add menu item called ‘Listings’ using href and ui-sref
    2:42
    Creating an Angular Controller
    Controllers in Angular act as the glue between the model and the view. We create our own controller to eventually render our data. • Create an Angular controller • Add the controller to a route
    2:01
    Creating an Ionic List
    Lists are an often used UI pattern. Making one in Ionic is simple. • Delete the test message previously created • Create a sample data for the list • Render the list to the view
    2:32
  • Services and AJAX
    Creating an Angular Service
    It is best practice to use a service to implement data access. Let’s create a service. • Create a service • Add the service’s data and API • Add the service to the controller as a resource and call it
    3:37
    Making an AJAX Call
    Mobile apps need to access remote data. Learn to make an AJAX call. • Get the API access key • Write code to access the remote data web service • Strip off the metadata and return the data to the caller
    3:21
    Calling the Service from a Controller
    Controllers need access to remote data. Call the service from the controller asynchronously. • Create an empty array for the listings • Make a call to the service • In the then clause of the returned promise, set the listings array
    1:06
    Adding an Infinite Scroll Element
    The service returns only the first page out of many possible pages. Use an infinite scroll to get all the pages. • Modify the service to send consecutive pages • Modify the controller to ask for more pages • Add an infinite scroll element to the view
    1:50
    Adding a Pull to Refresh the Element
    We need a way to reset the list of coffee shops. Implement a pull to refresh. • Add an init method to the controller • Add a refresh method to be called by the ‘pull to refresh’ element • Add the ‘pull to refresh’ method to the view
    2:01
  • Ionic Components and Persistence
    CSS and JavaScript Components
    Ionic has a large number of CSS and JavaScript components. We tour the components to get familiar with them. • Show the CSS components • Show some JavaScript components • Add a JavaScript component to a view
    5:10
    Adding Components to a View
    Users prefer apps that look like native apps. Ionic supplies CSS components that look and act like native. • Add CSS components to the view • Modify the code in the controller to support the new components • Modify the name on the menu
    1:33
    Creating and Updating an Angular Value Object
    We have components but they aren’t functional. Use an angular value object to hold the component’s values. • Add watch to detect when the component values change, and use value provider to update the Settings object • Add the settings object to the service • Modify the URL to use its properties
    2:33
    Saving and Restoring the Value Object in Local Storage
    We need the values stored in the Settings object to persist between app sessions. Use local storage to cause the values to persist. • Add the angular local storage library to the project • Initialize the settings object with data from local storage in the app run module • Save the data in local storage every time the components change values
    2:54
  • Deploying and Plugins
    Adding and Removing Platforms
    Our app runs only in the browser. Add a platform to allow us to build the app for a device. • Add more detailed listing information • Modify the configuration file to allow the app to make phone calls • Add the Android platform to the project
    2:28
    Adding and Removing Plugins
    We need to use some of the device’s native feature. Add to the app a plugin that provides the native feature. • Add the geolocation plugin and install the ng-cordova library • Added the library to the index.html file and the app.js file • Add support for the plugin to the app
    3:12
    Wrapping Up
    We want to install our app on a device. We use the ionic run command. • Attach your device via USB and check to make sure that the adb sees your device • Use the ionic run command to both build and deploy your app • Use the command to update Ionic and your app
    3:17

Skills

  • AngularJS
  • Apache Cordova
  • Cascading Style Sheets (CSS)
  • HTML5
  • Hyper Text Markup Language (HTML)
  • JavaScript

Similar Courses

More Courses by this Instructor