土曜日の午後、仕掛かりのチュートリアルでも進めようかと思っていたら #GDGTokyo のハンズオンにリモート参加できることを知りYoutube Live 視聴枠でエントリー。 https://gdg-tokyo.connpass.com/event/168843/ 前半はなんとかついていけたのですが、後半のAngularのセッションのスピードについていけず早々に脱落。あとでビデオが公開されるとのことで、夕食後にビデオを見ながら（何度も巻き戻しながら）試してみました。ざっとメモ書き程度ですが書いておきます。 アーカイブ動画はこちら。 講師のlacolacoさんの資料。 今回の内容は、Angular入門： はじめてのアプリこれが完成している状態からのFirebaseを導入するようなお話みたいです。 ローカル環境 Angular setup ソースコード https://github.com/lacolaco/angularfire-20200307-starter 上のリポジトリをcloneしてフォルダに入る。 インストールが完了したら、 ここで、インストール中にAnalyticsの確認のメッセージや[y/N]の入力を求められる場合、 https://github.com/angular/angular-cli/blob/master/docs/design/analytics.md#disabling-usage-analytics 例えば、 とすると抑制できるようです。 Firebaseプロジェクトを作成 https://console.firebase.google.com/このページでFirebaseのプロジェクトを用意します。 AngularFireをAngularプロジェクトに追加 シェルの画面内にFirebaseのプロジェクト名がリスト表示されるので、さっき用意したプロジェクト名を選択すると、次のファイルがAngularプロジェクトに追加されます。 これでFirebaseの導入ができました。 デプロイ とすると、(project-name).firebaseapp.comのようなURLで公開されます。Azure, GitHub pages, S3などにもデプロイできるそうです。 ここで、現時点で商品は products.ts にハードコードされています。これをFirebaseのデータベースに移していきます。 Firebaseにproductsを置く Firebase consoleから「コレクションの開始」で、productsの1個目を手入力。 ドキュメントの追加で残り2個を適当に登録。フィールドを追加(id: 1, 2, 3) Firebaseの設定を書く FirebaseのProject overviewを開いてウェブアプリを追加します。 コードが表示されたらコンソールに戻って、追加したアプリをクリック。その右側に表示される設定アイコンを開きます。 そして、「Firebase SDK snippet」の構成(Config)を選択。 この部分をコピーして、 この2つのファイルに貼り付けます。 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のみなさんに感謝。