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 R...
Search
WordCamp Taipei
December 28, 2019
Technology
0
140
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
150
WordPress 基本安全性檢測與防範方式 / WordPress Security Check and How to Prevent Them_呂明璋 / John Lu
wctaipei
0
580
Troubleshooting WooCommerce Subscriptions Renewal_Siew Kam Onn / 蕭錦安
wctaipei
0
100
網路爬蟲與 WordPress 防禦機制 / Anti-scraping and WordPress Security Defence_Terry Lin
wctaipei
0
520
404 Not found 遇得多;402 有見過麼?探討現有的網上內容流通性和網頁的收入模式。 / “404 Not Found” is Common, But Have You Seen “402 Payment Required”?_高重建 / Kin Ko
wctaipei
0
180
新手也能透過 WooCommerce 架出百萬電商(實際案例分享)/ Real World Building WooCommerce Site for Beginners_廖震宇 / Andy Liao
wctaipei
0
480
我的 WordPress 全端優化經驗 / Complete Guide of Optimizing WordPress_蕭宗仁 / Josh Hsiao
wctaipei
0
140
攝影師的子彈 – 圖片 SEO 戰爭 / Photographer’s Bullet – Image SEO War_Edwin Lin
wctaipei
0
460
國際電商都在用的心理行銷,你還不知道嗎? / The Psychology Behind eCommerce_林文攀 / Peter Lin
wctaipei
0
260
Other Decks in Technology
See All in Technology
エンジニアリングで組織のアウトカムを最速で最大化する!
ham0215
1
130
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
240
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
150
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
14
4.9k
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
持続可能なドキュメント運用のリアル: 1年間の成果とこれから
akitok_
1
200
DETR手法の変遷と最新動向(CVPR2025)
tenten0727
2
1.4k
ここはMCPの夜明けまえ
nwiizo
28
10k
Bazel for Ruby (RubyKaigi 2025)
p0deje
0
100
AWS全冠芸人が見た世界 ~資格取得より大切なこと~
masakiokuda
5
6.3k
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
150
React ABC Questions
hirotomoyamada
0
490
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
KATA
mclloyd
29
14k
Adopting Sorbet at Scale
ufuk
76
9.3k
Building Applications with DynamoDB
mza
94
6.3k
Being A Developer After 40
akosma
91
590k
Code Reviewing Like a Champion
maltzj
522
40k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
670
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Embracing the Ebb and Flow
colly
85
4.6k
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!