差分

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

--- 00.ionic4:05.ionic4とfirebaseで掲示板part2 [2019/02/13] – [新規Firebaseアプリの作成] 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
 ===== 開発環境 =====
@@ 行 60: / 行 81: @@
 {{:08.googleアカウントでのログイン機能:pasted:20181216-125305.png}}
-  *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、CodeSandboxで、ペーストします。
+  *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、VisualStudioCodeで、ペーストします。
 {{:08.googleアカウントでのログイン機能:pasted:20181216-125734.png}}
@@ 行 72: / 行 93: @@
 {{:08.googleアカウントでのログイン機能:pasted:20181216-130219.png}}
-  *「Google」をクリックして、有効　にします。プロジェクトのサポートメールのところをクリックすると、自動的に、Googleアカウントのメールが表示されます。その後、「保存」をクリック
+  *「メール/パスワード」をクリックして、有効　にします。その後、「保存」をクリック
-{{:08.googleアカウントでのログイン機能:pasted:20181216-130353.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の編集 ====
+ログイン画面の見栄えを作成していきます。
-{{:08.googleアカウントでのログイン機能:pasted:20181216-130547.png}}
+src/app/login/login.page.html
+（変更前）
+{{:00.ionic4:pasted:20190214-165916.png}}
+（変更後）
+{{:00.ionic4:pasted:20190214-171111.png}}
+{{:00.ionic4:pasted:20190214-171143.png}}
-  *Authenticationのログインの画面に戻るので、さらに下の方へ行き、「承認済みドメイン」のところの、「ドメインを追加」をクリック
+login.emailとlogin.passwordの定義と、userLogin()関数の定義（ToastControllerというものを用います）を、src/app/login/login.page.tsに記載していきます。
-{{:08.googleアカウントでのログイン機能:pasted:20181216-130702.png}}
-  *ドメインのところに　codesandbox.io　と入力して、追加　をクリック
+（変更前）
-{{:08.googleアカウントでのログイン機能:pasted:20181216-130925.png}}
+{{:00.ionic4:pasted:20190214-171421.png}}
-  *すると、以下のように、承認済みドメインのところに、codesandbox.ioが追加されたことが分かります。
+（変更後）
-{{:08.googleアカウントでのログイン機能:pasted:20181216-131032.png}}
+(作成中)