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

Cena-DTA PHP Conference 2011 Slides

  • 1,560 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,560
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Cena-DTA : HTML5 の ローカル DB を使った アプリ開発 https://github.com/asaokamei/Cena-DTA 亀井 亜佐夫 @asao_jp WorkSpot.JP
  • 2. About Cena-DTA
    • C ena E ntity N otation and A ugmentation
    • 3. Source Code at GitHub
      • https://github.com/asaokamei/Cena-DTA
      • 4. GPL v2
    • Documents at
      • http://www.workspot.jp/cena/ja/index.php
      • 5. http://www.workspot.jp/cena/index.php
  • 6. About me
    • ワークスポット・ジェーピー
      • http://www.workspot.jp/
      • 7. http://twitter.com/asao_jp
      • 8. Simple勉強会
    • ウェブサイト開発(PHP+DB)
    • 9. 2002 ~ 現在
    • 10. その他
      • 日本人、男性、年齢:46才
  • 11. About my past...
    • University of Idaho , M.E. 1989~1994
    • 12. Etak , Menlo Park, 1994~2000
      • カーナビ開発
          • title: Program Manager
    • Workspot, inc. , Palo Alto, 2000~2001
      • Remote Linux Desktop Server
      • 13. App development for OmniSky =Palm+Wireless Modem,
          • One of seven founders!!!
          • 14. title: VP of Engineering
  • 15. about Cena-DTA
  • 16. HTML5 is coming to your web browser
    • HTML5 = More DataBases!!!
      • Web Storage (x2)
        • Simple session storage & local stroage
      • Web Sql Database
        • = sqlite = Relational Database!
        • 17. abandoned... but works in Chrome, Safari, etc.
      • Web Indexed Database
        • this is the future...
  • 18. Database's Everywhere! HTML5 browser brings Database to everywhere. server Master Database PC local db smart phone local db notebook local db
  • 19. 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 .
  • 20. Synchronizing Relational Data
        ...but synchronizing relationship with auto-numbered id is not easy. (I think.)
  • 21. 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
  • 22. 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 で追加・修正
  • 23. 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 を付け替えればいいのですが、とても面倒 ...
  • 24. Cena-DTA's Objectives
    • データベース間の同期処理
      • 自動連番IDを使った関係を維持する。
    • 各データの項目ごとに更新する。
      • できるだけ上書きを避ける。
    • テンプレートベースの簡単開発
      • できるだけ簡単に。
  • 25. 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>
  • 26. 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 ”>
  • 27. Introducing Cena-DTA #3 12 12 Cena.contact.new.11 contact_id=11 name=Taro 12
  • 28. Cena Protocol
    • Cena.model.type.id . action (.column)=value
      • cena_id :
        • scheme: 'Cena'
        • 29. model: table, AR, etc.
        • 30. type:
          • get: from master db,
          • 31. new: added at local db.
        • id: primary key
      • action (state?):
        • set, rel, or del.
        • 32. or maybe a state...
      • column:
        • no column for del.
      • value:
        • string value, or
        • 33. cena_id for action=rel.
  • 34. demo
  • 35. 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) );
  • 36. inside Cena-DTA
  • 37. Cena-DTA Overview
    • Server Side: PHP
      • cenaPhp
        • requires PHP5.3 (or above) and MySql (PDO).
    • Client Side: jQuery's plug-in
      • jqCena : template, utilities
      • 38. jqCenaSql : interface for WebSqlDatabase
        • requires WebSqlDatabase and jQuery.
        • 39. works on Chrome, and probably on Safari...
  • 40. Cena-DTA Overview server side html5 browsers html form ajax ORM/database WebSqlDB HTML5 display/web forms internet
  • 41. 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
  • 42. 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...)
  • 43. Client Side: cenaJq Overview html5 browsers ajax HTML5 display HTML5 template WebSqlDB WebIndexDB internet
  • 44. 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>...
  • 45. 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 : フォームとして表示
  • 46. 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 ) ;
  • 47. 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 ); テーブルひとつで作ってます。 初期設計のままなので、構造は変更する予定・・・
  • 48. Server Side: cenaPhp sql wrapper data model active record Cena maps ORM internet browser
  • 49. 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 }
  • 50. summary
  • 51. 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...
  • 52. Cena-DTA's Strength
    • Cena-DTAの特徴
      • 確実に同期できる(はず)
      • 53. 一般的なRDBに対して摘要可能
        • 既存のRDBにも摘要可能?
        • 54. KVとRDBの橋渡し的な存在?
      • ORMを利用する
        • セキュリティの強化。
  • 55. and Weaknesses...
    • 問題点
      • 簡単、ではないかも。
        • クライアント側でget/newを追いかける必要あり
      • ORM依存?
        • Active Record
        • 56. しかも俺々ライブラリ…
      • 特許取得済み
  • 57. Future Plan
    • Improve demo
      • Support Web Indexed Database.
      • 58. Security issue.
      • 59. AJAX download/upload data, many-to-many, i18n support, etc.
    • Refactor code and protocol
    • 60. Other language/platform???
    • 61. Need killer demo/application/service!
  • 62. End of Presentation ご清聴ありがとうございました。