Qui suis-je ?
Ezéchiel Amen AGBLA
✅ Ingénieur en Électronique et Systèmes
Embarqués
✅ Directeur des Opérations et
Développeur Fullstack JavaScript à
Vyconsulting
✅ Enseignant à l’Université Privée de
Fès (Maroc)
twitter.com/ezchilamen
github.com/amilamen
Qu’est-ce qu’une PWA ?
Une Progressive Web Application (PWA) est un site web qui utilise
les capacités modernes des mobiles (Notifications push, GPS,
Appareil photo…) pour offrir aux utilisateurs une expérience
semblable à celle d’une application mobile native.
Pourquoi utiliser une PWA ?
✅ Une seule application d’où la notion de progressive
✅ La sécurité
✅ La rapidité
✅ L’engagement
✅ Le référencement
✅ Le fonctionnement hors-ligne
✅ L’installation d’un raccourci
Quels sont les principes de
développement d’une PWA ?
✅ Le manifeste
✅ Le HTTPS
✅ La mise en place d’un Service Workers
✅ L’engagement
Ionic Framework
Framework Ionic
UI Components for native mobile apps, PWAs, and even
Desktop
Pre-built Gestures and Animations
Platform Continuity for iOS and Material Design
Full access to all Native APIs and Plugins
A large, vibrant world-wide community
UI Components (100+)
Gestures & Animations
Swiping gestures between views
Sliding items for reveals
Carousel slides for App intro
Platform Continuity
A N D R O I D I O S
Platform-aware components
Look-and-feel at home
Up to date with latest UI design
Native Access
Community driven plugin ecosystem
@ionic-native to integrate with Ionic
Can integrate with custom needs and APIs
Framework/components are open source (MIT)
Native layers (Cordova/Capacitor) also open source
Open Web Standards - available to everyone
Open Source everything
Integration with Popular Frameworks
Angular and Vue currently, more to come
Use framework specific tooling to better integrate with ecosystem
Ionic handles the UI/UX, frameworks handle the logic layer
Angular Framework
One framework.
Mobile & desktop.
Framework Angular
Angular is an application design framework and development
platform for creating efficient and sophisticated single-page
apps.
Main Concepts
✅ Components
✅ Templates
✅ Directives
✅ Dependency Injection
Built-in features
✅ Routing & Navigation
✅ Forms
✅ HTTP Client
✅ Internationalization (i18n)
✅ Animations
✅ Schematics
✅ Service Workers & PWA
What is Capacitor ?
The new Native Bridge for Web Apps
What is Capacitor ?
Cross-platform runtime for iOS, Android, Electron and Web
Web-focused APIs that stay close to the Standards
Modern Native tooling for easy native project maintenance
Inspiration from Cordova, React Native, and Turbolinks
Add to any project
$ npm install @capacitor/core @capacitor/cli --save
$ npx cap init
$ npx cap add {ios, android, web, electron}
$ npx cap open
import { Plugins, CameraResultType } from '@capacitor/core';
export class MyClass {
const { Camera } = Plugins;
async takePicture() {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri
});
var imageUrl = image.webPath;
imageElement.src = imageUrl;
}
}
import { Plugins, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';
export class MyClass {
const { Filesystem } = Plugins;
async fileRead() {
let contents = await Filesystem.readFile({
path: 'secrets/text.txt',
directory: FilesystemDirectory.Documents,
encoding: FilesystemEncoding.UTF8
});
console.log(contents);
}
}
👩🏽💻 ☕️🚀 Instant Coding 🚀☕️🏽🏽💻
M E R C I

#Devcamp17: Développement d’une Progressive Web Application (PWA) avec le stack Ionic-Angular-Capacitor

  • 2.
    Qui suis-je ? EzéchielAmen AGBLA ✅ Ingénieur en Électronique et Systèmes Embarqués ✅ Directeur des Opérations et Développeur Fullstack JavaScript à Vyconsulting ✅ Enseignant à l’Université Privée de Fès (Maroc) twitter.com/ezchilamen github.com/amilamen
  • 4.
    Qu’est-ce qu’une PWA? Une Progressive Web Application (PWA) est un site web qui utilise les capacités modernes des mobiles (Notifications push, GPS, Appareil photo…) pour offrir aux utilisateurs une expérience semblable à celle d’une application mobile native.
  • 5.
    Pourquoi utiliser unePWA ? ✅ Une seule application d’où la notion de progressive ✅ La sécurité ✅ La rapidité ✅ L’engagement ✅ Le référencement ✅ Le fonctionnement hors-ligne ✅ L’installation d’un raccourci
  • 6.
    Quels sont lesprincipes de développement d’une PWA ? ✅ Le manifeste ✅ Le HTTPS ✅ La mise en place d’un Service Workers ✅ L’engagement
  • 8.
  • 9.
    Framework Ionic UI Componentsfor native mobile apps, PWAs, and even Desktop Pre-built Gestures and Animations Platform Continuity for iOS and Material Design Full access to all Native APIs and Plugins A large, vibrant world-wide community
  • 10.
  • 11.
    Gestures & Animations Swipinggestures between views Sliding items for reveals Carousel slides for App intro
  • 12.
    Platform Continuity A ND R O I D I O S Platform-aware components Look-and-feel at home Up to date with latest UI design
  • 13.
    Native Access Community drivenplugin ecosystem @ionic-native to integrate with Ionic Can integrate with custom needs and APIs
  • 14.
    Framework/components are opensource (MIT) Native layers (Cordova/Capacitor) also open source Open Web Standards - available to everyone Open Source everything
  • 15.
    Integration with PopularFrameworks Angular and Vue currently, more to come Use framework specific tooling to better integrate with ecosystem Ionic handles the UI/UX, frameworks handle the logic layer
  • 16.
  • 17.
    Framework Angular Angular isan application design framework and development platform for creating efficient and sophisticated single-page apps.
  • 18.
    Main Concepts ✅ Components ✅Templates ✅ Directives ✅ Dependency Injection
  • 19.
    Built-in features ✅ Routing& Navigation ✅ Forms ✅ HTTP Client ✅ Internationalization (i18n) ✅ Animations ✅ Schematics ✅ Service Workers & PWA
  • 20.
    What is Capacitor? The new Native Bridge for Web Apps
  • 21.
    What is Capacitor? Cross-platform runtime for iOS, Android, Electron and Web Web-focused APIs that stay close to the Standards Modern Native tooling for easy native project maintenance Inspiration from Cordova, React Native, and Turbolinks
  • 22.
    Add to anyproject $ npm install @capacitor/core @capacitor/cli --save $ npx cap init $ npx cap add {ios, android, web, electron} $ npx cap open
  • 23.
    import { Plugins,CameraResultType } from '@capacitor/core'; export class MyClass { const { Camera } = Plugins; async takePicture() { const image = await Camera.getPhoto({ quality: 90, allowEditing: true, resultType: CameraResultType.Uri }); var imageUrl = image.webPath; imageElement.src = imageUrl; } }
  • 24.
    import { Plugins,FilesystemDirectory, FilesystemEncoding } from '@capacitor/core'; export class MyClass { const { Filesystem } = Plugins; async fileRead() { let contents = await Filesystem.readFile({ path: 'secrets/text.txt', directory: FilesystemDirectory.Documents, encoding: FilesystemEncoding.UTF8 }); console.log(contents); } }
  • 25.
    👩🏽💻 ☕️🚀 InstantCoding 🚀☕️🏽🏽💻
  • 26.
    M E RC I