What can we build?

  • iOS Apps
  • Android Apps
  • Windows Apps (WINDOWS?!!?!)
  • Progressive Web Apps

What is Ionic?

Open source SDK built on Angular that lets web developers build mobile apps

Web Tools Everywhere

Ionic Features

 

  • Free and Open Source
  • Write once, deploy everywhere
  • 120+ plugins to access device features
  • Unified design
  • CLI tools
  • Moar

What apps are Ionic?

What apps are Ionic?

Different Types of Apps

  • Hybrid

  • Native

  • Progressive Web Apps

Pros/Cons Hybrid

  • PRO: One Codebase

  • PRO: Test in browser

  • PRO: Deploy as hybrid or PWA

  • CON: Plugins needed

Pros/Cons Native

  • PRO: Rendered with Android/iOS

  • PRO: Fast and performant

  • CON: Not a "write once" mentality

Alternatives

  • Phonegap

  • NativeScript

  • React Native

  • jQuery Mobile

  • Kendo UI

Your Code!

 

 

Ionic

 

 

 

 

 

Angular

 

 

 

 

 

 

WebView

Cordova

Device

Cordova

Provides the bridge from Ionic to device features

Ionic Services (apps.ionic.io)

Auth

Login with email or social

Deploy

Update your app on consumer devices

Push

Targeted push notifications

Build

Create packages you can deploy to the app store

The Ionic Process

Develop Locally

  • ionic serve
  • Work in browser
  • Use an emulator

Test on Devices

  • Use Ionic Cloud
  • Use Ionic View

Build for App Stores

  • Build locally 
    • ionic build android
  • Build with Ionic Services
  • Submit to App Store

The Ionic Docs

ionicframework.com/docs

Components

Native

Starting Requirements

  • Create an Ionic Account
    • apps.ionic.io
  • Install Ionic and Cordova
    • npm install -g ionic cordova
  • Login to Ionic
    • ionic login

Ionic View

view.ionic.io

Deploying a Sample App

  • Create app with template
    • ionic start ionic-test sidemenu
  • Create app on apps.ionic.io
  • Link local app to new Ionic Services app
    • ionic link
  • Set cordova platform
    • ionic cordova platform add android
  • Upload
    • ionic upload

Going Further

  • Use Ionic components
  • Create new pages
  • Use different Ionic Native plugins
  • Install Cordova and emulators locally
  • Install tools to test remotely on device
  • Package and submit to App Stores

Ionic Creator

creator.ionic.io

Ionic

By Chris Sevilleja

Ionic

  • 1,241