WEBのフロントに詳しくない若者向けにハンズオンやりました。
最終的に作った成果物はこんな感じです。
リアルタイムで投稿が反映されたり、プッシュ通知が飛んできたりします。
※リプライ、リツイート、DMのボタンはダミーです
対象レベル
- HTML/CSS -- 読める（事前準備済み）
- JavaScript -- 読める（ほぼ事前準備済み）
- Firebase -- サーバーレスについて意味を知っている
マイルストーン
基本的にクライアント側はほぼ実装済みなので、作業はFirebaseのセットアップ周りがメインです。
- Twitterのようにメッセージを投稿、表示できる。
「いいね」が送れる。ただし、無認証。
狙い：MBaaSを使ってサーバーレスなアプリ構築を体験する。
キーワード：FireStore, Functions
所要時間：1時間
- 1.で作ったアプリにユーザー登録、認証機能を追加する。
ただし、全ての機能が一つの画面に並んで表示されている。
狙い：MBaaSを使ってサーバーレスなアプリ構築を体験する。
キーワード：Authentication
所要時間：0.5時間
マイルストーン１：Twitterのようにメッセージを投稿、表示できる
GitHubにハンズオンの手順を書いてます。
https://github.com/uemegu/HandsOnTwitterLike1
説明しながら実施して1時間だったので、黙々とやれば30分で終わるかもしれません。
クライアントの実装については、JavaScriptを普段書かない人でもなんとなく意味がわかるようにjQueryを使ってます。
マイルストーン２：アプリにユーザー登録、認証機能を追加する
GitHubにハンズオンの手順を書いてます。
https://github.com/uemegu/HandsOnTwitterLike2
説明しながら実施して30分だったので、黙々とやれば15分で終わるかもしれません。
アカウントの収集はしたくないのでこちらの成果物は非公開です。
次のステップ
こんなに簡単にリアルタイムで動くものが作れると、なんだか簡単にアプリが作れちゃう気分になりますよね。
次は今時のJSフレームワークを使ってSPAにしたいところですが、事細かに説明資料を書くのは大変なので今回はそこまで踏み込みません。
実際にちゃんとTwitterっぽくしようと思うと、フォロー/フォロワーの関係や、リツイートなど必要で、FireStoreだけでは表現できない部分やスキーマレスな構造での表現など悩みどころ満載だと思います。
でも、設計で悩むのは開発の醍醐味なので是非楽しみましょう！
特に個人開発においては完璧じゃないからダメなんてことはないので、多少無茶な設計でもやってみれば良いと思います。とりあえず動かした後に悩めば良いと思います。
以前、終：どこまでショボいアプリがAppleの審査に通るのか試してみたの中で二つ名オンラインというアプリを作った時、「設計が適当なとこあるし、Firebaseの無料枠に収まらなかったらどうしよう」と思っていましたが、全く無料枠を超えることはなかったです・・・