====== 181012 Angular6でfirestoreに画像をアップロード ======

以下のサイトを写経してみたい

https://www.linkedin.com/pulse/angular-6-firebase-galleryserverless-bharadwaz-kari

ソースコード　https://github.com/zendizmo/angular-firebase-gallery
===== 開発環境 =====
<code>
Windows 8.1 Pro
Node v8.12.0
npm v6.4.1
VisualStudioCode
</code>


===== Firebaseのセットアップ =====

https://console.firebase.google.com/ にログインして、Firebaseアプリを新規作成する。

今回は、firebase-image という名前にしてみました。

{{:z_blog:2018:pasted:20181012-182925.png}}

{{:z_blog:2018:pasted:20181012-183010.png}}

下図の、var config = { } の中身をテキストファイルにコピーしておきます。\\
（後でAngular6アプリのsrc/environments/environment.tsにペーストします。）

{{:z_blog:2018:pasted:20181012-183128.png}}

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

<code>
npm install @angular/cli -g
ng new firebase-angular-gallery
</code>

{{:z_blog:2018:pasted:20181012-192440.png}}

{{:z_blog:2018:pasted:20181012-193002.png}}

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

<code>
npm install firebase-tools -g
npm install angularfire2 firebase --save
git init
</code>

{{:z_blog:2018:pasted:20181012-194657.png}}

===== galleryコンポーネントと、notificationコンポーネント、notificationサービスの作成 =====

<code>
ng g c gallery --spec false
ng g c notification --spec false
ng g s notification-services --spec false
</code>

{{:z_blog:2018:pasted:20181012-195033.png}}
===== angular-bootstrap-mdのインストール =====

https://stackoverflow.com/questions/44998122/mdbootstrap-with-angular

本家GitHub

https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/blob/master/README.md

cssをscssにしなければいけないらしい。。。

<code>
ng set defaults.styleExt scss
</code>

{{:z_blog:2018:pasted:20181012-200223.png}}

angular.json の変更

{{:z_blog:2018:pasted:20181012-200429.png}}

src/styles.css を、src/styles.scss に名前を変更。

<code>
npm i angular-bootstrap-md --save
npm install -–save chart.js@2.5.0 font-awesome hammerjs
</code>

{{:z_blog:2018:pasted:20181012-200634.png}}

src/app/app.module.tsの変更

(変更前)
{{:z_blog:2018:pasted:20181012-200712.png}}

(変更後)
{{:z_blog:2018:pasted:20181012-200850.png}}

<code>
ng serve --open
</code>

{{:z_blog:2018:pasted:20181012-201452.png}}

===== Angular6アプリにfirebase configを設定 =====

src/environment/environment.ts に、最初の方でコピーしたfirebaseのconfigの内容を、以下のようにペーストする。

{{:z_blog:2018:pasted:20181012-202700.png}}

src/app/app.module.ts の変更

{{:z_blog:2018:pasted:20181012-202806.png}}

===== src/app/app.component.html =====

各cssファイルをscssに変更。それに応じて、各tsファイル内の".css"の部分を、".scss"に変更。

src/app/app.component.html

(変更前)
{{:z_blog:2018:pasted:20181012-205356.png}}

(変更後)
{{:z_blog:2018:pasted:20181012-205433.png}}

src/app/app.component.scss

{{:z_blog:2018:pasted:20181012-211414.png}}

===== src/app/gallery/gallery.component.html =====

{{:z_blog:2018:pasted:20181012-212613.png}}

さらに、New Imageをアップロードするためのhtmlを追加

{{:z_blog:2018:pasted:20181012-213423.png}}

src/app/gallery/gallery.component.ts

(変更前)
{{:z_blog:2018:pasted:20181012-213505.png}}

(変更後)


gallery.component.ts の一部と、app/notification-services.service.tsを変更しても、

<code>
Error: Template parse errors: No provider for NgControl
</code>

が続いたので、上記エラーでググってみたら、https://stackoverflow.com/questions/48525216/getting-no-provider-for-ngcontrol-error-after-adding-reactiveformsmodule-to-my-a?noredirect=1&lq=1　とのことであったので、

src/app/app.module.ts を変更

{{:z_blog:2018:pasted:20181012-215028.png}}

なお、https://raw.githubusercontent.com/zendizmo/angular-firebase-gallery/master/src/assets/no-img.jpg

から、no-img.jpgをダウンロードして、src/assets/ フォルダに保存している。

===== Firebaseの設定 =====
Database　をクリックして進む。

{{:z_blog:2018:pasted:20181012-215540.png}}

一時的にルールを、誰でもread, write可とする。（後で必ず戻す）

{{:z_blog:2018:pasted:20181012-215632.png}}

Storage　をクリックして進む。

{{:z_blog:2018:pasted:20181012-215225.png}}

{{:z_blog:2018:pasted:20181012-215303.png}}

一時的にルールを、誰でもread, write可とする。（後で必ず戻す）

{{:z_blog:2018:pasted:20181012-215432.png}}

{{:z_blog:2018:pasted:20181012-215603.png}}

これらの設定をすると、"Firestoreに接続できていませんよ。"というconsole上のエラーが消える。

{{:z_blog:2018:pasted:20181012-215801.png}}

===== Angular6にjQueryをインストール =====
全く分かりませんが、以下にしたがってやってみます。。。

https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular
{{:z_blog:2018:pasted:20181012-220609.png}}

<code>
npm install --save jquery
npm install -D @types/jquery
</code>

{{:z_blog:2018:pasted:20181012-220933.png}}

とりあえず、これにより、gallery.component.tsで、
<code>
import * as $ from 'jquery';
</code>
しても、エラーが出なくなりました。

{{:z_blog:2018:pasted:20181012-221252.png}}

===== onUploadBtnClick()関数の実装 =====

gallery.component.ts

{{:z_blog:2018:pasted:20181012-222717.png}}

これにより、Image Nameに何か文字を入れてからImageをクリックすると、コンピュータ内の画像を選択できるようになる。\\
(まだ選択しても、何もおこらない。)

===== onFileChange(event)関数の実装 =====

onFileChange(event)関数の実装

gallery.component.ts

{{:z_blog:2018:pasted:20181012-223141.png}}

これで、コンピュータ内の画像を選択すると、No Imageとなっていたところに、選択された画像が表示されるようになる。\\
(まだFirebase Storageにはアップロードされない。)

onFileChange(event)関数の中の、startUpload()関数の実装

{{:z_blog:2018:pasted:20181012-223607.png}}

これで、コンピュータ内の画像を選択すると、
  -No Imageとなっていたところに、選択された画像が表示され、
  -しかも、自動的にFirebase storageにアップロードされ、
  -さらに、Your Imagesのところに表示される
ようになる。これはすごい。

{{:z_blog:2018:pasted:20181012-223812.png}}

あと２つ、画像を加えてみた。

{{:z_blog:2018:pasted:20181012-224244.png}}

Firebase Consoleを見ると、ちゃんと、（１）画像はStorageにアップロードされており、（２）画像のアドレスと画像の名前の組み合わせもFirestoreに記載されている。

{{:z_blog:2018:pasted:20181012-224335.png}}

{{:z_blog:2018:pasted:20181012-224458.png}}

===== maximizeImage(image)関数とonDeleteClick(image)関数の実装 =====

gallery.component.ts

{{:z_blog:2018:pasted:20181012-225820.png}}

この段階では、MAXIMIZEボタンや、ごみ箱ボタンをクリックしても、何も起こらない。

なんだが、どういう仕組みになっているのかさっぱりわからないが、とりあえず、ソースコードを写経してみる。

src/app/notification/notification.component.html

{{:z_blog:2018:pasted:20181012-230153.png}}

src/app/notification/notification.component.ts

{{:z_blog:2018:pasted:20181012-230428.png}}

写経したが、MAXIMIZEボタンや、ごみ箱ボタンをクリックしても、何も起こらない。。。

原因はよく分からない。さみしい。。。

MAXIMIZEボタンを押したときは、consoleに以下のようなエラーが表示される。

Firestoreを見に行ってほしいのに、http://localhost:4200/ を見に行ってしまっている。パス？がおかしい。

しかし、解決方法は見当もつかない。。。

{{:z_blog:2018:pasted:20181012-234712.png}}





===== 写経元サイト =====

https://www.linkedin.com/pulse/angular-6-firebase-galleryserverless-bharadwaz-kari

ありがたいことに、ソースコードもあります。

https://github.com/zendizmo/angular-firebase-gallery

===== 写経元サイトのGitHubからソースコードをダウンロードして実行=====

上記ソースコードをダウンロードしてnpm install して実行してみる。

<code>
git clone https://github.com/zendizmo/angular-firebase-gallery.git
cd angular-firebase-gallery
npm install
// src/environments/environment.ts に、自分のFirebaseのAPIキーをCopy and Paste
// angular.jsonの27行目を変更 "./node_modules/bootstrap/dist/css/bootstrap.min.css"
// angular.jsonの30行目を変更 "./node_modules/bootstrap/dist/js/bootstrap.min.js"
// angular.jsonの80行目を変更 "scripts": [ "./node_modules/jquery/dist/jquery.min.js" ],
// src/app/gallery/gallery.component.tsの140行目を変更　      image.imageURL
ng serve --open
</code>
上記により、以下のように、おそらく、うまく動くと思われる。

{{:z_blog:2018:pasted:20181016-171724.png}}



===== 関連ページ =====