Ionic 2 Blueprint will take you to a splendid journey of creating seven mobile apps using the Ionic 2 Framework, starting from simple apps using REST APIs and gradually increasing the complexity of the apps, which involves lots advanced Ionic features and native device features.
The whole idea of this book is to help developers jump start creating elegant mobile apps using Ionic 2 beta 10. The book deals with real-world apps, using REST APIs, Backend as a Service (BaaS), and assumes that you have a fair knowledge of Angular 2 and bit of Ionic 2. You will learn a lot about managing bigger projects, how to deal with complexity, and creating reusable components.
This book will be an invaluable resource for all those developers who seeks to level up their Ionic 2 skills.
Chapter 1, Chat App with Firebase, will show you to create a real-time chat application using Firebase. You will learn how to use tabs in Ionic 2, how to set up Firebase and how to use Firebase with AngularFire2 to create a chat application.
Chapter 2, E-Commerce App with Marketcloud, will introduce you to a fairly new BaaS platform for e-commerce, Marketcloud. You will create a complete e-commerce app using the Marketcloud SDK and dashboard, process payments using payment gateway integrations, use the Ionic 2 menu and navigation, learn how to use a loader using Ionic Loading.
Chapter 3, Conference App, will show you how to create a conference app. We will use Lanyrd's compatible JSON data to build an offline conference app, which will leverage native device capabilities using Ionic native, Leverages LocalStorage, using both Ionic menu and tabs together. We will also use RxJS to build a search filter.
Chapter 4, StockMarket App, will show you how to create a stock market app, which shows information about the stock of your choice. You will create a reusable UI component using the Angular 2 component API, utilize RxJS to get stock data continuously from Yahoo API, create a custom Angular Pipe, and create responsive charts to display stock history.
Chapter 5, WordPress Client App, will show you how to create a mobile client for your WordPress blog or site. You will be introduced to the WordPress REST API, Ionic toast, infinite scrolling in Ionic 2, and push notification, with Ionic native, using Google Analytics. The end product will be a WordPress client with blog posts, comments, categories, and WordPress pages.
Chapter 6, Media Player App, will show you how to create a media player. It is one of the special apps in this book. You will create a complete player with a seek bar for changing the playing position, a play and pause button, and playlist options with a next and previous button. You will also create a file browser to get media from the device.
Chapter 7, Social App with Firebase, will show you how to create a social app using Firebase. You will use the Firebase database store information and Firebase storage store binary information such as images. Our social app will be like Twitter, in which users can follow other users and see their posts. The chapter will also deal with creating the database structure for our app.
To build Ionic 2 mobile apps, you need to have a basic knowledge of HTML, CSS, and Angular 2. You also need to have knowledge of Cordova and the Ionic CLI.
You will need to install Node.js, Cordova, the Ionic CLI, Git, and native SDKs for mobile platforms. Instructions of how to install these tools is given in Chapter 1, Chat App with Firebase.
This book is for intermediate-level Ionic developers who have some experience of working with Ionic 2, but don't yet have a complete idea of how powerful Ionic can be to create real-time apps with dynamic functionality.
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "When a user logs in, it will go to a tabs interface with the UsersPage opened."
A block of code is set as follows:
<ul *ngFor="let item of items | async">
<li class="text">
{{item}}
</li>
</ul>Any command-line input or output is written as follows:
npm install -g ionic@beta cordova
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Select Auth in the side bar, then click on the SIGN-IN METHOD tab on that page."
While writing the chapters of this book, the latest release of Ionic 2 was Ionic 2 beta 10. So, every chapter and code is written against Ionic 2 beta 10. However, at the time of writing this, Ionic has a new beta 11 release. So, we have decided to publish an update to the book when the final version of Ionic 2 is releases.
However, I want to make this process easier for you. The Ionic team releases changes for each release on GitHub. You can get all the information about changes in latest releases at https://github.com/driftyco/ionic/blob/master/CHANGELOG.md. You can follow this guide to update chapter code accordingly, until we release the updated book.
To ease this update process, I am writing this simple guide (as an example) to update from beta 10 to beta 11. Follow these simple steps:
Beta 10 uses Angular 2 RC4 with latest form modules. In order to use the latest Angular 2 form module, refer to this awesome blog post at http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html.
Change in using various Overlay components such as Ionic Alerts, Loading, and others
In the previous versions till beta 10, this is how we used the Overlay components:
import {Component} from '@angular/core'; import {Alert, NavController} from 'ionic-angular'; @Component({ templateUrl: 'build/pages/home.html' }) export class UtilProvider { constructor(public nav:NavController) {} doAlert(title, message, buttonText) { let alert = Alert.create({ title: title, subTitle: message, buttons: [buttonText] }); this.nav.present(alert); } }And here is how we use them in beta 11:
import {Component} from '@angular/core'; import {AlertContoller} from 'ionic-angular'; @Component({ templateUrl: 'build/pages/home.html' }) export class UtilProvider { constructor(public nav:NavController, public alertController:AlertController){} doAlert(title, message, buttonText) { let alert = this.alertController.create({ title: title, subTitle: message, buttons: [buttonText] }); alert.present(); } }
Note the following changes in both code samples:
The Overlay component package names now have Controller appended at the end. For example,
Alertis nowAlertController. Similarly,Loadingis nowLoadingController.You have to create a class instance of the Overlay component controller in order to use them. Refer to the constructor of the latter example code, where we have created the
alertControllerinstance. In the previous version, this was not required.Each instance of the Overlay component has a present method, which is used, instead of the
NavControllerclass'presentmethod.
Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the SUPPORT tab at the top.
Click on Code Downloads & Errata.
Enter the name of the book in the Search box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on Code Download.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on Packt' GitHub repository at https://github.com/PacktPublishing/Ionic-2-Blueprints.git and also at author's GitHub repository at https://github.com/ionic2blueprints. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at [email protected] with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.