差分

このページの2つのバージョン間の差分を表示します。

--- 00.ionic4:05.ionic4とfirebaseで掲示板part2 [2019/02/13] – [開発環境] adash333
+++ 00.ionic4:05.ionic4とfirebaseで掲示板part2 [2019/08/28] (現在) – [login.page.htmlの編集] adash333
@@ 行 7: / 行 7: @@
 上記の本のサポートサイト
 https://sinack.com/ird_ionic/
+===== すること =====
+  -掲示板
+  -Emailアドレスとパスワードでログイン制限あり
+  -ユーザー登録ができる
+  -掲示板にメッセージを書き込める（Create）
+  -メッセージの更新（Update）と削除（Delete）ができる
+  -メッセージにコメントできる
+  -PWA化して、オフラインでもアプリとして利用できようにする
+作成の流れとしては、[[https://amzn.to/2I7ktCj|初心者でも大丈夫!! IonicとFirebaseでゼロからはじめるアプリ開発]]によると、以下のようになります。
+  -ログイン機能のない『疑非メッセージボード』を作成する（<wrap hi>[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Part.1]]</wrap>）
+  -上記メッセージボードにログイン機能をつける（←今回）
+  -投稿されたメッセージをFirebaseに保存できるようにする
+ソースコード
+DEMO
 ===== 開発環境 =====
@@ 行 41: / 行 62: @@
 また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:181219_windows10_config#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%B1%E6%9C%89%E3%81%AE%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A|こちらの設定]]</wrap>（<wrap em><wrap hi>Ctrl+Shift+P</wrap></wrap>で、Terminal select default shellをクリック）にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。
-===== 新規Firebaseアプリの作成 =====
+===== Firebaseで新規プロジェクト（新しいサーバ）を作成 =====
 パスワード制限を行うために、サーバサイドの処理が必要です。
 サーバサイドの処理のために、Firebase（無料プラン）というものを利用します。
+  *https://console.firebase.google.com　にGoogleアカウントでログインし、新規プロジェクト作成
+{{:08.googleアカウントでのログイン機能:pasted:20181216-124725.png}}
+  *今回は、「firebase-auth」という名前で新規プロジェクトを作成しました。
+{{:08.googleアカウントでのログイン機能:pasted:20181216-124838.png}}
+  *測定管理者間のデータ保護条項と規約の左側のチェックボックスをONにして、右下の「プロジェクトを作成」をクリック。
+{{:08.googleアカウントでのログイン機能:pasted:20181216-125023.png}}
+  *少し待つと、「新しいプロジェクトの準備ができました」と表示されるので、次へ　をクリック。
+{{:08.googleアカウントでのログイン機能:pasted:20181216-125148.png}}
+  *以下のようなプロジェクトトップ画面になるので、下図のように、「</>」をクリック。
+{{:08.googleアカウントでのログイン機能:pasted:20181216-125305.png}}
+  *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、VisualStudioCodeで、ペーストします。
+{{:08.googleアカウントでのログイン機能:pasted:20181216-125734.png}}
+  *プロジェクトトップ画面で、画面左側の列の「開発」をクリック
+{{:08.googleアカウントでのログイン機能:pasted:20181216-130117.png}}
+  *Authentication　をクリック
+{{:08.googleアカウントでのログイン機能:pasted:20181216-130030.png}}
+  *ログイン方法　をクリック
+{{:08.googleアカウントでのログイン機能:pasted:20181216-130219.png}}
+  *「メール/パスワード」をクリックして、有効　にします。その後、「保存」をクリック
+{{:00.ionic4:pasted:20190213-170919.png}}
+===== IonicからFirebaseを利用できるようにする =====
+ローカルパソコンのVisualStudioCodeにターミナル画面に戻り、以下を入力します。
+<code>
+npm install firebase @angular/fire --save
+</code>
+{{:00.ionic4:pasted:20190214-160939.png}}
+src/environments/environments.ts　に、先ほどのFirebaseのconfig以下をコピペします。
+（変更前）
+{{:00.ionic4:pasted:20190214-163631.png}}
+（変更後）
+{{:00.ionic4:pasted:20190214-163801.png}}
+src/environments/environment.prod.ts も、同様に変更しておきます。
+{{:00.ionic4:pasted:20190214-163916.png}}
+引き続き、Firebaseの機能をIonicで利用できるようにセットアップを行っていきます。
+src/app/app.module.tsを編集。
+（変更前）
+{{:00.ionic4:pasted:20190214-164032.png}}
+（変更後）
+{{:00.ionic4:pasted:20190214-164421.png}}
+これで、FirebaseのAuthentication（認証）を利用する準備ができました。
+（Netlifyにデプロイする場合は、Firebaseアプリの設定で、Netlifyのドメインを許可する必要があります。、）
+===== ログインページの作成 =====
+ログインページを作成します。ターミナルで以下を入力します。
+<code>
+ionic g page login
+</code>
+{{:00.ionic4:pasted:20190214-165133.png}}
+上記コードにより、以下の5個のファイルが新規作成されます。
+{{:00.ionic4:pasted:20190214-165302.png}}
+また、ルーティングを記載している
+src/app/app-routing.module.ts
+も自動的にアップデートされて、http://localhost:8100/login にアクセスすると、loginページが表示されるようになります。
+{{:00.ionic4:pasted:20190214-165540.png}}
+いきなり出てきたapp-routing.module.tsですが、今後、todos/:id などのルーティングや、ルーティングのガードを行いたい（後述）などの場合は、このファイルを編集していくことになります。
+==== login.page.htmlの編集 ====
+ログイン画面の見栄えを作成していきます。
+src/app/login/login.page.html
+（変更前）
+{{:00.ionic4:pasted:20190214-165916.png}}
+（変更後）
+{{:00.ionic4:pasted:20190214-171111.png}}
+{{:00.ionic4:pasted:20190214-171143.png}}
+login.emailとlogin.passwordの定義と、userLogin()関数の定義（ToastControllerというものを用います）を、src/app/login/login.page.tsに記載していきます。
+（変更前）
+{{:00.ionic4:pasted:20190214-171421.png}}
+（変更後）
+(作成中)