ユーザ用ツール

サイト用ツール


z_blog:2018:181008_ionic4_firestore_capacitor_camera

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
次のリビジョン両方とも次のリビジョン
z_blog:2018:181008_ionic4_firestore_capacitor_camera [2018/10/09] – [181008_ionic4_firestore_capacitor_camera] adash333z_blog:2018:181008_ionic4_firestore_capacitor_camera [2018/10/09] – [Profile Pageの作成] adash333
行 11: 行 11:
 https://github.com/javebratt/master-firestore-event-manager https://github.com/javebratt/master-firestore-event-manager
  
 +===== 前回まで =====
  
 http://twosquirrel.mints.ne.jp/?p=28420\\ http://twosquirrel.mints.ne.jp/?p=28420\\
行 20: 行 21:
 https://github.com/adash333/ionic4-firestore-camera-crud/tree/7349fba63e6750a7a4fce286192899ecd0c98368 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 reset-password.page.html
行 38: 行 50:
  
 {{:z_blog:2018:pasted:20181009-084358.png}} {{: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
 +
 +
 +
 ===== リンク ===== ===== リンク =====
  

z_blog/2018/181008_ionic4_firestore_capacitor_camera.txt · 最終更新: 2018/10/09 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki