Cena-DTA PHP Conference 2011 Slides
Upcoming SlideShare
Loading in...5
×
 

Cena-DTA PHP Conference 2011 Slides

on

  • 1,659 views

Presentation slides for Cena-DTA in PHP Conference 2011, Tokyo.

Presentation slides for Cena-DTA in PHP Conference 2011, Tokyo.

Statistics

Views

Total Views
1,659
Views on SlideShare
1,648
Embed Views
11

Actions

Likes
1
Downloads
2
Comments
0

2 Embeds 11

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

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Cena-DTA PHP Conference 2011 Slides Cena-DTA PHP Conference 2011 Slides Presentation Transcript

  • 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.
  • demo
  • 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=&quot; cena_post &quot;> <tr id=&quot; cena_env_src &quot; style=&quot;display:none;&quot;> <td> <input type=&quot;text&quot; name=&quot; contact_name &quot; class=&quot; cena_element &quot; /> <span class=&quot; cena_element &quot; cena=&quot;cena_id&quot; ></span> </td> <td align=&quot;center&quot;> <label> <input type=&quot;radio&quot; name=&quot; contact_gender &quot; class=&quot; cena_element &quot; value=&quot;1&quot;>male</label><br> <label> <input type=&quot;radio&quot; name=&quot; contact_gender &quot; class=&quot; cena_element &quot; value=&quot;2&quot;>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 ご清聴ありがとうございました。