Créez des Applications Web Progressives (PWA) avec Angular ?

1. Créez des Applications Web
Progressives (PWA) avec
Angular ?
Ezéchiel Amen AGBLA
Electronics & Embedded Systems Engineer
CEO & Developer @ WETILLIX LLC
Maroc
Benin Republic

2. Qui suis-je ?
Ezéchiel Amen AGBLA
✅ Ingénieur en Électronique et Systèmes
Embarqués
✅ CEO et Développeur Fullstack JavaScript à
WETILLIX LLC
✅ Google Associate Android Developer
✅ Créateur du package Ionic Stripe Checkout
✅ 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 une application web
qui utilise les capacités modernes des smartphones (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. Angular Framework
One framework.
Mobile & desktop.

9. Framework Angular
Angular is an application design framework and development
platform for creating efficient and sophisticated single-page
apps.

10. Main Concepts
✅ Components
✅ Templates
✅ Directives
✅ Dependency Injection

11. Built-in features
✅ Routing & Navigation
✅ Forms
✅ HTTP Client
✅ Internationalization (i18n)
✅ Animations
✅ Schematics
✅ Service Workers & PWA

12. Ionic Framework

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

14. UI Components (100+)

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

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

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

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

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

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

27. Benin Republic
M E R C I