book

Mobile App Development with Ionic 2, 1st Edition

by Chris Griffith

April 2017

Intermediate to advanced

292 pages

6h 27m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who Should Read This BookNavigating This BookOnline ResourcesConventions Used in This BookUsing Code ExamplesO’Reilly SafariAcknowledgments
What Is the Ionic Framework?What’s New in Ionic 2?Comparing Mobile SolutionsNative Mobile ApplicationsMobile Web ApplicationsHybrid Mobile ApplicationsUnderstanding the Ionic StackIonic FrameworkAngularCordovaPrerequisites for Ionic Application DevelopmentSummary
Installing the Ionic FrameworkInstalling Node.jsInstalling GitInstalling the Apache Cordova CLIInstalling Ionic CLIStarting a New Ionic ProjectIonic Project Folder StructurePlatform Tools InstallationsiOSAndroidWindows UniversalSetting EmulatorsiOSAndroidSetting Up Your DevicesiOSAndroidAdding Mobile PlatformsPreviewing on EmulatorPreviewing on DeviceSummary
Define Your Build PlatformsManaging Cordova PluginsIonic GeneratorPreviewing Your ApplicationThe Ionic lab CommandSpecifying an IP Address to UseEmulating Your Ionic AppEmulating iOS DevicesEmulating Android DevicesRunning Ionic App on a DeviceLoggingCLI informationSummary
Why Angular 2?ComponentsInputsTemplatesEventsPipes@ViewChildUnderstanding ES6 and TypeScriptVariablesClassesPromisesObservablesTemplate StringsArrow FunctionsTypesSpecial TypesTyping Functions:voidSummary
The History of Cordova (aka PhoneGap)Apache Cordova versus Adobe PhoneGapA Deep Dive into CordovaConfiguring Your Cordova AppDevice Access (aka Plugins)Interface Components: The Missing PieceWhy Not Cordova?Understanding Web StandardsSummary
HTML StructureIonic ComponentsUnderstanding the SCSS FileUnderstanding TypeScriptSummary
Adding our PlatformsPreviewing Our Ionic2Do AppUnderstanding the index.html FileExploring the app DirectoryUpdating the Page StructureAdding Full-Swipe GestureSimple ThemingProper TypingSaving DataCreating a FireBase accountInstalling Firebase and AngularFire2Ionic Build SystemAdding AngularFire to Our app.module.ts FileUsing Firebase DataUsing Ionic NativeSummary
Bootstrapping Our AppLoading Data via the HTTP ServiceDisplay our DataExtending parklist.tsGenerating New PagesUnderstanding the Ionic 2 Navigation modelPassing Data Between PagesUpdating the Park Details PageAdd a Google MapAdding Additional TypingsAdding Our Content Security PolicyAdjust the CSS to support the Google MapRendering the Google MapAdd Map MarkersMaking the Markers ClickableAdding SearchTheming Our ApplicationVirtual ScrollingCustom List HeadersSummary

Getting StartedExploring the Side Menu TemplateExploring the app.component.ts FileSide Menu OptionsDisplaying the MenuConverting the TemplateMocking Up Our Weather ProviderLaying Out the Weather DataLoading Feedback: Loading Dialogs and Pull to RefreshAdding GeoLocationAccessing Live Weather DataConnecting the Geolocation and Weather ProvidersGetting Other Locations’ WeatherPull to Refresh: Part 2Editing the LocationsDeleting a CityAdding a CityUsing a Geocoding ServiceDynamically Updating the Side MenuIonic EventsObservablesStyling the AppAdd a Weather IconNext StepsSummary
Dealing with CORS IssuesDebugging through an iOS or Android SimulatorAndroidDebugging On-DeviceAndroidiOSDebugging Ionic InitializationAdditional ToolsSummary
Adjusting the config.xml FileApp Icons and Splash ScreensBuilding Your Android APKGenerating the Signing KeySubmitting to the Google Play StoreBuilding Your iOS AppRequest a Distribution CertificateCreate a Distribution Provisioning ProfileCreating the App ListingBuilding the App for ProductionCreating an Archive of the ApplicationUsing TestFlight Beta TestingReleasing to the App StoreSummary
Setting Up Ionic CloudGenerating Your Ionic App IDConfiguring Your ApplicationIonic DeploySetting Up Ionic DeployTesting Ionic DeploySecurity ProfilesCreating a ProfileiOS SetupSupporting iOS Push NotificationsAndroid SetupAndroid Push NotificationsIonic PackagePreparing a Release BuildGetting Build InformationGetting Your Build ResultsDownloading Your BuildUpdating Your Cordova PluginsIonic ViewSupported Plugins Uploading Your AppViewing Your AppIonic CreatorSummary
But What, Exactly, Is a Progressive Web App?The manifest.json FileService WorkersPush NotificationsWhat’s Next?
Components You Should Know AboutSlidesDate-TimePopoverReorder ListDeepLinkerStorageNext StepsIonic ForumsIonic Worldwide Slack ChannelGitHubConclusion
Create a New Ionic 2 ApplicationCreate Your Page StructureUpdate the ThemingReplacing Your Controllers and ViewsReplace Your Factories/ServicesConvert the Application InitializationUpdate the RoutingSwitching to Ionic NativeConclusion
Essential PropertiesPreferencesCommon General PreferencesCommon iOS PreferencesCommon Android PreferencesCommon Windows PreferencesIconsAndroidiOSWindowsSplashscreensAndroidiOSWindowsPluginsFeaturesReference

Content preview from Mobile App Development with Ionic 2, 1st Edition

Foreword

In 2013, our small team was then one year into working on drag-and-drop developer tools for the two most popular mobile and desktop web frameworks at the time: jQuery Mobile and Bootstrap. We saw the rapid rise of reusable components and frameworks for web development, and we were working hard to make it easier to use them through better and more inclusive tooling.

Around this time, the iPhone 5 came out, followed shortly by iOS 7, with dramatically faster web performance and new web APIs that unlocked previously inaccessible performance and features for mobile browser apps. We wondered: could a web framework be built that took advantage of this new performance to provide a native-like UI kit for web developers to build native-quality apps with standard browser technologies? A “Bootstrap for mobile,” if you will?

Coincidently, Angular 1 was seeing incredible adoption in the broader web development space and seemed to provide a perfect answer for reusable JavaScript and HTML components for the web. We decided to try our hand at building a mobile-first web UI framework, using the fast-growing Angular 1 framework to make it interactive and distributable.

The first release of Ionic, at the end of 2013, was met with excitement from web developers, and the project quickly accumulated stars on GitHub and installs on NPM. Over the next year and a half, the project saw over one million apps built by startups, dev shops, and enterprise users alike.

Then in 2015, JavaScript seemingly ...