Ionic4+Firebaseでパスワード制限つきチャットアプリ（１）

2018年9月20日

以前、Ionic3でtryしたことがあった。

http://twosquirrel.mints.ne.jp/dokuwiki/doku.php/ionic%E3%81%A8firebase%E3%81%A7%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%82%A2%E3%83%97%E3%83%AA

今回は、Ionic4でやってみたい。

写経元サイトはこちら

https://qiita.com/Yamamoto0525/items/a76ea4b3924eeb82b0f9

（開発環境）

git version 2.17.1.windows.2
Sourcetree Version 2.6.9.0

VisualStudioCode 1.27.1

（１）Ionic4アプリの作成

C:/ionic4/　フォルダをVisualStudioCodeで開き、Ctrl＋＠でコマンドプロンプトを開き、以下を入力。

ionic start ionic4-firebase-chat blank --type=angular

何か聞かれるので、2回とも、N + Enter 。

cd ionic4-firebase-chat
ionic serve

Install @ionic/lab? と聞かれたら、Y + Enter

ターミナル画面で Ctrl + C として、y + Enter で、サーバを一度停止。

Firebaseの固有設定のページ src/environments/environment.ts　を.gitignore ファイルに追記しておく。

（変更前）

（変更後）

（２）GitHubに登録

https://github.com　にログインして、New Repository　から、新しいrepositoryを作成。
（無料枠だと、1個しかPrivateリポジトリを作成できないので、2個目以降は、すべて公開されてしまうので注意。BitBucketなら、無料枠でいくらでもPrivateリポジトリを作成することができる。）

図のHTTPS　のときのアドレスをコピーしておく。
（あとでSourceTreeの設定のところにペーストする。）

SourceTreeを起動

New Tabを作成してから、Add　をクリック

設定　＞　追加　ののち、URL/パス　に、GitHubの

SourceTreeから、GitHubへpush（アップロード）する。

GitHubのページへ行き、pushできたことを確認。

（３）Ionic4でビュー（チャット画面）を作る

https://qiita.com/Yamamoto0525/items/94613c79ef2aa461b91e

src/app/home/home.page.html

（変更前）

（変更後）

src/assets/imgs/ フォルダを作成し、その中に、いらすとやからダウンロードした画像を保存します。