Ionic3とfirebaseでCRUDを写経してみる

2017年7月8日

以下のサイトをIonic3で写経してみたい。

Ionic 2 Firebase create-read-update-delete (CRUD) simple example first part.
https://www.djamware.com/post/585476a280aca7060f443064/ionic-2-firebase-crud-example-part-1

なんと、ありがたいことに、ソースコードまである。（Ionic2）
https://github.com/didinj/Ionic2FirebaseCRUD

ちなみに、今回ののソースコード(Ionic3)
src/environment.ts は、ご自身で作成し、ご自身のFirebaseの設定を入力してください。
https://github.com/adash333/ionic3-crud-firebase

（環境）
Windows 8.1
Ruby2.3.3-p222
SQLite 3.18.0
DevKit mingw64-64-4.7.2
Node.js v6.10.2
Rails 5.1.0
Git 2.8.1 

（１）Firebaseのセットアップ

以下と同様に、Firebaseをセットアップ。

http://twosquirrel.mints.ne.jp/?p=18328

今回は、firebaseで、ionic3-crud というプロジェクトを作成した。

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

Database  > ルール　をクリックして、以下のように書き換える。

{   "rules": {     ".read": "auth == null",     ".write": "auth == null"   }
}

 

（２）ionic3アプリの作成

ローカルで、 VisualStudioCodeで、C:/angular4/　下で、以下のコマンドを入力。
（場所は好きなところで、、、）

ionic start Ionic3-Firebase-crud
(途中で何か聞かれたら、そのままEnterを押す（tabs となる。）)
cd ionic3-firebase-crud
ionic serve

VisualStudioCodeで、ファイル >　フォルダーを開く　で、C:/angular4\ionic3-firebase-crud を選択

overview > ウェブアプリにfirebaseを追加　

ポップアップで出てくるvar config の内容をテキストファイルとしてコピーしておく。

（３）firebaseとangularfire2のインストール

以下を参考に進めていく。

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

https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic3-Angular4.md

npm install angularfire2 firebase --save

（４）src/environment.ts　を新たに作成し、（２）の最後でコピーしたfirebaseのconfigの内容をコピペする。

src/environment.ts

（５）src/app/app.module.ts　の変更

(変更前)

(変更後)

（６）addContactページの作成

ionic g page addContact 

src/app/app.module.ts

(変更前)

(変更後)

src/pages/contact/contact.ts

(変更前)

(変更後)

src/pages/contact/contact.html

(変更前)

(変更後)

src/pages/add-contact/add-contact.ts

(変更前)

(変更後)

src/pages/add-contact/add-contact.html

(変更前)

(変更後)

Contactページで、右上の「＋」ボタンをクリックすると、addContactページが表示される。

試しに、NameやAddressなどを、入力してみる。

Firebaseを見てみると、以下のようになっている。

これはRailsAPIサーバたてるより簡単だ、、、

もう一つ追加してみる

ちゃんと、firebaseに反映されている。

（７）続きとして、以下を写経していく。以下、src/　を省略する。

Ionic 2 Firebase CRUD Example – Part 2
by Didin J. on 12 18, 2016
https://www.djamware.com/post/5855c96380aca7060f443065/ionic-2-firebase-crud-example-part-2

Delete Data

pages/contact/contact.html

(変更前)

(変更後)

deleteContact()関数と、editContact()関数を定義する。

pages/contact/contact.ts

(変更前)

(変更後)

add-contact.ts

(変更前)

(変更後)

pages/add-contact/add-contact.html

(変更前)

(変更後)

これで、UpdateとDeleteができるようになった。

写経するだけで、簡単であった。

（８）Androidアプリの作成

ionic cordova platform add android
ionic cordova build android

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

npm install promise-polyfill --save-exact
ionic cordova build android

約4.3MBのapkファイルを自分のスマホにメールして、インストール

（今回のソースコード）
src/environment.ts は、ご自身で作成し、ご自身のFirebaseの設定を入力してください。
https://github.com/adash333/ionic3-crud-firebase

Angular 2 (, Angular 4, ionic3)に関しては以下の本がお勧めです！

作成中。