Which OS (and version) should your app support?

Introduction

iOS version share

source

Android version share

source

Hybrid mobile applications

Introduction

Hybrid VS Native

Introduction > Hybrid mobile applications

There's a lot of talk around mobile application development and wether or not you should go the hybdrid way, or stick to the native development.

Read More on the subject

Capacitor

Introduction > Hybrid mobile applications

Capacitor is an open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.

Other options

Introduction > Hybrid mobile applications > Capacitor

Capacitor is not the only system that allows developing hybrid (or hybrid-like) mobile applications.

Here's a list of other technologies and why they were not chosen for this course:

• Cordova - The Ionic team developped Capacitor to replace Cordova ;
• Microsoft Xamarin - Uses .NET and C# for development ;
• Google Flutter - Uses Dart under the hood. Has gained a lot of traction over the last years ;
• Facebook React Native - Can only be used with React ;
• And others...

What about Ionic?

Introduction > Hybrid mobile applications

Ionic is actually two things:

• A set of development tools (like the Ionic CLI, or the VS Code extension) to help you create, manage, build and deploy your hybrid mobile application
• A set of pre-made components for each of the main JavaScript frameworks (Angular, React, Vue, ...)

Please note that we will be using Angular as the underlying framework in this course.

What can I do with Ionic?

Introduction > Hybrid mobile applications > What about Ionic?

Ionic lets you build web apps that look and behave (almost) like native apps with HTML, CSS and JavaScript or a supported framework.

The same application can be deployed on the web (as a PWA or not), Android or iOS, and will adopt the plateform's visual look and feel

Install Ionic

Introduction > Demo

Ionic provides you a CLI tool that you should install globally with the following command:

$> npm install -g @ionic/cli

You're now ready to use Ionic. Let's generate an app called ionic-tabs-demo with the tabs starter template, using Angular as the underlying framework:

$> cd /path/to/projects
$> ionic start ionic-tabs-demo tabs --type=angular
[ --- A bunch of stuff going on... Just wait --- ]
Your Ionic app is ready! Follow these next steps:
- Go to your new project: cd ./ionic-tabs-demo
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config --copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition

Follow the first two infos to see your app in your browser.

Starter templates

Introduction > Demo

There are other templates than tabs. For example, this will generate an application with a sliding side menu:

$> cd /path/to/projects
$> ionic start ionic-sidemenu-demo sidemenu

You can also start with a much simpler template. This will generate an app with just one page and a title, then it's up to you to define your basic layout:

$> cd /path/to/projects
$> ionic start ionic-blank-demo blank

You will find many Ionic app templates shared by the community in the Ionic market.

App Creation Wizard

Introduction > Demo

$> ionic start
? Use the app creation wizard? (Y/n)

VS Code Extension

Introduction > Demo

If you are using VS Code as your main code editor, you should install the VS Code Ionic Extension to help you :

• Manage your Ionic project
• Add the platforms you want
• Run your project
• And many other utility features

Components

Introduction > Basics of Ionic

Ionic has many UI components you can use out of the box:

<ion-button>Default</ion-button>
<ion-button [disabled]="true">
  Disabled
</ion-button>

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    Here's a small text description for the card
    content. Nothing more, nothing less.
  </ion-card-content>
</ion-card>

<ion-range aria-label="Temperature">
  <ion-icon slot="start" name="snow-outline"></ion-icon>
  <ion-icon slot="end" name="sunny-outline"></ion-icon>
</ion-range>

Component functionality

Introduction > Basics of Ionic

Many of these components are actually complex components. They not only look pretty, but they also bring functionality ; for example, the ion-item-sliding component enables you to slide in controls:

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Sliding Item with End Options</ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>Favorite</ion-item-option>
      <ion-item-option color="danger">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
  <!-- ... -->
</ion-list>

Running apps on your mobile device

Introduction

Even if Ionic allows you to develop and run your app almost entirely on a browser, the final goal should be to build your app and run it on a actual mobile device.

How this can be achieved depends heavily on which mobile device and computer you actually have...

• Want to test your app on an iOS device? You must have a Mac for that...
• Want to test your app on an Android device? Any OS will do

Whatever your setup, the Ionic documentation has dedicated walkthrough to set up your environment.

• For iOS:
  • iOS Requirements
  • iOS Development Guide
• For Android:
  • Android Requirements
  • Android Development Guide

Resources

Introduction

Documentation

• Capacitor requirements
• Ionic
  • Components
  • API Documentation