Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
スモールスタートで始める フィードバック管理システム開発入門
Search
Tsubasa SEKIGUCHI
November 04, 2023
Programming
0
130
スモールスタートで始める フィードバック管理システム開発入門
gunmaweb #51
Tsubasa SEKIGUCHI
November 04, 2023
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
Rustとtonicで始める gRPC再入門
tinykitten
0
300
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
0
180
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
0
150
はじめての GitHub Actionsアクション開発
tinykitten
0
87
UI/UXをないがしろにしない「きもちのいい」Webサービスの作り方
tinykitten
0
79
React Nativeではじめる ハイパフォーマンス スマホアプリ開発
tinykitten
0
79
Jōtaiではじめる 超軽量 React.jsステート管理
tinykitten
0
67
Flutterで始めるフロントエンド再入門
tinykitten
0
160
GoとAngularでつくる TwitterライクなSNS
tinykitten
0
65
Other Decks in Programming
See All in Programming
Elm Form Validation
bkuhlmann
0
510
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
AmperとFleetを使ったAndroidアプリ
yoppie
0
180
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
見た目から始める生産性向上
ikumatadokoro
8
940
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
360
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
350
新宿ダンジョンを可視化してみた
satoshi7190
2
270
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
840
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
3
230
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.1k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
289
19k
RailsConf 2023
tenderlove
4
540
What the flash - Photography Introduction
edds
64
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Music & Morning Musume
bryan
41
5.6k
Design by the Numbers
sachag
274
18k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
A better future with KSS
kneath
231
16k
Transcript
εϞʔϧελʔτͰ࢝ΊΔ ϑΟʔυόοΫཧγεςϜ։ൃೖ Introduction to Feedback Management System Development. Gunma.web 2023.11.04
Tsubasa SEKIGUCHI
TinyKitten Freelance frontend engineer
Tsubasa SEKIGUCHI Λڌͱ͢Δ܈അݝલڮࢢग़ ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ ͖ͬͨΜͱݺΕ͍ͯ·͢
ͿΓʹ໊ͷσβΠϯΛߋ৽͠·ͨ͠ɻ
NFCλά͕͋Γ·͢ ࠓൃදͰ༻͍ͯ͠ΔMacBook Airͷఱ൘ʹషΒΕͨεςοΧʔͷཪଆʹ NFCλάΛຒΊࠐΜͰ͍·͢ɻ ձࢀՃͷํNFCରԠεϚϗͰੋඇ͓ࢼ͍ͩ͘͠͞ɻ ໊࣮ࡳʹ/'$λάΛજ·͍ͤͯ·͢ɻ
TrainLCD ຊશࠃͷమಓ࿏ઢͰ͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ ˞ը૾։ൃதͷͷͰ͢ɻ
ిޫܝࣔ൘෩ςʔϚ ධ৴த ˞ը૾։ൃதͷͷͰ͢ɻ
TrainLCDͷݪܕதͷݪܕͷΞϓϦʹؔͯ͠ͷηογϣϯΛͨ͠ࡍͷ৴͕YouTubeʹ͋Γ·͢ https://www.youtube.com/watch?v=zJ92TUjhdEw&t=15820s
ࠓճͷLTͰ͢ൣғ ಛఆΞϓϦʹಛԽͨ͠খنͳ ϑΟʔυόοΫཧΞϓϦͷ࡞Γํ ࣮ࡍʹ5SBJO-$%ΞϓϦͰ༻͞Ε͍ͯΔϑΟʔυόοΫཧγεςϜΛݩʹɺ ࣮ͷݟΛγΣΞ͠·͢ ͜ͷεϥΠυޙ΄Ͳ4QFBLFS%FDLʹγΣΞ༧ఆͰ͢ SpeakerDeck
ࠓճͷLTͰ͞ͳ͍ൣғ ͜ͷγεςϜͷ։ൃ͕ඞཁʹͳΔ΄ͲͷΞϓϦͷ࡞Γํ ͕Μ͍ͬͯͩ͘͞ ͷΫϚΛୀ࣏͢Δํ๏ ͜ͷൃදͳΜͯฉ͍͍ͯͳ͍Ͱࠓ͙͢৸͍ͯͩ͘͞ έʔδϚονͰউͭํ๏ Γ·ͤΜɻΠʔϩϯɾϚεΫ͔βοΧʔόʔάʹฉ͍͍ͯͩ͘͞
͡Ίʹ Introduction
ࠓճͷϓϩμΫγϣϯͳࡐ TrainLCDΞϓϦͷϑΟʔυόοΫཧγεςϜ TrainLCDͱ͍͏ΞϓϦΛझຯͰ࡞͍ͬͯ·͢ɻ ΞϓϦͷػೳͱͯ͠ʮϑΟʔυόοΫʯ͕͋Γɺ ͜ͷػೳΛ͏ͱࣗ࡞ͷγεςϜʹϝοηʔδ͕ඈͿΈͰ͢ɻ LP GitHub
ࠓճͷϓϩμΫγϣϯͳࡐ ΞϓϦଆͷૹ৴ը໘ %ZOBNJD*TMBOEͱඃ͍ͬͯΔͷޙͰ͠·͢🥴
ࠓճͷϓϩμΫγϣϯͳࡐ ࣮ࡍಈ͍͍ͯΔWeb UI جຊతʹϑΟʔυόοΫͷଞऀͷ։ࣔې͍ͯ͡ΔͷͰ΅͔͠ଟΊͰ͢
ઃܭΛߦ͏ Make a Design
γεςϜʹԿ͕ඞཁ͔ ཁ݅ఆٛ ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏ ͳΔ͘ίετͰ࡞Γ͍ͨͶ νέοτ୯ҐͰWeb͔ΒཧͰ͖ͨΒ͍͍Ͷ ֎෦ͷάϧʔϓΣΞʹ௨ΛඈͤΔΑ͏ʹ͠Α͏
ͪΐͬͱਂ۷Γ͢Δ ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏ ૢ࡞͕ࡶͩͱ୭ૹͬͯ͘Εͳ͍͔ =>γϯϓϧͳ6*Ͱඞཁ࠷ݶͷೖྗͰ༻Մೳʹ ͳΔ͘ίετͰ࡞Γ͍ͨͶ ΘΕ͍ͯͳ͍࣌ʹ՝ۚ͞Εͨ͘ͳ͍͠ɺͦͦ࠷ྉۚΛ͏ͷݏ => mBaaSαʔόʔϨε͕͍͍ͷͰʁ
νέοτ୯ҐͰWeb͔ΒཧͰ͖ͨΒ͍͍Ͷ Web UIΛ࡞Ζ͏ =>ϞμϯͳWebٕज़ͰΠέΠέͳUIΛ࡞Ζ͏ ֎෦ͷάϧʔϓΣΞʹ௨ΛඈͤΔΑ͏ʹ͠Α͏ ίϛϡχςΟDiscord͕͋Δ͔Βͦ͜ʹඈͦ͏ =>ఏग़࣌ʹWebhookΛୟ͚ΔΑ͏ʹ͠Α͏
ͪΐͬͱਂ۷Γ͢Δ ࠓճ͢ൣғ ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏ ૢ࡞͕ࡶͩͱ୭ૹͬͯ͘Εͳ͍͔ =>γϯϓϧͳ6*Ͱඞཁ࠷ݶͷೖྗͰ༻Մೳʹ ͳΔ͘ίετͰ࡞Γ͍ͨͶ ΘΕ͍ͯͳ͍࣌ʹ՝ۚ͞Εͨ͘ͳ͍͠ɺͦͦ࠷ྉۚΛ͏ͷݏ =>
mBaaSαʔόʔϨε͕͍͍ͷͰʁ νέοτ୯ҐͰWeb͔ΒཧͰ͖ͨΒ͍͍Ͷ Web UIΛ࡞Ζ͏ =>ϞμϯͳWebٕज़ͰΠέΠέͳUIΛ࡞Ζ͏ ֎෦ͷάϧʔϓΣΞʹ௨ΛඈͤΔΑ͏ʹ͠Α͏ ίϛϡχςΟDiscord͕͋Δ͔Βͦ͜ʹඈͦ͏ =>ఏग़࣌ʹWebhookΛୟ͚ΔΑ͏ʹ͠Α͏
ٕज़બఆɾ࣮ Technology selection and implementation
ͳΔ͘ίετͰ࡞Γ͍ͨ ݱ࣌ͰFirebaseΛ͍ͬͯ·͢ ઌൃදͨ͠RustͷgRPC APIͰ࿏ઢͷরձ͚ͩߦ͍ɺ σʔλอଘ͠ͳ͍ อଘͨ͘͠ͳ͍ ྉ͚ۚͬͨͩɻBlazeϓϥϯ ैྔ੍
ʹ͢Δͱ֎෦ͱ௨৴Ͱ͖·͢ DiscordͷWebhookΛCloud Functions͔Βୟ͘ͱ͍ͬͨ͜ͱՄೳʹͳΔ ༻͍ͯ͠ΔFirebaseͷػೳ "VUIFOUJDBUJPO 'JSFTUPSF 4UPSBHF $MPVE'VODUJPOT 3FNPUF$PO fi H
ίετͰ࡞Γ͍ͨͳΒFirebase(1/2) ༻͍ͯ͠ΔFirebaseͷػೳ ༁ Authentication ಗ໊ೝূɻݸผʹϑΟʔυόοΫૹ৴ऀΛࣝผ͢ΔͨΊʹ༻ Firestore ϑΟʔυόοΫͷ༰ࣗମΛอଘ Storage
ϑΟʔυόοΫʹఴ͞Ε͍ͯΔεΫγϣΛอଘ
༻͍ͯ͠ΔFirebaseͷػೳ ༁ Cloud Functions ϑΟʔυόοΫ͕ಧ͍ͨ௨ͱ νέοτ͕ྃͨ͠ࡍʹDiscordѼʹ௨Λૹ৴ - Remote
Con fi g ΞϓϦଆͰ͏ϑΟʔυόοΫͷ࠷จࣈΛఆٛ ίετͰ࡞Γ͍ͨͳΒFirebase(2/2)
νέοτ୯ҐͰWeb͔ΒཧͰ͖ͨΒ͍͍Ͷ ݱ࣌ͰWeb UIFlutter on the WebͰ࡞ΒΕ͍ͯ·͢ ࠷ॳωΠςΟϒΞϓϦͱͯ͠Ұ෦ͷϘϥϯςΟΞCSͷํʹ൦͢ΔͨΊʹ FlutterΛͬͯωΠςΟϒΞϓϦΛ։ൃ͍ͯ͠·͕ͨ͠ɺ ϘϥϯςΟΞͷํ͕૿͑ͨͷͰWebͰಈ͘Α͏ʹ͢Δඞཁ͕͋Γ·ͨ͠
νέοτͷཧ͕Մೳ ࠓ࣮͞Ε͍ͯΔػೳͰ۩ମతʹ νέοτͷӾཡ νέοτͷղܾɾະղܾԽ ಗ໊ೝূ͝ͱͷνέοτরձ ͍ۙ͏ͪʹReact(Next.js)Ͱॻ͖͍͑ͨ Flutter on the Web·͓ͩ͢͢ΊͰ͖·ͤΜʜ ͘ͳΔͷͰཧ༝লུ͠·͢
֎෦ͷάϧʔϓΣΞʹ௨ΛඈͤΔΑ͏ʹ Cloud Functions for FirebaseͰWebhookΛୟ͘ Cloud Functions for FirebaseFirebaseͷྉۚϓϥϯΛBlazeʹ͢Δͱ
ैྔ՝͕ۚ༗ޮʹͳΓɺGoogle͔Βݟͯ֎෦ͷαʔόͱ ௨৴͕Ͱ͖ΔΑ͏ʹͳΓ·͢ɻ
DiscordʹϑΟʔυόοΫड৴Λ௨͢Δํ๏ - FirebaseͷϓϥϯΛBlazeʹมߋ - Discord͔Βಛఆνϟϯωϧͷ Webhook URLΛऔಘ͢Δ - Cloud FunctionsʹͯΒͤΔؔʹ
Webhook URLΛઃఆ͢Δ - fetchͰDiscordͷWebhookΛୟ͘
·ͱΊ Firebase͍͍ͧ օ͞ΜͪΖΜ͝ଘ͔ͱࢥ͍·͕͢ɺ FirebaseॊೈͰߴͳN#BB4αʔϏεͰ͢ɻ ίετͰαΫοͱ؆қతͳΞϓϦΛ࡞Δͷʹ͔ܽͤ·ͤΜ TrainLCDΞϓϦΛ͝ርʹ ൱ఆతͳઌೖ؍Λ͍࣋ͬͯͨਓͰɺͬͯΈΕ ʮੜ׆ʹ͔ܽͤͳ͍ʯ໘ന͍ΞϓϦͱධՁͯ͠Β͍͑ͯ·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Gunma.web 2023.11.04 Tsubasa SEKIGUCHI