z_blog:2018:181008_ionic4_firestore_capacitor_camera
差分
このページの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: | ||
- | ====== | + | ====== |
+ | |||
+ | ===== Ionic4+firestore+capacitor(camera)アプリの作成の練習 ===== | ||
+ | |||
+ | 以下のサイトからメールアドレス登録にてダウンロードできる、『Capacitorを用いたカメラ画像を保存できるIonic4アプリ』を写経しています。 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | ソースコードも公開してくださっています。 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | ===== 前回まで | ||
http:// | http:// | ||
行 8: | 行 20: | ||
ここまでのソースコード\\ | ここまでのソースコード\\ | ||
https:// | https:// | ||
+ | |||
+ | ===== 開発環境 ===== | ||
+ | < | ||
+ | Windows 8.1 Pro | ||
+ | NodeJS : v8.12.0 | ||
+ | npm : 6.4.1 | ||
+ | |||
+ | ionic (Ionic CLI) : 4.2.1 | ||
+ | Ionic Framework: @ionic/ | ||
+ | |||
+ | capacitor (Capacitor CLI) : 1.0.0-beta.8 | ||
+ | @capacitor/ | ||
+ | </ | ||
+ | ===== reset-password.page ===== | ||
+ | |||
+ | reset-password.page.html | ||
+ | |||
+ | {{: | ||
+ | |||
+ | reset-password.page.module.ts | ||
+ | |||
+ | {{: | ||
+ | |||
+ | reset-password.page.scss | ||
+ | |||
+ | {{: | ||
+ | |||
+ | reset-password.page.ts | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Signup Page ===== | ||
+ | |||
+ | signup.page.html | ||
+ | |||
+ | {{: | ||
+ | |||
+ | signup.module.ts | ||
+ | |||
+ | {{: | ||
+ | |||
+ | signup.page.scss | ||
+ | |||
+ | {{: | ||
+ | |||
+ | signup.page.ts | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これで、SignUpページから、メールアドレスとパスワードを入力してFirebaseに登録することができるようになった。 | ||
+ | |||
+ | サインアップ(新規登録)すると、そのまま、home画面に移動する。 | ||
+ | |||
+ | 今回の変更点 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | ===== HomePage ===== | ||
+ | |||
+ | ユーザ認証(ログイン、サインアップ、リセットパスワード)の実装が終わったので、次は、イベントマネージャーとして、イベントのCRUDを実装していきます。 | ||
+ | |||
+ | src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | ===== User Profile serviceの作成 ===== | ||
+ | 以下の5つの機能を実装します。 | ||
+ | -User Profileをゲット | ||
+ | -User’s Nameの更新update | ||
+ | -User' | ||
+ | -User' | ||
+ | -User' | ||
+ | それぞれ、以下の関数を定義します。 | ||
+ | < | ||
+ | getUserProfile() | ||
+ | updateName(firstName: | ||
+ | updateDOB(birthDate: | ||
+ | updateEmail(newEmail: | ||
+ | updatePassword(newPassword: | ||
+ | </ | ||
+ | |||
+ | |||
+ | services/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | ===== Profile Pageの作成 ===== | ||
+ | |||
+ | src/ | ||
+ | src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | |||
+ | services/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 名前や誕生日を登録すると、Firestoreには登録された。なぜか、このProfileページには、リロードしても、誕生日などは表示されないようです。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ここまでのソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
- | ===== 見出し ===== | ||
+ | ===== 写経元サイト ===== | ||
+ | JAVEBRATT | ||
+ | Ionic Framework Tutorials | ||
+ | Build your first Firestore powered Ionic App | ||
+ | https:// | ||
+ | https:// | ||
+ | ===== リンク ===== | ||
+ | 次:[[181009_ionic4_firestore_capacitor_camera2]] |
z_blog/2018/181008_ionic4_firestore_capacitor_camera.1538995787.txt.gz · 最終更新: 2018/10/08 by adash333