Tweet
Tweet

Slide 1

Slide 1 text

2019/12/03 Θͨͳ΂Ώ͏ FIREBASEΦϯϦʔ + REACT NATIVEͰ ΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ

Slide 2

Slide 2 text

▸ ࣗݾ঺հ ▸ ؆୯ʹͳͬͨͳͱײͨ͡෦෼ ▸ ਏ͔ͬͨ෦෼ ▸ ޻෉ͨ͠෦෼ ▸ Ͳ͏͍͏ΞϓϦʹ޲͍ͯΔ͔ ▸ ·ͱΊ ֓ཁ

Slide 3

Slide 3 text

ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu

Slide 4

Slide 4 text

ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 5໊(ΤϯδχΞ͸2ਓ)Ͱฏۉ೥ྸ30ͪΐ͍ͷձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸ ࠓ࡞͍ͬͯΔࣄۀ ▸ ετϦʔτμϯεͷΦϯϥΠϯϨοεϯΞϓϦ ▸ react-native + firebase + TypeScript

Slide 5

Slide 5 text

FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͍͖ͳΓ͚ͩͲ݁࿦ ͍ͩͿ؆୯ʹͳͬͨؾ͕͢Δ

Slide 6

Slide 6 text

Ͳ͕͜؆୯ʹͳͬͨͷ͔ʁ(1) ʙೝূ෦෼ʙ ▸ AuthenticationΛ࢖͏͜ͱͰϢʔβ෦෼Λ·Δ·ΔεΩοϓ ▸ ϝʔϧΞυϨε֬ೝػೳ ▸ ύεϫʔυมߋػೳ ▸ ࣗಈૹ৴ϝʔϧΛݴޠ͝ͱʹมߋՄೳ

Slide 7

Slide 7 text

Ͳ͕͜؆୯ʹͳͬͨͷ͔ʁ(2) ʙσʔλ෦෼ʙ ▸ Firestore͔Β௚઀σʔλΛऔಘ ▸ ϧʔϧͷม਺ͱͯ͠authͳͲ΋࢖͑ΔͷͰ੍ݶ͕؆୯ ▸ FirestoreΛτϦΨʔͱͯ͠FunctionsΛىಈͤͯ͞ͷσʔλ੔ཧ ▸ ΞϓϦ΋web΋΄΅΄΅ڞ௨Ͱσʔλऔಘ༻ؔ਺͕ॻ͚Δ

Slide 8

Slide 8 text

Ͳ͕͜؆୯ʹͳͬͨͷ͔ʁ(3) ʙͦͷଞʙ ▸ όοΫΤϯυΛ༻͍Δඞཁ͕ͳ͔ͬͨ ▸ ؅ཧը໘͕ॆ࣮͍ͯ͠ΔͳͲͳͲ

Slide 9

Slide 9 text

FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͱ͸͍͑Ͳਏ͍෦෼΋͋Γ

Slide 10

Slide 10 text

Ͳ͕͜ਏ͔ͬͨͷ͔ʁ ▸ AuthenticationͰ࣋ͯΔ৘ใ͸ݶΒΕΔ ▸ id,email,displayName, photoUrl,emailVerified,֤छϓϩύΠμ ▸ FirestoreʹσʔλΛͦͷ··ೖΕΔ͜ͱ͕Ͱ͖ΔͷͰɺ
 ϑϩϯτଆͷόϦσʔγϣϯΛ͔ͬ͠Γͱ͠ͳ͍ͱ͍͚ͳ͍ ▸ ϧʔϧΛશһ͕ͪΌΜͱ೺Ѳ͍ͯ͠Δ͔ ▸ Firestore͸͋͘·ͰNoSQLతͳ෦ྨͳͷͰݕࡧ͸ڧ͘ͳ͍ ▸ ίϨΫγϣϯ͕૿͑ΔͱτϦΨʔͷ೺Ѳ͕໘౗ʹ ▸ ίϨΫγϣϯ͕૿͑Δͱ͍Δͷ͔͍Βͳ͍ͷ͔͕೉͘͠ͳΔ ▸ ෳ਺ϦϙδτϦʹލͬͨ৔߹ͷFunctionsͷ؅ཧํ๏ ▸ ͳͲͳͲ…

Slide 11

Slide 11 text

FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͜͏͍͏޻෉Λ͠·ͨ͠

Slide 12

Slide 12 text

Ͳ͏͍͏޻෉Λ͔ͨ͠ʁ(1) ▸ TypeScriptͰFirestoreͷίϨΫγϣϯͷܕΛͪΌΜͱ؅ཧ ▸ ݕࡧ݁ՌΛ͋Β͔͡Ίอଘ͓ͯ͘͠ ▸ HIPHOPʹؔ͢ΔϨοεϯΛอଘ͓ͯ͘͠υΩϡϝϯτΛ༻ҙͳͲ ▸ NoSQLͱ͍͏͜ͱΛ಄ʹೖΕͯίϨΫγϣϯͳͲΛ࡞੒ ▸ τϦΨʔͳͲؔ࿈ੑΛͪΌΜͱਤʹॻ͍ͯ೺Ѳ

Slide 13

Slide 13 text

Ͳ͏͍͏޻෉Λ͔ͨ͠ʁ(2) ▸ AdminͰ࢖͍͍ͨɺΞϓϦͰ࢖͍͍ͨɺ WebͰ࢖͍͍ͨΑ͏ͳ Functions͸ͦΕͧΕͷϦϙδτϦʹ෼ׂͯ͠؅ཧ ▸ exports͢Δؔ਺ΛΦϒδΣΫτʹ͢Δ $ firebase deploy --only functions:admin exports.admin = { func1: require(“./func1”), func2: require(“./func2”), };

Slide 14

Slide 14 text

FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͜͏͍ͬͨΞϓϦͩͱ࠾༻͠ͳ͔͔ͬͨ΋

Slide 15

Slide 15 text

͜͏͍͏ΞϓϦͩͱ࠾༻͠ͳ͔͔ͬͨ΋ ▸ SNSͷΑ͏ͳϦϨʔγϣϯ͕ෳࡶʹབྷΈ߹͏Α͏ͳαʔϏε ▸ firestore΍functions͕ೖΓཚΕͯ͠·͏ͨΊ ▸ ݕࡧ৚͕݅ෳࡶͩͬͨΓ͢ΔΑ͏ͳαʔϏε ▸ ෳ߹ΠϯσοΫε΍શจݕࡧͷͨΊʹalgoliaಋೖͳͲ͕໘౗ ▸ ήʔϜͷΑ͏ͳεϐʔυΛॏཁࢹ͍ͨ͠αʔϏε ▸ τϥϯβΫγϣϯ΍ॻ͖ࠐΈ଎౓͕ωοΫͱͳΔͷͰ ޲͖ෆ޲͖͕͋ΔͷͰཁ஫ҙ

Slide 16

Slide 16 text

FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ·ͱΊ

Slide 17

Slide 17 text

·ͱΊ ▸ ඇSNSΞϓϦͰ͸؆୯ʹͳΔͷͰ͓͢͢Ί ▸ ୯७ʹίϨΫγϣϯ͔Βऔಘ͢ΔΑΓ͸ɺ
 ݕࡧ݁ՌΛ·ͱΊͨυΩϡϝϯτΛ༻ҙ͓ͯ͘͠ͱΤίͰָ ▸ τϦΨʔىಈͷFunctionsͳͲ͕େྔʹઃஔ͞ΕΔՄೳੑ͕ߴ͍ͷͰɺ
 ͔ͬ͠Γͱؔ܎ੑΛ؅ཧͰ͖ΔΑ͏ͳֆΛඳ͘ ▸ ຊLTͰ͸঺հ͍ͯ͠ͳ͍͕ɺFCM΍ΞφϦςΟΫεͳͲΞϓϦΛ࡞Δ্ Ͱඞཁͳ΋ͷ͕શͯἧ͍ͬͯΔ ࡞Γ͍ͨ΋ͷʹΑΔ͕ গਓ਺Ͱͺͺͬͱ։ൃΛ͢ΔͳΒ͹!

Slide 18

Slide 18 text

͓ΘΓ