スモールスタートで始める フィードバック管理システム開発入門

gunmaweb #51

Transcript

1. εϞʔϧελʔτͰ࢝ΊΔ
   ϑΟʔυόοΫ؅ཧγεςϜ։ൃೖ໳
   Introduction to Feedback Management System Development. Gunma.web 2023.11.04 Tsubasa SEKIGUCHI
2. TinyKitten Freelance frontend engineer
3. Tsubasa SEKIGUCHI ౎಺Λڌ఺ͱ͢Δ܈അݝલڮࢢग़਎
   ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ
   ͖ͬͨΜͱݺ͹Ε͍ͯ·͢
4. ೥ͿΓʹ໊ࢗͷσβΠϯΛߋ৽͠·ͨ͠ɻ
5. NFCλά͕͋Γ·͢
   ࠓൃදͰ࢖༻͍ͯ͠ΔMacBook Airͷఱ൘ʹషΒΕͨεςοΧʔͷཪଆʹ NFCλάΛຒΊࠐΜͰ͍·͢ɻ
   ձ৔ࢀՃͷํ͸NFCରԠεϚϗͰੋඇ͓ࢼ͍ͩ͘͠͞ɻ
   ࣮͸໊ࡳʹ΋/'$λάΛજ·͍ͤͯ·͢ɻ
6. TrainLCD ೔ຊશࠃͷమಓ࿏ઢͰ࢖͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ ˞ը૾͸։ൃதͷ΋ͷͰ͢ɻ
7. ిޫܝࣔ൘෩ςʔϚ
   ޷ධ഑৴த ˞ը૾͸։ൃதͷ΋ͷͰ͢ɻ
8. TrainLCDͷݪܕதͷݪܕͷΞϓϦʹؔͯ͠ͷηογϣϯΛͨ͠ࡍͷ഑৴͕YouTubeʹ͋Γ·͢
   https://www.youtube.com/watch?v=zJ92TUjhdEw&t=15820s
9. ࠓճͷLTͰ࿩͢ൣғ ಛఆΞϓϦʹಛԽͨ͠খن໛ͳ
   ϑΟʔυόοΫ؅ཧΞϓϦͷ࡞Γํ
   ࣮ࡍʹ5SBJO-$%ΞϓϦͰ࢖༻͞Ε͍ͯΔϑΟʔυόοΫ؅ཧγεςϜΛݩʹɺ
   ࣮࿥ͷ஌ݟΛγΣΞ͠·͢
   ͜ͷεϥΠυ͸ޙ΄Ͳ4QFBLFS%FDLʹγΣΞ༧ఆͰ͢ SpeakerDeck
10. ࠓճͷLTͰ࿩͞ͳ͍ൣғ  ͜ͷγεςϜͷ։ൃ͕ඞཁʹͳΔ΄ͲͷΞϓϦͷ࡞Γํ
    ͕Μ͹͍ͬͯͩ͘͞
     ໨ͷΫϚΛୀ࣏͢Δํ๏
    ͜ͷൃදͳΜͯฉ͍͍ͯͳ͍Ͱࠓ͙͢৸͍ͯͩ͘͞
     έʔδϚονͰউͭํ๏
    ஌Γ·ͤΜɻΠʔϩϯɾϚεΫ͔βοΧʔόʔάʹฉ͍͍ͯͩ͘͞
11. ͸͡Ίʹ
    Introduction
12. ࠓճͷϓϩμΫγϣϯͳ୊ࡐ TrainLCDΞϓϦͷϑΟʔυόοΫ؅ཧγεςϜ
    TrainLCDͱ͍͏ΞϓϦΛझຯͰ࡞͍ͬͯ·͢ɻ
 ΞϓϦͷػೳͱͯ͠ʮϑΟʔυόοΫʯ͕͋Γɺ
    ͜ͷػೳΛ࢖͏ͱࣗ࡞ͷγεςϜʹϝοηʔδ͕ඈͿ࢓૊ΈͰ͢ɻ LP GitHub
13. ࠓճͷϓϩμΫγϣϯͳ୊ࡐ ΞϓϦଆͷૹ৴ը໘
    %ZOBNJD
    *TMBOEͱඃ͍ͬͯΔͷ͸ޙͰ௚͠·͢🥴
14. ࠓճͷϓϩμΫγϣϯͳ୊ࡐ ࣮ࡍಈ͍͍ͯΔWeb UI جຊతʹϑΟʔυόοΫͷଞऀ΁ͷ։ࣔ͸ې͍ͯ͡ΔͷͰ΅͔͠ଟΊͰ͢
15. ઃܭΛߦ͏
    Make a Design
16. γεςϜʹ͸Կ͕ඞཁ͔ ཁ݅ఆٛ  ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏
     ͳΔ΂͘௿ίετͰ࡞Γ͍ͨͶ
     νέοτ୯ҐͰWeb͔Β؅ཧͰ͖ͨΒ͍͍Ͷ
     ֎෦ͷάϧʔϓ΢ΣΞʹ௨஌Λඈ͹ͤΔΑ͏ʹ͠Α͏
17. ͪΐͬͱਂ۷Γ͢Δ  ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏
    
    ૢ࡞͕൥ࡶͩͱ୭΋ૹͬͯ͘Εͳ͍͔΋
    
    
    =>
    γϯϓϧͳ6*Ͱඞཁ࠷௿ݶͷೖྗͰ࢖༻Մೳʹ
     ͳΔ΂͘௿ίετͰ࡞Γ͍ͨͶ
    
    ࢖ΘΕ͍ͯͳ͍࣌ʹ՝ۚ͞Εͨ͘ͳ͍͠ɺͦ΋ͦ΋࠷௿ྉۚΛ෷͏ͷ͸ݏ
    => mBaaS΍αʔόʔϨε͕͍͍ͷͰ͸ʁ
     νέοτ୯ҐͰWeb͔Β؅ཧͰ͖ͨΒ͍͍Ͷ
    
    ಺੡Web UIΛ࡞Ζ͏
    
    
    =>
    ϞμϯͳWebٕज़ͰΠέΠέͳUIΛ࡞Ζ͏
     ֎෦ͷάϧʔϓ΢ΣΞʹ௨஌Λඈ͹ͤΔΑ͏ʹ͠Α͏
    
    ίϛϡχςΟDiscord͕͋Δ͔Βͦ͜ʹඈ͹ͦ͏
    
    
    =>
    ఏग़࣌ʹWebhookΛୟ͚ΔΑ͏ʹ͠Α͏
18. ͪΐͬͱਂ۷Γ͢Δ ࠓճ࿩͢ൣғ  ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏
    
    ૢ࡞͕൥ࡶͩͱ୭΋ૹͬͯ͘Εͳ͍͔΋
    
    
    =>
    γϯϓϧͳ6*Ͱඞཁ࠷௿ݶͷೖྗͰ࢖༻Մೳʹ
     ͳΔ΂͘௿ίετͰ࡞Γ͍ͨͶ
    
    ࢖ΘΕ͍ͯͳ͍࣌ʹ՝ۚ͞Εͨ͘ͳ͍͠ɺͦ΋ͦ΋࠷௿ྉۚΛ෷͏ͷ͸ݏ
    => mBaaS΍αʔόʔϨε͕͍͍ͷͰ͸ʁ
     νέοτ୯ҐͰWeb͔Β؅ཧͰ͖ͨΒ͍͍Ͷ
    
    ಺੡Web UIΛ࡞Ζ͏
    
    
    =>
    ϞμϯͳWebٕज़ͰΠέΠέͳUIΛ࡞Ζ͏
     ֎෦ͷάϧʔϓ΢ΣΞʹ௨஌Λඈ͹ͤΔΑ͏ʹ͠Α͏
    
    ίϛϡχςΟDiscord͕͋Δ͔Βͦ͜ʹඈ͹ͦ͏
    
    
    =>
    ఏग़࣌ʹWebhookΛୟ͚ΔΑ͏ʹ͠Α͏
19. ٕज़બఆɾ࣮૷
    Technology selection and implementation
20. ͳΔ΂͘௿ίετͰ࡞Γ͍ͨ  ݱ࣌఺Ͱ͸FirebaseΛ࢖͍ͬͯ·͢
    
    ઌ೔ൃදͨ͠RustͷgRPC APIͰ͸࿏ઢͷরձ͚ͩߦ͍ɺ
    
    
    
    σʔλ͸อଘ͠ͳ͍ อଘͨ͘͠ͳ͍
    
    ྉۚ͸࢖ͬͨ෼͚ͩɻBlazeϓϥϯ ैྔ੍ ʹ͢Δͱ֎෦ͱ௨৴Ͱ͖·͢
    
    
    
    DiscordͷWebhookΛCloud Functions͔Βୟ͘ͱ͍ͬͨ͜ͱ΋ՄೳʹͳΔ
     ࢖༻͍ͯ͠ΔFirebaseͷػೳ
    
    "VUIFOUJDBUJPO
    
    'JSFTUPSF
    
    4UPSBHF
    
    $MPVE
    'VODUJPOT
    
    3FNPUF
    $PO fi H
21. ௿ίετͰ࡞Γ͍ͨͳΒFirebase
    (1/2)  ࢖༻͍ͯ͠ΔFirebaseͷػೳ ಺༁
    
    Authentication
    
    
    ಗ໊ೝূɻݸผʹϑΟʔυόοΫૹ৴ऀΛࣝผ͢ΔͨΊʹ࢖༻
    
    Firestore
    
    
    ϑΟʔυόοΫͷ಺༰ࣗମΛอଘ
    
    Storage
    
    
    ϑΟʔυόοΫʹఴ෇͞Ε͍ͯΔεΫγϣΛอଘ
22.  ࢖༻͍ͯ͠ΔFirebaseͷػೳ ಺༁
    
    Cloud Functions
    
    
    ϑΟʔυόοΫ͕ಧ͍ͨ௨஌ͱ
    
    
    νέοτ͕׬ྃͨ͠ࡍʹDiscordѼʹ௨஌Λૹ৴
    - Remote Con fi g
 ΞϓϦଆͰ࢖͏ϑΟʔυόοΫͷ࠷௿จࣈ਺Λఆٛ ௿ίετͰ࡞Γ͍ͨͳΒFirebase
    (2/2)
23. νέοτ୯ҐͰWeb͔Β؅ཧͰ͖ͨΒ͍͍Ͷ  ݱ࣌఺Ͱ͸Web UI͸Flutter on the WebͰ࡞ΒΕ͍ͯ·͢
    
    ࠷ॳ͸ωΠςΟϒΞϓϦͱͯ͠Ұ෦ͷϘϥϯςΟΞCSͷํʹ൦෍͢ΔͨΊʹ
    
    
    FlutterΛ࢖ͬͯωΠςΟϒΞϓϦΛ։ൃ͍ͯ͠·͕ͨ͠ɺ
    
    
    ϘϥϯςΟΞͷํ͕૿͑ͨͷͰWebͰಈ͘Α͏ʹ͢Δඞཁ͕͋Γ·ͨ͠
     νέοτͷ؅ཧ͕Մೳ
    
    ࠓ࣮૷͞Ε͍ͯΔػೳͰ۩ମతʹ͸
    
    
    
    
    νέοτͷӾཡ
    
    
    
    
    νέοτͷղܾɾະղܾԽ
    
    
    
    
    ಗ໊ೝূ͝ͱͷνέοτরձ
     ͍ۙ͏ͪʹReact(Next.js)Ͱॻ͖׵͍͑ͨ
    
    Flutter on the Web͸·͓ͩ͢͢ΊͰ͖·ͤΜʜ
    
    
    ௕͘ͳΔͷͰཧ༝͸লུ͠·͢
24. ֎෦ͷάϧʔϓ΢ΣΞʹ௨஌Λඈ͹ͤΔΑ͏ʹ  Cloud Functions for FirebaseͰWebhookΛୟ͘
    
    Cloud Functions for Firebase͸FirebaseͷྉۚϓϥϯΛBlazeʹ͢Δͱ
    ैྔ՝͕ۚ༗ޮʹͳΓɺGoogle͔Βݟͯ֎෦ͷαʔόͱ
    ௨৴͕Ͱ͖ΔΑ͏ʹͳΓ·͢ɻ
25. DiscordʹϑΟʔυόοΫड৴Λ௨஌͢Δํ๏ - FirebaseͷϓϥϯΛBlazeʹมߋ - Discord͔Βಛఆνϟϯωϧͷ
 Webhook URLΛऔಘ͢Δ - Cloud Functionsʹͯ૸ΒͤΔؔ਺ʹ
 Webhook URLΛઃఆ͢Δ - fetch౳ͰDiscordͷWebhookΛୟ͘
26. ·ͱΊ  Firebase͸͍͍ͧ
    օ͞Μ͸΋ͪΖΜ͝ଘ஌͔ͱࢥ͍·͕͢ɺ
 Firebase͸ॊೈͰߴ଎ͳN#BB4αʔϏεͰ͢ɻ
    ௿ίετͰαΫοͱ؆қతͳΞϓϦΛ࡞Δͷʹ͸͔ܽͤ·ͤΜ
     TrainLCDΞϓϦΛ͝᩾ርʹ
    ൱ఆతͳઌೖ؍Λ͍࣋ͬͯͨਓͰ΋ɺ࢖ͬͯΈΕ͹
    ʮੜ׆ʹ͔ܽͤͳ͍ʯ໘ന͍ΞϓϦͱධՁͯ͠΋Β͍͑ͯ·͢
27. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    Thank you for listening! Gunma.web 2023.11.04 Tsubasa SEKIGUCHI