Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
20201111_Noodl_ver2.1_hands-on
pentake
November 11, 2020
Programming
0
140
20201111_Noodl_ver2.1_hands-on
pentake
November 11, 2020
Tweet
Share
More Decks by pentake
See All by pentake
20201104_OpenWeatherMap_API
pentake_de
0
87
20201028_VIoTLT_vol.5_今、リモート会議中かどうかを家族に伝えてみた
pentake_de
0
220
20201027_FGDC_LowCodeプラットフォームNoodlでブラウザゲーム開発!
pentake_de
0
110
20200708_おやこテックLT_MakeCodeで神隠し
pentake_de
1
110
20200325_Noodl_v2_hands-on_スライド資料
pentake_de
1
230
20200323_OpenWeatherMap_API
pentake_de
1
290
Noodlもくもく会#4
pentake_de
0
120
20191218 Beginnerコース@オンライン (1/2)
pentake_de
3
180
Other Decks in Programming
See All in Programming
Reactは何を提供するLibraryなのか?
taro28
5
640
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
180
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
5.8k
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
190
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
250
Node.jsデザインパターンを読んで
mmmommm
0
2.8k
無限スクロールビューライブラリ 二つの設計思想比較
harumak
0
270
From Java through Scala to Clojure
lagenorhynque
0
250
オブジェクト指向で挫折する初学者へ
deepoil
0
200
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
570
Rector, time to refactor your code easily
guikingone
1
100
アジャイルで不確実性に向き合うための開発タスクの切り方
tanden
3
270
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
310
34k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
The Cult of Friendly URLs
andyhume
68
4.8k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Scaling GitHub
holman
451
140k
Adopting Sorbet at Scale
ufuk
63
7.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Six Lessons from altMBA
skipperchong
14
1.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
The Mythical Team-Month
searls
209
39k
Transcript
X 3. OpenWeatherMap ͷ API Key Λ߇͓͑ͯ͘ ɹɹOpenWeatherMapʹSign In͠ɺAPI KeyΛ͙͢ʹίϐϖͰ͖Δঢ়ଶʹ͓͍͍ͯͯͩ͘͠͞ɻ
ɹɹhttps://openweathermap.org/ 1. Noodl όʔδϣϯ2.1.0 Ϗϧυ30 Ҏ߱ΛΠϯετʔϧ ɹ⚠ࠓճόʔδϣϯ2.1.0 Ϗϧυ30 ͷNoodlΛ༻͠·͢ɻϏϧυ30ΑΓલͷNoodlΛ͍ͬͯΔํ࠷৽൛ͷμϯϩʔυΛ͓ئ͍͍ͨ͠·͢ɻ ɹɹࣄલϝʔϧʹμϯϩʔυϦϯΫ͕ॻ͔Ε͍ͯ·͢ͷͰɺͦͪΒ͔ΒμϯϩʔυΛ͓ئ͍͠·͢ɻ ɹɹόʔδϣϯ֬ೝํ๏ɿNoodlΛىಈ͠ɺϝχϡʔόʔͷ Noodl ʼ About Application ։࢝·ͰʹɺԼهΛ͓ࡁ·͍ͤͩ͘͞ʢಈըͷ֓ཁཝʹॻ͍ͯ͋Γ·͢ʣ 4. ࢿྉʹΞΫηε ɹɹconnpassϖʔδʹ͋Δʮࢿྉʯ͔ΒɺϓϩδΣΫτϑΝΠϧΛμϯϩʔυ͍ͯͩ͘͠͞ɻ 2. ϫʔΫεϖʔεΛ࡞ ɹɹWebϒϥβͰNoodlίϯιʔϧʹSign In͠ɺࣗ͝ͷϫʔΫεϖʔεΛ࡞͓͍͍ͯͯͩ͘͠͞ɻ
X Noodl 2.1 ϋϯζΦϯ
X Kato TakehiroʛՃ౻ ݈େ TDS CO, LTD.ʛגࣜձࣾςΠɾσΠɾΤε - NoodlΞυϘέΠτ -
UXσβΠφʔ ΞυϘέΠτɿ ɹࣗࣾαʔϏεΛࣾ֎ͷ։ൃऀʹܒ͢Δ৬छɻΈͳ͞Μͱಉ͡ઢͰΈͳ͞Μͷ՝ΛҰॹʹղܾ͍ͯ͘͠ɻ ɹ※ΤόϯδΣϦετɺਓʑͷલʹཱͬͯઌಋɺओಋΛ͍ͯ͘͠"ಓࢣ"ͷΠϝʔδɻ ʢࢀߟɿhttps://codezine.jp/article/detail/11486ɺதಞ࢘ࢯʣ
X ͓ࢼ͠πΠʔτλΠϜʂ
X ࣭YouTube νϟοτཝͰʂ ʁ ʁ ʁ
X ͖ͳ໙ྨʁ YouTubeͷνϟοτʹॻ͖ࠐΜͰΈΑ͏ʂ
X πΠʔτେܴͰ͢ʂ 7 #Noodl
X
X Noodlʁ ψ ʔ υ ϧ
X ࣸਅɿPixabayɺVăn Đặng
X ͜Ε Noodle ψ ʔ υ ϧ e ͕͍͍ͯΔͷ໙
X Noodl ͱʁ ψ ʔ υ ϧ
X Noodlͱʁ WebΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊͷ LowCodeϓϥοτϑΥʔϜ ։ൃͯ͠ग़དྷ্͕Δͷʁ ɹwebαΠτɿاۀαΠτɺϒϥϯυαΠτ... ɹwebαʔϏεɿTwitterɺWikipediaɺAmazon… ɹIoTσόΠεͷUI ɹϒϥβήʔϜ
ɾϒϥβͰಈ͘ ɾHTML / CSS / JavaScript ɾReactϕʔε ɾ֎෦API͔Βσʔλऔಘ ɾσʔλϕʔεͱ࿈ܞ
X ࢥߟ͠ɺ࣮ߦ͢Δɻ
ૣ࣮͘ಇ͢ΔͷΛ࡞Γ ࢼ࡞ͷମݧΛݕূ͢Δʂ
X
X
✔ ސ٬ͱνʔϜͷΑΓྑ͍ཧղΛಘΔ ✔ ࠷దͳҙࢥܾఆΛ͢Δҝͷڧ͍அࡐྉʹͳΔ ✔ ૉૣ͍ϑΟʔυόοΫ = ޮతͳ։ൃ
X खΛಈ͔͢લʹɻ 1. Noodlͷجຊ֓೦ 2. Noodl 2.1 ͷಛ
X NoodlͰ͏ݴ༿ Node ϊʔυ Component ίϯϙʔωϯτ Project ϓϩδΣΫτ
X 21 Node ϊʔυ
X Node ϊʔυ
X Component ίϯϙʔωϯτ
X Component
X Component Component Component
X Component Component Component Component
X Component Componentʢશମʣ Component Component Component
X Componentʢશମʣ Project ϓϩδΣΫτ
X खΛಈ͔͢લʹɻ 1. Noodlͷجຊ֓೦ 2. Noodl 2.1 ͷಛ
X ֎෦σʔλϕʔεͱͷ࿈ܞ͕Մೳʹʂ
X Noodl 2.0 beta Noodl 2.1 beta ޓੑ͋Γʂجຊతʹ 2.0 Ͱ࡞ͬͨͷ
2.1 Ͱಈ͘ɻ Ұ෦ͷϊʔυ͕ϞδϡʔϧԽ͞Εͨʢ͏ͱ͖ಡΈࠐΉඞཁ͋Γʣ Mui ͕ແ͘ͳΓ SDSʢSimple Design Systemʣ͕Ϟδϡʔϧͱͯ͠Ճ͞Εͨ SDS MQTT ʢSend Message / Receive Messageʣ Mui MQTT ʢSend Message / Receive Messageʣ
X ࠓͭ͘Δͷ 1. ΧʔυܕͷUIΛͭͬͯ͘ΈΑ͏ʂ 2. ఱؾʢOpenWeatherMapʣͷAPIΛར༻ ͯ͠ؾԹΛදࣔͯ͠ΈΑ͏ʂ
X Χʔυ࡞ʹ͏ϊʔυ άϧʔϓɿ ɹɾදࣔ͢ΔྖҬΛܾΊΔ ɹɾࢠཁૉͱͷؔΛܾΊΔ ɹɹଞʹଟ͘ͷॏཁͳػೳΛ࣋ͭ… Πϝʔδʢը૾ʣɿ ɹը૾ͷදࣔΛ୲͏ ςΩετʢจࣈʣɿ ɹจࣈͷදࣔΛ୲͏
X Χʔυ࡞ʹ͏ϊʔυ ίϯϙʔωϯτೖྗɿ ɹίϯϙʔωϯτͷใͷೖޱ ίϯϙʔωϯτग़ྗɿ ɹίϯϙʔωϯτͷใͷग़ޱ
X Cloud syncedɿΫϥυͱϩʔΧϧʹอଘ Save locallyɿϩʔΧϧʹอଘ جຊతʹϩʔΧϧΛબ͍ͯͩ͘͠͞ɻ Ϋϥυڞಉ࡞ۀΛ͢Δࡍʹ͍·͢ɻ ᶃ อଘํ๏Λબʂ ᶄ
໊લΛ͚ͯςϯϓϨʔτΛબʂ
X ίϯϙʔωϯτҰཡ ϓϩδΣΫτઃఆ ϥΠϒϥϦ ϓϩύςΟ ߏங͢Δॴ ϝχϡʔ ϓϨϏϡʔ
X Noodlͷجຊૢ࡞ ϊʔυΛҠಈ͢Δɿυϥοά ϊʔυΛ࡞ΔɹɹɿӈΫϦοΫ → ϊʔυ໊Λݕࡧ → બͯ͠ϊʔυ࡞ ϊʔυΛআ͢ΔɿϊʔυΛબ →
DeleteΩʔΛԡ͢ ϊʔυΛίϐʔɹɿϊʔυΛબ → ⌘+CʢWindows: Ctrl+Cʣ ϊʔυΛϖʔετɿ㵰+VʢWindows: Ctrl+Vʣ ϊʔυΛܨ͙ɹɹɿϊʔυͷͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 37
X ϦΞϧλΠϜ εϚϗϓϨϏϡʔ
X ࠓͭ͘Δͷ 1. ΧʔυܕͷUIΛͭͬͯ͘ΈΑ͏ʂ 2. ఱؾʢOpenWeatherMapʣͷAPIΛར༻ ͯ͠ؾԹΛදࣔͯ͠ΈΑ͏ʂ
X ఱؾσʔλͷऔಘ ఱؾσʔλͷՃ ʹ͏ϊʔυ RESTɿ ɹɾHTTP௨৴Λ͢Δ ɹɾ֎෦ͷAPIʹΞΫηεͰ͖Δ ɹɾ֎෦ͷAPI͔ΒใΛड͚औΔ ΤΫεϓϨογϣϯɿ ɹJavaScriptͷॻ͖ํͰܭࢉࣜؔΛॻ͚Δ
StringϑΥʔϚοτɿ ɹจࣈྻͷॻࣜΛ౷Ұ͢Δ
X API ͱʁ ɹApplication ɹProgramming ɹInterface 41
X ଞͷاۀ ਓ͕࡞ͬͨϓϩάϥϜΛ ར༻Ͱ͖Δʂ 42
X Apple͕ఱؾΛ ଌఆ͍ͯ͠ΔΘ͚Ͱͳ͍ʂ iOSඪ४ͷ͓ఱؾΞϓϦ 43
X ఱؾ API Noodl ཉ͍͠ػೳΛθϩ͔Β։ൃ͢Δඞཁ͕ͳ͍ʂ Իೝࣝ API
X ͏ͱ͖APIͷنΛ Α͘ಡ͏ʂ
X 46 ͜͜ʹ"1*LFZʢจࣈྻʣ͕දࣔ͞ΕΔ
X σϓϩΠ
X Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 48
X ͓Βͤ 49
X υΩϡϝϯτ༁த… ۙɺSlackίϛϡχςΟͰใΛྲྀ͢༧ఆ
X ʲίϛϡχςΟࢀՃͷྲྀΕʳ ɹ̍ɽQRίʔυεΩϟϯ ɹɹɹɹɹɹor ɹɹɹhttps://bit.ly/2kSq3xw ΞΫηε ɹ̎ɽϝʔϧΞυϨεͷೖྗ ɹ̏ɽೝূ༻ϝʔϧʹهࡌͷURLΞΫηε ɹ̐ɽύεϫʔυͱϢʔβʔωʔϜΛઃఆ ʲSlackʳNoodlίϛϡχςΟͷ͝ট
SlackʹNoodlͷίϛϡχςΟ͕͍͟͝·͢ɻ ຊ͝ग़੮ͷօ༷ͱڞʹίϛϡχςΟΛΓ্͛ͯ ͍͚Εͱߟ͓͑ͯΓ·͢ɻੋඇɺ͝ࢀՃ͍ͩ͘͞ʂ 51 # ͭͬͯ͘Έͨ # Πϕϯτใ # noodlܙା
X 52 Twitter
X ͖͕͍ͭͨΒ ͍ͭͬͨʔ ʹ ͍ͨ ͕͠ͳ͍ Ή͠ Ͱ͢ɻ ͨ͘͞Μ ;͒Ζʔ
͞ΕΔͱ ͍ͤͪΐ͏ ͢Δ͔ɻ จࣈϒϩοΫͱεϚϗ͕࿈ܞͨ͠ҭ؝۩ͷ ΞϓϦͷࢼ࡞Λ Noodl Ͱ։ൃʂ ͍ͭͬͨʔ ͜ΖΉ͘͠Μ 12݄ΫϥυϑΝϯσΟϯά։࢝༧ఆʂ
Qiita Ξυϕϯτ ΧϨϯμʔ ࢀՃऀ ืूதʂ
X Q&A 55
X ͜ͷಈը ޙͰΞʔΧΠϒͱ ͯ͠ݟΒΕ·͢ʂ 56
X Thank you! 57