Firebase を使った Web アプリケーション開発/serverless

Transcript

1. FirebaseΛ࢖ͬͨ αʔόʔϨε WebΞϓϦέʔγϣϯ։ൃ KIHARU SASAKI 2016.Oct ServerlessConf TOKYO

2. Freelance bump.hatenablog.com @bump_of_kiharu ⡟ղ加ֹכ׷ ,JIBSV
   4BTBLJ 崧׃ךؿٗٝزؒٝسؒٝآص،
   ԍ
   "OHVMBS
   
   7VF
   
   "84
   
   'JSFCBTF
   4*FS
   ̔
   ꆃ輐禸؝ٝ؟ٕ
   ̔
   8FCرؠ؎ش
   ̔
   崧׃ ➙؝؝

3. What is Firebase? 'JSFCBTFהכ

4. 'JSFCBTFהכ 2011೥ɹ؟٦ؽأꟚ㨣 2014೥ɹ(PPHMFח״׶顠　 2016೥ɹ#BB4ך倜فٓحزؿؓ٦ي
 խխխ
   խה׃ג鹌⻉ BaaS (Backend as a Service)

   ♰➂⟃♳ךركٗحػ٦ָⵃ欽

5. 8FC"QQדⵃ欽ׅ׷'JSFCBTFך⚺ז؟٦ؽأ "VUI
   ؟٦غ٦؟؎سךꟚ涪搀 ׃חծぐفٗغ؎تך ِ٦ؠ٦钠鏾ֶ״ןِ٦ ؠ٦盖椚׾遤ֲ )PTUJOH
   إُؗ،זؚٗ٦غٕطح زٙ٦ؙ׾⢪欽׃ծؐؑ ـٌغ؎ٕؐؑـך،ف

   ٔ׾侧猱דرفٗ؎ 4UPSBHF
   歗⫷ծ갈㡮ծ⹛歗זוծ ؝ٝذٝخך،حفٗ٦ س⥂㶷ֶ״ןر٦ةך《 䖤׾遤ֲ 3FBMUJNF
   %#
   䱸竲ׁ׸גְ׷ׅץגךؙ ٓ؎،ٝزח㼎׃ծر٦ ةך⥂㶷הず劍׾ٔ،ٕ ة؎يד㹋植ׅ׷

6. 'JSFCBTFך׉ך➭؟٦ؽأ
   GPS
   .PCJMF
   "QQT "OBMZUJDT
   ٌغ؎ٕ欽،شٔذ؍ؙأ /PUJDBUJPO
   QVTI鸐濼 5FTU
   -BC
   暟椚畭劣ח״׷"OESPJE، فٔךذأز׾㹋倵 "E.PC
   

   .PCJMF
   "QQ欽䎢デ邌爙 3FNPUF
   $POH
   鏣㹀ػًٓ٦ةח״׶،فٔך⹛ ⡲׾ؕأةو؎ؤ %ZOBNJD
   -JOLT
   ،فٔך؎ٝأز٦ٕ剣搀חַַ ׻׵׆،فٔⰻך暴㹀皘䨽פ钷㼪 $SBTI
   3FQPSUJOH
   ،فٔךؙٓحءُ䞔㜠׾　꧊ ׃ծ䕦갟䏝瘝ךⴓ匿׾遤ֲ

7. Overview ؟٦ؽأ嚊銲

8. %&.0 bit.ly/demo-chat 'JSFCBTFך$PEFMBCדⰕꟚׁ׸גְ׷؝٦س ׾♧鿇㢌刿׃ג⢪欽׃גְתׅ

9. 3FBMUJNF
   %BUBCBTF
   
   
   0OMJOF0JOF ๏ 侧ىٔ猱⟃ⰻחⰋגךؙٓ؎،ٝزחず劍 ๏ 䗁䌓䖓ח荈⹛涸חر٦ةず劍
   ๏ ؔؿٓ؎ٝ儗ך⥂㶷갫׮笝䭯ׁ׸׷ ؔؿٓ؎ٝ儗

   ؔٝٓ؎ٝ儗 ؔٝٓ؎ٝ䗁䌓 ๏ ر٦ةך⥂㶷ָ〳腉ٗ٦ٍٕؕؗحءُ
   ๏ ِ٦ؠ٦ָ乼⡲׾竰竲ׅ׷ֿהָ〳腉
   ๏ ؔٝٓ؎ٝ朐䡾ך㢌刿嗚濼ָ〳腉 侧ىٔ猱⟃ⰻדず劍
   ؔؿٓ؎ٝ儗׮ر٦ة׾⥂䭯

10. 3FBMUJNF
    %BUBCBTF
    
    
    /P42-
    EBUBCBTF ๏ /P42-
    
    ,74
    ๏ Ⰻر٦ة׾אך+40/ח呓秛
    ๏ ر٦ة圓鸡ָ׉ךתת3&45
    "1*
    ח
    ๏

    ر٦ةך،ؙإإٔ٦ٕ׾鏣㹀〳腉
 إُؗٔذ؍ٕ٦ٕ {   "users":  {   "uid001":  {   "name":  "Fujiwara"   }   },   "messages":  {   "id-­‐001":  {   "name":  "Fujiwara",   "text":  "hello!"   },   ......   }   }

11. 3FBMUJNF
    %BUBCBTF
    
    
    %BUB
    BDDFTT ๏ ر٦ةך刿倜כծ鷄⸇٥㢌刿٥⵴ ꤐ欽"1*׾⢪欽
    ๏ ر٦ةך朐䡾㢌⻉כぐ؎كٝز׾ 飑铣׃ג嗚濼
    ๏

    ♧鿇ך"1*כ1SPNJTF׾鵤ׅ
    ๏ زٓٝؠؙءّٝ׮㼎䘔 var  db  =  firebase.database();   var  ref  =  db.ref('messages');
 ref.push({   name:  "Sasaki",   text:  "Hello  world"   }).then(function()  {   //  do  something   }).catch(function(err)  {   //  do  something   }); 【データ追加 例】

12. 3FBMUJNF
    %BUBCBTF
    
    
    2VFSJFT ๏ ⚛ן갫ծ《䖤⟝侧ծ眔㔲䭷㹀׾遤ֲًاحس׾ⵃ欽ׅ׷
    ๏ ًاحسثؑ٦ٝד勴⟝׾醱侧籬־ג䭷㹀〳腉
    ๏ POPPODF
    
    ر٦ة㢌刿ך؎كٝزٔأش٦ך涫ꐮ٥鍑ꤐ var

     db  =  firebase.database();   var  ref  =  db.ref('messages');   ref.limitToLast(50).on('child_added',  function(data)  {   //  do  something   }); 【例】

13. 3FBMUJNF
    %BUBCBTF
    
    
    3&45GVM
    "1* curl  'https://<YOUR-­‐FIREBASE-­‐APP>.firebaseio.com/users/uid001.json' 【GET例】 {   "users":  {

      "uid001":  {   "name":  "Fujiwara"   }   },   ......   } ๏ ر٦ةךꥡ㾴圓鸡ח״׶ծぐر٦ةח ♧䠐ך63-ָ♷ִ׵׸ծ3&45ؒٝسه ؎ٝزה׃ג⢪欽דֹ׷

14. "VUIFOUJDBUJPO ๏ ぐفٗغ؎ت،ؕؐٝزח״׷钠鏾ֶ ״ןِ٦ؠ盖椚
 0"VUIؿٗ٦إحءّٝ盖椚
    ๏ ؕأةي钠鏾堣腉ח״׶荈⵸؟٦ؽأ ،ؕؐٝزדךؚٗ؎ٝ׮〳腉
    ๏

    ،ؕؐٝزח醱侧ך钠鏾فٗغ؎ت׾ ׇׁؙٔٝ׷ֿה׮〳腉 !  # $ % & FNBJM
    
    QBTTXPSEؚٗ؎ٝ׮〳

15. var  auth  =  firebase.auth();   //  Sign  in  Firebase  using

     popup  (Google  account)   var  provider  =  new  firebase.auth.GoogleAuthProvider();   auth.signInWithPopup(provider);   //  Sign  out   auth.signOut(); 【Google アカウントによるOAuth 例】 "VUIFOUJDBUJPO ֿ׸׌ֽ

16. )PTUJOH 搀俱فٓٝד׮
    44-
    )551
    杝荈 سً؎ٝךⵃ欽ָⵃ欽〳腉 ๏ (PPHMFךؚٗ٦غٕז$%/ח佄ִ׵׸ ׋⚅歲鋉垷ךٗ٦سٖ؎ذٝء
    ๏ 44-

    
    )551
    ָرؿٕؓزד䱰欽
    ๏ 杝荈سً؎ٝךⵃ欽׮〳腉
    搀俱
    ๏ $-*ח״׶؝وٝسאדرفٗ؎
    ๏ ؝ٝا٦ٕ♳דرفٗ؎㾶娖ך然钠ծ ٗ٦ٕغحؙ׮〳腉

17. 4UPSBHF (PPHMF
    $MPVE
    4UPSBHF
    חر٦ةָ 呓秛ׁ׸׷׋׭ծ($1
    ׾⢪欽׃ג ؟٦غ٦؟؎سדךⳢ椚׮〳腉 ๏ ِ٦ؠ٦ך歗⫷װ⹛歗ծ갈㡮瘝ך؝ٝذ ٝخ׾⥂盖կلةغ؎ز鋉垷ך؝ٝذٝ خ׾،حفٗ٦سדֹ׷
    ๏ (PPHMF
    $MPVE
    4UPSBHFךغ؛حزח呓秛

    ׁ׸׷׋׭ծ($4
    "1*׾⢪ֲֿהד圫ղ זⵖ䖴׮〳腉
    ๏ ر٦ةח㼎׃،ؙإإٔ٦ٕ׾鏣㹀〳腉
 'JSFCBTF
    TUPSBHF
    إُؗٔذ؍ٕ٦ٕ

18. Caution points Ꟛ涪٥麊欽儗ך殅䠐挿

19. /P42-
    %BUBCBTF ๏ 3%#ך״ֲזؙؒٔ乼⡲כדֹזְ
 ⢽
    MJLF
    BWFSBHF
    ๏ ر٦ة圓鸡כ〳腉זꣲ׶ؿٓحزח׃ծ ז׷ץֻطأزׇׁזְ
 姻鋉⻉׮〳腉זꣲ׶ׇ׆ءٝفٕח

    /P42-ך暴䚍׾崞ַ׃׋ⵃ欽׾䗰ָֽ׷
 膴3%#膷

20. أذ٦آؚٝ橆㞮זו ๏ 'JSFCBTFךمأذ؍ؚٝחכ
 %FWFMPQNFOU
    
    4UBHJOH
    
    1SPEVDUJPO
 הְ׏׋橆㞮כ暴ח欽䠐ׁ׸גְזְ ךדծ׉׸׊׸ⴽךفٗآؙؑزה׃ ג⡲䧭ׅ׷ ׉ך׋׭ך搀俱فٓٝ

21. ؟٦غ٦؟؎سⳢ椚 ๏ ؟٦غ٦؟؎سדךⳢ椚׾䗳銲הׅ׷׮ך כծ(PPHMF
    $MPVE
    'VODUJPOTװ׉ך➭ ($1ך堣腉׾ⵃ欽ׅ׷ֿהדծ؟٦غ٦ٖ أז麊欽׾㹋植
 ׋׌׃($'כ植㖈،ٕؿ؋晛
    ˟䎃剢植㖈 ⢽
    $MPVE
    7JTJPO
    "1*
    ה'VODUJPOT׾ⵃ欽׃׋歗⫷鍑匿ך؟ٝفٕ
 IUUQTHJUIVCDPNNDEPOBNQBNJOHTQFDT

22. ً٦ٕ鷏⥋ ๏ ً٦ٕ،سٖأ钠鏾⟃㢩דً٦ٕ鷏⥋׾ 遤ְ׋ְ㜥さכծ㢩鿇ךؙٓؐس؟٦ؽ أ׾穈׫さ׻ׇ׷ֿהד؟٦غ٦ٖأז 麊欽׾㹋植 ⢽
    ;BQJFS
    ה
    4FOEHSJE׾ⵃ欽׃ծر٦ة鷄⸇ךة؎ىؚٝדً٦ٕ׾ꂁ⥋ׅ׷
 IUUQTTFOEHSJEDPNEPDT*OUFHSBUF5VUPSJBMT;BQJFS TFOEJOH@XIFO@OFX@SFCBTF@DIJME@SFDPSET@BEEFEIUNM

23. Enjoy your 
 serverless LIFE! KIHARU SASAKI 2016.Oct ServerlessConf TOKYO