AkafukuとAngular2で行う基幹システム開発

SpeeeKaigi#1

Transcript

1. ੺෱ͱAngular2Ͱߦ͏جװγεςϜ։ൃ גࣜձࣾSpeee ։ൃ෦ WM։ൃϢχοτ ാத༔࡞
2. ࣗݾ঺հ •ാத ༔࡞ • גࣜձࣾSpeee •ओʹRailsॻ͍ͯ·͢ɻ • Twitter: @hatappi • Github: hatappi • facebook: hatappi
3. ࠓ೔࿩͢͜ͱ •ݖݶ؅ཧγεςϜ •Angular2 + Rails ApiͰͷ ΞϓϦέʔγϣϯ࡞੒
4. ݖݶ؅ཧγεςϜ
5. ݱঢ়ͷݖݶ؅ཧ ࢲͷࣄۀ෦Ͱ͸ෳ਺ͷϓϩμΫτ͕ ੜΈग़͞Ε͍ͯΔ •ੲPHPͰ
 ͔͔ΕͨϓϩμΫτ
 ଟ਺ •RailsͰ͔͔Εͨ
 ϓϩμΫτɻ
 PHP͔ΒϦϓϨΠε
 ͍ͯ͠Δ΋ͷ΋͋Δ
6. ݱঢ়ͷݖݶ؅ཧ hatappi hoge admin hatappi guest hoge admin hatappi admin ݖݶ؅ཧ͸֤ΞϓϦέʔγϣϯ͝ͱʹ APP1 APP2
7. ݖݶ؅ཧ༻ͷαʔϏε࡞Δʁ
8. ޻਺͕ɾɾɾ
10. GoogleAppsͰ ղܾͰ͖ΔͷͰ͸ʁ
11. GoogleApps ? •99.9% ͷՔಇ཰͕อূ͞Εͨ Google ͷఏڙ͢ Δάϧʔϓ΢ΣΞ •WebͰͷπʔϧఏڙʹͳΔͷͰΠϯλʔωοτ ʹ઀ଓͰ͖͍ͯΕ͹࢖༻Λ͸͡ΊΔ͜ͱ͕Ͱ͖ Δ
12. ݖݶAPIΛ࣮ݱ͢ΔͨΊʹ Spread Sheet Apps Script σʔλιʔεͱͯ͠࢖༻ ϢʔβʔͱΞϓϦέʔγϣϯͷ ݖݶΛ؅ཧ SpreadSheetͷૢ࡞ʹ࢖༻ ·ͨExecution APIʹΑΓAPIͷػೳ΋ ఏڙ
13. ߏ੒ਤ voyager markeshi p hoge admin admin fuga guest admin hatappi admin guest ɾɾɾ ϦΫΤετʹԠͯ͡ σʔλΛऔΓग़͢ ϨεϙϯεΛ JSONͰ͔͑͢ APP1 APP2
14. ߏ੒ਤ voyager markeshi p hoge admin admin fuga guest admin hatappi admin guest ϦΫΤετʹԠͯ͡ σʔλΛऔΓग़͢ ϨεϙϯεΛ JSONͰ͔͑͢ JSONͷϨεϙϯεͷॲཧͳͲ͸ ֤ΞϓϦέʔγϣϯʹʁʁʁ ɾɾɾ APP1 APP2
15. Akafuku
16. Akafuku? ݖݶ؅ཧgem
 ࡞੒ͨ͠GoogleAppsScriptͷAPIͷ ϨεϙϯεΛΑ͠ͳʹѻͬͯ͘ΕΔɻ ඞཁͳ৘ใ͸ARϥΠΫʹऔΓग़͢ ͜ͱ͕ग़དྷΔɻ require 'akafuku' Akafuku.find(‘hoge@example.com’) => #<Akafuku:0x007fff2b378340 @authorites={"app1"=>"guest", "app2"=>2}, @post=1, @employment=1, @department=7>
17. Akafukuͷࢫຯ •ΞϓϦέʔγϣϯଆͰͷߋ৽ର Ԡ͸bundle update •εϓϨουγʔτΛ੾Γସ͑Ε ͹ଞࣄۀ෦΁ͷԣల։΋Մೳ
18. ݖݶ؅ཧͷ·ͱΊ •αʔόʔϨεͰ
 ݖݶ؅ཧAPIͷ࡞੒ •gemΛ࡞੒͢Δ͜ͱͰࠓޙͷΞ ϓϦέʔγϣϯ΁ͷಋೖͷ͠΍ ͢͞Λఏڙ
19. Rails5 (Api mode) + Angular2
20. Rails5
21. Rails5 (api mode) assets΍view΍helperͳͲapiͰ͸ඞ ཁͷͳ͍΋ͷ͕ফ͍͑ͯΔɻ cookieͱ͔sessionपΓ΋ͳ͍
22. Angular2
23. Angular1ͱ͸શ͘ผ෺Β͍͆͠
24. ཪΛฦͤ͹1Λ஌Βͳͯ͘΋ 2͔ΒೖΔ͜ͱ͕ग़དྷΔ
25. ॲཧ଎౓ͷ޲্ Angular1ܥͷ࣌ΑΓ΋2.7ഒͷε ϐʔυ͕ग़Δͱͷ͜ͱ
26. ίϯϙʔωϯτࢦ޲ UIύʔπ͝ͱʹ෼ׂ ϓϩύςΟ΍ΠϕϯτϋϯυϥͳͲ Λίϯϙʔωϯτͷதʹ·ͱΊΔ ίϯϙʔωϯτ͸࠶ར༻͕Մೳ
27. TypeScript͕ਪ঑ ੩తܕ෇͚ݴޠͷίϯύΠϧΤϥʔ ͰTypo΍syntaxΤϥʔʹ͖ͮ͘͜ͱ ͕ग़དྷΔɻ IDEͰ͸ܕ৘ใ͔Βͷิ׬ػೳ͕࢖ ༻͢Δ͜ͱ͕ग़དྷΔ
28. Angularͷબఆʹ͋ͨͬͯ ֶशίετ͸ߴΊ͕ͩɺඞཁͳػೳ ͸ϏϧυΠϯ͞Ε͍ͯΔͷͰɺҰ౓ ֮͑ͯ͠·͑͹ɺ։ൃʹूதͰ͖Δ ࣾ಺ʹAngularΛ͔͍͍ͯͨํ͕͍ ͨ ↑ ͳΜ͔ͩΜͩͰܾΊͯ͸ίί͸େ ͖͔ͬͨ
29. FrontͱBackΛΘ͚Δͱ •ϦϙδτϦ͝ͱ෼͔ΕΔͷͰɺσϓϩΠ͕૒ํ ʹࠨӈ͞Εͳ͍ •ԾʹAngular͕ବ໨ʹͳͬͨͱͯ͠΋FrontͷΈ Λվम͢Δ͜ͱͰରԠ͕Ͱ͖Δ •ೝূपΓʹ͸޻෉͕ඞཁ
30. FrontͱBackΛΘ͚Δͱ •ϦϙδτϦ͝ͱ෼͔ΕΔͷͰɺσϓϩΠ͕૒ํ ʹࠨӈ͞Εͳ͍ •ԾʹAngular͕ବ໨ʹͳͬͨͱͯ͠΋FrontͷΈ Λվम͢Δ͜ͱͰରԠ͕Ͱ͖Δ •ೝূपΓʹ͸޻෉͕ඞཁ
31. ೝূʹ͋ͨͬͯ Rails Apiʹ͸session΍cookieؔ࿈͕ͳ͍ͷͰɺ ࠓ·ͰͷΑ͏ͳcookieʹ৘ใΛ อ࣋͢ΔΑ͏ͳ͜ͱ͕ग़དྷͳ͍ɻ TokenBased Auth
32. TokenBased Auth
33. ॴײ •Angular2ָ͍͠!! ͲΜͲΜνϟϯδ͍ͯ͜͠͏ •gemԽ͓ͯ͘͠ͱԿ͔ͱศར
34. ͓ΘΓ