Angular goes Mobile: iOS und Android Apps mit dem Capacitor Framework

In diesem Webinar zeige ich dir, wie du deine Angular-Anwendungen mit dem Capacitor Framework auf das nächste Level bringst und sie als native iOS- und Android-Apps bereitstellst. Ich führe dich Schritt für Schritt durch den Prozess, Web-Apps in mobile Anwendungen zu verwandeln und mit nativen Plugins zu erweitern, um Gerätefunktionen optimal zu nutzen.

Transcript

1. Angular goes Mobile iOS und Android Apps mit dem Capacitor Framework Daniel Sogl @sogldaniel Consultant
2. Daniel Sogl • Consultant @ Thinktecture AG • Angular Developer since 2015 • Maintainer of Awesome Cordova Plugins (aka @ionic- native) About me
3. • App Types – Hybrid VS Native • Ionic Framework – a short overview • Capacitor Framework • Live Coding • Q&A Agenda
4. Hybrid Apps VS Native Apps Pros & Cons Daniel Sogl @sogldaniel Consultant iOS und Android Apps mit dem Capacitor Framework
5. •Native Apps •Cross-Platform Apps •Hybrid-Apps •Web-Apps App Types
6. •Native Apps •Cross-Platform Apps •Hybrid-Apps •Web-Apps App Types
8. Pros & Cons Native Apps + build on top of the latest platform APIs + best possible performance - Can only be executed on the targeted platforms - Higher development costs - Longer time to market Hybrid Apps + Faster development speed + Lower costs and faster time to market - Lower performance - Limited access to native features - Limited UI/UX based on the native design systems Hybrid Apps
9. Ionic Framework Write Once – Beautiful everywhere Daniel Sogl @sogldaniel Consultant
10. (And its history) • Open-Source cross platform mobile UI SDK • Provides components for Material Design & Human Design System (Android & iOS) • Built on top of web components with Stencil.js • Supports Angular, React, Vue and Vanilla JS • Enterprise plugins & CI/CD-systems • Micro frontends with Ionic-Portal for native apps What is the Ionic Framework
11. Build native looking UIs with Ionic One code base to rule them all Daniel Sogl @sogldaniel Consultant
13. Capacitor Bring your web apps to native devices Daniel Sogl @sogldaniel Consultant
14. • 2008 – Apple releases the App Store • 2009 – Apache Cordova (aka PhoneGap) was introduced • … • 2019 – Capacitor 1.0 was released to the public A short look back
15. • Open-Source Cross Platform Mobile Runtime SDK • Web-Framework agnostic • Plugin Ecosystem for all relevant core functionalities • APIs for native & web Possibility to write your own capacitor Plugins without deep native platform knowledge • Native project integration thanks to Xcode and Android Studio Project files • Backwards compatible with Cordova What is the Capacitor framework
16. „There's an app plugin for that“ • The Capacitor team provides core plugins (camera, storage, HTTP, keyboard, etc.) • Developers can contribute to the official Capacitor community project • Custom plugins can be published individually • Existing Cordova plugins can be used Capacitor Plugin Eco-System
17. System Requirements 1. Node.js LTS 2. iOS 1. Xcode 2. Homebrew 3. CocoaPods 3. Android 1. Android Studio 2. Android SDK Bring existing apps to native devices
18. You only must run four commands (more or less) • Every existing web app can be used thanks to the framework agnostic API 1. Add the Capacitor-CLI to the existing web app 2. Run the - npx cap init - command 3. Add platforms - npx cap add ios | android - command 4. Run the - npx cap sync - command 5. … 6. Profit! Bring existing apps to native devices
19. Capacitor Live Demo Daniel Sogl @sogldaniel Consultant
20. Writing your own capacitor plugins Native APIs without a native App Daniel Sogl @sogldaniel Consultant
21. Access custom native APIs or even native views • Plugins can be added thanks to capacitors TypeScript based API • Target any native API • Even native Views can be displayed and integrated • Plugins can be published on npm or added into the project itself Writing your own capacitor plugins
22. • Capacitor allows developers to bring any web app to native devices • Easy-to-use core plugins • Community-driven plugin ecosystem that is backward compatible with Cordova plugins • Custom plugins can be created using the easy-to-use Capacitor plugin API • Even native views can be displayed • More details? Expert 1:1 Summary
23. Thank you For your attention and questions! Daniel Sogl @sogldaniel Consultant