GDG Tokyo のハンズオンにリモート参加 – Angular+Firebase
By 管理人
土曜日の午後、仕掛かりのチュートリアルでも進めようかと思っていたら #GDGTokyo のハンズオンにリモート参加できることを知りYoutube Live 視聴枠でエントリー。
https://gdg-tokyo.connpass.com/event/168843/
前半はなんとかついていけたのですが、後半のAngularのセッションのスピードについていけず早々に脱落。あとでビデオが公開されるとのことで、夕食後にビデオを見ながら（何度も巻き戻しながら）試してみました。ざっとメモ書き程度ですが書いておきます。
アーカイブ動画はこちら。
講師のlacolacoさんの資料。
今回の内容は、
Angular入門： はじめてのアプリ
これが完成している状態からのFirebaseを導入するようなお話みたいです。
ローカル環境
ソースコード
https://github.com/lacolaco/angularfire-20200307-starter
上のリポジトリをcloneしてフォルダに入る。
% npm installインストールが完了したら、
% npm run startここで、インストール中にAnalyticsの確認のメッセージや[y/N]の入力を求められる場合、
例えば、
% export NG_CLI_ANALYTICS=ciとすると抑制できるようです。
Firebaseプロジェクトを作成
https://console.firebase.google.com/
このページでFirebaseのプロジェクトを用意します。
AngularFireをAngularプロジェクトに追加
% npm run ng add @angular/fire@nextシェルの画面内にFirebaseのプロジェクト名がリスト表示されるので、さっき用意したプロジェクト名を選択すると、次のファイルがAngularプロジェクトに追加されます。
firebase.json
.firebaserc
angular.jsonこれでFirebaseの導入ができました。
デプロイ
% mg deployとすると、
(project-name).firebaseapp.com
のようなURLで公開されます。
Azure, GitHub pages, S3などにもデプロイできるそうです。
ここで、現時点で商品は products.ts にハードコードされています。これをFirebaseのデータベースに移していきます。
Firebaseにproductsを置く
Firebase consoleから「コレクションの開始」で、productsの1個目を手入力。
Phone XL, 799, A large phone...ドキュメントの追加で残り2個を適当に登録。
フィールドを追加(id: 1, 2, 3)
Firebaseの設定を書く
FirebaseのProject overviewを開いてウェブアプリを追加します。
コードが表示されたらコンソールに戻って、追加したアプリをクリック。その右側に表示される設定アイコンを開きます。
そして、「Firebase SDK snippet」の構成(Config)を選択。
const firebaseConfig = {
...
};この部分をコピーして、
environment.prod.ts
environment.tsこの2つのファイルに貼り付けます。
const firebaseConfig = {
...
};
export const environment = {
production: false(true),
firebaseConfig
};productsをFirestoreで管理
このあたりの詳しい手順はlacolacoさんの記事をご参照ください。
https://hackmd.io/@lacolaco/20200307-note#Add-Firestore-for-product-data
Firestoreとは(Firebaseドキュメント)
ログイン設定
認証周りの詳細もlacolacoさんの記事にお任せします。
https://hackmd.io/@lacolaco/20200307-note#Add-Firebase-Auth-for-signing-in
Firebase Authentication(Firebaseドキュメント)
メール・パスワードや各種SNS認証、電話番号や匿名など様々な認証方式が利用できます。
RemoteConfig
最後に、RemoteConfigを使ってお店からのお知らせをアプリの画面に表示させるなど。
https://hackmd.io/@lacolaco/20200307-note#Add-Firebase-RemoteConfig-for-changing-app-behavior
まとめ
以前、愛媛で開催されたときのハンズオンにも参加したのですが、普段使っていないと様子を忘れてしまって今回のライブコーディングの際も編集するファイルを探しているうちに置いていかれる感じになってしまいました。
こうやって実際に試しながらふりかえってみると頭の中が整理できて、ファイル構成やどの画面で何を操作するかなどが少しずつですが定着してくる気がします。ただし、まだ断片的かつ部分的な機能の理解でしかないので、今回のような「Angular入門： はじめてのアプリ」から次にやることを考えて試してみようと思います。
最後に講師の方々およびGDG Tokyoのみなさんに感謝。