iOS version share
Android version share
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.
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.
Pros
Cons
Pros
Cons
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.
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:
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:
Please note that we will be using Angular as the underlying framework in this course.
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
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.
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.
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.
If you are using VS Code as your main code editor, you should install the VS Code Ionic Extension to help you :
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>
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>
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...
Whatever your setup, the Ionic documentation has dedicated walkthrough to set up your environment.
Documentation
iOS version share
Android version share
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 |