スポンサーリンク

ionic3で掲示板を写経してみる

ionic3を勉強するのには、まず、以下の本がおすすめです！


Angular2によるモダンWeb開発 Kindle版
末次 章 (著)
発売日：2017/1/18
2800円

今回は、以下のページを写経して（ionic2 で、angularfire2@2.0.0　を使用しているので、公式記載とを見ながら、angularfire2@4.0.0-rc1　を使うので、少し変更）、firebaseとionic3で掲示板アプリを作ってみたい！

TECH Pjin
Firebaseとionicで掲示板アプリを作成する①
2017/3/2 クラウド firebase, Ionic, Ionic2 nakaji
http://tech.pjin.jp/blog/2017/03/02/make-firebase-board-1/

（環境）

https://firebase.google.com/?hl=ja

（１）ionic3-firebase-board アプリの作成

VisualStudioCodeを起動し、Ctrl＋＠でcmd.exeの画面を出してから、

ionic start ionic3-firebase-board blank

cd ionic3-firebase-board

ionic serve







なお、package.jsonは、以下のようになっていました。(2017/6/21時点)




（２）Firebaseプロジェクトの作成


googleアカウントを作成し、Firebase consoleにログイン


https://console.firebase.google.com/?hl=ja&pli=1


プロジェクトの追加　をクリック




ionic3-board　という名前で作成




以下のような画面になるので、「ウェブアプリにFirebaseを追加」をクリック。




表示されるコードをメモ帳がどこかにコピーしておきます。一部を、あとで、ionic3にコピペします。




（３）ionic3に、firebaseと、angularfire2を、npm installする。


npm install firebase angularfire2 –save






今回は、


angularfire2@4.0.0-rc.1

firebase@4.1.2


がインストールされたようである。


（４）ionic3アプリの編集


（４－１）src/app/app.module.ts　：　angularfire2の設定


(変更前)




(変更後)（仮）




app.module.tsの、12行目から16行目の、”控えた….”のところは、実際は、（３）のFirebaseの画面でコピーしたものをコピペします。

（projectId以外をコピペしました。）


(変更後)（実際）




（４－２）src/pages/home/home.ts　：　Firebaseからデータを取得


(変更前)




(変更後)




エラーなので、ググッたところ、


https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md




とのこと。なるほど、さっぱりわからん。日本語でOK.


あきらめて、公式マニュアルを読む。


https://github.com/angular/angularfire2/blob/master/docs/6-angularfire-and-ionic-cli.md




4. Add Firebase config to environments variable


src/environment.ts　の作成




5. Setup @NgModule for the AngularFireModule


src/app/app.module.ts




6. Setup individual @NgModules


src/app/app.module.ts　の修正




7. Inject AngularFireDatabase


8. Bind to a list


src/pages/home/home.ts




どうやら、Angularfire2のVersionが2017年5月頃に、4.0.0-rc.1　になり、なんか、やり方がまた変わったらしい。。。こういうときは、あきらめて、英語の公式サイトを見てやるしかない。っていうか、それが普通なのかな。。。


（４－３）src/pages/home/home.html　：　Firebaseから取得したデータを表示




（５）Firebaseのデータベースの権限変更


Firebase console画面で、左側の、Database　をクリック。




ルール　タブをクリック。




一時的に、以下のように変更する。アプリが動くことを確認したら、すぐに、元の状態に戻しておく。


(変更前)




(変更後)




上記は間違い、下記に一時的に変更。




公開　をクリック。


繰り返しますが、アプリが動くことを確認したら、すぐに、元の状態に戻しておいてください。


ionicアプリを、ionic serveしたままの状態で、ブラウザの更新をすると、以下のようになる。




（６）Firebaseにデータを追加。


firebase console のRealtime Databse　の、データ　タブで、データを追加する。










ionicアプリを、ionic serveしたままの状態で、ブラウザの更新をすると、以下のようになる。




（７）掲示板への書き込み機能を入れる。


src/pages/home/home.ts




src/pages/home/home.html




ブラウザから書き込んでみる




たしかにうまくいっているようだ。






（安全のため、なるべく早く、firebaseのdatabaseのルールは、デフォルトに戻しておく。）


（参考）


TECH Pjin

Firebaseとionicで掲示板アプリを作成する③

2017/3/4 クラウド firebase, Ionic, Ionic2 nakaji

http://tech.pjin.jp/blog/2017/03/04/make-firebase-board-3/


https://ionicframework.com/docs/components/#grid




（８）androidアプリの作成


ionic cordova platform add android
ionic cordova build android


出来上がったapkファイルを自分のandroidスマホにメールしてインストール。。。しかたかったのであるが、いきなりエラー。






https://github.com/ionic-team/ionic-app-scripts/issues/1001


npm install promise-polyfill --save-exact




ionic cordova build android




今度こそ、出来上がったapkファイル（約4.3MB）を自分のandroidスマホにメールしてインストール。


書き込みもできた。






Windowsパソコンの方でも、自動的に携帯電話からの書き込みが反映されている。firebaseすごい！あとは、ログイン機能をつけられれば、テキストのみのチャットはこれで十分かもしれない。。。


安全のため、なるべく早く、firebaseのdatabaseのルールは、デフォルトに戻しておく。


{

“rules”: {

“.read”: “auth != null”,

“.write”: “auth != null”

}

}






.gitignore に、src/environment.ts を追加しておく。





  






Ionic3, Javascript
Posted by twosquirrel