Apps mit dem Ionic & Capacitor Framework

In diesem Workshop zeige ich dir, wie du deine Web-/Angular-Anwendungen mit dem Ionic & 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. Web goes Native iOS und Android Apps mit dem Ionic & Capacitor Framework Daniel Sogl @sogldaniel Consultant & Trainer
2. • Software architect @ Thinktecture AG • Angular Trainer @ Angular Architects • Angular Developer since 2015 • Focusing Mobile Apps & FinTech • Maintainer of Awesome Cordova Plugins (aka @ionic- native) About me
3. • First half: Ionic • Hybrid Apps VS Native Apps – Pros & Cons • What is the Ionic Framework and its history • How to build native looking apps using Ionic • Live-Coding • Q&A • Break • Second half: Capacitor • What is Capacitor and Capacitor Plugins Eco System • Live-Coding • Custom Native Plugins • Outlook: bring your apps to the app stores • Q&A Agenda
4. Hybrid Apps VS Native Apps Pros & Cons
5. •Native Apps •Cross-Platform Apps •Hybrid-Apps •Web-Apps App types
7. Pros & Cons Native Apps + build on top of the latest platform APIs + best possible performance + better user experience - Can only be executed on the targeted platforms - Higher development costs - Longer time to market Hybrid Apps + Cross-platform with one code base + 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
8. Ionic performance comparison
12. Ionic in production A short demo of what is possible
13. Ionic Framework Write Once – Beautiful everywhere
14. (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 using Stencil.js • Supports Angular, React, Vue and plain JS • Enterprise plugins & CI/CD-systems • Micro frontends with Ionic-Portal What is the Ionic Framework
15. Build native looking UIs with Ionic One code base to rule them all
17. • Ionic provides all UI-elements (and icons) to build native like UIs • Fully customizable thanks to CSS-variables & shadow dom • Theme generators for dark & light themes • Ionic-CLI & VS-Code plugins • Up to date design system changes based on the latest MD & Human-Design Guidelines Build native looking UIs with Ionic
18. Live Coding Building Apps with Ionic
19. Break Feel free to ask questions 
20. Capacitor Bring your web apps to native devices
21. The days before a simple to use API with TypeScript • 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
22. (And its history) • 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
23. 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 the required platforms (iOS or Android) 4. Run the – npx cap sync – command 5. … 6. Profit! Bring existing apps to native devices
24. Writing your own capacitor plugins Native APIs without a native App
25. 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 (for example the Post Ident SDK) • Plugins can be published on npm or added into the project itself Writing your own capacitor plugins
26. • GitHub: https://github.com/danielsogl • X: https://x.com/sogldaniel • LinkedIn: https://www.linkedin.com/in/daniel-sogl/ • TT: https://www.thinktecture.com/thinktects/daniel-sogl/ Follow me