Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WP REST API 常見的使用方式,以 React 和 iOS 為例 / Create React iOS App with WordPress REST API_縱裕 / Travis Chang
Search
WordCamp Taipei
December 28, 2019
Technology
0
100
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
Share
More Decks by WordCamp Taipei
See All by WordCamp Taipei
如何運用 WordPress 網站經營讓你的關鍵字在網路搜尋無所不在 / Utilizing Keywords to Improving WordPress SEO_蔡沛君 / PG Tsai
wctaipei
0
110
WordPress 基本安全性檢測與防範方式 / WordPress Security Check and How to Prevent Them_呂明璋 / John Lu
wctaipei
0
530
Troubleshooting WooCommerce Subscriptions Renewal_Siew Kam Onn / 蕭錦安
wctaipei
0
62
網路爬蟲與 WordPress 防禦機制 / Anti-scraping and WordPress Security Defence_Terry Lin
wctaipei
0
430
404 Not found 遇得多;402 有見過麼?探討現有的網上內容流通性和網頁的收入模式。 / “404 Not Found” is Common, But Have You Seen “402 Payment Required”?_高重建 / Kin Ko
wctaipei
0
120
新手也能透過 WooCommerce 架出百萬電商(實際案例分享)/ Real World Building WooCommerce Site for Beginners_廖震宇 / Andy Liao
wctaipei
0
340
我的 WordPress 全端優化經驗 / Complete Guide of Optimizing WordPress_蕭宗仁 / Josh Hsiao
wctaipei
0
100
攝影師的子彈 – 圖片 SEO 戰爭 / Photographer’s Bullet – Image SEO War_Edwin Lin
wctaipei
0
370
國際電商都在用的心理行銷,你還不知道嗎? / The Psychology Behind eCommerce_林文攀 / Peter Lin
wctaipei
0
190
Other Decks in Technology
See All in Technology
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
Azure AI ことはじめ
tsubakimoto_s
0
130
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
64k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
The Mythical Team-Month
searls
217
43k
Documentation Writing (for coders)
carmenintech
63
4.2k
Raft: Consensus for Rubyists
vanstee
134
6.5k
How GitHub (no longer) Works
holman
305
140k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Atom: Resistance is Futile
akmur
261
25k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Transcript
WP REST API ଉ憎ጱֵአොୗ զ React iOS 傶ֺ WordCamp
Taipei 2019 拻䒍: 婛ᤶ Progress bar 昲ଶ䬈娄Ӥ抓ᑕ
昲ଶ䬈娄Ӥ抓ᑕՕ奧 姜࣎ғhttps://progressbar.tw
姜ᒊचᎣ挷 ֑๐
姜᪠倵懀晭斯 ֵአᘏ櫮尝 ֑๐ ݚक़Ӟݣ櫮尝 咳ᭆ姜࣎҅揾ා ࢧ㯽HTML ໒ୗጱ ਁ
HTML ໒ୗ
倵懀֢አ 1. ᚆ䄪樄㺠䲆ໜ捝ݐ揾ා̶ 2. 揾ා໒ୗ旉䟵傶㾿؟憙憽ޝ匍 3. 咳ڊ姜᪠我㺔҅ӧᴴෝHTTP ᭗ 懱㶧ਧ (
Protocol )̶
WordPress 姜殷ኞ౮ 1. HTML ฎ奈ਁ㲌 2. PHP ݢզኞ౮ਁ => ኞ౮HTML
3. MySQL揾ා䓚ݢզ㱪ਂਁ揾ා 4. PHP ݢզℂMySQL೭ݐਁ揾ා 5. WordPressԆᥝฎኧPHP愚֢ᘒ౮
HTML̵CSS 岈 JavaScript 1. CSS ฎ向ᶎጱ戔ਧ䲆 2. JavaScript ݢզ㵕䙪ද捧CSS 岈
HTML 3. 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 API http://֦ጱ姜ऒ/wp-json/ Chrome Postman
森ݦ棎㶴ԧ森wp-jsonҘ Categories ړ气 Posts ᒍ
橕ധ REST API ጱक़䟑
橕ധ REST API ጱक़䟑 ੜஞ䨝ᛔ㵕橕樂҅֕ฎ ࢩ傶䳷ᴴ橕㭚҅ݣӧ 䨝段̶
Web API API => Application programming interface => 䛑አᑕୗՕᶎ Interface
=> Օᶎ => ݢ׀֢旉䟵ե̶ 斸ف A ද捧ԧ B 䌙ڊ C 奾ຎ ݢզమ౮Ӟ㮆㺠㵕ۑᚆጱೲ杴҅ฎ斸فՕᶎ
URL 岈 Web API ଉ憎አ㬵 1. ݐ揾ාֺ҅ইݐಅํᒍ㲌 https://yourdomain.com/getAllPosts 2. 䁆ᤈեֺ҅ইੀᭆEmail
https://yourdomain.com/sendEmail ӧݶጱURLդᤒӧݶጱ҅䁆ᤈӧݶጱ㲌 ҅昧ࢧ㯽໒ୗ᮷ݢᚆӧݶ
REST API Resource 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 JS React JSฎᬪଙ㬵๋ၞᤈጱڹᒒຝԏӞ҅ኧ屜䨗 Facebookلݪಅ愚֢㪔Ӭզع揲ࠟአ樄რጱොୗ樄 නֵአ(MIT ദ䳷)̶ ReactJS ଉ憎ጱአ᭔叨ኞڊ㵕䮩֯ጱ
Single Page Application (㻌殷ᶎ䛑አᑕୗ - SPA)̶捰ֵ አᘏࣁ䁆ᤈݱ圵姜殷ۑᚆ䦒ӧ䨝ࢩ傶᪡殷ᘒ段ֵአ ᘏ℆涢̶
AJAX 樄咳Ӥጱ㺔氂 Ӟ㮆㵕֢੪Ӟྦྷᑕୗ嘨҅ইຎزկᵱᥝๅෛ҅ ฎๅෛጱ昧森ݍ䛑㪔ӧঅ姘捔̶ 殷ᶎວᵱᥝӞྦྷ HTML 䰬҅֕AJAX䁆ᤈ ਠ吋ᵱᥝ؉ڊӞ䰬ጱ䰬҅ඳᵱᥝአPHP愚֢ ӞེAJAXٚአJavaScript愚֢Ӟ̶ེ
姜殷ڹᒒӣय़ຝ 1. React.js 2. Vue.js 3. Angular
React ጱ䌕ໜ୵ୗ 1. 奈JavaScript ڹᒒړ櫝 WordPress 傶 Web API Server
2. ؉౮JavaScript UI ڍୗ䓚 3. ؉౮WordPress Plugin
iOS 岈 Android APP ಋ䱛APP૪妿౮傶䔃嬝ጱڹᒒԧ҅匍ࣁጱAPP 䓅Ԓ揾ා᮷ਂࣁᒒ揾ා䓚̶APP樄咳ᘏᥝࣁ 樄咳ۑᚆጱݶ䦒樄咳ᒒᓕቘՕᶎํ焧ॡᜰ䦒 樌̶ ڹᒒړ櫝ݢզፗളֵአፘݶጱAPI
React 岈 WordPress ᐏ塅
WooCommerce Rest API ጱՕ奧
WooCommerce Rest API
WooCommerce Rest API
Postman ᇇ
WooCommerce API 䳷ᴴ㺔氂 1. 殾ᥝํconsumer key 岈 consumer secret҅Ԟ੪ฎᛗᥝ戢㲘 2.
僻ဩ朼䌘㮆㳨ۑᚆ戔ਧ䳷ᴴ҅ݝํق樄 ق橕 3. 䳷ᴴ妔உय़҅昧懪㻌᮷ݢզ捝ݐ̶
iOS ᇇᐏ塅
ےفᛔ愚 Rest API URL
ےفᛔ愚 Rest API endpoint
䋿檭ڍ䤖ᐏ塅
昲ଶ䬈ፘ橕抓ᑕ
愆꧌ғ݄ധ wp-json ᪠䕩 Nginx ݍݻդቘ
㺔氂岈懵抷
Thank You!