More Related Content
Similar to Hands on PhotoBlog App with WordPress REST API and App Inventor (20)
Hands on PhotoBlog App with WordPress REST API and App Inventor
- 1. WCT2015LT: PhotoBlog App
(App Inventor + WP REST
API)
2015/10/31
http://edu2web.com/
https://github.com/edu2web
https://twitter.com/edu2web
https://www.facebook.com/edu2web/
- 2. 自己紹介
システムエンジニア
◦ XOOPS, WordPress
◦ LAMP, Infrastructure
◦ EC SI, VoIP SI
◦ OS, Distributed System
講師
◦ E-Learning
◦ Distributed Social Network
◦ Digital Library
- 5. 目次
WordPressでWeb Service
◦ WordPress (WP REST API + BASIC Auth)
◦ cURLでWP REST APIの検証
MIT App InventorでApp作成
◦ MIT App Inventor 開発環境
◦ デザイナー画面でデザイン
◦ ブロック画面でカラフルパズル
デモ(App, ブラウザ)
- 6. WordPressでWeb Service
Publishing方法
◦ 管理画面から手動
◦ XML-RPC通じて
◦ WP REST API利用
WP REST APIとは
◦ プラグイン形式でWordPressに API機
能を追加
コアに組み込み予定?
◦ ほぼすべてWordPressのAPI利用可能
◦ http://wp-api.org/
Cloud ああ
- 7. WP REST API プラグイン
WordPressサイト構築
プラグインのインストール
◦ WordPress plugin directoryから最新版
(V1系)JSON REST API 検索してイン
ストール
◦ 有効化
- 8. BASIC Auth プラグイン
書き込みには認証が必要
◦ Using the cookies
◦ OAuth
◦ Basic Authentication
一番簡単なBASIC Authで実験
◦ Githubからプラグインをダウンロード
◦ 有効化
$ git clone https://github.com/WP-API/Basic-Auth basicAuth
- 9. cURLでWP REST APIの検証
写真をWPメディアにアップ
記事の投稿
Post Photo File
Photo URL
Create a Post
Post URL
[chen@luna ~]$ curl --user test:password -H 'Content-
Type:image/jpeg' -H 'Content-Disposition: attachment;
filename=“PhotoBlog.jpg"' -X POST http://wp-api.pw/wp-
json/media --data-binary @/home/chen/PhotoBlog.jpg
[chen@luna ~]$ cat data.json
{
"title": "This is a post",
"content_raw": "This is some content"
}
[chen@luna ~]$ curl --user test:password -X POST
http://wp-api.pw/wp-json/posts --data @data.json
- 10. MIT App InventorでApp作成
パズルのような部品を組み
合わせてイベントを組み立
て、App作成
初心者(小学5年生から?)で
もAppクリエイターに
http:// appinventor.mit.edu/
- 11. MIT App Inventor 開発環境
http://ai2.appinventor.mit.edu/
デバッグ
◦ エミュレータ
◦ Android実機にMIT AI2 Companion
ブラウザIDE
◦ Projects
◦ Designer
◦ Blocks
- 14. ブロック:写真をWPにアップ
[chen@luna ~]$ curl --user test:password -H 'Content-
Type:image/jpeg' -H 'Content-Disposition: attachment;
filename=“PhotoBlog.jpg"' -X POST http://wp-api.pw/wp-
json/media --data-binary @/home/chen/PhotoBlog.jpg
- 15. ブロック:写真添付記事の投稿
[chen@luna ~]$ cat data.json
{
"title": "This is a post",
"content_raw": "This is some content"
}
[chen@luna ~]$ curl --user
test:password -X POST http://wp-
api.pw/wp-json/posts --data @data.json
- 18. まとめ
WordPress REST API はすごい
MIT App Inventor はすごい
初心者でも 簡単にPhotoBlog App
Google Playに公開も可能
Android カメラだけではなく、位置情報
など様々なセンサー情報もPublishing可
能
詳しくは
◦ http://edu2web.com/photoblog/
◦ http://edu2web.com/