de:code 夏まつり クイズクライアント作ったよ！
0 likes•980 views
下記イベントでお話しした資料です。 de:code夏まつり ～よりコミュニティを楽しくするためのコミュニティのすすめ #3 https://msdevjp.connpass.com/event/175983/
de:code 夏まつり クイズクライアント作ったよ！
- 1. de:code 夏まつり クイズ クライアント作ったよ！ de:code夏まつり ～よりコミュニティを楽しくするためのコミュニティのすすめ #3 https://msdevjp.connpass.com/event/175983/ #decode夏まつり
- 3. Self introduction • 大平かづみ / Kazumi OHIRA • フリーランスエンジニア、リモートワーク • Microsoft Azure を用いた開発、Infrastructure as Code 好き。 • サーバーサイド開発、OSSメンテ、ほか。IoTも好き。 • さまざまなコミュニティの運営参加。 • Twitter: @dz_ • GitHub: @dzeyelid
- 4. 書籍「実践 Node-RED 活用マニュアル」 https://www.amazon.co.jp/dp/4777521117 コミュニティのみんなで書きました🙌 Node-RED を活用数ノウハウが詰まっています
- 5. Node-RED Con 2020 スピーカー公募！ https://nodered.jp/noderedcon2020/#speaker CfP のご応募 お待ちしております！
- 6. Cogbot x くらでべ Bot Framework はじめの一歩詰込みSP! https://cogbot.connpass.com/event/181896/
- 7. Serverless Meetup Japan Virtual #2 https://serverless.connpass.com/event/181523/ 我らが 三宅さんセッション！
- 8. コードネーム Guiding stars あらため、
- 9. Code Polaris • 女性が安心して学べる技術コミュニティ • アプリケーション開発を主軸とした支援 • 現役エンジニアを交え、みなで解決するQA • OSS開発を通じ、実践を学ぶ • 基本無料 https://code-polaris.connpass.com/
- 11. クイズ webクライアント構成 Static Web App SignalR Service Log Analytics workspace Application Insights Logic App Power Apps りなたむさん担当dz 担当 Azure Monitor
- 12. クイズ webクライアント構成 Static Web App SignalR Service Log Analytics workspace Application Insights Logic App Power Apps りなたむさん担当dz 担当 Webアプリ表示 Azure Monitor
- 13. クイズ webクライアント構成 Static Web App SignalR Service Log Analytics workspace Application Insights Logic App Power Apps りなたむさん担当dz 担当 Azure Monitor リアルタイムで 問題通知
- 14. クイズ webクライアント構成 Static Web App SignalR Service Log Analytics workspace Application Insights Logic App Power Apps りなたむさん担当dz 担当 Azure Monitor 回答送信
- 15. リファレンス • Azure Static Web Apps とは | Microsoft Docs • A14 | 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた | de:code (decode) 2020 • JavaScript を使って Azure Functions と SignalR Service を使 用するチャット ルームを作成する | Microsoft Docs • Azure Monitor の概要 - Azure Monitor | Microsoft Docs • OpenAPI Initiative
- 16. 開発中の気付き
- 17. API だけ取り決めて、あとは各自実装！ Static Web App SignalR Service Log Analytics workspace Application Insights Logic App Power Apps りなたむさん担当dz 担当 Azure Monitor それぞれのつなぎの部分の、API定義だけはしっかり取り決め • URL、レスポンス、データ構造 すんなり結合できました🤝
- 19. クイズ画面が表示されない…！？
- 21. クイズ画面が表示されない…！？ 自動で回答画面に切り替わるはずなのに、 ほとんどの人が切り替わらない… 20人くらいしか回答できていない… コンソール画面ではエラーが… SignalR service のプラン、 Free から上げ忘れてました！！！！！！
- 22. クイズ画面が表示されない…！？ 自動で回答画面に切り替わるはずなのに、 ほとんどの人が切り替わらない… 20人くらいしか回答できていない… コンソール画面ではエラーが… SignalR service のプラン、 Free から上げ忘れてました！！！！！！ Free プランは、20接続まで
- 23. ZEN Geeks の神対応！ @kazuyukimiyake Supported by Zen Architects https://zenarchitects.co.jp/ @shibayan
- 26. Sprint 2 • 配点対応 • ニックネーム対応 • カテゴリ表示 • 問題の位置表示対応 • 途中参加対応 https://github.com/dzeyelid/decode20-azure-quiz-client/pull/10 Pull request
- 27. プロトタイプからの脱却構想
- 28. 構想 • Azure Static Web Apps の API 機能 • Azure Functions のような host key/function key 機能は使えない • プロバイダーによる認証ができる • Azure Static Web Apps の認証と承認 | Microsoft Docs • Azure Static Web Apps はまだプレビューなので、 現時点で機能を求め るには Azure Functions に切り離した方がよさそう • Azure Static Web Apps + Azure Functions • CI/CD を組んでしまえば、普段の使用感は同じで、よりたくさんの機能を使 えるようになるので、検討したい
- 29. Version ? - 改善案 Static Web App SignalR Service Log Analytics workspace Logic App Power Apps Azure Monitor Function Application Insights
- 30. 他にやりたいこと セルフペースドハンズオンができるレベルまで、コンテンツを充実させた い！ 項目 目標 ローカル環境構築手順 最低限は README に記載済み、見直して最適化 デプロイ手順 ざっくり対応済み。より分かりやすく改善予定 ソースコードリファクタ ZEN Geeks のみなさまにアドバイスいただいて反映したい！ API仕様書 関連するAPIについては、 OpenAPI で定義済み https://github.com/dzeyelid/decode20-azure-quiz-client/ ソースコードはこちら
- 31. 他にやりたいこと セルフペースドハンズオンができるレベルまで、コンテンツを充実させた い！ 項目 目標 ローカル環境構築手順 最低限は README に記載済み、見直して最適化 デプロイ手順 ざっくり対応済み。より分かりやすく改善予定 ソースコードリファクタ ZEN Geeks のみなさまにアドバイスいただいて反映したい！ API仕様書 関連するAPIについては、 OpenAPI で定義済み TypeScript と Vue.js のプロ にがっつりレビューしてもらいたい！ @nahokomatsui https://github.com/dzeyelid/decode20-azure-quiz-client/ ソースコードはこちら
- 32. クイズも復習したい！
- 34. Have fun, tech geeks! 🐱🏍 Thanks for watching!