サルでもわかる機械学習

ユーザ用ツール

サイト用ツール

トレース: • index • 181012_angular6_firestore_image • 181130_vuecli3_install
z_blog:2018:181012_angular6_firestore_image

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
z_blog:2018:181012_angular6_firestore_image [2018/10/12] – [angular-bootstrap-mdのインストール] adash333z_blog:2018:181012_angular6_firestore_image [2018/10/16] (現在) – [写経元サイトのGitHubからソースコードをダウンロードして実行] adash333
行 4: 行 4:
  
 https://www.linkedin.com/pulse/angular-6-firebase-galleryserverless-bharadwaz-kari 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のセットアップ ===== ===== Firebaseのセットアップ =====
行 20: 行 30:
 {{:z_blog:2018:pasted:20181012-183128.png}} {{: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のインストール ===== ===== angular-bootstrap-mdのインストール =====
  
行 28: 行 68:
  
 https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/blob/master/README.md 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}}
  
  
行 36: 行 287:
  
 https://www.linkedin.com/pulse/angular-6-firebase-galleryserverless-bharadwaz-kari 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}}
 +
 +
  
 ===== 関連ページ ===== ===== 関連ページ =====

z_blog/2018/181012_angular6_firestore_image.1539336748.txt.gz · 最終更新: 2018/10/12 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki