Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vtecx20151216 2

437 views

Published on

フロントエンドエンジニアの価値を高めるBaaS(vte.cx) セミナー資料#2

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Vtecx20151216 2

  1. 1. vte.cxの基礎知識
  2. 2. アカウント登録〜Hello Worldまで Qiitaの記事に説明が書いてあるので、そちらを見ながら行っていきます。 「Qiita アカウント登録〜Hello Worldまで」 と検索
  3. 3. 記事を見ながら説明
  4. 4. Hello Worldが表示できたら説明
  5. 5. vte.cxのデータ構造と階層 vte.cxではどのようなデータ構造でどのようなデータ管理を行っているのか
  6. 6. データはURLベースでアクセスする
  7. 7. リソースデータへのアクセスの仕方 h2ps://{自分のサービス}.vte.cx/d/hoge URLパスの基本形 これで「/hoge」データにアクセスできる 「/hoge」データを登録していた場合
  8. 8. URLのパスは基本的に「/d」から始まる   ○○○○データにアクセスする場合:     h8ps://{自分のサービス}.vte.cx /d /○○○○   ××××データにアクセスする場合:     h8ps://{自分のサービス}.vte.cx /d /××××
  9. 9. URLのパスは基本的に「/d」から始まる /dはデータにアクセスするためのAPI 「/d」としているのは対象がリソースデータであることを示す意味があります。   ○○○○データにアクセスする場合:     h8ps://{自分のサービス}.vte.cx /d /○○○○   ××××データにアクセスする場合:     h8ps://{自分のサービス}.vte.cx /d /××××
  10. 10. データはディレクトリ構造で 成り立って、自由に構築できる
  11. 11. ディレクトリ構造の例 h8p://{自分のサービス}.vte.cx/d /hoge /hoge1 /hoge2 /foo /foo1 /foo1_child1 /foo1_child2 /foo2
  12. 12. ディレクトリ構造の例 h8p://{自分のサービス}.vte.cx/d /hoge /hoge1 /hoge2 /foo /foo1 /foo1_child1 /foo1_child2 /foo2 こういったディレクトリ構造を 自由に構築できます
  13. 13. データの形式は どうなっているのか?
  14. 14. データの形式はATOM(RFC4287)によって表現される <feed> <entry> <author> <uri>urn:vte.cx:created:20</uri> </author> <id>/_group,1</id> <link href="/_group" rel="self"/> <published>2015-12-01T13:39:26.919+09:00</published> <updated>2015-12-01T13:39:26.919+09:00</updated> </entry> </feed>
  15. 15. データの形式はATOM(RFC4287)によって表現されます Feed項目(一覧) Entry項目(1個) データ情報 <feed> <entry> <author> <uri>urn:vte.cx:created:20</uri> </author> <id>/_group,1</id> <link href="/_group" rel="self"/> <published>2015-12-01T13:39:26.919+09:00</published> <updated>2015-12-01T13:39:26.919+09:00</updated> </entry> <entry> </entry> </feed> Entry項目(n個)
  16. 16. <feed> <entry> fooデータ </entry> </feed> <feed> <entry> /hoge/hoge1データ </entry> </feed> <feed> <entry> hogeデータ </entry> </feed> 全体の構造をまとめると h8p://{自分のサービス}.vte.cx/d /hoge /hoge1 /foo
  17. 17. 実際にデータにアクセスしてみる
  18. 18. 下記のURLをブラウザで開いてみてください h8ps://{自分のサービス}.vte.cx/d/_group?x 
  19. 19. 下記のURLをブラウザで開いてみてください h8ps://{自分のサービス}.vte.cx/d/_group?x  <feed> <entry> <author> <uri>urn:vte.cx:created:20</uri> </author> <id>/_group,1</id> <link href="/_group" rel="self"/> <published>2015-12-01T13:39:26.919+09:00</published> <updated>2015-12-01T13:39:26.919+09:00</updated> </entry> </feed>
  20. 20. 下記のURLをブラウザで開いてみてください h8ps://{自分のサービス}.vte.cx/d/_group?x  <feed> <entry> <author> <uri>urn:vte.cx:created:20</uri> </author> <id>/_group,1</id> <link href="/_group" rel="self"/> <published>2015-12-01T13:39:26.919+09:00</published> <updated>2015-12-01T13:39:26.919+09:00</updated> </entry> </feed>
  21. 21. ちなみに h8ps://{自分のサービス}.vte.cx/d/_group URLになにもパラメータをつけないとJSON形式で取得できます。 セキュリティ上、ブラウザで表示はできませんが、 JavascriptではJSON形式で確認することができます。
  22. 22. クライアントから通信する方法
  23. 23. Ajax通信でアクセスする クライアント側からサーバーにアクセスする場合は、Ajax通信を行います。 Ajax通信とは、クライアントとサーバー間の通信を行う標準的な方法です。 サーバー クライアント Ajax通信 リクエスト レスポンス
  24. 24. jQueryでサーバにデータ登録する
  25. 25. データの登録方法には2種類ある ①キーを自動採番して登録 ②キーを指定して登録
  26. 26. POSTリクエストのデモページ 自動採番する登録: h8ps://test.1.vte.cx/post.html キーを指定して登録 h8ps://test.1.vte.cx/post2.html
  27. 27. 自動採番とは
  28. 28. 自動採番とはサービスで一意の識別番号 ・文字どおり、サーバがデータに自動的に付与する番号(キー)です。 ・データを登録した時にそのURLが重複しないようにサーバー側で  他のデータと重複しない一意の番号が割り振られます。 ・指定された登録先の配下に自動番号が付与されたデータが登録されます。 /hoge ここを登録先とする /1-1-1-1231231 /1-1-1-1287911 /hoge配下に 自動採番された データが登録さ れる
  29. 29. キーを指定して登録する方法
  30. 30. キーを指定して登録するおさらい ・キーを指定して登録する場合は、自分でデータに名前(キー)をつける ・データのキーはlink項目のhref属性に入力し、rel属性をselfとする ・同じ階層に同じ名前があった場合はエラーとなる /hoge /test /abcde Link項目のhref属性が「/hoge」 Link項目のhref属性が「/test」 Link項目のhref属性が「/abcde」
  31. 31. jQueryでデータを取得する
  32. 32. データの取得方法には2種類ある ① 単体を取得する ② 一覧を取得する
  33. 33. GETリクエストのデモページ h8ps://test.1.vte.cx/get.html
  34. 34. データ取得のおさらい ・単体データを取得する場合は「?e」パラメータを使用する ・一覧を取得したい場合は、「?f」パラメータを使用する GET /hoge?e hogeデータの単体取得 hoge配下のデータ一覧取得 GET /hoge?f
  35. 35. jQueryでデータを更新する
  36. 36. データの更新方法には2種類ある ① 楽観的排他をする更新 ② 楽観的排他をしない更新
  37. 37. PUTリクエストのデモページ 楽観的排他をする更新: h8ps://test.1.vte.cx/put.html 楽観的排他をしない更新 h8ps://test.1.vte.cx/put2.html
  38. 38. データ更新のおさらい ・データの更新先はlink項目のrel=“self”を参照している ・更新の際は、id項目のリビジョン管理を行っており、サーバと不一致な場合、  楽観的排他が発生する ・id項目を省略し、強制的に更新も行えるが、楽観的排他をすることを  推奨する。 リクエストのid: /hoge, 1 更新成功 サーバのid: /hoge, 1 リビジョン番号が一致
  39. 39. jQueryでデータを削除する
  40. 40. データの削除方法には3種類ある ① 一件削除 ② 全件削除
  41. 41. DELETEリクエストのデモページ 一件削除: h8ps://test.1.vte.cx/delete.html 全件削除 h8ps://test.1.vte.cx/delete2.html
  42. 42. では、このような子供がいるデータ一覧 を削除したい場合はどうすればいいか
  43. 43. データ削除のおさらい ・一件削除にも楽観的排他を行う方法と行わない方法がある ・全件削除したい場合は「?_rf」を使用する 一件削除: DELETE /d/hoge 全件削除: DELETE /d/hoge?_rf
  44. 44. これでjQueryを使ったデータの操作 方法については終わりです
  45. 45. スキーマについて
  46. 46. スキーマとは ・ 自分が決めた項目名に値を入れて保存したい ・ スキーマを定義することで任意の項目に 任意のデータを保存することが可能 ・ データの設計図の役割 ・ IndexやACLなどをサーバで管理
  47. 47. スキーマの形 userinfo id(int) email favorite food!=^.{3}$ music=^.{5}$ hobby{} type name updated(date) スキーマの形
  48. 48. スキーマの形 userinfo id(int) email favorite food!=^.{3}$ music=^.{5}$ hobby{} type name updated(date) スキーマの形 サーバに登録すると
  49. 49. スキーマの形 userinfo id(int) email favorite food!=^.{3}$ music=^.{5}$ hobby{} type name updated(date) スキーマの形 <feed> <entry> <userinfo> <id></id> <email></email> </userinfo> <favorite> <food></food> <music></music> </favorite> ….. </entry> </feed> このようなデータが登録できる ようになる サーバに登録すると
  50. 50. スキーマの登録方法 vtecblankプロジェクト /setup /_serngs template
  51. 51. スキーマの登録方法 vtecblankプロジェクト /setup /_serngs template <feed> <entry> <link href="/_serngs/template" rel="self"/> <contributor> <uri>urn:vte.cx:acl:/_group/$admin,CRUD</uri> </contributor> <contributor> <uri>urn:vte.cx:acl:+,R</uri> </contributor> <content type="text/html">userinfo id(int) email favorite food!=^.{3}$ music=^.{5}$ hobby{} type name updated(date) </content> <rights> userinfo.id:/.+/registrason </rights> </entry> </feed>
  52. 52. スキーマの登録方法 vtecblankプロジェクト /setup /_serngs template <feed> <entry> <link href="/_serngs/template" rel="self"/> <contributor> <uri>urn:vte.cx:acl:/_group/$admin,CRUD</uri> </contributor> <contributor> <uri>urn:vte.cx:acl:+,R</uri> </contributor> <content type="text/html">userinfo id(int) email favorite food!=^.{3}$ music=^.{5}$ hobby{} type name updated(date) </content> <rights> userinfo.id:/.+/registrason </rights> </entry> </feed>
  53. 53. スキーマについては記事を参照してください スキーマには項目名にバリデーションやindexをつけることもできます。 非常に便利な機能ですので、是非使用してみてください。 「Qiita vte.cx スキーマ定義」で検索
  54. 54. 以上で終わります。 また、ここでは時間の関係上、説明しきれていない大事な情報がたくさんあります。 「vte.cx Advent Calendar 2015」で検索 ご静聴ありがとうございました。

×