1- Généralités sur les PWAs 2- Présentation du framework Ionic 3- Présentation du framework Angular 4- Présentation du framework Capacitor 5- Instant coding

2. 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

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 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

6. Quels sont les principes de
développement d’une PWA ?
✅ Le manifeste
✅ Le HTTPS
✅ La mise en place d’un Service Workers
✅ L’engagement

8. Ionic Framework

9. 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

10. UI Components (100+)

11. Gestures & Animations
Swiping gestures between views
Sliding items for reveals
Carousel slides for App intro

12. 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

13. Native Access
Community driven plugin ecosystem
@ionic-native to integrate with Ionic
Can integrate with custom needs and APIs

14. Framework/components are open source (MIT)
Native layers (Cordova/Capacitor) also open source
Open Web Standards - available to everyone
Open Source everything

15. 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

16. Angular Framework
One framework.
Mobile & desktop.

17. Framework Angular
Angular is an 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 any project
$ 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. 👩🏽💻 ☕️🚀 Instant Coding 🚀☕️🏽🏽💻

26. M E R C I