Enviar pesquisa
Carregar
Vtecx20151216 2
•
0 gostou
•
673 visualizações
Shinichiro Takezaki
Seguir
フロントエンドエンジニアの価値を高めるBaaS(vte.cx) セミナー資料#2
Leia menos
Leia mais
Internet
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 54
Baixar agora
Baixar para ler offline
Recomendados
オープン・データの技術としてのLinked Data
オープン・データの技術としてのLinked Data
National Institute of Informatics (NII)
データマイニングとは
データマイニングとは
ripper0217
Enterpriseapi20160210
Enterpriseapi20160210
Shinichiro Takezaki
正しくないものをつくらない。7つの失敗パターン
正しくないものをつくらない。7つの失敗パターン
toshihiro ichitani
逆境からのアジャイル
逆境からのアジャイル
toshihiro ichitani
4つの戦犯から考えるサービスづくりの失敗
4つの戦犯から考えるサービスづくりの失敗
toshihiro ichitani
My sql s1
My sql s1
Jun Chiba
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
Recruit Lifestyle Co., Ltd.
Recomendados
オープン・データの技術としてのLinked Data
オープン・データの技術としてのLinked Data
National Institute of Informatics (NII)
データマイニングとは
データマイニングとは
ripper0217
Enterpriseapi20160210
Enterpriseapi20160210
Shinichiro Takezaki
正しくないものをつくらない。7つの失敗パターン
正しくないものをつくらない。7つの失敗パターン
toshihiro ichitani
逆境からのアジャイル
逆境からのアジャイル
toshihiro ichitani
4つの戦犯から考えるサービスづくりの失敗
4つの戦犯から考えるサービスづくりの失敗
toshihiro ichitani
My sql s1
My sql s1
Jun Chiba
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
Recruit Lifestyle Co., Ltd.
Vtecx solution
Vtecx solution
Shinichiro Takezaki
Lt20190129
Lt20190129
Shinichiro Takezaki
Real techlt20180829
Real techlt20180829
Shinichiro Takezaki
Bpstudy20180725
Bpstudy20180725
Shinichiro Takezaki
11 29プレゼン資料
11 29プレゼン資料
Shinichiro Takezaki
React vtecx20171129
React vtecx20171129
Shinichiro Takezaki
20171025 date picker説明資料
20171025 date picker説明資料
Shinichiro Takezaki
React vtecx20171025
React vtecx20171025
Shinichiro Takezaki
Web study20171007
Web study20171007
Shinichiro Takezaki
React vtecx20170920
React vtecx20170920
Shinichiro Takezaki
React vtecx20170822
React vtecx20170822
Shinichiro Takezaki
Builderscon Tokyo 2017
Builderscon Tokyo 2017
Shinichiro Takezaki
Vtecx20151216
Vtecx20151216
Shinichiro Takezaki
Vtecxlt20151201
Vtecxlt20151201
Shinichiro Takezaki
Angularreflex20141210
Angularreflex20141210
Shinichiro Takezaki
No nosql20130424
No nosql20130424
Shinichiro Takezaki
BPStudy20121221
BPStudy20121221
Shinichiro Takezaki
Gaeja20121130
Gaeja20121130
Shinichiro Takezaki
Reflex works20120818 1
Reflex works20120818 1
Shinichiro Takezaki
Groovyコンファレンス
Groovyコンファレンス
Shinichiro Takezaki
Mais conteúdo relacionado
Mais de Shinichiro Takezaki
Vtecx solution
Vtecx solution
Shinichiro Takezaki
Lt20190129
Lt20190129
Shinichiro Takezaki
Real techlt20180829
Real techlt20180829
Shinichiro Takezaki
Bpstudy20180725
Bpstudy20180725
Shinichiro Takezaki
11 29プレゼン資料
11 29プレゼン資料
Shinichiro Takezaki
React vtecx20171129
React vtecx20171129
Shinichiro Takezaki
20171025 date picker説明資料
20171025 date picker説明資料
Shinichiro Takezaki
React vtecx20171025
React vtecx20171025
Shinichiro Takezaki
Web study20171007
Web study20171007
Shinichiro Takezaki
React vtecx20170920
React vtecx20170920
Shinichiro Takezaki
React vtecx20170822
React vtecx20170822
Shinichiro Takezaki
Builderscon Tokyo 2017
Builderscon Tokyo 2017
Shinichiro Takezaki
Vtecx20151216
Vtecx20151216
Shinichiro Takezaki
Vtecxlt20151201
Vtecxlt20151201
Shinichiro Takezaki
Angularreflex20141210
Angularreflex20141210
Shinichiro Takezaki
No nosql20130424
No nosql20130424
Shinichiro Takezaki
BPStudy20121221
BPStudy20121221
Shinichiro Takezaki
Gaeja20121130
Gaeja20121130
Shinichiro Takezaki
Reflex works20120818 1
Reflex works20120818 1
Shinichiro Takezaki
Groovyコンファレンス
Groovyコンファレンス
Shinichiro Takezaki
Mais de Shinichiro Takezaki
(20)
Vtecx solution
Vtecx solution
Lt20190129
Lt20190129
Real techlt20180829
Real techlt20180829
Bpstudy20180725
Bpstudy20180725
11 29プレゼン資料
11 29プレゼン資料
React vtecx20171129
React vtecx20171129
20171025 date picker説明資料
20171025 date picker説明資料
React vtecx20171025
React vtecx20171025
Web study20171007
Web study20171007
React vtecx20170920
React vtecx20170920
React vtecx20170822
React vtecx20170822
Builderscon Tokyo 2017
Builderscon Tokyo 2017
Vtecx20151216
Vtecx20151216
Vtecxlt20151201
Vtecxlt20151201
Angularreflex20141210
Angularreflex20141210
No nosql20130424
No nosql20130424
BPStudy20121221
BPStudy20121221
Gaeja20121130
Gaeja20121130
Reflex works20120818 1
Reflex works20120818 1
Groovyコンファレンス
Groovyコンファレンス
Vtecx20151216 2
1.
vte.cxの基礎知識
2.
アカウント登録〜Hello Worldまで Qiitaの記事に説明が書いてあるので、そちらを見ながら行っていきます。 「Qiita アカウント登録〜Hello Worldまで」 と検索
3.
記事を見ながら説明
4.
Hello Worldが表示できたら説明
5.
vte.cxのデータ構造と階層 vte.cxではどのようなデータ構造でどのようなデータ管理を行っているのか
6.
データはURLベースでアクセスする
7.
リソースデータへのアクセスの仕方 h2ps://{自分のサービス}.vte.cx/d/hoge URLパスの基本形 これで「/hoge」データにアクセスできる 「/hoge」データを登録していた場合
8.
URLのパスは基本的に「/d」から始まる ○○○○データにアクセスする場合: h8ps://{自分のサービス}.vte.cx /d /○○○○ ××××データにアクセスする場合: h8ps://{自分のサービス}.vte.cx /d /××××
9.
URLのパスは基本的に「/d」から始まる /dはデータにアクセスするためのAPI 「/d」としているのは対象がリソースデータであることを示す意味があります。 ○○○○データにアクセスする場合: h8ps://{自分のサービス}.vte.cx /d /○○○○ ××××データにアクセスする場合: h8ps://{自分のサービス}.vte.cx /d /××××
10.
データはディレクトリ構造で 成り立って、自由に構築できる
11.
ディレクトリ構造の例 h8p://{自分のサービス}.vte.cx/d /hoge /hoge1 /hoge2 /foo /foo1 /foo1_child1 /foo1_child2 /foo2
12.
ディレクトリ構造の例 h8p://{自分のサービス}.vte.cx/d /hoge /hoge1 /hoge2 /foo /foo1 /foo1_child1 /foo1_child2 /foo2 こういったディレクトリ構造を 自由に構築できます
13.
データの形式は どうなっているのか?
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.
データの形式は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.
<feed> <entry> fooデータ </entry> </feed> <feed> <entry> /hoge/hoge1データ </entry> </feed> <feed> <entry> hogeデータ </entry> </feed> 全体の構造をまとめると h8p://{自分のサービス}.vte.cx/d /hoge /hoge1 /foo
17.
実際にデータにアクセスしてみる
18.
下記のURLをブラウザで開いてみてください h8ps://{自分のサービス}.vte.cx/d/_group?x
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.
下記の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.
ちなみに h8ps://{自分のサービス}.vte.cx/d/_group URLになにもパラメータをつけないとJSON形式で取得できます。 セキュリティ上、ブラウザで表示はできませんが、 JavascriptではJSON形式で確認することができます。
22.
クライアントから通信する方法
23.
Ajax通信でアクセスする クライアント側からサーバーにアクセスする場合は、Ajax通信を行います。 Ajax通信とは、クライアントとサーバー間の通信を行う標準的な方法です。 サーバー クライアント Ajax通信 リクエスト レスポンス
24.
jQueryでサーバにデータ登録する
25.
データの登録方法には2種類ある ①キーを自動採番して登録 ②キーを指定して登録
26.
POSTリクエストのデモページ 自動採番する登録: h8ps://test.1.vte.cx/post.html キーを指定して登録 h8ps://test.1.vte.cx/post2.html
27.
自動採番とは
28.
自動採番とはサービスで一意の識別番号 ・文字どおり、サーバがデータに自動的に付与する番号(キー)です。 ・データを登録した時にそのURLが重複しないようにサーバー側で 他のデータと重複しない一意の番号が割り振られます。 ・指定された登録先の配下に自動番号が付与されたデータが登録されます。 /hoge ここを登録先とする /1-1-1-1231231 /1-1-1-1287911 /hoge配下に 自動採番された データが登録さ れる
29.
キーを指定して登録する方法
30.
キーを指定して登録するおさらい ・キーを指定して登録する場合は、自分でデータに名前(キー)をつける ・データのキーはlink項目のhref属性に入力し、rel属性をselfとする ・同じ階層に同じ名前があった場合はエラーとなる /hoge /test /abcde Link項目のhref属性が「/hoge」 Link項目のhref属性が「/test」 Link項目のhref属性が「/abcde」
31.
jQueryでデータを取得する
32.
データの取得方法には2種類ある ① 単体を取得する ② 一覧を取得する
33.
GETリクエストのデモページ h8ps://test.1.vte.cx/get.html
34.
データ取得のおさらい ・単体データを取得する場合は「?e」パラメータを使用する ・一覧を取得したい場合は、「?f」パラメータを使用する GET /hoge?e hogeデータの単体取得 hoge配下のデータ一覧取得 GET /hoge?f
35.
jQueryでデータを更新する
36.
データの更新方法には2種類ある ① 楽観的排他をする更新 ② 楽観的排他をしない更新
37.
PUTリクエストのデモページ 楽観的排他をする更新: h8ps://test.1.vte.cx/put.html 楽観的排他をしない更新 h8ps://test.1.vte.cx/put2.html
38.
データ更新のおさらい ・データの更新先はlink項目のrel=“self”を参照している ・更新の際は、id項目のリビジョン管理を行っており、サーバと不一致な場合、 楽観的排他が発生する ・id項目を省略し、強制的に更新も行えるが、楽観的排他をすることを 推奨する。 リクエストのid: /hoge, 1 更新成功 サーバのid: /hoge, 1 リビジョン番号が一致
39.
jQueryでデータを削除する
40.
データの削除方法には3種類ある ① 一件削除 ② 全件削除
41.
DELETEリクエストのデモページ 一件削除: h8ps://test.1.vte.cx/delete.html 全件削除 h8ps://test.1.vte.cx/delete2.html
42.
では、このような子供がいるデータ一覧 を削除したい場合はどうすればいいか
43.
データ削除のおさらい ・一件削除にも楽観的排他を行う方法と行わない方法がある ・全件削除したい場合は「?_rf」を使用する 一件削除: DELETE /d/hoge 全件削除: DELETE /d/hoge?_rf
44.
これでjQueryを使ったデータの操作 方法については終わりです
45.
スキーマについて
46.
スキーマとは ・ 自分が決めた項目名に値を入れて保存したい ・ スキーマを定義することで任意の項目に 任意のデータを保存することが可能 ・ データの設計図の役割 ・ IndexやACLなどをサーバで管理
47.
スキーマの形 userinfo id(int) email favorite food!=^.{3}$ music=^.{5}$ hobby{} type name updated(date) スキーマの形
48.
スキーマの形 userinfo id(int) email favorite food!=^.{3}$ music=^.{5}$ hobby{} type name updated(date) スキーマの形 サーバに登録すると
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.
スキーマの登録方法 vtecblankプロジェクト /setup /_serngs template
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.
スキーマの登録方法 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.
スキーマについては記事を参照してください スキーマには項目名にバリデーションやindexをつけることもできます。 非常に便利な機能ですので、是非使用してみてください。 「Qiita vte.cx スキーマ定義」で検索
54.
以上で終わります。 また、ここでは時間の関係上、説明しきれていない大事な情報がたくさんあります。 「vte.cx Advent Calendar 2015」で検索 ご静聴ありがとうございました。
Baixar agora