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
   
   昲ଶ䬈娄Ӥ抓ᑕ
   

   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