O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mobile Application Development: JavaScript Frameworks

Book Description

Enhance your JavaScript skills by venturing into the domain of developing mobile applications

About This Book
  • Extend your JavaScript skillset to build, test, and launch mobile apps with confidence
  • Follow three sample projects to experience Ionic’s impressive capabilities
  • Extend the power of Apache Cordova by creating your own Apache Cordova cross-platform mobile plugins
Who This Book Is For

This Learning Path is for JavaScript web developers looking to develop mobile applications using various JavaScript descendent technologies. It is for anyone who wants to learn how to build fast and stylish native mobile app using the skills they already have. If you are already using React on the web, we’re confident you’ll be able to quickly get up and running with React Native for iOS and Android. See Ionic in action, and find out how it can transform the way you build mobile apps.

What You Will Learn
  • Develop, build, run, and deploy great cross-platform mobile applications using Apache Cordova
  • Create complete mobile apps using Apache Cordova that runs on Apple iOS, Google Android, and Windows Phone
  • Create a neat user interface for your mobile application using jQuery Mobile
  • Gain an in-depth understanding of how React Native works behind the scenes
  • Write your own custom native UI components
  • Develop native modules in Objective-C and Java that interact with JavaScript
  • Get to know Ionic by creating three complete mobile applications
In Detail

A great mobile app is rapidly becoming crucial for a huge range of businesses. With a great app, your customers or your readers don’t come to you – you go with them, just a few clicks and swipes away. This Learning Path shows you how to build awesome mobile apps with some of the best tools currently being used by some of the smartest developers in the industry. Taking you through JavaScript impressive development ecosystem – from jQuery Mobile to React, through to Ionic – we’ll show you how to put your skills into practice so you can build your next mobile apps with confidence and style. In this Learning Path, from jQuery to React, to Ionic, we’ll cover everything you need to start

In the first module you’ll learn how to get stuck into Apache Cordova and find out how to use it as the key platform for developing your mobile app. It offers an efficient way to develop hybrid apps, which means you won’t have to connect to platform specific APIs or use their UI framework, and can instead harness your JavaScript web development skills. Make sure you have your HTML, CSS and jQuery skills at the ready.

In Module 2 we’ll show you how to take advantage of React Native. It has a reputation for having a steep learning curve, but we’ll make it easy for you, making sure you make full use of your existing knowledge and getting you up and running with a sample application. You’ll also learn how to create components, how to create multiple screens, as well as using native UI components and accessing native APIs.

In the third and final module you’ll get started with Ionic. With three practical projects you can build yourself, we’ve made sure that you’ll be learning by doing – which means you’ll not only develop new skills much more quickly, but you’ll have produced something tangible at the end of it!

This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:

  • JavaScript Mobile Application Development by Hazem Saleh
  • Getting Started with React Native by Ethan Holmes and Tom Bray
  • Ionic Framework By Example by Sani Yusuf
Style and approach

This Learning Path course provides a simple and easy way to build mobile applications in JavaScript descendent technologies such as jQuery, ReactJS, and Ionic.

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. Mobile Application Development: JavaScript Frameworks
    1. Table of Contents
    2. Mobile Application Development: JavaScript Frameworks
    3. Mobile Application Development: JavaScript Frameworks
    4. Credits
    5. Preface
      1. What this learning path covers
      2. What you need for this learning path
      3. Who this learning path is for
      4. Reader feedback
      5. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    6. 1. Module 1
      1. 1. An Introduction to Apache Cordova
        1. What is Apache Cordova?
        2. The differences between mobile web, hybrid mobile, and native mobile applications
        3. Why you should use Cordova
        4. Cordova architecture
        5. Overview of Cordova APIs
        6. Summary
      2. 2. Developing Your First Cordova Application
        1. An introduction to Cordova CLI
          1. Installing Apache Cordova
          2. Generating our Sound Recorder's initial code
            1. The Sound Recorder's initial structure
            2. An insight into the www files
        2. Developing Sound Recorder application
          1. Sound Recorder functionality
          2. Sound Recorder preparation
          3. Sound Recorder details
          4. Recording and playing the audio files back
        3. Building and running Sound Recorder application
        4. Summary
      3. 3. Apache Cordova Development Tools
        1. Configuring Android development environment
          1. Extending your existing Eclipse IDE
          2. Creating an Android Virtual Device
          3. Importing the Sound Recorder application in to Eclipse
          4. Running the Sound Recorder application on a real Android device
        2. Configuring iOS development environment
          1. Importing the Sound Recorder application into Xcode
          2. Running the Sound Recorder application on a real iOS device
        3. Configuring the Windows Phone development environment
          1. Importing the Sound Recorder application into Visual Studio
          2. Running the Sound Recorder application on a real Windows Phone
        4. Summary
      4. 4. Cordova API in Action
        1. Exploring the Cordova Exhibition app
        2. The Cordova Exhibition app structure
        3. Accelerometer
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        4. Camera
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        5. Compass
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        6. Connection
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        7. Contacts
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        8. Device
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        9. Geolocation
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        10. Globalization
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        11. InAppBrowser
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        12. Summary
      5. 5. Diving Deeper into the Cordova API
        1. Media, file, and capture
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        2. Notification
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        3. Storage
          1. Demo
          2. The HTML page
          3. View controller
          4. API
        4. Finalizing the Cordova Exhibition app
        5. Cordova events
        6. Summary
      6. 6. Developing Custom Cordova Plugins
        1. Developing a custom Cordova plugin
          1. Using plugman
          2. Plugin definition
          3. Defining the plugin's JavaScript interface
        2. Developing Android code
        3. Developing iOS code
        4. Developing Windows Phone 8 code
        5. Publishing our plugin to Cordova Registry
        6. Testing our Cordova plugin
        7. Summary
      7. 7. Unit Testing the Cordova App's Logic
        1. What is Jasmine
        2. Configuring Jasmine
        3. Writing your first Jasmine test
        4. Jasmine Matchers
        5. Jasmine in action – developing Cordova app tests
          1. An overview of the weather application
          2. Developing synchronous code tests
          3. Developing asynchronous code tests
          4. Manually executing tests
        6. Automating tests using Karma
          1. Installing Karma
          2. Karma configuration
          3. Running tests (on mobile devices)
          4. Generating XML JUnit and code coverage reports
          5. Integrating tests with the CI tools
        7. Summary
      8. 8. Applying it All – the Mega App
        1. Mega App specification/wireframes
        2. Preparing for the Mega App
        3. The Mega App architecture
        4. The Mega App model and API
        5. The Mega App user interface
        6. Finalizing Mega App
        7. Deploying and running Mega App
        8. Start contributing to Mega App
        9. Summary
    7. 2. Module 2
      1. 1. Exploring the Sample Application
        1. Installing Xcode
        2. Running the sample application
          1. A sneak peek at the sample application
        3. Experimenting with the sample application
        4. Summary
      2. 2. Understanding React Native Fundamentals
        1. The Virtual DOM
        2. Components
          1. Creating your first component
          2. JSX
          3. Back to our first component
          4. Props and states
            1. Props
              1. Validating props
            2. State
        3. Summary
      3. 3. Beginning with the Example Application
        1. Generating the projects
          1. Xcode and the iOS simulator
          2. The Android SDK and emulator
          3. Modifying the React Native starter template
        2. Structuring the application
          1. Creating the SimpleButton component
        3. Navigation
          1. The Navigator component
            1. Navigator.NavigationBar
          2. The NoteScreen – first pass
        4. Summary
      4. 4. Working with Styles and Layout
        1. React CSS
          1. Style Sheet
          2. Styling the SimpleButton component
        2. Layout and Flexbox
          1. Flex container
            1. Flex items
            2. Horizontal and vertical centering
            3. Absolute positioning
        3. Styling the NavigationBar component
          1. Changing the Android Material Theme
        4. Styling the NoteScreen
        5. Summary
      5. 5. Displaying and Saving Data
        1. Lists
          1. Understanding props
            1. Using state
            2. Passing callbacks in props
            3. Creating new notes
            4. Using AsyncStorage
            5. Deleting notes
        2. Summary
      6. 6. Working with Geolocation and Maps
        1. Introducing the Geolocation API
          1. The location permission in iOS
        2. Tagging notes with geolocation
        3. NoteLocationScreen
          1. MapView
        4. Summary
      7. 7. Integrating Native Modules
        1. Adding images to notes
        2. Installing react-native-camera on iOS
          1. Searching for Native Modules
          2. Using the camera component
        3. Viewing images
          1. The image component
          2. Deleting images
        4. Connecting the final pieces
        5. Summary
      8. 8. Releasing the Application
        1. Generating the static bundle in iOS
        2. Testing the static bundle in iOS
        3. Creating an iOS release in Xcode
        4. Generating the Android APK
        5. Summary
    8. 3. Module 3
      1. 1. First Look at Ionic
        1. The beginning
          1. The problem
        2. Apache Cordova
          1. Early hybrid apps
        3. What is Ionic?
          1. Short history of Ionic
            1. Features of Ionic
              1. CSS features
              2. JavaScript features
              3. The Ionic CLI
          2. Setting up Ionic
        4. Summary
      2. 2. To-Do List App
        1. Creating our first application
          1. Creating our to-do list app
        2. The Ionic workflow
          1. In-depth look at our project
          2. Envisioning our app
          3. Building our todo app
            1. Creating the UI
            2. The code
            3. Wiring things up
        3. Summary
      3. 3. Running Ionic Apps
        1. Running our todo app
          1. The ionic serve technique
            1. Emulating with Chrome
          2. Ionic serve labs
          3. The Ionic view
            1. Testing todo app with the Ionic view
          4. Device
            1. Android
            2. iOS
        2. Summary
      4. 4. Ionic Components
        1. Creating a new to-do list application
          1. Overview of the Bucket-List app
            1. Breaking down the app
          2. Designing the UI
            1. Implementing the input box
            2. Implementing the ion-list application
              1. Using ion-list for our Bucket-List app
                1. The ion-list component
                2. ion-item
                  1. ion-option-button
          3. Writing the Angular code for our Bucket-List app
            1. Coding our input box
              1. Creating the controller
              2. Creating the input box model
              3. Creating an array for the Bucket-List items
              4. Implementing code for the Add button
              5. Implementing the Delete button
            2. Wire it all up
              1. Binding the controller
              2. Binding the input box model
              3. Wiring up the Add button
              4. Binding ion-item
                1. Using ng-repeat to render the list
                2. Wiring up the ion-option-button element
          4. Testing our Bucket-List app
        2. Summary
      5. 5. The London Tourist App
        1. Introduction to the London Tourist App
          1. Creating the London Tourist app
            1. The side menu app design
            2. Using the Ionic side menu template
            3. Seeing the LTA side menu app in action
            4. Exploring the LTA side menu app's code
              1. The index.html file
              2. The menu.html file
                1. The <ion-side-menus>element
                2. The <ion-side-menu-content>element
                3. The <ion-side-menu>element
            5. Developing the LTA application
              1. The local JSON database
                1. Creating the local JSON database file
                2. Populating the JSON file
              2. Designing the view
                1. Wiring up the data
                2. Retrieving the data with the $http service
        2. Summary
      6. 6. Advanced Ionic Components
        1. The Ionic Popover
          1. Implementing the popover
            1. Adding the menu button
            2. Coding the popover
            3. Adding the $ionicPopover service
              1. Finishing the popover code
            4. Creating the popover.html file
            5. Wiring up the popover
        2. The Ionic Modal
          1. Creating the modal
          2. Implementing the modal
          3. Creating the modal.html file
          4. Wiring up the modal
        3. Summary
      7. 7. Customizing the App
        1. Customizing the look and feel of your app
          1. Ionic styles with SASS
        2. Ionic SCSS overview
          1. The ionic.app.scss file
          2. Setting up SCSS
          3. Customizing the SCSS
        3. $ionicConfigProvider
        4. Summary
      8. 8. Building a Simple Social App
        1. The Ionic tabs application
          1. Creating an Ionic tabs application
            1. Running the tabs-app application
            2. Overview of the tabs-app application
            3. Overview of the tabs.html file
        2. The <ion-tab> element
          1. Adding tabs to the tabs-app application
            1. Adding the state for the new tab
          2. Creating the tab-wall.html file
          3. Creating the WallController controller
          4. Creating the tab
        3. Summary
      9. 9. Connecting to Firebase
        1. Extending our tabs-app Ionic app
          1. Implementing the post wall feature
            1. The backend challenge
        2. Firebase
          1. Setting up a new Firebase account
          2. Integrate Firebase into tabs-app application
            1. Adding Firebase and Angular-Fire scripts
            2. Implementing Firebase to our app
            3. Pulling from database
              1. Adding to database
        3. Summary
      10. 10. Roundup
        1. Uncovered features of Ionic
          1. Appcamp.IO
          2. The Ionic documentation
          3. The Ionic creator
          4. The Ionic code pen
          5. Ionic.IO
          6. The Ionic playground
          7. The Ionic community
        2. Useful resources
        3. Summary
    9. A. Bibliography
    10. Index