You are previewing Ionic 2 Blueprints.
O'Reilly logo
Ionic 2 Blueprints

Book Description

Build real-time, scalable, and interactive mobile apps with the Ionic framework

About This Book

  • Create amazing, cross-platform hybrid native apps using a projects-based approach

  • Discover ways to make the best use of the latest features in Ionic to build on a wide array of applications

  • This is the right learning curve for you if you want to take the leap from an intermediate-level to a pro front-end developer with Ionic

  • Who This Book Is For

    This book is for intermediate-level Ionic developers who have some experience in working with Ionic, but don’t yet have a complete idea how powerful Ionic can be to create real-time apps with dynamic functionality.

    What You Will Learn

  • Get to grips with the features of Ionic for application development

  • Build a Chat app with Firebase and Ionic

  • Make a stock tracking app using the third-party REST API and build its layouts with Ionic Navigation and Pages

  • Use Cordova plugins with Ionic to build a media player app

  • Create a production-ready application by using Ionic components, services, and Firebase as a back end

  • Get to know the best practices to create real-time Ionic applications

  • In Detail

    Ionic 2, the latest version of Ionic Mobile SDK, is built on the top of latest technologies such as Angular 2, TypeScript, SASS, and lot more. The idea behind Ionic 2 is to make the entire app development process even more fun.

    This book makes it possible to build fun and engaging apps using Ionic 2. You will learn how to use various Ionic components, integrate external services, derive capabilities, and most importantly how to make professional apps with Ionic 2. It will help you in understanding the fundamentals of Ionic 2 app development and will show how to build applications, gradually increasing your capabilities and the complexity of applications so that you can learn Ionic app development in a consistent and convenient way.

    You will also explore services such as Firebase, using LocalStorage, the WordPress JSON API, and REST API, which will help you turn your next billion dollar idea into reality.

    By the end of this book, you will be able to proudly call yourself a pro Ionic developer who can create a host of different apps with Ionic, and you’ll have a deeper practical understanding of Ionic.

    Style and approach

    A practical project-based approach helps you create five-six different apps on your own using the various features of Ionic in each project.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased 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 code file.

    Table of Contents

    1. Ionic 2 Blueprints
      1. Ionic 2 Blueprints
      2. Credits
      3. About the Author
      4. Acknowledgements
      5. About the Reviewer
      6. www.PacktPub.com
        1. eBooks, discount offers, and more
          1. Why subscribe?
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Updating to latest Ionic 2 versions
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Chat App with Firebase
        1. Firebase
          1. AngularFire2
            1. List and object
            2. Template
          2. Firebase setup
            1. Creating our Firebase app
            2. Enabling password authentication
            3. Getting Firebase configuration data
        2. Setting up the software
          1. Installing node and npm
          2. Installing Git
            1. Installing platform SDKs
            2. Installing the Ionic CLI and Cordova
        3. Defining our app
          1. Functionalities
          2. App flow
          3. User Interface (UI) mock-ups
          4. Firebase's data structure
        4. Scaffolding and setting up our app
          1. Installing Cordova plugins
          2. Installing Firebase and AngularFire2
          3. Installing Typings
          4. Installing TypeScript definitions for Firebase
        5. Coding our app
          1. Defining app.ts
          2. Providers for our application
            1. Defining AuthProvider
              1. Generating the provider
              2. Changing the extension
              3. AuthProvider code
            2. Defining UserProvider
              1. UserProvider code
            3. Defining ChatsProvider
              1. ChatsProvider code
            4. Defining UtilProvider
          3. Application pages
            1. Defining the LoginPage
            2. Template
            3. Defining a custom e-mail validator
            4. Defining the TabsPage
            5. Template
            6. Defining the UsersPage
            7. Template
            8. Defining the ChatsPage
            9. Template
            10. Defining the ChatViewPage
            11. Template
            12. Style sheet
            13. Defining the AccountPage
            14. Template
        6. Adding style
        7. Running our app
          1. App screenshots
        8. Summary
      9. 2. E-Commerce App with Marketcloud
        1. Introduction
        2. Marketcloud
          1. Creating a Marketcloud application
          2. Using the Marketcloud dashboard
            1. Creating categories
            2. Creating products
            3. Selecting the currency for our app
          3. Marketcloud JS SDK
            1. API reference
        3. Payment integration
        4. Defining our app
          1. Functionalities
          2. App flow
        5. Scaffolding and setting up our app
          1. Installing dependencies
            1. Installing MarketCloud JS SDK
            2. Installing the BrainTree Cordova plugin
        6. Coding our app
          1. Our index.html file
          2. Defining app.ts
            1. Template
          3. Providers for our application
            1. Defining StorageProvider
              1. Generating a provider
              2. Changing the extension
              3. StorageProvider code
            2. Defining UtilProvider
              1. UtilProvider code
            3. Defining MarketProvider
              1. MarketProvider code
            4. Defining CartProvider
              1. CartProvider code
            5. Defining UserProvider
              1. UserProvider code
          4. Application pages
            1. Defining StorePage
            2. Template
            3. Defining CategoryPage
            4. Template
            5. Defining ProductPage
            6. Template
            7. Defining ImageModal
            8. Template
            9. StyleSheet
            10. Defining CartPage
            11. Template
            12. Defining AuthPage
            13. Template
            14. Defining OrderPage
            15. Template
        7. Adding style
        8. Running our app
          1. Adding a platform and running the app on our device
          2. App screenshots
        9. Summary
      10. 3. Conference App
        1. Introduction
        2. JSON data
          1. Understanding JSON
        3. Defining the app
          1. Functionalities
          2. App flow
        4. Scaffolding and setting up the app
          1. Installing dependencies
        5. Coding our app
          1. Structure of tabs starter
          2. Defining app.ts
            1. Defining ConfProvider
          3. Application Pages
            1. Defining the TabsPage page
            2. Defining the SpeakersPage page
            3. Defining the SchedulePage page
            4. Defining the SessionDetail page
            5. Defining the SpeakerDetail page
            6. Defining the AboutPage page
            7. Defining the FavoritePage page
        6. Running our app
          1. App screenshots
        7. Summary
      11. 4. StockMarket App
        1. Introduction
        2. Yahoo Finance API
          1. Stock information endpoint
          2. Symbol names endpoint
          3. Historical data endpoint
          4. Detailed stock information
        3. Defining app functionalities
          1. App flow
        4. Scaffolding and setting up the app
          1. Installing dependencies
            1. Installing the Chartist library
        5. Coding part
          1. Our index.html file
          2. Defining app.ts
          3. Providers for our application
            1. Defining StorageProvider
            2. Defining the StockInfo provider
              1. StockInfo provider code
          4. Components of our app
            1. StockCmp component
              1. Inputs
              2. Outputs
              3. Component pipe
              4. Component style sheet
              5. Component controller
              6. Component template
            2. StockChart
              1. Input
              2. Component controller
            3. StockDetailCmp
              1. Input
              2. Component style sheet
              3. Component controller
              4. Component template
          5. Pages of our application
            1. Defining the StockList page
              1. StockList Controller
              2. StockList template
            2. Defining the QuoteSearch modal
              1. QuoteSearch controller
              2. QuoteSearch template
            3. Defining the Detail page
              1. Detail page controller
              2. Detail page template
        6. Adding core styles
        7. Running our app
          1. App screenshots
        8. Summary
      12. 5. WordPress Client App
        1. Backend
          1. Push notifications
          2. Google Analytics
          3. WordPress JSON API
        2. Configuring WordPress
          1. Installing plugins
            1. Configuring Push Notification
        3. App flow
        4. Scaffolding and setting up the app
          1. Installing Cordova plugins
          2. CORS issue
        5. The coding part
          1. App configuration
          2. Defining app.ts
          3. Providers for our application
            1. Defining UtilProvider
            2. Defining WpProvider
            3. Defining PushProvider
          4. HtmlPipe
          5. Post component
            1. Inputs
            2. Outputs
          6. Application Pages
            1. Defining TabsPage
            2. Defining PostsPage
            3. Template
            4. Defining PostPage
            5. Defining CategoryListPage
            6. Defining WpPageList
            7. Defining WpPage
            8. Defining FavoritePage
            9. Defining SettingsPage
        6. Styling our app
        7. Running our app
          1. App screenshots
        8. Summary
      13. 6. Media Player App
        1. Key things
          1. Playback
          2. File System
          3. Local storage
        2. App flow
        3. Scaffolding and setting up the app
          1. Installing dependencies
          2. Running and debugging the app
        4. Coding our app
          1. Root app component
          2. Providers for our application
            1. Defining UtilProvider
            2. Defining FileProvider
            3. Defining PlayerProvider
          3. Imclock pipe
          4. ImControls component
            1. Inputs
            2. Outputs
          5. Pages of our application
            1. Defining the BrowsePage
            2. Template
            3. Defining PlaylistPage
            4. Defining PlayerPage
        5. Running our app
          1. App screenshots
        6. Summary
      14. 7. Social App with Firebase
        1. Defining the app
          1. Post logic
          2. Functionalities
          3. App flow
          4. Firebase data structure
        2. Scaffolding and setting up our app
          1. Installing Cordova plugins
          2. Installing Typings
          3. Installing Firebase and AngularFire2
          4. Installing ng2-moment
          5. Installing TypeScript definitions for Firebase
        3. Coding our app
          1. Defining app.ts
          2. Providers for our application
            1. Defining UtilProvider
            2. Defining AuthProvider
            3. Defining UserProvider
            4. Defining SocialProvider
          3. Post component
            1. Input
          4. Pages of our application
            1. Defining LoginPage
            2. Defining the CreateAccount page
            3. Defining TabsPage
            4. Defining TimelinePage
            5. Defining PostPage
            6. Defining PeoplePage
            7. Defining UserProfilePage
            8. Defining AccountPage
        4. Adding style
        5. Running our app
          1. Further improving our app
          2. App screenshots
        6. Summary