ionic - cross platform mobile app 開発
- 2. ionicとは？ Angular OR Mobile Platforms Web App Frameworkを用いて、One CodebaseでWeb, iOS, Androidアプリが 同時に開発可能になる、Hybrid Frameworkです。 ionic
- 3. 必要知識 • Webの基本知識と、Angular 2+の最低限の知識が必要です。 • HTML5, CSS3, JavaScript(ES6+), TypeScript • Angular 2+のArchitecture, Module, Component, Service & DI(Dependency Injection) ※Angularの基本アーキテクチャとDI概念 Angular TypeScript +
- 4. 作ってみた • OS環境と言語と諸々 • Windows 10 home • Visual Studio Code, Android Studio • Node.js v10.15.1, JDK 8, Android SDK • Angular 7, Ionic 4, Capacitor Angular • Web App / Android App • 料理レシピリスト (※iOSは今回作ってません。) ✕
- 5. 環境構築 本家サイト参考にて、構築実施。 Windows OSは、Android環境のみ構築可能。 ※Appflowと言う、Cloud上で環境が揃っていて、Buildも可能な有料サービスがあります。
- 6. Components 制作 ionicは、モダンMaterial Designをベースに、UIコンポーネントを提供しています。 別UIコンポーネントが必要な場合は、他サードパーティにて追加も可能です。 (Angular BootStrap, Ant Designなど)
- 7. Components 制作 さっそく、ionic CLIのコマンド、「ionic start PJ_NAME --option」入力して ベースファイルを作成します。
- 8. Components 制作 基本構成は、Angular CLIと似たようにファイル構成を作ってくれます。 ※ionic 4のroutingの基本は、遅延ロード(lazy load)で遷移することになりました。
- 10. Components 制作 Ionic UI Componentと構成図をベースにComponentとServie制作
- 11. ionic Build Ionic CLIの機能を利用し、web, android, iosアプリを同時buildができます。 (※iOSは Mac OS Xが必要…)
- 12. ionic Build Androidはjdk, android jdk、Android Studioの環境構成が揃っていればbuildが可能です。 (※apk生成は、Android Studioにて可能)
- 13. 参考資料 • Ionic : https://ionicframework.com/ • Capacitor : https://capacitor.ionicframework.com/ • Udemy Ionic 4 course : https://www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/