| marp | theme | paginate |
|---|---|---|
true |
default |
true |
- 出身: 福井県
- 所属: コンピュータシステム専攻 2 年生
- 技術領域: TypeScript, Kotlin, Go, AWS
- 趣味: 絶叫系, ゲーム, 食べること
- バックエンド/フロントエンドとは何か分かる
- Firebaseで何ができるか分かる
- webアプリ開発がなんとなくわかるようになる
- 「これなら作れそう」と思えるようになる
YouTubeで例えると…
-
バックエンド
- 動画を保存している
- 「この動画ください」というリクエストを受け取る
- 動画データを送り返す
-
フロントエンド
- 再生ボタンを表示する
- 「この動画欲しい」というリクエストを送る
- 動画を再生する
- コメントやいいねを表示する
- バックエンド = 厨房（ハンバーガーを作る）
- フロントエンド = カウンター（お会計・注文を受ける・商品の受け渡し）
厨房がないとハンバーガーは出てこない。 カウンターがないとハンバーガーを購入できない。
- ユーザー登録・ログイン
- 投稿
- タイムライン表示
- いいね・コメント
- サーバー構築
- 認証
- API実装
- セキュリティ
👉初心者にはハードルが高い
Googleが提供する
「アプリ開発に必要なもの全部入り」サービス
特徴：
- バックエンド開発のめんどくさいところは全部Googleが用意してくれてる
- サーバー管理不要
- フロントエンド中心で開発できる
- 🔐Authentication（ログインのための認証機能）
- Firestore / Realtime DB（データ保存）
- Storage（画像や動画などのファイルを保存）
- etc...
SNSに必要な機能全部ある
今回の勉強会では👇
- Authentication（ログイン）
- Firestore（投稿データ）
- firebase のURL https://firebase.google.com/?hl=ja
- ログインした後コンソールへ移動
- firebaseプロジェクトを設定して開始をクリック
- プロジェクト名を入力して続行
- AIアシスタントは今回使わないのでどちらでも
- アナリティクスはオフでプロジェクトを作成
- アプリを追加 → ウェブを選択
- アプリのニックネームを入力してアプリを登録
npm install firebaseをコピー
- vscodeに移動して
cd beforeでbeforeディレクトリに移動- コピーしたコマンドを貼り付けて実行
- このコードをコピー
- firebase.jsという新しいファイルを作り、その中に貼り付け
- 貼り付け終わったらコンソールに進む
- 左側にある「構築」の中の「Authentication」をクリック
- 始めるをクリック
- Googleを選択
- 有効にするスイッチをオンにする
- サポートメールを追加して保存をクリック
