ionicとは
IonicはAngularJsをベースにした、モバイルアプリケーションを開発するためのフレームワーク。オープンソースで、MITライセンスで利用できる。
Apache Cordovaの上に構築されており、HTML5を用いたクロスプラットフォームのハイブリットアプリケーションを開発できる。
Tinderのようなアプリの開発
今回は、Tinderライクなアプリケーションをプロトタイプとして、開発しようと思います。
※ionicの始め方は他のところにも書いてあるので、割愛
機能としては、
- スワイプ
- チャット
- マッチ
- メッセージ
※もし開発できたら、実装方法を記事でまとめようと思います。
ミスりやすいところ
同じところでミスした人の救いになれば。
「cordova」を使うとき
ionic serve
ではcordovaは発動しない。
Facebookログイン実装したときにつまづいたので記載。
ionic cordova run browser
※「ios」または「android」をプラットホームとしている場合はbrowserのところを変更
「Error: StaticInjectorError[HttpClient]・・・」とかっていうerror
import {HttpClientModule} from '@angular/common/http'
を追加し、
@NgModule({
declarations: [
],
imports: [
HttpModule,
HttpClientModule, ←追加
IonicModule.forRoot(MyApp)
],
で解決できた。
やっかいな"@ionicpage"
IonicにはLazyLoadingに対応したIonicPageという考え方があります。
※LazyLoadingは、アプリ起動時間の短縮を目的に、モジュールの分割を行い、必要時にダウンロードを行わせる考え方です
参考：IonicPage採用時のHTMLタグ拡張(Custom Components)実装について (1/2)
ionic start
で作られたページは通常（個別のモジュールがない）
ionic g page [name]
で作られたページはionicpage（モジュールが分割されている）
cannot read property 'querySelector' of null
対応しているhtmlページで、*ngIf ではなく、[hidden]に変えたら治りました。
参照
Property 'catch' does not exist on type 'PromiseLike'
firebaseDBに追加するときに発生しました。
原因はthen pushが PromiseLikeを返す原因となるThenableReferenceを返すためみたいです。
解決策としては、pushの後に、setを追加すれば治りました。
this.firebaseDatabase.push().set({}).then(() => )
参考stackoverflow
Execution failed for task ':app:processDebugResources'
ionic cordova run androidで動かそうと思ったら、なにやらエラーが発生。上の方にさかのぼってみてみると、
resource string/fb_app_name (aka io.ionic.starter/fb_app_name) not found.
FacebookのIDとNAMEが読み込まれてないらしい。
ひとまず、ぐぐってみると同じような人がいた。
以下の行を追加すれば、なおりました。
<string name="fb_app_id">ID</string>
<string name="fb_app_name">APP_NAME</string>
PANIC: Missing emulator engine program for 'x86' CPU.
ionic cordova emulate androidにてエミュレーターで確認しようとしたらエラー。
ひとまずぐぐってみると、環境変数のpathが違うやらなんやら。
Also, when I run:
$ ${ANDROID_SDK_ROOT}/tools/emulator -avd my-custom-avd
I got: PANIC: Missing emulator engine program for 'x86' CPU.
But, when I run:
$ ${ANDROID_SDK_ROOT}/emulator/emulator -avd my-custom-avd
the emulator starts and works fine
参照：ionic cordova run android results in PANIC: Missing emulator engine program for 'x86' CPU
ということなので、pathを変える必要があるが、どうやって変えるのか。
さらに色々調べてみると、Windowsの場合、システム詳細＞環境変数から設定できるみたい。
詳しくはこちらを：環境変数の設定方法
これをもとに、ANDROID_SDK_ROOTとpathを追加して、再度emulateしてみたら、動いた。
追加する内容は、こちら。
参考記事
How to Build An Ionic App with Firebase and AngularFire 4
Chat app with ionic3 and firebase & code at github
Using AngularFire with Ionic 3
Build Ionic 3, Angular 5 and Firebase Simple Chat App