WP REST API 常見的使用方式，以 React 和 iOS 為例 / Create React iOS App with WordPress REST API_縱裕 / Travis Chang

介紹如何使用 WP REST API 與前端技術和 iOS 手機 App 互動 。

Transcript

1. WP REST API ଉ憎ጱֵአොୗ զ React ޾ iOS 傶ֺ WordCamp Taipei 2019 拻䒍: 婛ᤶ Progress bar 昲ଶ䬈娄Ӥ抓ᑕ
2. 昲ଶ䬈娄Ӥ抓ᑕՕ奧 姜࣎ғhttps://progressbar.tw
3. 姜ᒊच๜Ꭳ挷 ֑๐࢏
4. 姜᪠倵懀晭斯 ֵአᘏ櫮尝 ֑๐࢏ ݚक़Ӟݣ櫮尝 咳ᭆ姜࣎҅揾ා ࢧ㯽HTML ໒ୗጱ ෈ਁ
5. HTML ໒ୗ
6. 倵懀࢏֢አ 1. ᚆ䄪樄㺠䲆ໜ捝ݐ揾ා̶ 2. ಩揾ා໒ୗ旉䟵傶㾿؟憙憽ޝ匍 3. 咳ڊ姜᪠我㺔҅ӧᴴෝHTTP ᭗ 懱㶧ਧ ( Protocol )̶
7. WordPress 姜殷ኞ౮ 1. HTML ฎ奈෈ਁ㲌਻ 2. PHP ݢզኞ౮෈ਁ => ኞ౮HTML 3. MySQL揾ා䓚ݢզ㱪ਂ෈ਁ揾ා 4. PHP ݢզℂMySQL೭ݐ෈ਁ揾ා 5. WordPressԆᥝฎኧPHP愚֢ᘒ౮
8. HTML̵CSS 岈 JavaScript 1. CSS ฎ向ᶎጱ戔ਧ䲆 2. JavaScript ݢզ㵕䙪ද捧CSS 岈 HTML 3. DOM = Document Object Model
 ෈կᇔկཛྷࣳ
9. JavaScript ݢզഴګ倵懀࢏ᤈ傶 1. BOM = Browser Object Model
 倵懀࢏ᇔկཛྷࣳ 2. 咳ᭆHTTP Request
 XMLHttpRequest, Fetch
10. WordPress 岈 AJAX
11. AJAXฎՋἌ Asynchronous JavaScript and XML ᶋݶྍጱ JavaScript 岈 XML̶ ኧ姜殷 JavaScript ᭐晃 BOM ඙֢倵懀࢏咳ڊ HTTP 我 㺔ᥝ࿢ک஍ᒒ֑๐࢏̶஍ᒒ֑๐࢏զ຤Ӟ圵揾ාࣳ䙪ࢧ䛑 JavaScript ᑕୗ̶ᑕୗݐ஑ࢧ䛑஍ٚ؉ፘ䌘䛑㵕֢ (ֺ ই DOM ඙֢)̶ 吚䦒 XML 揾ාࣳ䙪உၞᤈ҅֕匍ࣁ䓅Ԓᤩ JSON ݐդ̶
12. WordPress ଉ憎ጱ AJAX 㶟䂄娒斯࢏ғGutenberg
13. WordPress ଉ憎ጱ AJAX 昧妏ᤒ㻌ғContact Form 7
14. WordPress Rest API http://֦ጱ姜ऒ/wp-json/ Chrome Postman
15. 森ݦ棎㶴஫ԧ森wp-jsonҘ Categories ړ气 Posts ෈ᒍ
16. 橕ധ REST API ጱक़䟑
17. 橕ധ REST API ጱक़䟑 ੜஞ䨝ᛔ㵕橕樂҅֕ฎ ࢩ傶䳷ᴴ橕㭚҅஍ݣӧ 䨝୽段̶
18. Web API API => Application programming interface => 䛑አᑕୗՕᶎ Interface => Օᶎ => ݢ׀඙֢旉䟵೰ե̶ 斸ف A ද捧ԧ B 䌙ڊ C 奾ຎ ݢզమ౮Ӟ㮆㺠㵕ۑᚆጱೲ杴҅౲ฎ斸فՕᶎ
19. URL 岈 Web API ଉ憎አ㬵 1. ݐ஑揾ාֺ҅ইݐ஑ಅํ෈ᒍ㲌਻
 https://yourdomain.com/getAllPosts 2. 䁆ᤈ೰եֺ҅ইੀᭆEmail
 https://yourdomain.com/sendEmail ӧݶጱURLդᤒӧݶጱ఺௏҅䁆ᤈӧݶጱ㲌 ਻҅昧ࢧ㯽໒ୗ᮷ݢᚆӧݶ

20. REST API Resource Representational State Transfer 妞Ӟ໒ୗ҅ݢզ䓅ԒݢզፗളℂURLᎣ᭲ፓጱ̶ 1. URL ᪠䕩ړ㳨䌘䛑ک揾ා䓚ଉ憎㵕֢ғෛी 捝ݐ ץද 㳫ᴻ̶᝕෈墋圸 CRUD, Create Read Update Delete
 2. Restful API ଉ憎ጱ㳷ํ҅Index, Show, Create, Update, Delete̶
21. WordPress 毆戔ጱ API ֺৼ 1. /wp-json/wp/v2/posts
 捝ݐಅํ෈ᒍ 2. /wp-json/wp/v2/pages
 捝ݐಅํ殷ᶎ 3. /wp-json/wp/v2/posts/42 
 捝ݐ id 42彚 ෈ᒍ
 
 च๜Ӥݝํ捝ݐ䷱ํ䌃ف
22. WordPress 岈 React 岈 iOS
23. Ջ焒ฎ React JS React JSฎᬪଙ㬵๋ၞᤈጱڹᒒ໛ຝԏӞ҅ኧ屜䨗 Facebookلݪಅ愚֢㪔Ӭզع揲ࠟአ樄რጱොୗ樄 නֵአ(MIT ദ䳷)̶ ReactJS ଉ憎ጱአ᭔叨ኞڊ԰㵕௔䮩֯ጱ Single Page Application (㻌殷ᶎ䛑አᑕୗ - SPA)̶捰ֵ አᘏࣁ䁆ᤈݱ圵姜殷ۑᚆ䦒ӧ䨝ࢩ傶᪡殷ᘒ୽段ֵአ ᘏ℆涢̶
24. AJAX 樄咳Ӥጱ㺔氂 Ӟ㮆㵕֢੪Ӟྦྷᑕୗ嘨҅ইຎزկᵱᥝๅෛ҅ ౲ฎๅෛ஍ጱ昧森ݍ䛑㪔ӧঅ姘捔̶ 殷ᶎ჉ວᵱᥝӞྦྷ HTML 䰬຃҅֕AJAX䁆ᤈ ਠ吋ᵱᥝ؉ڊӞ䰬ጱ䰬຃҅ඳᵱᥝአPHP愚֢ Ӟེ஍AJAXٚአJavaScript愚֢Ӟ̶ེ
25. 姜殷ڹᒒӣय़໛ຝ 1. React.js 2. Vue.js 3. Angular

26. React ጱ䌕ໜ୵ୗ 1. 奈JavaScript ڹ஍ᒒړ櫝
 WordPress 傶 Web API Server 2. ؉౮JavaScript UI ڍୗ䓚
 3. ؉౮WordPress Plugin
27. iOS 岈 Android APP ಋ䱛APP૪妿౮傶䔃嬝ጱڹᒒԧ҅匍ࣁጱAPP 䓅Ԓ揾ා᮷ਂࣁ஍ᒒ揾ා䓚̶APP樄咳ᘏᥝࣁ 樄咳ۑᚆጱݶ䦒樄咳஍ᒒᓕቘՕᶎํ焧ॡᜰ䦒 樌̶
 
 ڹ஍ᒒړ櫝ݢզፗളֵአፘݶጱAPI
28. React 岈 WordPress ᐏ塅
29. WooCommerce Rest API ጱՕ奧
30. WooCommerce Rest API
31. WooCommerce Rest API
32. Postman ᇇ๜
33. WooCommerce API 䳷ᴴ㺔氂 1. ஠殾ᥝํconsumer key 岈 consumer secret҅Ԟ੪ฎᛗ੝ᥝ戢㲘 2. 僻ဩ朼䌘㮆㳨ۑᚆ戔ਧ䳷ᴴ҅ݝํق樄 ق橕 3. 䳷ᴴ妔உय़҅昧懪㻌᮷ݢզ捝ݐ̶
34. iOS ᇇ๜ᐏ塅
35. ےفᛔ愚 Rest API URL
36. ےفᛔ愚 Rest API endpoint
37. 䋿檭ڍ䤖ᐏ塅
38. 昲ଶ䬈ፘ橕抓ᑕ
39. 愆꧌ғ݄ധ wp-json ᪠䕩 Nginx ݍݻդቘ
40. 㺔氂岈懵抷
41. Thank You!