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
520
Troubleshooting WooCommerce Subscriptions Renewal_Siew Kam Onn / 蕭錦安
wctaipei
0
50
網路爬蟲與 WordPress 防禦機制 / Anti-scraping and WordPress Security Defence_Terry Lin
wctaipei
0
390
404 Not found 遇得多;402 有見過麼?探討現有的網上內容流通性和網頁的收入模式。 / “404 Not Found” is Common, But Have You Seen “402 Payment Required”?_高重建 / Kin Ko
wctaipei
0
100
新手也能透過 WooCommerce 架出百萬電商(實際案例分享)/ Real World Building WooCommerce Site for Beginners_廖震宇 / Andy Liao
wctaipei
0
310
我的 WordPress 全端優化經驗 / Complete Guide of Optimizing WordPress_蕭宗仁 / Josh Hsiao
wctaipei
0
98
攝影師的子彈 – 圖片 SEO 戰爭 / Photographer’s Bullet – Image SEO War_Edwin Lin
wctaipei
0
320
國際電商都在用的心理行銷,你還不知道嗎? / The Psychology Behind eCommerce_林文攀 / Peter Lin
wctaipei
0
180
Other Decks in Technology
See All in Technology
MapLibreとAmazon Location Service
dayjournal
1
150
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
110
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
4
4.7k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
750
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6.1k
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.6k
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
150
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.9k
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
770
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
68
8.6k
A better future with KSS
kneath
231
16k
Why Our Code Smells
bkeepers
PRO
331
56k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Docker and Python
trallard
34
2.7k
GraphQLとの向き合い方2022年版
quramy
32
12k
Building Applications with DynamoDB
mza
88
5.6k
Typedesign – Prime Four
hannesfritz
36
2.1k
How to Ace a Technical Interview
jacobian
272
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
BBQ
matthewcrist
80
8.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
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!