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 互動 。

WordCamp Taipei

December 28, 2019
Tweet

More Decks by WordCamp Taipei

Other Decks in Technology

Transcript

  1. WP REST API ଉ憎ጱֵአොୗ
    զ React ޾ iOS 傶ֺ
    WordCamp Taipei 2019
    拻䒍: 婛ᤶ
    Progress bar

    昲ଶ䬈娄Ӥ抓ᑕ

    View Slide

  2. 昲ଶ䬈娄Ӥ抓ᑕՕ奧
    姜࣎ғhttps://progressbar.tw

    View Slide

  3. 姜ᒊच๜Ꭳ挷 ֑๐࢏

    View Slide

  4. 姜᪠倵懀晭斯
    ֵአᘏ櫮尝
    ֑๐࢏
    ݚक़Ӟݣ櫮尝
    咳ᭆ姜࣎҅揾ා
    ࢧ㯽HTML ໒ୗጱ
    ෈ਁ

    View Slide

  5. HTML ໒ୗ

    View Slide

  6. 倵懀࢏֢አ
    1. ᚆ䄪樄㺠䲆ໜ捝ݐ揾ා̶

    2. ಩揾ා໒ୗ旉䟵傶㾿؟憙憽ޝ匍

    3. 咳ڊ姜᪠我㺔҅ӧᴴෝHTTP ᭗
    懱㶧ਧ ( Protocol )̶

    View Slide

  7. WordPress 姜殷ኞ౮
    1. HTML ฎ奈෈ਁ㲌਻

    2. PHP ݢզኞ౮෈ਁ => ኞ౮HTML

    3. MySQL揾ා䓚ݢզ㱪ਂ෈ਁ揾ා

    4. PHP ݢզℂMySQL೭ݐ෈ਁ揾ා

    5. WordPressԆᥝฎኧPHP愚֢ᘒ౮

    View Slide

  8. HTML̵CSS 岈 JavaScript
    1. CSS ฎ向ᶎጱ戔ਧ䲆

    2. JavaScript ݢզ㵕䙪ද捧CSS 岈
    HTML

    3. DOM = Document Object Model

    ෈կᇔկཛྷࣳ

    View Slide

  9. JavaScript ݢզഴګ倵懀࢏ᤈ傶
    1. BOM = Browser Object Model

    倵懀࢏ᇔկཛྷࣳ

    2. 咳ᭆHTTP Request

    XMLHttpRequest, Fetch

    View Slide

  10. WordPress 岈 AJAX

    View Slide

  11. AJAXฎՋἌ
    Asynchronous JavaScript and XML

    ᶋݶྍጱ JavaScript 岈 XML̶
    ኧ姜殷 JavaScript ᭐晃 BOM ඙֢倵懀࢏咳ڊ HTTP 我
    㺔ᥝ࿢ک஍ᒒ֑๐࢏̶஍ᒒ֑๐࢏զ຤Ӟ圵揾ාࣳ䙪ࢧ䛑
    JavaScript ᑕୗ̶ᑕୗݐ஑ࢧ䛑஍ٚ؉ፘ䌘䛑㵕֢ (ֺ
    ই DOM ඙֢)̶

    吚䦒 XML 揾ාࣳ䙪உၞᤈ҅֕匍ࣁ䓅Ԓᤩ JSON ݐդ̶

    View Slide

  12. WordPress ଉ憎ጱ AJAX
    㶟䂄娒斯࢏ғGutenberg

    View Slide

  13. WordPress ଉ憎ጱ AJAX
    昧妏ᤒ㻌ғContact Form 7

    View Slide

  14. WordPress Rest API
    http://֦ጱ姜ऒ/wp-json/
    Chrome Postman

    View Slide

  15. 森ݦ棎㶴஫ԧ森wp-jsonҘ
    Categories ړ气 Posts ෈ᒍ

    View Slide

  16. 橕ധ REST API ጱक़䟑

    View Slide

  17. 橕ധ REST API ጱक़䟑
    ੜஞ䨝ᛔ㵕橕樂҅֕ฎ
    ࢩ傶䳷ᴴ橕㭚҅஍ݣӧ
    䨝୽段̶

    View Slide

  18. Web API
    API => Application programming interface =>
    䛑አᑕୗՕᶎ

    Interface => Օᶎ => ݢ׀඙֢旉䟵೰ե̶

    斸ف A ද捧ԧ B 䌙ڊ C 奾ຎ

    ݢզమ౮Ӟ㮆㺠㵕ۑᚆጱೲ杴҅౲ฎ斸فՕᶎ

    View Slide

  19. URL 岈 Web API
    ଉ憎አ㬵

    1. ݐ஑揾ාֺ҅ইݐ஑ಅํ෈ᒍ㲌਻

    https://yourdomain.com/getAllPosts

    2. 䁆ᤈ೰եֺ҅ইੀᭆEmail

    https://yourdomain.com/sendEmail

    ӧݶጱURLդᤒӧݶጱ఺௏҅䁆ᤈӧݶጱ㲌
    ਻҅昧ࢧ㯽໒ୗ᮷ݢᚆӧݶ


    View Slide

  20. REST API
    Resource Representational State Transfer

    妞Ӟ໒ୗ҅ݢզ䓅ԒݢզፗളℂURLᎣ᭲ፓጱ̶

    1. URL ᪠䕩ړ㳨䌘䛑ک揾ා䓚ଉ憎㵕֢ғෛी 捝ݐ ץද
    㳫ᴻ̶᝕෈墋圸 CRUD, Create Read Update Delete

    2. Restful API ଉ憎ጱ㳷ํ҅Index, Show, Create,
    Update, Delete̶

    View Slide

  21. WordPress 毆戔ጱ API ֺৼ
    1. /wp-json/wp/v2/posts

    捝ݐಅํ෈ᒍ

    2. /wp-json/wp/v2/pages

    捝ݐಅํ殷ᶎ

    3. /wp-json/wp/v2/posts/42 

    捝ݐ id 42彚 ෈ᒍ


    च๜Ӥݝํ捝ݐ䷱ํ䌃ف

    View Slide

  22. WordPress 岈 React 岈 iOS

    View Slide

  23. Ջ焒ฎ React JS
    React JSฎᬪଙ㬵๋ၞᤈጱڹᒒ໛ຝԏӞ҅ኧ屜䨗
    Facebookلݪಅ愚֢㪔Ӭզع揲ࠟአ樄რጱොୗ樄
    නֵአ(MIT ദ䳷)̶
    ReactJS ଉ憎ጱአ᭔叨ኞڊ԰㵕௔䮩֯ጱ Single
    Page Application (㻌殷ᶎ䛑አᑕୗ - SPA)̶捰ֵ
    አᘏࣁ䁆ᤈݱ圵姜殷ۑᚆ䦒ӧ䨝ࢩ傶᪡殷ᘒ୽段ֵአ
    ᘏ℆涢̶

    View Slide

  24. AJAX 樄咳Ӥጱ㺔氂
    Ӟ㮆㵕֢੪Ӟྦྷᑕୗ嘨҅ইຎزկᵱᥝๅෛ҅
    ౲ฎๅෛ஍ጱ昧森ݍ䛑㪔ӧঅ姘捔̶
    殷ᶎ჉ວᵱᥝӞྦྷ HTML 䰬຃҅֕AJAX䁆ᤈ
    ਠ吋ᵱᥝ؉ڊӞ䰬ጱ䰬຃҅ඳᵱᥝአPHP愚֢
    Ӟེ஍AJAXٚአJavaScript愚֢Ӟ̶ེ

    View Slide

  25. 姜殷ڹᒒӣय़໛ຝ
    1. React.js

    2. Vue.js

    3. Angular


    View Slide

  26. React ጱ䌕ໜ୵ୗ
    1. 奈JavaScript ڹ஍ᒒړ櫝

    WordPress 傶 Web API Server

    2. ؉౮JavaScript UI ڍୗ䓚

    3. ؉౮WordPress Plugin

    View Slide

  27. iOS 岈 Android APP
    ಋ䱛APP૪妿౮傶䔃嬝ጱڹᒒԧ҅匍ࣁጱAPP
    䓅Ԓ揾ා᮷ਂࣁ஍ᒒ揾ා䓚̶APP樄咳ᘏᥝࣁ
    樄咳ۑᚆጱݶ䦒樄咳஍ᒒᓕቘՕᶎํ焧ॡᜰ䦒
    樌̶


    ڹ஍ᒒړ櫝ݢզፗളֵአፘݶጱAPI

    View Slide

  28. React 岈 WordPress ᐏ塅

    View Slide

  29. WooCommerce Rest API
    ጱՕ奧

    View Slide

  30. WooCommerce Rest API

    View Slide

  31. WooCommerce Rest API

    View Slide

  32. Postman ᇇ๜

    View Slide

  33. WooCommerce API 䳷ᴴ㺔氂
    1. ஠殾ᥝํconsumer key 岈 consumer
    secret҅Ԟ੪ฎᛗ੝ᥝ戢㲘

    2. 僻ဩ朼䌘㮆㳨ۑᚆ戔ਧ䳷ᴴ҅ݝํق樄
    ق橕

    3. 䳷ᴴ妔உय़҅昧懪㻌᮷ݢզ捝ݐ̶

    View Slide

  34. iOS ᇇ๜ᐏ塅

    View Slide

  35. ےفᛔ愚 Rest API URL

    View Slide

  36. ےفᛔ愚 Rest API endpoint

    View Slide

  37. 䋿檭ڍ䤖ᐏ塅

    View Slide

  38. 昲ଶ䬈ፘ橕抓ᑕ

    View Slide

  39. 愆꧌ғ݄ധ wp-json ᪠䕩
    Nginx ݍݻդቘ

    View Slide

  40. 㺔氂岈懵抷

    View Slide

  41. Thank You!

    View Slide