00.ionic4:05.ionic4とfirebaseで掲示板part2
差分
このページの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:// | https:// | ||
+ | |||
+ | ===== すること ===== | ||
+ | -掲示板 | ||
+ | -Emailアドレスとパスワードでログイン制限あり | ||
+ | -ユーザー登録ができる | ||
+ | -掲示板にメッセージを書き込める(Create) | ||
+ | -メッセージの更新(Update)と削除(Delete)ができる | ||
+ | -メッセージにコメントできる | ||
+ | -PWA化して、オフラインでもアプリとして利用できようにする | ||
+ | |||
+ | 作成の流れとしては、[[https:// | ||
+ | |||
+ | -ログイン機能のない『疑非メッセージボード』を作成する(< | ||
+ | -上記メッセージボードにログイン機能をつける(←今回) | ||
+ | -投稿されたメッセージをFirebaseに保存できるようにする | ||
+ | |||
+ | ソースコード | ||
+ | |||
+ | DEMO | ||
+ | |||
+ | |||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 60: | 行 81: | ||
{{: | {{: | ||
- | *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、CodeSandboxで、ペーストします。 | + | *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、VisualStudioCodeで、ペーストします。 |
{{: | {{: | ||
行 72: | 行 93: | ||
{{: | {{: | ||
- | *「Google」をクリックして、有効 にします。プロジェクトのサポートメールのところをクリックすると、自動的に、Googleアカウントのメールが表示されます。その後、「保存」をクリック | + | *「メール/ |
- | {{:08.googleアカウントでのログイン機能:pasted:20181216-130353.png}} | + | {{: |
+ | |||
+ | ===== IonicからFirebaseを利用できるようにする ===== | ||
+ | ローカルパソコンのVisualStudioCodeにターミナル画面に戻り、以下を入力します。 | ||
+ | < | ||
+ | npm install firebase @angular/ | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | {{: | ||
+ | |||
+ | 引き続き、Firebaseの機能をIonicで利用できるようにセットアップを行っていきます。 | ||
+ | src/ | ||
+ | (変更前) | ||
+ | {{:00.ionic4: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | これで、FirebaseのAuthentication(認証)を利用する準備ができました。 | ||
+ | (Netlifyにデプロイする場合は、Firebaseアプリの設定で、Netlifyのドメインを許可する必要があります。、) | ||
+ | |||
+ | ===== ログインページの作成 ===== | ||
+ | ログインページを作成します。ターミナルで以下を入力します。 | ||
+ | < | ||
+ | ionic g page login | ||
+ | </ | ||
+ | {{: | ||
+ | 上記コードにより、以下の5個のファイルが新規作成されます。 | ||
+ | {{: | ||
+ | また、ルーティングを記載している | ||
+ | |||
+ | src/ | ||
+ | |||
+ | も自動的にアップデートされて、http:// | ||
+ | {{: | ||
+ | |||
+ | いきなり出てきたapp-routing.module.tsですが、今後、todos/: | ||
+ | |||
+ | ==== login.page.htmlの編集 ==== | ||
+ | ログイン画面の見栄えを作成していきます。 | ||
- | {{:08.googleアカウントでのログイン機能:pasted:20181216-130547.png}} | + | src/ |
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | {{:00.ionic4:pasted:20190214-171143.png}} | ||
- | *Authenticationのログインの画面に戻るので、さらに下の方へ行き、「承認済みドメイン」のところの、「ドメインを追加」をクリック | + | login.emailとlogin.passwordの定義と、userLogin()関数の定義(ToastControllerというものを用います)を、src/ |
- | {{:08.googleアカウントでのログイン機能: | + | |
- | *ドメインのところに codesandbox.io と入力して、追加 をクリック | + | (変更前) |
- | {{:08.googleアカウントでのログイン機能:pasted:20181216-130925.png}} | + | {{:00.ionic4:pasted:20190214-171421.png}} |
- | | + | (変更後) |
- | {{: | + | |
+ | (作成中) | ||
00.ionic4/05.ionic4とfirebaseで掲示板part2.1550077497.txt.gz · 最終更新: 2019/02/13 by adash333