差分

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

--- z_blog:2018:181008_ionic4_firestore_capacitor_camera [2018/10/08] – adash333
+++ z_blog:2018:181008_ionic4_firestore_capacitor_camera [2018/10/09] (現在) – [181008_ionic4_firestore_capacitor_camera] adash333
@@ 行 1: / 行 1: @@
-====== 181008_ionic4_firestore_capacitor_camera ======
+====== 181008_Ionic4+firestore+capacitor(camera)アプリの作成の練習 ======
+===== Ionic4+firestore+capacitor(camera)アプリの作成の練習 =====
+以下のサイトからメールアドレス登録にてダウンロードできる、『Capacitorを用いたカメラ画像を保存できるIonic4アプリ』を写経しています。
+https://javebratt.com/firebase-free-course/
+ソースコードも公開してくださっています。
+https://github.com/javebratt/master-firestore-event-manager
+===== 前回まで =====
 http://twosquirrel.mints.ne.jp/?p=28420\\
@@ 行 6: / 行 18: @@
 の続き
+ここまでのソースコード\\
+https://github.com/adash333/ionic4-firestore-camera-crud/tree/7349fba63e6750a7a4fce286192899ecd0c98368
+===== 開発環境 =====
+<code>
+Windows 8.1 Pro
+NodeJS : v8.12.0
+npm    : 6.4.1
+ionic (Ionic CLI) : 4.2.1
+Ionic Framework: @ionic/angular 4.0.0-beta.7
+capacitor (Capacitor CLI) : 1.0.0-beta.8
+@capacitor/core : 1.0.0-beta.8
+</code>
+===== reset-password.page =====
+reset-password.page.html
+{{:z_blog:2018:pasted:20181009-082851.png}}
+reset-password.page.module.ts
+{{:z_blog:2018:pasted:20181009-083054.png}}
+reset-password.page.scss
+{{:z_blog:2018:pasted:20181009-084313.png}}
+reset-password.page.ts
+{{:z_blog:2018:pasted:20181009-084358.png}}
+===== Signup Page =====
+signup.page.html
+{{:z_blog:2018:pasted:20181009-145702.png}}
+signup.module.ts
+{{:z_blog:2018:pasted:20181009-150000.png}}
+signup.page.scss
+{{:z_blog:2018:pasted:20181009-145802.png}}
+signup.page.ts
+{{:z_blog:2018:pasted:20181009-150154.png}}
+これで、SignUpページから、メールアドレスとパスワードを入力してFirebaseに登録することができるようになった。
+サインアップ（新規登録）すると、そのまま、home画面に移動する。
+今回の変更点
+https://github.com/adash333/ionic4-firestore-camera-crud/commit/824a79011be6fd5312543ce0910455bb68665812
+===== HomePage =====
+ユーザ認証（ログイン、サインアップ、リセットパスワード）の実装が終わったので、次は、イベントマネージャーとして、イベントのCRUDを実装していきます。
+src/app/home/home.page.html
+（変更前）
+{{:z_blog:2018:pasted:20181009-151756.png}}
+（変更後）
+{{:z_blog:2018:pasted:20181009-152058.png}}
+===== User Profile serviceの作成 =====
+以下の5つの機能を実装します。
+  -User Profileをゲット
+  -User’s Nameの更新update
+  -User's DOB(date of birth)の更新
+  -User's Emailの、real-time databseと、auth(認証)での更新
+  -User's Passwordの変更
+それぞれ、以下の関数を定義します。
+<code>
+getUserProfile()
+updateName(firstName: string, lastName: string)
+updateDOB(birthDate: Date)
+updateEmail(newEmail: string, password: string)
+updatePassword(newPassword: string, oldPassword: string)
+</code>
+services/user/profile.service.ts
+（変更前）
+{{:z_blog:2018:pasted:20181009-152429.png}}
+（変更後）
+{{:z_blog:2018:pasted:20181009-152731.png}}
+===== Profile Pageの作成 =====
+src/app/pages/profile/profile.page.html\\
+src/app/pages/profile/profile.page.scss(省略)
+{{:z_blog:2018:pasted:20181009-153204.png}}
+{{:z_blog:2018:pasted:20181009-154141.png}}
+src/app/pages/profile/profile.page.ts
+services/user/profile.service.ts を用いているが、それでも、だいぶ記述が長い。。。
+{{:z_blog:2018:pasted:20181009-155857.png}}
+名前や誕生日を登録すると、Firestoreには登録された。なぜか、このProfileページには、リロードしても、誕生日などは表示されないようです。
+{{:z_blog:2018:pasted:20181009-155732.png}}
+ここまでのソースコード
+https://github.com/adash333/ionic4-firestore-camera-crud/commit/6e8f60fc1ea0d4421b32d316c0f6d32377874908
+===== 写経元サイト =====
+JAVEBRATT
+Ionic Framework Tutorials
+Build your first Firestore powered Ionic App
+https://javebratt.com/firebase-free-course/
+https://github.com/javebratt/master-firestore-event-manager
+===== リンク =====
+次：[[181009_ionic4_firestore_capacitor_camera2]]