Ionic3でオンラインランキングつきクイズアプリ（１）Firebaseの利用

2018年6月30日

以前、Ionic3でクイズアプリを作成した。

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

今回は、これに、Firebaseを用いたオンラインランキングを加えたい。以下のタップゲームを写経したときの真似をして、、、

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

できるかな？

<目次>
１．Ionic3でクイズアプリを写経してみる（１）
２．Ionic3でクイズアプリを写経してみる（２）
３．Ionic3でオンラインランキングつきクイズアプリ（１）Firebaseの利用　←　このページ
４．Ionic3でオンラインランキングつきクイズアプリ（２）パスワード制限をつける

（開発環境）
Windows 8.1 Pro
VisualStudioCode
git version 2.16.1.windows.4
Sourcetree Version 2.4.8.0
Android Studio 3.0.1

Node v8.11.2
npm 6.1.0
@ionic/cli-utils 1.19.2
Ionic (Ionic CLI) 3.20.0

firebase@4.8.0
angularfire2@5.0.0-rc.4
promise-polyfill@8.0.0

npm install --save firebase@4.8.0
npm install --save angularfire2@5.0.0-rc.4
npm install --save promise-polyfill

C:/ionic3/ フォルダに、ionic3-kids-quiz というIonic3アプリを作成している。

（０）今回行うこと

firebase, angularfire2@5.0.0-rc.4のインストール

Firebaseの設定（Firebaseアプリの作成とIonic3アプリへの登録"environment.ts”の作成とapp.module.ts の編集）

RankingPageの作成

HomePageを編集して、ランキング機能をつける

（１）ランキング画面(ranking.html)の作成

VisualStudioCodeのターミナル画面（cmd.exe）で、以下を入力

ionic g page ranking

HomePageからRankingPageへリンク作成。

src/pages/home/home.html

（変更前）

（変更後）

今回は、ページ移動に、

[navPush]="'RankingPage'"

という記法を用いた。Lazy Loadingで呼び出すために、””　の中に、’ ' が入っているというややこしい形になっている。
（参考：Ionicで作るモバイルアプリ制作入門　p103）

これだと、home.ts　を変更せずにHomePageからRankingPageへのリンクを作成することができる。

（参考）https://ionicframework.com/docs/api/components/nav/NavPush/

（２）RankingPageのビュー

ソースコードは以下のranking.html　と同じ
https://gist.github.com/adash333/93f36801f1d59fcc34c6392b5d65611c#file-app-module-ts

src/pages/ranking/ranking.html

（変更前）

（変更後）

（３）firebaseの準備

VisualStudioCodeのターミナル画面（Ctrl+@　で出てきます）で、以下を入力。

npm install --save firebase@4.8.0
npm install --save angularfire2@5.0.0-rc.4
npm install --save promise-polyfill

こちらの書き込み（Ionic+Firebaseでパスワード制限つきチャットアプリ（３）AngularFire2を利用してIonicとfirebaseを接続）を参考に、firebase consoleにログインして、firebaseプロジェクトを作成し、src/environments/environment.ts （新規作成）にfirebaseのapi Keyをコピペ。

src/environments/environment.ts

// <>となっている部分は、自分のapiKeyを入力
export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

あと、firebaseの、databaseの　ルール　を、一時的に、readもwriteもtrueにしておく。（あとで必ず戻す。）