Talk for DevFest 2021 - GDG Bénin
- 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
- 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