スポンサーリンク

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

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

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

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

（開発環境）

git version 2.16.1.windows.4
Sourcetree Version 2.4.8.0

npm install --save firebase
npm install --save promise-polyfill

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

ionic start firebase-chat2 blank

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

ionic serve

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

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

(変更前)

(変更後)

（２）GitHubに登録

（参考）https://qiita.com/nnahito/items/565f8755e70c51532459

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

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

GitHubに登録してログイン

https://github.com/

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

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

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

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

git remote add origin git@github.com:adash333/ionic3_firebase_chat2.git
git push -u origin master

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

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

https://www.sourcetreeapp.com/

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

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

Readme.md　ファイルの作成

SourceTreeでGitHubへpush

GitHubで確認

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

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

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

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

src/pages/home/home.html

(変更前)

(変更後)

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

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

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

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

続きは次回に。

 

（４）少しだけhome.htmlの見栄えを変更

(変更前)

(変更後)

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

Angular,Angular5,Firebase,ionic,Ionic3

Posted by twosquirrel