Tweet
Tweet

Slide 1

Slide 1 text

εϞʔϧελʔτͰ࢝ΊΔ ϑΟʔυόοΫ؅ཧγεςϜ։ൃೖ໳ Introduction to Feedback Management System Development. Gunma.web 2023.11.04 Tsubasa SEKIGUCHI

Slide 2

Slide 2 text

TinyKitten Freelance frontend engineer

Slide 3

Slide 3 text

Tsubasa SEKIGUCHI ౎಺Λڌ఺ͱ͢Δ܈അݝલڮࢢग़਎ ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ ͖ͬͨΜͱݺ͹Ε͍ͯ·͢

Slide 4

Slide 4 text

೥ͿΓʹ໊ࢗͷσβΠϯΛߋ৽͠·ͨ͠ɻ

Slide 5

Slide 5 text

NFCλά͕͋Γ·͢ ࠓൃදͰ࢖༻͍ͯ͠ΔMacBook Airͷఱ൘ʹషΒΕͨεςοΧʔͷཪଆʹ NFCλάΛຒΊࠐΜͰ͍·͢ɻ ձ৔ࢀՃͷํ͸NFCରԠεϚϗͰੋඇ͓ࢼ͍ͩ͘͠͞ɻ ࣮͸໊ࡳʹ΋/'$λάΛજ·͍ͤͯ·͢ɻ

Slide 6

Slide 6 text

TrainLCD ೔ຊશࠃͷమಓ࿏ઢͰ࢖͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ ˞ը૾͸։ൃதͷ΋ͷͰ͢ɻ

Slide 7

Slide 7 text

ిޫܝࣔ൘෩ςʔϚ ޷ධ഑৴த ˞ը૾͸։ൃதͷ΋ͷͰ͢ɻ

Slide 8

Slide 8 text

TrainLCDͷݪܕதͷݪܕͷΞϓϦʹؔͯ͠ͷηογϣϯΛͨ͠ࡍͷ഑৴͕YouTubeʹ͋Γ·͢ https://www.youtube.com/watch?v=zJ92TUjhdEw&t=15820s

Slide 9

Slide 9 text

ࠓճͷLTͰ࿩͢ൣғ ಛఆΞϓϦʹಛԽͨ͠খن໛ͳ ϑΟʔυόοΫ؅ཧΞϓϦͷ࡞Γํ ࣮ࡍʹ5SBJO-$%ΞϓϦͰ࢖༻͞Ε͍ͯΔϑΟʔυόοΫ؅ཧγεςϜΛݩʹɺ ࣮࿥ͷ஌ݟΛγΣΞ͠·͢ ͜ͷεϥΠυ͸ޙ΄Ͳ4QFBLFS%FDLʹγΣΞ༧ఆͰ͢ SpeakerDeck

Slide 10

Slide 10 text

ࠓճͷLTͰ࿩͞ͳ͍ൣғ ͜ͷγεςϜͷ։ൃ͕ඞཁʹͳΔ΄ͲͷΞϓϦͷ࡞Γํ ͕Μ͹͍ͬͯͩ͘͞ ໨ͷΫϚΛୀ࣏͢Δํ๏ ͜ͷൃදͳΜͯฉ͍͍ͯͳ͍Ͱࠓ͙͢৸͍ͯͩ͘͞ έʔδϚονͰউͭํ๏ ஌Γ·ͤΜɻΠʔϩϯɾϚεΫ͔βοΧʔόʔάʹฉ͍͍ͯͩ͘͞

Slide 11

Slide 11 text

͸͡Ίʹ Introduction

Slide 12

Slide 12 text

ࠓճͷϓϩμΫγϣϯͳ୊ࡐ TrainLCDΞϓϦͷϑΟʔυόοΫ؅ཧγεςϜ TrainLCDͱ͍͏ΞϓϦΛझຯͰ࡞͍ͬͯ·͢ɻ
 ΞϓϦͷػೳͱͯ͠ʮϑΟʔυόοΫʯ͕͋Γɺ ͜ͷػೳΛ࢖͏ͱࣗ࡞ͷγεςϜʹϝοηʔδ͕ඈͿ࢓૊ΈͰ͢ɻ LP GitHub

Slide 13

Slide 13 text

ࠓճͷϓϩμΫγϣϯͳ୊ࡐ ΞϓϦଆͷૹ৴ը໘ %ZOBNJD*TMBOEͱඃ͍ͬͯΔͷ͸ޙͰ௚͠·͢🥴

Slide 14

Slide 14 text

ࠓճͷϓϩμΫγϣϯͳ୊ࡐ ࣮ࡍಈ͍͍ͯΔWeb UI جຊతʹϑΟʔυόοΫͷଞऀ΁ͷ։ࣔ͸ې͍ͯ͡ΔͷͰ΅͔͠ଟΊͰ͢

Slide 15

Slide 15 text

ઃܭΛߦ͏ Make a Design

Slide 16

Slide 16 text

γεςϜʹ͸Կ͕ඞཁ͔ ཁ݅ఆٛ ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏ ͳΔ΂͘௿ίετͰ࡞Γ͍ͨͶ νέοτ୯ҐͰWeb͔Β؅ཧͰ͖ͨΒ͍͍Ͷ ֎෦ͷάϧʔϓ΢ΣΞʹ௨஌Λඈ͹ͤΔΑ͏ʹ͠Α͏

Slide 17

Slide 17 text

ͪΐͬͱਂ۷Γ͢Δ ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏ ૢ࡞͕൥ࡶͩͱ୭΋ૹͬͯ͘Εͳ͍͔΋ =>γϯϓϧͳ6*Ͱඞཁ࠷௿ݶͷೖྗͰ࢖༻Մೳʹ ͳΔ΂͘௿ίετͰ࡞Γ͍ͨͶ ࢖ΘΕ͍ͯͳ͍࣌ʹ՝ۚ͞Εͨ͘ͳ͍͠ɺͦ΋ͦ΋࠷௿ྉۚΛ෷͏ͷ͸ݏ => mBaaS΍αʔόʔϨε͕͍͍ͷͰ͸ʁ νέοτ୯ҐͰWeb͔Β؅ཧͰ͖ͨΒ͍͍Ͷ ಺੡Web UIΛ࡞Ζ͏ =>ϞμϯͳWebٕज़ͰΠέΠέͳUIΛ࡞Ζ͏ ֎෦ͷάϧʔϓ΢ΣΞʹ௨஌Λඈ͹ͤΔΑ͏ʹ͠Α͏ ίϛϡχςΟDiscord͕͋Δ͔Βͦ͜ʹඈ͹ͦ͏ =>ఏग़࣌ʹWebhookΛୟ͚ΔΑ͏ʹ͠Α͏

Slide 18

Slide 18 text

ͪΐͬͱਂ۷Γ͢Δ ࠓճ࿩͢ൣғ ΞϓϦ͔Β͙͢ఏग़Ͱ͖ΔΑ͏ʹ͠Α͏ ૢ࡞͕൥ࡶͩͱ୭΋ૹͬͯ͘Εͳ͍͔΋ =>γϯϓϧͳ6*Ͱඞཁ࠷௿ݶͷೖྗͰ࢖༻Մೳʹ ͳΔ΂͘௿ίετͰ࡞Γ͍ͨͶ ࢖ΘΕ͍ͯͳ͍࣌ʹ՝ۚ͞Εͨ͘ͳ͍͠ɺͦ΋ͦ΋࠷௿ྉۚΛ෷͏ͷ͸ݏ => mBaaS΍αʔόʔϨε͕͍͍ͷͰ͸ʁ νέοτ୯ҐͰWeb͔Β؅ཧͰ͖ͨΒ͍͍Ͷ ಺੡Web UIΛ࡞Ζ͏ =>ϞμϯͳWebٕज़ͰΠέΠέͳUIΛ࡞Ζ͏ ֎෦ͷάϧʔϓ΢ΣΞʹ௨஌Λඈ͹ͤΔΑ͏ʹ͠Α͏ ίϛϡχςΟDiscord͕͋Δ͔Βͦ͜ʹඈ͹ͦ͏ =>ఏग़࣌ʹWebhookΛୟ͚ΔΑ͏ʹ͠Α͏

Slide 19

Slide 19 text

ٕज़બఆɾ࣮૷ Technology selection and implementation

Slide 20

Slide 20 text

ͳΔ΂͘௿ίετͰ࡞Γ͍ͨ ݱ࣌఺Ͱ͸FirebaseΛ࢖͍ͬͯ·͢ ઌ೔ൃදͨ͠RustͷgRPC APIͰ͸࿏ઢͷরձ͚ͩߦ͍ɺ σʔλ͸อଘ͠ͳ͍ อଘͨ͘͠ͳ͍ ྉۚ͸࢖ͬͨ෼͚ͩɻBlazeϓϥϯ ैྔ੍ ʹ͢Δͱ֎෦ͱ௨৴Ͱ͖·͢ DiscordͷWebhookΛCloud Functions͔Βୟ͘ͱ͍ͬͨ͜ͱ΋ՄೳʹͳΔ ࢖༻͍ͯ͠ΔFirebaseͷػೳ "VUIFOUJDBUJPO 'JSFTUPSF 4UPSBHF $MPVE'VODUJPOT 3FNPUF$PO fi H

Slide 21

Slide 21 text

௿ίετͰ࡞Γ͍ͨͳΒFirebase(1/2) ࢖༻͍ͯ͠ΔFirebaseͷػೳ ಺༁ Authentication ಗ໊ೝূɻݸผʹϑΟʔυόοΫૹ৴ऀΛࣝผ͢ΔͨΊʹ࢖༻ Firestore ϑΟʔυόοΫͷ಺༰ࣗମΛอଘ Storage ϑΟʔυόοΫʹఴ෇͞Ε͍ͯΔεΫγϣΛอଘ

Slide 22

Slide 22 text

࢖༻͍ͯ͠ΔFirebaseͷػೳ ಺༁ Cloud Functions ϑΟʔυόοΫ͕ಧ͍ͨ௨஌ͱ νέοτ͕׬ྃͨ͠ࡍʹDiscordѼʹ௨஌Λૹ৴ - Remote Con fi g
 ΞϓϦଆͰ࢖͏ϑΟʔυόοΫͷ࠷௿จࣈ਺Λఆٛ ௿ίετͰ࡞Γ͍ͨͳΒFirebase(2/2)

Slide 23

Slide 23 text

νέοτ୯ҐͰWeb͔Β؅ཧͰ͖ͨΒ͍͍Ͷ ݱ࣌఺Ͱ͸Web UI͸Flutter on the WebͰ࡞ΒΕ͍ͯ·͢ ࠷ॳ͸ωΠςΟϒΞϓϦͱͯ͠Ұ෦ͷϘϥϯςΟΞCSͷํʹ൦෍͢ΔͨΊʹ FlutterΛ࢖ͬͯωΠςΟϒΞϓϦΛ։ൃ͍ͯ͠·͕ͨ͠ɺ ϘϥϯςΟΞͷํ͕૿͑ͨͷͰWebͰಈ͘Α͏ʹ͢Δඞཁ͕͋Γ·ͨ͠ νέοτͷ؅ཧ͕Մೳ ࠓ࣮૷͞Ε͍ͯΔػೳͰ۩ମతʹ͸ νέοτͷӾཡ νέοτͷղܾɾະղܾԽ ಗ໊ೝূ͝ͱͷνέοτরձ ͍ۙ͏ͪʹReact(Next.js)Ͱॻ͖׵͍͑ͨ Flutter on the Web͸·͓ͩ͢͢ΊͰ͖·ͤΜʜ ௕͘ͳΔͷͰཧ༝͸লུ͠·͢

Slide 24

Slide 24 text

֎෦ͷάϧʔϓ΢ΣΞʹ௨஌Λඈ͹ͤΔΑ͏ʹ Cloud Functions for FirebaseͰWebhookΛୟ͘ Cloud Functions for Firebase͸FirebaseͷྉۚϓϥϯΛBlazeʹ͢Δͱ ैྔ՝͕ۚ༗ޮʹͳΓɺGoogle͔Βݟͯ֎෦ͷαʔόͱ ௨৴͕Ͱ͖ΔΑ͏ʹͳΓ·͢ɻ

Slide 25

Slide 25 text

DiscordʹϑΟʔυόοΫड৴Λ௨஌͢Δํ๏ - FirebaseͷϓϥϯΛBlazeʹมߋ - Discord͔Βಛఆνϟϯωϧͷ
 Webhook URLΛऔಘ͢Δ - Cloud Functionsʹͯ૸ΒͤΔؔ਺ʹ
 Webhook URLΛઃఆ͢Δ - fetch౳ͰDiscordͷWebhookΛୟ͘

Slide 26

Slide 26 text

·ͱΊ Firebase͸͍͍ͧ օ͞Μ͸΋ͪΖΜ͝ଘ஌͔ͱࢥ͍·͕͢ɺ
 Firebase͸ॊೈͰߴ଎ͳN#BB4αʔϏεͰ͢ɻ ௿ίετͰαΫοͱ؆қతͳΞϓϦΛ࡞Δͷʹ͸͔ܽͤ·ͤΜ TrainLCDΞϓϦΛ͝᩾ርʹ ൱ఆతͳઌೖ؍Λ͍࣋ͬͯͨਓͰ΋ɺ࢖ͬͯΈΕ͹ ʮੜ׆ʹ͔ܽͤͳ͍ʯ໘ന͍ΞϓϦͱධՁͯ͠΋Β͍͑ͯ·͢

Slide 27

Slide 27 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Gunma.web 2023.11.04 Tsubasa SEKIGUCHI