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

以下のサイトに、Angular+Firebaseでパスワード制限つきチャットアプリの作成方法が(途中まで)ソースコードつきで非常に分かりやすく解説されているので、がんばってIonicで写経してみたい。

また、GitHubにもその都度push していきたい。

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

(開発環境)
image_thumb2_thumb

image_thumb14_thumb

git version 2.16.1.windows.4
Sourcetree Version 2.4.8.0

(1)C:/ionic3/ フォルダをVisualStudioCodeで開いて、以下を入力、corodovaなんたらはy を、Proなんたらは n を選択。

image

image

一度VisualStudioCodeを閉じて、再度、C:/ionic3/firebase-chat2/ フォルダをVisualStudioCodeで開いて、Ctrl+@ でターミナルを開いてから、以下を入力。

image

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

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

(変更前)
image

(変更後)
image

(2)GitHubに登録

(参考)https://qiita.com/nnahito/items/565f8755e70c51532459
image

Windowsの場合、なんか面倒なので注意。以下を参考にいろいろインストールして設定しておく。GitHubに公開鍵を登録するところとか、、、本当に大変なので、以下を参考にがんばる。

https://employment.en-japan.com/engineerhub/entry/2017/01/31/110000
image

GitHubに登録してログイン

https://github.com/
image

New repository をクリックして新規リポジトリを作成

image

Repository nameを、ionic3_firebase_chat2 として新規作成

image

以下の”…or push an existing repository from the command line”2の部分を参考に、VisualStudioCodeのターミナル画面でgit push する。

image

VisualStudioCodeのターミナル画面で、以下を入力。

image

やはり、FATAL ERROR: Couldn’t agree a key exchange algorithm と、秘密鍵がどうのこうのというエラーが出るので、こちらのサイトを参考にしながら何十分も試行錯誤したが、結局うまくいかなかった。結論として、

Sorucetree と pageant を使用して、やっとGit push できた。

https://www.sourcetreeapp.com/
image

参考;https://qiita.com/reflet/items/6d74851f033ddc325df9
image

数カ月たって忘れて、いつも公開鍵ー秘密鍵で何時間もつぶしてしまうのであるが、もう、Windows8.1でGitするときは、コマンドラインでやるのはあきらめて、最初からSourceTreeを使うのが一番だという結論になった。

image

Readme.md ファイルの作成

image

SourceTreeでGitHubへpush

image

GitHubで確認

image

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

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

上記サイトを写経してみる。

Ionicなので、Bootstrapはインストールしない。

src/pages/home/home.html

(変更前)
image

(変更後)
image

image

src/app/app.scss 一緒に、home.html、app.scssも変更。

image

見栄えは気にしない!キリッ!

image

この時点でのコード
https://github.com/adash333/ionic3_firebase_chat2/tree/474ff3de09972f770803a5b004e6ed41a5dbd04f

今回の変更箇所
https://github.com/adash333/ionic3_firebase_chat2/commit/474ff3de09972f770803a5b004e6ed41a5dbd04f

続きは次回に。

(4)少しだけhome.htmlの見栄えを変更

(変更前)
image

(変更後)
image

ソースコード
https://github.com/adash333/ionic3_firebase_chat2/tree/237e0e99e6e5a1968e5a6af2c51ecdfddc2e7d20

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

シェアする

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

フォローする