Vue.js&Nuxt + Firebase

1. Googleスプレッドシートで
管理している家計簿を
Firebaseを使って
WEBアプリ化してみた件
株式会社diffeasy
エンジニア 井上奈々
世界中のむずかしいを簡単に

2. 井上 奈々（いのうえ なな）
株式会社diffeasy（ディフィージー）
“difficult to easy”
世界中の”むずかしい”を簡単に
スタッフエンジニア
趣味
漫画・アニメ・声優・開発
@Nunnally_Engr

4. Googleフォーム＆スプレットシートで挑戦！
フォーム画面で入力。
Googleスプレットシートに反映。

5. “ みっ…見にくい((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ！！！！！

6. 今回作ってみた環境

7. Firebaseを使ってできること（機能）
認証（Firebase Authentication）
リアルタイムデータベース
（Firebase Realtime Database）
Cloud Storage
（写真や動画などのコンテンツを保管）
上記以外にも沢山いろんな機能があります！
⇒ 詳細はFirebaseのWEBで(๑•̀ㅁ•́๑)✧

8. Firebaseを使って試した事
認証（Firebase Authentication）
⇒ メールアドレス＆パスワードでログイン
リアルタイムデータベース
⇒ データの登録・更新・削除
Cloud Storage
⇒ 画像（レシート）のアップロード

9. demo・デモ・でも…

10. 認証（ログイン）

11. 認証（ログイン）

12. リアルタイムデータベース（登録）

13. リアルタイムデータベース（登録）

14. リアルタイムデータベース（登録）

15. リアルタイムデータベース（登録）

16. リアルタイムデータベース（更新）
KEY ⇒ Firebase が勝手に生成してくれる一意のキー
KEY

17. リアルタイムデータベース（削除）
KEY ⇒ Firebase が勝手に生成してくれる一意のキー

18. Cloud Storage（写真アップロード）

19. Cloud Storage（写真アップロード）

20. Cloud Storage（写真アップロード）
https://firebasestorage.googleapis.com/～

21. まとめ
メリット
認証機能やリアルタイムデータベース、アナリティクス、クラウド
メッセージングといった色んな機能が
提供されていて、自由に組み合わせることで柔軟なアプリ開発
ができる気がする…かもしれない！
デメリット
リアルタイムデータベースはNoSQLなので、
サービスの内容によって向き不向きがあるかもしれない…
公式ドキュメントもあるが…海外のサイトにかかれている
プログラムに結構助けられたので学習コストが意外とかかるか
もしれない…（実力不足もあるかもしれないがｗ）