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
110
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
120
WordPress 基本安全性檢測與防範方式 / WordPress Security Check and How to Prevent Them_呂明璋 / John Lu
wctaipei
0
540
Troubleshooting WooCommerce Subscriptions Renewal_Siew Kam Onn / 蕭錦安
wctaipei
0
68
網路爬蟲與 WordPress 防禦機制 / Anti-scraping and WordPress Security Defence_Terry Lin
wctaipei
0
440
404 Not found 遇得多;402 有見過麼?探討現有的網上內容流通性和網頁的收入模式。 / “404 Not Found” is Common, But Have You Seen “402 Payment Required”?_高重建 / Kin Ko
wctaipei
0
130
新手也能透過 WooCommerce 架出百萬電商(實際案例分享)/ Real World Building WooCommerce Site for Beginners_廖震宇 / Andy Liao
wctaipei
0
360
我的 WordPress 全端優化經驗 / Complete Guide of Optimizing WordPress_蕭宗仁 / Josh Hsiao
wctaipei
0
110
攝影師的子彈 – 圖片 SEO 戰爭 / Photographer’s Bullet – Image SEO War_Edwin Lin
wctaipei
0
400
國際電商都在用的心理行銷,你還不知道嗎? / The Psychology Behind eCommerce_林文攀 / Peter Lin
wctaipei
0
210
Other Decks in Technology
See All in Technology
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
160
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
160
横断組織として考える共通DBの課題解決 〜 桃園の誓いアーキテクチャ 〜 / Addressing Shared Database Challenges as Cross-Team: “Peach Garden Oath” Architecture
4geru
0
240
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
270
Road to Single Activity
yurihondo
2
240
エムスリーエビデンス創出プロダクトチーム紹介資料 / Introduction of M3 Create Evidence Team
m3_engineering
0
160
Next.js のページ遷移を全力で止める
ypresto
9
3.6k
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
210
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
420
Kubernetesって何? -大規模なKubernetesを運用するKubernetes as a Serviceチームの話を添えて-
lycorptech_jp
PRO
5
1.3k
サプライチェーン攻撃に備える
ryunen344
0
400
自作Cコンパイラ 8時間の奮闘
soukouki
0
860
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
56k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
A Modern Web Designer's Workflow
chriscoyier
692
190k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Designing with Data
zakiwarfel
98
5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
We Have a Design System, Now What?
morganepeng
48
7.1k
YesSQL, Process and Tooling at Scale
rocio
167
14k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Code Review Best Practice
trishagee
62
16k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
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!