差分

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

--- 00.ionic4:05.ionic4とfirebaseで掲示板part2 [2019/02/13] – 作成 adash333
+++ 00.ionic4:05.ionic4とfirebaseで掲示板part2 [2019/08/28] (現在) – [login.page.htmlの編集] adash333
@@ 行 1: / 行 1: @@
 ====== Ionic4とFirebaseでEmail認証つき掲示板 Part.2 ======
-前回に引き続き、以下の本の『第6章　Firebaseでユーザー認証しよう』を写経していきたいと思います。
+前回の[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Ionic4とFirebaseでEmail認証つき掲示板 Part.1]]に引き続き、以下の本の『第6章　Firebaseでユーザー認証しよう』を写経していきたいと思います。
 <html>
 <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07MFYD3DP&linkId=99913f94e2ab04b2dc5476177cb1bf4a"></iframe>
@@ 行 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
+===== 開発環境 =====
+私の環境は以下のようになっていますが、Windowsパソコンの場合、
+<wrap hi>[[00.ionic4:01.windowsでionicを始める方法|WindowsでIonicを始める方法]]</wrap>
+や、
+[[00.ionic4:01.windowsでionicを始める方法#オプション：nvm-windowsでNode.jsのバージョン管理]]
+の手順でインストールしていただければ、ほぼ同じ環境が整います。
+Windows10パソコン購入後のWindows Subsystem for Linuxでの環境構築については、<wrap hi>[[z_blog:2018:181219_windows10_config|Windows10購入時の設定]]</wrap>に記載させていただきました。
+<code>
+Panasonic CF-RZ6
+Windows10 Pro (1803)
+VisualStudioCode
+Windows Subsystem for Linux (WSL)
+Ubuntu18.04
+VisualStudioCodeのターミナル画面をWSLのBashに設定
+git 2.17.1
+anyenv
+nodenv 1.1.2-69-gced0e70
+node 10.14.2
+</code>
+{{:00.ionic4:pasted:20190210-143318.png}}
+私の場合、以下のようにフォルダ共有しています。
+<code>
+Windowsの C:/Users/a/a/
+Ubuntuの  /mnt/c/Users/a/a/
+</code>
+また、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（無料プラン）というものを利用します。
+  *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}}
+（変更後）
+(作成中)
 ===== リンク =====