O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Hands on PhotoBlog App with WordPress REST API and App Inventor

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 18 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a Hands on PhotoBlog App with WordPress REST API and App Inventor (20)

Mais recentes (20)

Anúncio

Hands on PhotoBlog App with WordPress REST API and App Inventor

  1. 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. 2. 自己紹介  システムエンジニア ◦ XOOPS, WordPress ◦ LAMP, Infrastructure ◦ EC SI, VoIP SI ◦ OS, Distributed System  講師 ◦ E-Learning ◦ Distributed Social Network ◦ Digital Library
  3. 3. 最近はまっているのは Cloud ああ
  4. 4. WCT2015LT: PhotoBlog App Cloud ああ • More Publishingテーマに合う • WordPress対応App作りの体験 • WordPress REST API 体験 • PG初心者でも作れる • カスタマイズ可能
  5. 5. 目次  WordPressでWeb Service ◦ WordPress (WP REST API + BASIC Auth) ◦ cURLでWP REST APIの検証  MIT App InventorでApp作成 ◦ MIT App Inventor 開発環境 ◦ デザイナー画面でデザイン ◦ ブロック画面でカラフルパズル  デモ(App, ブラウザ)
  6. 6. WordPressでWeb Service  Publishing方法 ◦ 管理画面から手動 ◦ XML-RPC通じて ◦ WP REST API利用  WP REST APIとは ◦ プラグイン形式でWordPressに API機 能を追加  コアに組み込み予定? ◦ ほぼすべてWordPressのAPI利用可能 ◦ http://wp-api.org/ Cloud ああ
  7. 7. WP REST API プラグイン  WordPressサイト構築  プラグインのインストール ◦ WordPress plugin directoryから最新版 (V1系)JSON REST API 検索してイン ストール ◦ 有効化
  8. 8. BASIC Auth プラグイン  書き込みには認証が必要 ◦ Using the cookies ◦ OAuth ◦ Basic Authentication  一番簡単なBASIC Authで実験 ◦ Githubからプラグインをダウンロード ◦ 有効化 $ git clone https://github.com/WP-API/Basic-Auth basicAuth
  9. 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. 10. MIT App InventorでApp作成  パズルのような部品を組み 合わせてイベントを組み立 て、App作成  初心者(小学5年生から?)で もAppクリエイターに  http:// appinventor.mit.edu/
  11. 11. MIT App Inventor 開発環境  http://ai2.appinventor.mit.edu/  デバッグ ◦ エミュレータ ◦ Android実機にMIT AI2 Companion  ブラウザIDE ◦ Projects ◦ Designer ◦ Blocks
  12. 12. デザイナー画面
  13. 13. ブロック:写真の撮影  写真を撮る  撮ったイメー ジを画面にセ ット  エラー発生す るとエラー内 容を表示
  14. 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. 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
  16. 16. PhotoBlog Appデモ  Photo スマートフォンのカ メラで写真を撮る  PostFile 写真ファイルをWP のメディアにアップ 写真のリンクを取得  PostBlog 記事に添付写真のリ ンクを付けて投稿
  17. 17. ブラウザで見る
  18. 18. まとめ  WordPress REST API はすごい  MIT App Inventor はすごい  初心者でも 簡単にPhotoBlog App  Google Playに公開も可能  Android カメラだけではなく、位置情報 など様々なセンサー情報もPublishing可 能  詳しくは ◦ http://edu2web.com/photoblog/ ◦ http://edu2web.com/

×