Take this
course

Software Development / Web Development

Introducing Ionic 2

Build a cool, pretty, and fully-featured mobile app in no time using the power of Ionic 2 and Angular 2

Description

About This Video

  • This easily understandable tutorial covers all the building blocks of an Ionic 2 application, from bootstrapping through to cool components to logic services
  • Stylize, optimize, and interact with users through powerful components and become comfortable with the new environment of Angular 2
  • Get step-by-step explanations of code files using a Git repo, along with code improvement tips and real-life examples that make learning a piece of cake


In Detail

Hybrid apps are changing the way people build mobile applications. With Ionic 2, hybrid app developers are gifted with not only a fresh, well-built, and powerful platform, but also a tool to enjoy their development experience. Apps can be built in record time, yet remain visually attractive and contain advanced features.


Introducing Ionic 2, will help you discover all the building blocks of an Ionic 2 application. You will learn how to use built-in components, make API calls, and style your app to your liking, so prepare yourself for many hours of fun development with Ionic 2.


We’ll start by bootstrapping an application, enhancing 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. By the end of the course, we will have built an entire awesome iTunes Browser app.


First, you’ll find out how to add pages and navigate between them, including going back and forth. Once new pages are in place, we’ll focus on grabbing real data from an API via AJAX with and without JSONP. With data and views in place, we’ll focus on improving the user experience and using modals, action sheet, alerts, loaders, and even a fully validated form. We also cover a range of various topics including styling, navigation with parameters, and Angular 2 pipes to filter and transform the way data is presented.


Introducing Ionic 2 will take you on the same journey as if you were building a real application, from scratch to a working product. You’ll soon see how this powerful mobile application framework can make your development fast, structured, and at the same time incredibly enjoyable.

Full details

Curriculum

  • Setting Up
    The Course Overview
    This video will provide an overview of the course.
    3:34
    Bootstrapping an Ionic App
    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. • Use ionic start to kick-start the project and bootstrap the code • Choose one of the bootstrapping templates, tabs (default), blank, or sidemenu. • Use a few command-line options to prepare our bootstrapping better
    2:46
    Exploring the Project Structure
    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. • Review the configuration files and dependencies • Get familiar with the location of app components, including template, style, and logic • Make changes and watch the server live reload mechanism
    2:50
    Lab, Device, and Emulator
    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. • Use the live reload server for development purposes • Leverage the new "lab" to compare iOS and Android experiences • Get closer to the real product with emulator and device
    2:57
  • Pages and Basic Navigation
    Generating Pages
    Apps always contain several pages. We need to create them and ensure that they are navigable. • Use the Ionic generator to bootstrap a new page • Modify the page content • Add the new page to the menu to enable navigation
    3:06
    Navigation Concepts in Ionic 2
    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. • Understand the stack of pages • Push to / pop from the stack and go through an example • Set the root and take a look at an example
    1:39
    Navigating to Pages
    Navigation concepts are acquired; it is time to apply them to our application. • Learn to push to / pop from a stack - Back button pages • Set the root and start a new navigation flow • Change the start page of the app to use our search page
    4:16
  • Basic Ionic 2 Components
    Creating a List
    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. • Create the list item to be repeated using ion-list and ion-icon • Repeat the same step for all items in the array of data using ngFor • Bind data to attributes, such as the source of an image or the content of a title
    5:16
    Adding a Search Bar
    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. • Add the search bar component with its ngModel binding • Bind the search bar to the keyup event and check whether the user pressed "enter" • Bind the search bar to the cancel event
    3:28
    Using a Radio Buttons List
    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. • Create a list of radio buttons • Bind the button to the "select" event • Bind the button to the specific classes and styles
    4:40
  • Services
    Making API Calls
    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. • Add HTTP_PROVIDERS to the app level • Dependency inject the HTTP service into the page • Make the call and handle Observable's response
    4:09
    Creating Your Own Service
    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 • Learn to bootstrap an injectable • Dependency inject Jsonp into the service and then this service itself into the page • Code the AJAX call and transform the returned object to a promise
    5:44
  • Advanced Ionic 2 Components
    Using an ActionSheet
    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. • Create the ActionSheet with its title and buttons • Present the sheet to display nicely • Code actions for each of the buttons
    3:40
    Creating a Modal Preview
    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. • Create the modal and pass the track object • Present the modal • Code the closing of the modal using dismiss
    4:12
    Adding a Pull-to-refresh
    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. • Add pull to refresh to the template • Code the refresh method • Complete the refreshing process when done
    3:07
  • User Interactions
    Using Dialogs
    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. • Create and present an alert • Create and present a confirm box and handle its click (yes/no) • Create and present a prompt and handle its typed-in value when pressing the positive button
    5:33
    Adding a Loader
    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. • Install a native plugin • Locate and import the plugin code • Use the plugin with a simple and a bar loader
    2:47
    Building a Form
    Forms are one of the most common type of interaction with users. They can be tedious to build and validate, though. We will use the FormBuilder service to create a form focused on its inputs and leverage the validation framework to display error messages when needed. • Build a form using form builder • Create the corresponding bindings in the template: ngFormModel, ngControl • Validate the form easily using various Booleans on controls: valid, invalid, pristine, untouched, and so on
    4:04
  • Wrapping Up
    Styling the App
    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. • Learn to override SASS variables • Override platform-specific variables • Place style in the right file to override page-specific look and feel
    3:07
    Navigation with params
    We need to be able to navigate to the artist view and to pass along the artist we are looking at. Extra information can be passed during navigation to either root pages or intermediary pages. On the destination page, NavParams can be used to retrieve said information. • Pass an extra argument to navigation • Import and present dependency inject NavParams • Use the data found in navigation parameters to root or intermediary pages
    2:02
    ion-slides
    Carousels or sliders are a very common type of display for limited lists where visuals are important. The built-in ion-slides allow us to very quickly come up with such a carousel and takes care of touch events, such as sliding. • Create an ion-slides wrapper • Load albums data asynchronously using the iTunes API and the ID provided by NavParams • Display ion-slide items and repeat them for each album using ngFor
    1:41
    Using a Pipe
    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) • Learn to bootstrap the Pipe class • Add class to the list of "pipes" used by the view • Pipe the currency value returned by the API through the pipe class
    3:45

Skills

  • AngularJS

Similar Courses

More Courses by this Instructor