Ionic4+Firebaseでパスワード制限つきチャットアプリ(1)

以前、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

(開発環境)
image

git version 2.17.1.windows.2
Sourcetree Version 2.6.9.0

VisualStudioCode 1.27.1

(1)Ionic4アプリの作成

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

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

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

image

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

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

(変更前)
image

(変更後)
image

(2)GitHubに登録

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

image

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

image

SourceTreeを起動

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

image

image

image

image

image

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

image

image

image

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

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

image

(3)Ionic4でビュー(チャット画面)を作る

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

src/app/home/home.page.html

(変更前)
image

(変更後)
image

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

image

src/app/home/home.page.html

image

image

参考:https://beta.ionicframework.com/docs/api/button/
image

(4)git commit & git push

image

commit のコメントを入力して、Ctrl + Enter

image

image

この時点でのソースコード

https://github.com/adash333/ionic4-firebase-chat/tree/9b8159d865bb6c0f21f0b6535ff13db96931d941
(src/environments/environment.ts はご自身で作成してください。)

(参考)
https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md
image

https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md
image

関連記事
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする