Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

0d9743a94b19d92224b6928a6c2f8ad1?s=128

WordCamp Taipei

December 28, 2019
Tweet

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!