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 | ||
+ | |||
+ | |||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 80: | 行 101: | ||
npm install firebase @angular/ | npm install firebase @angular/ | ||
</ | </ | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | {{: | ||
+ | |||
+ | 引き続き、Firebaseの機能をIonicで利用できるようにセットアップを行っていきます。 | ||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | これで、FirebaseのAuthentication(認証)を利用する準備ができました。 | ||
+ | (Netlifyにデプロイする場合は、Firebaseアプリの設定で、Netlifyのドメインを許可する必要があります。、) | ||
+ | |||
+ | ===== ログインページの作成 ===== | ||
+ | ログインページを作成します。ターミナルで以下を入力します。 | ||
+ | < | ||
+ | ionic g page login | ||
+ | </ | ||
+ | {{: | ||
+ | 上記コードにより、以下の5個のファイルが新規作成されます。 | ||
+ | {{: | ||
+ | また、ルーティングを記載している | ||
+ | |||
+ | src/ | ||
+ | |||
+ | も自動的にアップデートされて、http:// | ||
+ | {{: | ||
+ | |||
+ | いきなり出てきたapp-routing.module.tsですが、今後、todos/: | ||
+ | |||
+ | ==== login.page.htmlの編集 ==== | ||
+ | ログイン画面の見栄えを作成していきます。 | ||
+ | |||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | login.emailとlogin.passwordの定義と、userLogin()関数の定義(ToastControllerというものを用います)を、src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | (作成中) | ||
00.ionic4/05.ionic4とfirebaseで掲示板part2.1550077885.txt.gz · 最終更新: 2019/02/13 by adash333