Cena-DTA PHP Conference 2011 Slides

Cena-DTA ： HTML5 のローカル DB を使ったアプリ開発 https://github.com/asaokamei/Cena-DTA 亀井亜佐夫 @asao_jp WorkSpot.JP

About Cena-DTA
C ena E ntity N otation and A ugmentation
Source Code at GitHub
https://github.com/asaokamei/Cena-DTA
GPL v2
Documents at
http://www.workspot.jp/cena/ja/index.php
http://www.workspot.jp/cena/index.php

About me
ワークスポット・ジェーピー
http://www.workspot.jp/
http://twitter.com/asao_jp
Simple勉強会
ウェブサイト開発（PHP+DB）
2002 ～現在
その他
日本人、男性、年齢：46才

About my past...
University of Idaho , M.E. 1989~1994
Etak , Menlo Park, 1994~2000
カーナビ開発
title: Program Manager
Workspot, inc. , Palo Alto, 2000~2001
Remote Linux Desktop Server
App development for OmniSky ＝Palm＋Wireless Modem,
One of seven founders!!!
title: VP of Engineering

about Cena-DTA

HTML5 is coming to your web browser
HTML5 = More DataBases!!!
Web Storage (x2)
Simple session storage & local stroage
Web Sql Database
= sqlite = Relational Database!
abandoned... but works in Chrome, Safari, etc.
Web Indexed Database
this is the future...

Database's Everywhere! HTML5 browser brings Database to everywhere. server Master Database PC local db smart phone local db notebook local db

Master and Local Databases
download all data
from master -> local DB.
edit at local DB
create and modify many data and relations .
upload edited data
synchronize local and master DB .

Synchronizing Relational Data
...but synchronizing relationship with auto-numbered id is not easy. (I think.)

Synchronizing Relational Data #1 create table contact( contact_id SERIAL, name text ); create table connect( connect_id SERIAL, contact_id int, method text ); contact_id name 9 Alan 10 George connect_id contact_id method 100 9 twitter 101 10 facebook 102 10 Tumblr

Synchronizing Relational Data #2 contact_id name 9 Alan 10 George 11 Taro connect_id contact_id method 100 11 twitter 101 10 facebook 102 10 Tumblr 103 11 Google+ created: contact_id=11, name=Taro modified: connect_id=100 contact_id=11 created: connect_id=103 contact_id=11 method=Google+ ローカル DB で追加・修正

Synchronizing Relational Data #3 contact_id name 9 Alan 10 George 11 Giro 12 Taro connect_id contact_id method 100 11 twitter 101 10 facebook 102 10 Tumblr 103 11 mixi 104 11 Google+ contact_id=11 already occupied! relation to contact_id=11 is broken! サーバーと同期すると･･･ ID を付け替えればいいのですが、とても面倒 ...

Cena-DTA's Objectives
データベース間の同期処理
自動連番IDを使った関係を維持する。
各データの項目ごとに更新する。
できるだけ上書きを避ける。
テンプレートベースの簡単開発
できるだけ簡単に。

Introducing Cena-DTA #1
<form action=”/connect/mod/100/”>
<input type=”text” name=” method ” value=” twitter ”> <input type=”hidden” name=” contact_id ” value=” 11 ”>
</form>

Introducing Cena-DTA #2
<form action=”/Cena/”> <input name=” Cena[connect][mod][100][method] ” value=” twitter ”>
<input name=” Cena[connect][new][103][method] ” value=” Google+ ”>
<input name=” Cena[contact][new][11][name] ” value=” Taro ”>
<input name=” Cena[connect][mod][100][contact_id] ” value=” Cena.contact.new.11 ”>
<input name=” Cena[connect][new][103][contact_id] ” value=” Cena.contact.new.11 ”>

Introducing Cena-DTA #3 12 12 Cena.contact.new.11 contact_id=11 name=Taro 12

Cena Protocol
Cena.model.type.id . action (.column)=value
cena_id :
scheme: 'Cena'
model: table, AR, etc.
type:
get: from master db,
new: added at local db.
id: primary key
action (state?):
set, rel, or del.
or maybe a state...
column:
no column for del.
value:
string value, or
cena_id for action=rel.

Cena-DTA Demo create table contact100 ( contact_id SERIAL, name text, gender char(1), type char(1), date date, ); create table contact110 ( connnect_id SERIAL, contact_id int, method text, type char(1) );

inside Cena-DTA

Cena-DTA Overview
Server Side: PHP
cenaPhp
requires PHP5.3 (or above) and MySql (PDO).
Client Side: jQuery's plug-in
jqCena : template, utilities
jqCenaSql : interface for WebSqlDatabase
requires WebSqlDatabase and jQuery.
works on Chrome, and probably on Safari...

Cena-DTA Overview server side html5 browsers html form ajax ORM/database WebSqlDB HTML5 display/web forms internet

Cena Protocol Formats
Web form style
Cena[model][type][id][action][column]=value
Compact style
Cena.model.type.id
Cena Envelope
Cena protocol in JSON style

Cena Envelope
Cena protocol in JSON format.
example:
{ cena_id: “Cena.connect.new.103”, type: “new”, model: “connect”, id: “103”, set: { name: “Google+” }, rel: { contact_id: “Cena.contact.new.11” } }
(need better naming...)

Client Side: cenaJq Overview html5 browsers ajax HTML5 display HTML5 template WebSqlDB WebIndexDB internet

Client Side: HTML5 template <table id=" cena_post "> <tr id=" cena_env_src " style="display:none;"> <td> <input type="text" name=" contact_name " class=" cena_element " /> <span class=" cena_element " cena="cena_id" ></span> </td> <td align="center"> <label> <input type="radio" name=" contact_gender " class=" cena_element " value="1">male</label><br> <label> <input type="radio" name=" contact_gender " class=" cena_element " value="2">female</label> </td>...

Client Side: data and template var callback100 = function( env_data ) { $() .cena( { // initialize cena. env_src: ' #cena_env_src ', // source envelop id. env_post: ' #cena_post ', // id to post bound envelope. bind_type: ' replace ' // show contents. }) .cena( 'add', env_data ) .cena( 'bind' ) .cena( 'clean' ) ; } bind_type: - replace : 内容の表示 - populate : フォームとして表示

Client Side: retrieving data $() .cena( 'restart' ); $() .cenaSql() .cenaSql( 'find', // set search options #2 { column: opts.find_column, value : opts.find_value, type : opts.find_type }) .cenaSql( { // set search options #1 model: 'dao_contact100', offset: opts.contact_offset, limit: opts.contact_limit, order: opts.order_column, ascend: opts.order_ascend }) .cenaSql( 'get', callback100 ) ;

Client Side: local DB table structure create table if not exists cena_env( cena_name text unique, cena_id, scheme, model, type, id integer, act, column, value, state ); テーブルひとつで作ってます。初期設計のままなので、構造は変更する予定･･･

Server Side: cenaPhp sql wrapper data model active record Cena maps ORM internet browser

Server Side: saving data to DB static function proc_cena( &$cena_recs, $doAct=NULL ) { $do_models = self::$models; foreach( $do_models as $model ) { // for all models foreach( $get_types as $type => $get_ids ) { // for all types foreach( $get_ids as $id => $actions ) { // for all ids $cena = Cena::getCena( $model, $type , $id ); $cena->manipulate( $actions ); try { if( have_value( $doAct ) ) $cena->do_function( $doAct ); } catch( ormDataInvalid_DbaRecord_Exception $e ) { $num_err ++; } $cena_recs[ $model ][] = $cena; } // end loop on ids } // end loop on types } // end loop on models }

summary

Similar Technologies...
Random ID
used by persistent.js, parse.com, Google Calendar
GUID (Globaly Unique ID) by Microsoft
used by MS Access
sqlAnywhere by Sybase
use ODBC to issue SQL statement to master db?
conversion table patent by SAP?
a patent I found somewhere...

Cena-DTA's Strength
Cena-DTAの特徴
確実に同期できる（はず）
一般的なRDBに対して摘要可能
既存のRDBにも摘要可能？
KVとRDBの橋渡し的な存在？
ORMを利用する
セキュリティの強化。

and Weaknesses...
問題点
簡単、ではないかも。
クライアント側でget/newを追いかける必要あり
ORM依存？
Active Record
しかも俺々ライブラリ…
特許取得済み

Future Plan
Improve demo
Support Web Indexed Database.
Security issue.
AJAX download/upload data, many-to-many, i18n support, etc.
Refactor code and protocol
Other language/platform???
Need killer demo/application/service!

End of Presentation ご清聴ありがとうございました。

Cena-DTA PHP Conference 2011 Slides

by Asao Kamei on Sep 10, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 11

Statistics

Cena-DTA PHP Conference 2011 Slides — Presentation Transcript

http://paper.li	8
http://localhost	3