Tweet
Tweet

Slide 1

Slide 1 text

かごもく#31
 FIREBASE
 鹿児島大学大学院
 GANGAN 


Slide 2

Slide 2 text

Agenda • About me • Firebaseとは？
 • Example • まとめ
 2

Slide 3

Slide 3 text

About me 3

Slide 4

Slide 4 text

About me GANGAN (@gangan_nikki) 北九州高専(制御系)→鹿児島大学(情報系) 5社以上の企業さんでインターン
 　(現在、東京の企業でリモートインターン中) 学生団体：KADAI INFO所属
 4

Slide 5

Slide 5 text

技術の学習遷移 高専時代 • ハードウェア • 組み込み系 • 電子工作 大学時代 • 機械学習 • Edge Computing，IoT • AWS，Azure 2020~ • Webアプリ • Androidアプリ • Firebase，GCP • React.js，Next.js 5

Slide 6

Slide 6 text

FIREBASE 6

Slide 7

Slide 7 text

Firebaseについて • Googleが提供するBaaS (Backend as a Service) • 基本的に無料で使用できる • モバイルのインフラとして使われることが多いので mBaaSともいう • PoC検討やモックの作成、 　エンジニア不足によるフルスタックにならざるをえない 　エンジニアの頼れる味方 7

Slide 8

Slide 8 text

Firebaseに存在するサービス • Firebase Authentication • Firebase Hosting • Cloud Function for firebase • Realtime Database • Cloud Firestore for firebase • Cloud Storage for firebase • ML Kit • Cloud Messaging • Test Lab And more… 8

Slide 9

Slide 9 text

Firebase Authentication • Firebaseが提供する認証機能 • TwitterログインなどのSNSログインや匿名認証などの認証方法が用意されている • 開発においてネックになる認証を手軽に実装可能 9

Slide 10

Slide 10 text

Firebase Hosting 10 • Firebaseが提供するホスティングサービス • 基本的に静的サイトのホスティング (GitHub Pagesなどと同じ) • Cloud Functionsなどと組み合わせることでSSRなども可能 • Nodeのバージョン：8.0.0以上

Slide 11

Slide 11 text

Cloud Functions for firebase • GCPが提供するCloud FunctionsのFirebase版 • 競合他社であれば、AWSが提供するAWS Lambda， Microsoft Azureが提供するAzure Functionsと同じものという認識で 　大丈夫です • 使用言語：JavaScriptのみ (GCPではPython，Goなども使用可能) • Nodeのランタイムは8.0 (ベータ版は10.0) 11

Slide 12

Slide 12 text

Realtime Database • Firebaseが提供するRealtime Database • Cloud Firestoreが提供される前から存在 • DB形式はNoSQL • チャットのリアルタイムDBなどで使用 12

Slide 13

Slide 13 text

Cloud Firestore for firebase • Firebaseが提供するNoSQLデータベース 13

Slide 14

Slide 14 text

Cloud Storage for firebase 14

Slide 15

Slide 15 text

ML Kit • 機械学習をモバイルアプリへ簡単に組み込めるライブラリ 15

Slide 16

Slide 16 text

EXAMPLE 16

Slide 17

Slide 17 text

手順 1. Firebaseプロジェクトの作成 2. Firebaseアプリの作成 3. 環境構築 (on Docker) 4. ローカルで確認 5. Firebaseにデプロイ 17

Slide 18

Slide 18 text

1.Firebaseプロジェクトの作成 18

Slide 19

Slide 19 text

2.Firebaseアプリの作成 19

Slide 20

Slide 20 text

3.環境構築 (on Docker) 20

Slide 21

Slide 21 text

4.ローカルで確認 http://localhost:8080で 右の画面が表示されたらOK 21

Slide 22

Slide 22 text

5.Firebaseにデプロイする 1. Firebase loginでログイン 2. Firebase init hostingで初期化 3. npm run buildでVueプロジェクトをビルドし、firebaseへdeploy 22

Slide 23

Slide 23 text

5.Firebaseにデプロイする 23

Slide 24

Slide 24 text

FIREBASE使用ケース 24

Slide 25

Slide 25 text

Firebase使用ケース • Next.jsアプリをFirebase Hostingにデプロイ (現在メインで作業中) • SSRとして、Cloud Functions (or Google Cloud Run)を使用 • DBとして、Firestore、StorageとしてCloud Storageを使用 • 認証として、Authenticationを使用 • Andoridアプリ(Kotlin)で外部DBとして使用 (検討ケース) • GCPサイドで処理　→　Andoridからの呼び出しDBはFirestore • MLサイドとしては、ML Kitを用いた機械学習アプリ(今後) 25

Slide 26

Slide 26 text

設計 User 　　 App Engine Nonログイン Nonログイン画面 ログイン 処理 ログイン 画像の処理 Firebase Userの情報など マイデザイン処理など Google Adsense

Slide 27

Slide 27 text

まとめ 27

Slide 28

Slide 28 text

まとめ • Firebaseについての紹介 • Firebase Hostingで簡単な実装実験 • 使い方は無限大なので是非使ってみてください。 28

Slide 29

Slide 29 text

AND MORE… 29

Slide 30

Slide 30 text

告知 • KADAI INFOという学生団体でエンジニア 　(https://kadai-info.com/) 30

Slide 31

Slide 31 text

告知 •ganganの備忘録にてFirebase関連の記事を公開中 (https://gangannikki.hatenadiary.jp) 31