00.ionic4:05.ionic4とfirebaseで掲示板part2

差分

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

この比較画面へのリンク

--- 00.ionic4:05.ionic4とfirebaseで掲示板part2 [2019/02/14] – [すること] adash333
+++ 00.ionic4:05.ionic4とfirebaseで掲示板part2 [2019/08/28] (現在) – [login.page.htmlの編集] adash333
@@ 行 101: / 行 101: @@
 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}}
+（変更後）
+(作成中)

00.ionic4/05.ionic4とfirebaseで掲示板part2.1550142727.txt.gz · 最終更新: 2019/02/14 by adash333