介紹如何使用 WP REST API 與前端技術和 iOS 手機 App 互動 。
WP REST API ଉ憎ጱֵአොୗզ React iOS 傶ֺWordCamp Taipei 2019拻䒍: 婛ᤶProgress bar 昲ଶ䬈娄Ӥ抓ᑕ
View Slide
昲ଶ䬈娄Ӥ抓ᑕՕ奧姜࣎ғhttps://progressbar.tw
姜ᒊचᎣ挷 ֑๐
姜᪠倵懀晭斯ֵአᘏ櫮尝֑๐ݚक़Ӟݣ櫮尝咳ᭆ姜࣎҅揾ාࢧ㯽HTML ໒ୗጱਁ
HTML ໒ୗ
倵懀֢አ1. ᚆ䄪樄㺠䲆ໜ捝ݐ揾ා̶2. 揾ා໒ୗ旉䟵傶㾿؟憙憽ޝ匍3. 咳ڊ姜᪠我㺔҅ӧᴴෝHTTP ᭗懱㶧ਧ ( Protocol )̶
WordPress 姜殷ኞ౮1. HTML ฎ奈ਁ㲌2. PHP ݢզኞ౮ਁ => ኞ౮HTML3. MySQL揾ා䓚ݢզ㱪ਂਁ揾ා4. PHP ݢզℂMySQL೭ݐਁ揾ා5. WordPressԆᥝฎኧPHP愚֢ᘒ౮
HTML̵CSS 岈 JavaScript1. CSS ฎ向ᶎጱ戔ਧ䲆2. JavaScript ݢզ㵕䙪ද捧CSS 岈HTML3. DOM = Document Object Model կᇔկཛྷࣳ
JavaScript ݢզഴګ倵懀ᤈ傶1. BOM = Browser Object Model 倵懀ᇔկཛྷࣳ2. 咳ᭆHTTP Request XMLHttpRequest, Fetch
WordPress 岈 AJAX
AJAXฎՋἌAsynchronous JavaScript and XML ᶋݶྍጱ JavaScript 岈 XML̶ኧ姜殷 JavaScript ᭐晃 BOM ֢倵懀咳ڊ HTTP 我㺔ᥝکᒒ֑๐̶ᒒ֑๐զӞ圵揾ාࣳ䙪ࢧ䛑JavaScript ᑕୗ̶ᑕୗݐࢧ䛑ٚ؉ፘ䌘䛑㵕֢ (ֺই DOM ֢)̶吚䦒 XML 揾ාࣳ䙪உၞᤈ҅֕匍ࣁ䓅Ԓᤩ JSON ݐդ̶
WordPress ଉ憎ጱ AJAX㶟䂄娒斯ғGutenberg
WordPress ଉ憎ጱ AJAX昧妏ᤒ㻌ғContact Form 7
WordPress Rest APIhttp://֦ጱ姜ऒ/wp-json/Chrome Postman
森ݦ棎㶴ԧ森wp-jsonҘCategories ړ气 Posts ᒍ
橕ധ REST API ጱक़䟑
橕ധ REST API ጱक़䟑ੜஞ䨝ᛔ㵕橕樂҅֕ฎࢩ傶䳷ᴴ橕㭚҅ݣӧ䨝段̶
Web APIAPI => Application programming interface =>䛑አᑕୗՕᶎInterface => Օᶎ => ݢ׀֢旉䟵ե̶斸ف A ද捧ԧ B 䌙ڊ C 奾ຎݢզమ౮Ӟ㮆㺠㵕ۑᚆጱೲ杴҅ฎ斸فՕᶎ
URL 岈 Web APIଉ憎አ㬵1. ݐ揾ාֺ҅ইݐಅํᒍ㲌 https://yourdomain.com/getAllPosts2. 䁆ᤈեֺ҅ইੀᭆEmail https://yourdomain.com/sendEmailӧݶጱURLդᤒӧݶጱ҅䁆ᤈӧݶጱ㲌҅昧ࢧ㯽໒ୗ᮷ݢᚆӧݶ
REST APIResource Representational State Transfer妞Ӟ໒ୗ҅ݢզ䓅ԒݢզፗളℂURLᎣ᭲ፓጱ̶1. URL ᪠䕩ړ㳨䌘䛑ک揾ා䓚ଉ憎㵕֢ғෛी 捝ݐ ץද㳫ᴻ̶墋圸 CRUD, Create Read Update Delete 2. Restful API ଉ憎ጱ㳷ํ҅Index, Show, Create,Update, Delete̶
WordPress 毆戔ጱ API ֺৼ1. /wp-json/wp/v2/posts 捝ݐಅํᒍ2. /wp-json/wp/v2/pages 捝ݐಅํ殷ᶎ3. /wp-json/wp/v2/posts/42 捝ݐ id 42彚 ᒍ चӤݝํ捝ݐ䷱ํ䌃ف
WordPress 岈 React 岈 iOS
Ջ焒ฎ React JSReact JSฎᬪଙ㬵๋ၞᤈጱڹᒒຝԏӞ҅ኧ屜䨗Facebookلݪಅ愚֢㪔Ӭզع揲ࠟአ樄რጱොୗ樄නֵአ(MIT ദ䳷)̶ReactJS ଉ憎ጱአ᭔叨ኞڊ㵕䮩֯ጱ SinglePage Application (㻌殷ᶎ䛑አᑕୗ - SPA)̶捰ֵአᘏࣁ䁆ᤈݱ圵姜殷ۑᚆ䦒ӧ䨝ࢩ傶᪡殷ᘒ段ֵአᘏ℆涢̶
AJAX 樄咳Ӥጱ㺔氂Ӟ㮆㵕֢੪Ӟྦྷᑕୗ嘨҅ইຎزկᵱᥝๅෛ҅ฎๅෛጱ昧森ݍ䛑㪔ӧঅ姘捔̶殷ᶎວᵱᥝӞྦྷ HTML 䰬҅֕AJAX䁆ᤈਠ吋ᵱᥝ؉ڊӞ䰬ጱ䰬҅ඳᵱᥝአPHP愚֢ӞེAJAXٚአJavaScript愚֢Ӟ̶ེ
姜殷ڹᒒӣय़ຝ1. React.js 2. Vue.js3. Angular
React ጱ䌕ໜ୵ୗ1. 奈JavaScript ڹᒒړ櫝 WordPress 傶 Web API Server2. ؉౮JavaScript UI ڍୗ䓚 3. ؉౮WordPress Plugin
iOS 岈 Android APPಋ䱛APP૪妿౮傶䔃嬝ጱڹᒒԧ҅匍ࣁጱAPP䓅Ԓ揾ා᮷ਂࣁᒒ揾ා䓚̶APP樄咳ᘏᥝࣁ樄咳ۑᚆጱݶ䦒樄咳ᒒᓕቘՕᶎํ焧ॡᜰ䦒樌̶ ڹᒒړ櫝ݢզፗളֵአፘݶጱAPI
React 岈 WordPress ᐏ塅
WooCommerce Rest APIጱՕ奧
WooCommerce Rest API
Postman ᇇ
WooCommerce API 䳷ᴴ㺔氂1. 殾ᥝํconsumer key 岈 consumersecret҅Ԟ੪ฎᛗᥝ戢㲘2. 僻ဩ朼䌘㮆㳨ۑᚆ戔ਧ䳷ᴴ҅ݝํق樄ق橕3. 䳷ᴴ妔உय़҅昧懪㻌᮷ݢզ捝ݐ̶
iOS ᇇᐏ塅
ےفᛔ愚 Rest API URL
ےفᛔ愚 Rest API endpoint
䋿檭ڍ䤖ᐏ塅
昲ଶ䬈ፘ橕抓ᑕ
愆꧌ғ݄ധ wp-json ᪠䕩Nginx ݍݻդቘ
㺔氂岈懵抷
Thank You!