Hybrid Mobile App Development with Ionic

Install and verify node, npm, cordova, and ionic on macOS, then install Xcode and the iOS tooling. Set up the Android SDK and provisioning for iOS and Google Developer signup.

Install Node.js, Git Bash, Android SDK and Android Studio, and the Java Development Kit, then install Ionic and Cordova via npm and update the Windows PATH for the development environment.

Explore AngularJS, an MVC-based framework built atop Angular, and learn templates, controllers, directives, data binding, scope, and services that connect views to the data model.

Explore how to bootstrap a blank Ionic app, choose templates, and configure Cordova elements. Understand the project structure, plugins, and iOS setup to build Ionic apps.

Compare css components and angular components in Ionic, exploring headers, footers, buttons, cards, forms, tabs, grids, and additional ui elements such as action sheets, modals, popovers, and side menus.

Learn to use the Ionic cli from the terminal to set up mobile platforms and plugins, enable analytics, and build and deploy apps to devices, with built-in help.

Run ionic serve to start a local development server and preview your app in a browser, showing how it runs on iOS and Android with live reload to auto-refresh changes.

Explore loading, viewing, and testing Ionic apps on a device with Ionic View. Sign in to an Ionic IO account, upload your app, and preview it on iOS or Android.

Scaffold a new ionic app from a blank template and extend it with Cordoba plugin. Connect to firebase for cross-platform data and add Android and iOS platforms, run ionic serve.

Learn to create an initial to-do list interface with Ionic and Angular, including a header, add item button, and ng-repeat driven item list, wired to a controller and scope.

Enable swipe-to-reveal option buttons in a list using Ionic's ion-option-button, bind items to actions, update item status to purchased, and apply a conditional purchased style for visual feedback.

Learn to add ionicons from a 700+ icon library, preview at ionicons.com, and integrate icons into an Ionic button using icon classes, selecting ion plus round and ion dash checkmark.

Discover how to save to-do data externally with firebase and angular fire in an ionic app, using a firebase reference factory to share data, push items, and enable real-time syncing.

Learn to enhance an Ionic app by adding Cordova plugins for native dialogs, using Engy Cordova and ngCordova, and test across iOS and Android with Ionic run and emulators.

Build a simple weather app using Ionic by starting a blank template, setting up the working directory, adding Android platform, and wiring HTML templates with JavaScript.

Learn to build the initial Ionic interface by creating templates, side menus, and a header bar, wiring up the app router, and implementing Fahrenheit or Celsius units.

Fetch weather data from forecast.io using an API key, implement an Angular weather service and settings service to toggle Fahrenheit or Celsius, and display current and daily temperatures.

Display current weather data from forecast.io by binding current, high, and low temperatures to the user interface with rounding, show a loading overlay, and toggle between fahrenheit and celsius.

Update the weather data flow by linking settings factory to the weather factory, enabling Fahrenheit or Celsius, and adding a pull refresh and a watch function to fetch forecast data.

Add a refresher component to the weather template and set the pulling text to pull to refresh. Wire on-refresh to a scope.doRefresh function that calls get weather and broadcasts scroll.refreshDone.

Learn to integrate the Cordova geolocation plugin in an Ionic app, inject it through a simple location service, and retrieve latitude and longitude to power a weather map.

Enhance the weather app with visual styling by replacing the css file and adding a cloud background image from the image directory, then adjust header alignment, sizing, and spacing.

Build a national parks guide app with Ionic tabs template, integrating data and thumbnails, a map view of parks, and navigation between parks list and detail screens.

Update the navigation by configuring the new router, refactoring routes to parks, and passing park id through states while aligning tabs, templates, and controllers.

Update and map controllers for the hybrid ionic app, remove the chat service, and add logging to scaffold the system, ensuring correct wiring for iOS and Android deployment.

Update park list and detail templates in an Ionic app, using ion-item with thumbnail left and chevron right, ng-repeat for parks, and links to #/tab/parks/:id displaying park.name, park.state, and park.image.

Inject the park data service and partita factory into the ionic controller, load local data via http get from the data directory, and wire it through the park data service.

Build a data factory in an Ionic app by creating a park data array, data and getPark functions, and router-based park IDs for the detail view and map view.

Implement a leaflet map in an ionic app by downloading and including the library and css, integrating with angular, and setting 100vh map centered on the US at zoom 3.

Add credible park markers to the map by fetching park data, creating marker objects with map icons and sizes, and wiring click events to navigate to map details.

Configure the Ionic config provider to hide the back button text and center the title globally, then customize colors with Sass and enable a Leaflet map on the detail screen.

Learn to debug hybrid apps by using Chrome developer tools to inspect elements, set breakpoints, and log messages, while testing across iOS and Android emulators and devices.

Test iOS apps with the Ionic emulator, using Safari developer tools to inspect the running app, diagnose map tile issues, and apply a remote tile source fix.

Learn to work with android emulators in Ionic, using Genymotion to test the national parks app without devices, and troubleshoot by uninstalling and reinstalling android platforms when necessary.

Test and deploy your Ionic app on an Android device by enabling developer options, USB debugging, and using Chrome remote inspection to debug on device.

Prepare for on-device testing by configuring provisioning, loading certificates, and updating the app ID to match your development provisioning profile, with guidance from a Big Nerd Ranch walkthrough.

Explore various testing and debugging methods for Ionic apps, including browser emulators and physical devices, and learn how to integrate existing test solutions into your Ionic project.

Generate 23 icons and 23 splash screens for iOS and Android with the ionic resources tool, then update the SML file to reference each file.

Prepare for release by removing unused plugins, deleting the console plugin, concatenating css and javascript, enabling template caching, and optimizing visual assets and app id in the config.

Learn how to sign and submit iOS apps for the app store using exit codes, iTunes Connect, or online signing services. Next video covers Android signing for Google Play.

Sign and build an Android release for Google Play using Cordova to generate a release build, create a signing key with keytool, sign the unsigned file, and prepare for publishing.

Stay up to date with evolving Ionic development, access the official Ionic Framework resources, and join a vibrant, supportive community on Slack.

Navigate the road ahead for Ionic as it undergoes a major revision based on Angular 2, with migration resources, a new release window, and performance improvements through web workers.

Build three applications with the Ionic framework, including templates, Firebase connectivity, a weather app using Forecast.io, and a national parks guide with tap component, list master detail, and a map.