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 | ||
---|---|---|---|
行 19: | 行 19: | ||
作成の流れとしては、[[https:// | 作成の流れとしては、[[https:// | ||
- | -ログイン機能のない『疑非メッセージボード』を作成する([[00.ionic4: | + | -ログイン機能のない『疑非メッセージボード』を作成する(<wrap hi>[[00.ionic4: |
-上記メッセージボードにログイン機能をつける(←今回) | -上記メッセージボードにログイン機能をつける(←今回) | ||
-投稿されたメッセージをFirebaseに保存できるようにする | -投稿されたメッセージをFirebaseに保存できるようにする | ||
行 101: | 行 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.txt · 最終更新: 2019/08/28 by adash333