+ - 0:00:00
Notes for current slide
Notes for next slide

Introduction

Learn about Ionic, an open source framework to build hybrid mobile applications based on Capacitor, and Angular.

You will need

1 / 18

Which OS (and version) should your app support?

Introduction

iOS version share

source

Android version share

source

2 / 18

Hybrid mobile applications

Introduction

Write your app with web technologies and languages (HTML, CSS and JavaScript), and embed it into a native application thanks to a native bridge (like Capacitor, more on that later).

Since you are writing a web app, you can access native web APIs like the Geolocation API.

But since you are using a native wrapper, you can also access device-only hardware/features like the fingerprint scanner or the accelerometer, and you can do it through JavaScript, with the help of dedicated native plugins.

3 / 18

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

Native Development

Pros

  • Highest performances
  • Less dependencies (direct access to the native SDK features)

Cons

  • One codebase/release cycle/team per platform
  • Requires more resources, time and knowledge

Hybrid Development

Pros

  • One codebase for all platforms (mobile and desktop alike)
  • Widely used and known technologies

Cons

  • (Little) Less performant than native apps (there's more layers)
  • Access to native device capabilities limited by plugins
4 / 18

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.

5 / 18

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:

6 / 18

What about Ionic?

Introduction > Hybrid mobile applications

"Ionic Framework is the free, open source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single codebase."

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.

7 / 18

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

A card component displayed on an iOS platform

The same card displayed on an Android platform

8 / 18

Demo

Introduction

9 / 18

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.

10 / 18

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.

11 / 18

App Creation Wizard

Introduction > Demo

If you prefer, you can simply type in ionic start, and agree to use the app creation wizard when prompted by the CLI:

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

In which case your browser will open on a configuration page where you can define a bunch of things about yout app.

Not that using this creation method will require you to have an Ionic account or create one.

12 / 18

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

13 / 18

Basics of Ionic

Introduction

14 / 18

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>

15 / 18

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>

16 / 18

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.

17 / 18

Which OS (and version) should your app support?

Introduction

iOS version share

source

Android version share

source

2 / 18
Paused

Help

Keyboard shortcuts

, , Pg Up, k Go to previous slide
, , Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow