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

以下のサイトを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 

image_thumb_thumb_thumb_thumb

(1)Firebaseのセットアップ

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

ionic3とfirebaseでチャットの写経にtry(2)
Angular 2 (, Angular 4, ionic3)に関しては以下の本がお勧めです! (環境)Windows8.1 前回は、Io...

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

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

image

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

image

(2)ionic3アプリの作成

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

image

image

image

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

image

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

image

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

image

(3)firebaseとangularfire2のインストール

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

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

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

image

image

(4)src/environment.ts を新たに作成し、(2)の最後でコピーしたfirebaseのconfigの内容をコピペする。

src/environment.ts

image

image

(5)src/app/app.module.ts の変更

(変更前)
image

(変更後)
image

(6)addContactページの作成

image

src/app/app.module.ts

(変更前)
image

(変更後)
image

src/pages/contact/contact.ts

(変更前)
image

(変更後)
image

src/pages/contact/contact.html

(変更前)
image

(変更後)
image

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

(変更前)
image

(変更後)
image

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

(変更前)
image

(変更後)
image

image

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

image

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

image

image

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

image

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

もう一つ追加してみる

image

image

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

(7)続きとして、以下を写経していく。以下、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

(変更前)
image

(変更後)
image

image

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

pages/contact/contact.ts

(変更前)
image

(変更後)
image

add-contact.ts

(変更前)
image

(変更後)
image

image

pages/add-contact/add-contact.html

(変更前)
image

(変更後)
image

image

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

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

(8)Androidアプリの作成

image

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

image

image

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

Screenmemo_share_2017-07-09-00-19-27

Screenmemo_share_2017-07-09-00-20-08

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

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

作成中。

関連記事
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする