====== 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\\
Ionic4とFirestoreとCapacitorで写真アップロードつきCRUDアプリを写経してみる(2)
2018/9/30 2018/10/2\\
の続き
ここまでのソースコード\\
https://github.com/adash333/ionic4-firestore-camera-crud/tree/7349fba63e6750a7a4fce286192899ecd0c98368
===== 開発環境 =====
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
===== 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の変更
それぞれ、以下の関数を定義します。
getUserProfile()
updateName(firstName: string, lastName: string)
updateDOB(birthDate: Date)
updateEmail(newEmail: string, password: string)
updatePassword(newPassword: string, oldPassword: string)
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]]