Build Mobile Apps with Ionic 2 and Firebase Hybrid Mobile App Development

✍ Scribed by Cheng, Fu

• Publisher: Apress
• Year: 2017
• Tongue: English
• Leaves: 262
• Category: Library

✦ Synopsis

Learn to build hybrid mobile apps using Ionic and Firebase. You'll build a Hacker News client app, which can view top stories in Hacker News, view comments of a story, add stories to favorites, etc.
This introductory guide covers the whole cycle of hybrid mobile apps development. It's organized around implementing different user stories. For each story, this book not only talks about how to implement it but also explains related Ionic and Firebase concepts in detail. Using Apache Cordova, developers can create a new type of mobile app--a hybrid mobile app.
Hybrid mobile apps actually run in an internal browser inside a wrapper created by Apache Cordova. With hybrid mobile apps, developers can have one single code base for different platforms. Developers also can use their existing web development skills.

The Ionic framework builds on top of Apache Cordova and provides out-of-box components which make developing hybrid mobile apps much easier. Ionic uses Angular as the JavaScript framework and has a nice default UI style with a similar look and feel to native apps. Firebase is a realtime database which can be accessed in web apps using JavaScript. WithBuild Mobile Apps with Ionic 2 and Firebaseyou'll discover that just need to develop front-end code, there's no need to manage any back-end code or servers.
What You'll Learn


Create content-based Ionic mobile apps


Discover the advanced features of the Ionic framework


Use Firebase as a mobile app's back-end storage


Build, test, and continuously delivery Ionic mobile apps


Publish and analyze Ionic mobile apps
Who This Book Is ForFront-end developers and mobile app developers

✦ Table of Contents

Contents at a Glance......Page 5
Contents......Page 7
About the Author......Page 15
About the Technical Reviewer......Page 16
Preface......Page 17
Mobile Apps Refresher......Page 19
Hybrid Mobile Apps......Page 20
Ionic Framework......Page 21
Firebase......Page 22
Ionic CLI......Page 23
Yarn......Page 24
Android......Page 25
Blank App......Page 27
Tabbed App......Page 28
Sidemenu......Page 29
Tutorial......Page 30
Local Development......Page 31
Use Chrome for Development......Page 32
iOS......Page 33
Summary......Page 35
Chapter 2: Languages, Frameworks, Libraries, and Tools......Page 36
Compile-Time Type Checks......Page 37
Boolean......Page 38
Null and Undefined......Page 39
Enum......Page 40
Any......Page 41
Functions......Page 42
Arguments......Page 43
Interfaces and Classes......Page 44
Describe the shape of values......Page 45
As classes contracts......Page 46
Classes......Page 47
Class Decorators......Page 48
Method Decorators......Page 49
Property Decorators......Page 50
Angular 2......Page 51
Modules......Page 52
Components......Page 53
Services......Page 54
Value providers......Page 55
Tokens......Page 56
Bootstrapping......Page 57
Observable......Page 58
Subjects......Page 59
Variables......Page 60
Mixins......Page 61
Summary......Page 62
Chapter 3: Basic App Structure......Page 63
package.json......Page 64
tsconfig.json......Page 65
platforms......Page 66
assets......Page 67
app.module.ts......Page 68
app.component.ts......Page 69
app.html......Page 70
Summary......Page 71
Define the Model......Page 72
Simple List......Page 73
Grouping of Items......Page 74
Icons......Page 75
Thumbnails......Page 76
Display a List of Items......Page 77
Item Component......Page 78
Empty List......Page 80
Tools......Page 81
Testing Configuration......Page 82
Testing Items Component......Page 86
Run Tests......Page 90
Items Loading Service......Page 91
Top Stories Page......Page 93
Items Loading Service Mock......Page 94
Test Suite......Page 95
Database Structure......Page 97
Setup......Page 98
Read Data......Page 99
Write Data......Page 101
Query Data......Page 102
filter......Page 103
Hacker News API......Page 104
AngularFire2......Page 105
API......Page 106
Implement ItemService......Page 107
Manage the Changes......Page 108
Further Improvements......Page 110
Button......Page 113
Pagination......Page 114
Advanced List......Page 117
Customization......Page 120
ion-refresher......Page 121
Testing......Page 122
Loading......Page 123
LoadingController and Loading......Page 124
Testing......Page 126
Error Handling......Page 127
Toast......Page 128
Testing......Page 129
Summary......Page 131
In App Browser......Page 132
Open a URL......Page 133
Events......Page 135
Alerts......Page 136
A Better Solution......Page 137
Styles......Page 140
Summary......Page 141
Basic Usage......Page 142
Model......Page 143
Services......Page 144
Pages......Page 146
CommentComponent......Page 148
CommentsComponent......Page 149
View Comments......Page 150
CommentsPage......Page 151
Summary......Page 153
Ionic UI Controls......Page 154
Check Box......Page 155
Radio Buttons......Page 156
Selects......Page 157
Ranges......Page 159
Modal......Page 161
Toolbar......Page 162
Menu......Page 163
MenuController......Page 164
AuthService......Page 165
Sign-Up Form......Page 169
Login Page......Page 173
Menu......Page 175
Update User’s Name......Page 177
Third-Party Login......Page 178
iOS......Page 179
Login......Page 180
Facebook Login......Page 183
GitHub Login......Page 185
Test......Page 189
Summary......Page 190
Favorites Service......Page 191
Favorites Page......Page 194
Favorites Items......Page 198
Testing......Page 201
Summary......Page 207
Card Layout......Page 208
Grid Layout......Page 209
Sharing......Page 211
More About the Plugin......Page 213
Summary......Page 214
Action Sheet......Page 215
Popover......Page 218
Slides......Page 221
Tabs......Page 224
Summary......Page 226
Platform......Page 227
Theming......Page 228
Colors......Page 230
Storage......Page 231
Push Notifications......Page 233
Summary......Page 237
End-to-End Test with Protractor......Page 238
Protractor Config......Page 239
Top Stories Page Test......Page 241
Page Objects and Suites......Page 242
User Management Test......Page 244
Favorites Page Test......Page 245
Gitlab CI......Page 247
Summary......Page 248
Icons and Splash Screens......Page 249
Deploy to Devices......Page 250
View and Share with Ionic View......Page 251
Cloud Client......Page 252
Deploy Service......Page 253
Summary......Page 256
Index......Page 257