FLOW3 as RESTful data proxy for Sencha Touch 2 App

4,485 views

Published on

Presented at T3CON12ASIA http://t3con12-asia.typo3.org

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,485
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Welcome\n
  • family owned company, Living in Goa, overall Experience, Inspired by TYPO3 community 2006, certified 2010, enjoy real object oriented programming as Got into FLOW3 last november - amadeus\n
  • - Demand of cross platform applications, - REST API common solution, - FLOW3 as REST API server, key features from FLOW3 - Mvc write less do more, security, cli, account management - Sencha as rest client because of mobile app needs these days, both MVC. - less code snippets. all code in github\n
  • - Demand of cross platform applications, - REST API common solution, - FLOW3 as REST API server, key features from FLOW3 - Mvc write less do more, security, cli, account management - Sencha as rest client because of mobile app needs these days, both MVC. - less code snippets. all code in github\n
  • - Demand of cross platform applications, - REST API common solution, - FLOW3 as REST API server, key features from FLOW3 - Mvc write less do more, security, cli, account management - Sencha as rest client because of mobile app needs these days, both MVC. - less code snippets. all code in github\n
  • How many of you...\n
  • Simple event listing, domain model, REST API design\n
  • \n
  • Generate your code!\n
  • Generate your code!\n
  • Generate your code!\n
  • Generate your code!\n
  • wish account:create part of FLOW3 core\n
  • wish account:create part of FLOW3 core\n
  • wish account:create part of FLOW3 core\n
  • wish account:create part of FLOW3 core\n
  • wish account:create part of FLOW3 core\n
  • wish account:create part of FLOW3 core\n
  • wish account:create part of FLOW3 core\n
  • business logic separated out\n
  • Everything JSON - Custom exception handler to nicely show error reports to REST client\n
  • Everything JSON - Custom exception handler to nicely show error reports to REST client\n
  • Everything JSON - Custom exception handler to nicely show error reports to REST client\n
  • Everything JSON - Custom exception handler to nicely show error reports to REST client\n
  • Everything JSON - Custom exception handler to nicely show error reports to REST client\n
  • why change to RestController, adapt the resourceArgumentName, flow3 selects action based on the request method\n
  • why change to RestController, adapt the resourceArgumentName, flow3 selects action based on the request method\n
  • format based out, e.g. if you need xml or again html, handle associated objects with _descend\n
  • format based out, e.g. if you need xml or again html, handle associated objects with _descend\n
  • arguments, domain service, view assignment, flow3 maps arguments from POST/GET\n
  • Adapt routing for REST calls, register package specific routes\n
  • event uuid, mapped to the event object\n
  • Curl calls to test API, apache logs\n
  • Curl calls to test API, apache logs\n
  • \n
  • kickstart, navigation view, model\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • FLOW3 as RESTful data proxy for Sencha Touch 2 App

    1. 1. FLOW3 as RESTful data proxy for Sencha Touch 2 App as RESTful data proxy for Sencha Touch 2 AppPankaj Lele - pankaj@lelesys.com 1
    2. 2. FLOW3 as RESTful data proxy for Sencha Touch 2 App About me • Pankaj Lele • Electronics graduate • Lelesys Founder Director and CTO • Work and live in Goa, India • @pankajlelePankaj Lele - pankaj@lelesys.com 2
    3. 3. FLOW3 as RESTful data proxy for Sencha Touch 2 App About this talk • REST APIPankaj Lele - pankaj@lelesys.com 3
    4. 4. FLOW3 as RESTful data proxy for Sencha Touch 2 App About this talk • REST API • FLOW3Pankaj Lele - pankaj@lelesys.com 3
    5. 5. FLOW3 as RESTful data proxy for Sencha Touch 2 App About this talk • REST API • FLOW3 • Sencha Touch 2Pankaj Lele - pankaj@lelesys.com 3
    6. 6. FLOW3 as RESTful data proxy for Sencha Touch 2 App Know the audience • Used or developed REST API? • FLOW3? • Any kind of object oriented programming? • Sencha Touch 2?Pankaj Lele - pankaj@lelesys.com 4
    7. 7. FLOW3 as RESTful data proxy for Sencha Touch 2 App Example app Event title description place startTime endTime timeCreated createdByPankaj Lele - pankaj@lelesys.com 5
    8. 8. FLOW3 as RESTful data proxy for Sencha Touch 2 App Example app REST API Event POST /events title description GET /events place startTime GET /events/1234 endTime timeCreated PUT /events/1234 createdBy DELETE /events/1234Pankaj Lele - pankaj@lelesys.com 5
    9. 9. FLOW3 as RESTful data proxy for Sencha Touch 2 App Part I - FLOW3Pankaj Lele - pankaj@lelesys.com 6
    10. 10. FLOW3 as RESTful data proxy for Sencha Touch 2 App Kickstart • PackagePankaj Lele - pankaj@lelesys.com 7
    11. 11. FLOW3 as RESTful data proxy for Sencha Touch 2 App Kickstart • Package • ModelPankaj Lele - pankaj@lelesys.com 7
    12. 12. FLOW3 as RESTful data proxy for Sencha Touch 2 App Kickstart • Package • Model • RepositoryPankaj Lele - pankaj@lelesys.com 7
    13. 13. FLOW3 as RESTful data proxy for Sencha Touch 2 App Kickstart • Package • Model • Repository • ActionController --generate-templates --generate-actions --generate-relatedPankaj Lele - pankaj@lelesys.com 7
    14. 14. FLOW3 as RESTful data proxy for Sencha Touch 2 App Fine tune • Doctrine mapping description, createdByPankaj Lele - pankaj@lelesys.com 8
    15. 15. FLOW3 as RESTful data proxy for Sencha Touch 2 App Fine tune • Doctrine mapping description, createdBy • Associations createdBy @ManyToOnePankaj Lele - pankaj@lelesys.com 8
    16. 16. FLOW3 as RESTful data proxy for Sencha Touch 2 App Fine tune • Doctrine mapping description, createdBy • Associations createdBy @ManyToOne • Validations mandatory fields, lengthsPankaj Lele - pankaj@lelesys.com 8
    17. 17. FLOW3 as RESTful data proxy for Sencha Touch 2 App Fine tune • Doctrine mapping description, createdBy • Associations createdBy @ManyToOne • Validations mandatory fields, lengths • Last stepsPankaj Lele - pankaj@lelesys.com 8
    18. 18. FLOW3 as RESTful data proxy for Sencha Touch 2 App Fine tune • Doctrine mapping description, createdBy • Associations createdBy @ManyToOne • Validations mandatory fields, lengths • Last steps • ./flow3 doctrine:validatePankaj Lele - pankaj@lelesys.com 8
    19. 19. FLOW3 as RESTful data proxy for Sencha Touch 2 App Fine tune • Doctrine mapping description, createdBy • Associations createdBy @ManyToOne • Validations mandatory fields, lengths • Last steps • ./flow3 doctrine:validate • ./flow3 doctrine:migrationgeneratePankaj Lele - pankaj@lelesys.com 8
    20. 20. FLOW3 as RESTful data proxy for Sencha Touch 2 App Fine tune • Doctrine mapping description, createdBy • Associations createdBy @ManyToOne • Validations mandatory fields, lengths • Last steps • ./flow3 doctrine:validate • ./flow3 doctrine:migrationgenerate • ./flow3 doctrine:migratePankaj Lele - pankaj@lelesys.com 8
    21. 21. FLOW3 as RESTful data proxy for Sencha Touch 2 App Domain services Web controllers Domain Model Domain Service Command controllersPankaj Lele - pankaj@lelesys.com 9
    22. 22. FLOW3 as RESTful data proxy for Sencha Touch 2 App JSON response • Success {"success":true,"message":"Event created","data":[]}Pankaj Lele - pankaj@lelesys.com 10
    23. 23. FLOW3 as RESTful data proxy for Sencha Touch 2 App JSON response • Success {"success":true,"message":"Event created","data":[]} • Failures {"success":false,"errorCode":1303209195,"message":"What bad happened?"}Pankaj Lele - pankaj@lelesys.com 10
    24. 24. FLOW3 as RESTful data proxy for Sencha Touch 2 App JSON response • Success {"success":true,"message":"Event created","data":[]} • Failures {"success":false,"errorCode":1303209195,"message":"What bad happened?"} • Validations errorAction()Pankaj Lele - pankaj@lelesys.com 10
    25. 25. FLOW3 as RESTful data proxy for Sencha Touch 2 App JSON response • Success {"success":true,"message":"Event created","data":[]} • Failures {"success":false,"errorCode":1303209195,"message":"What bad happened?"} • Validations errorAction() • Exception TYPO3FLOW3ErrorAbstractExceptionHandlerPankaj Lele - pankaj@lelesys.com 10
    26. 26. FLOW3 as RESTful data proxy for Sencha Touch 2 App JSON response • Success {"success":true,"message":"Event created","data":[]} • Failures {"success":false,"errorCode":1303209195,"message":"What bad happened?"} • Validations errorAction() • Exception TYPO3FLOW3ErrorAbstractExceptionHandler • NotFound TYPO3FLOW3MvcControllerNotFoundControllerInterfacePankaj Lele - pankaj@lelesys.com 10
    27. 27. FLOW3 as RESTful data proxy for Sencha Touch 2 App REST controller class EventController extends ActionController class EventController extends RestControllerPankaj Lele - pankaj@lelesys.com 11
    28. 28. FLOW3 as RESTful data proxy for Sencha Touch 2 App REST controller class EventController extends ActionController class EventController extends RestController /** * @var string */ protected $resourceArgumentName = event;Pankaj Lele - pankaj@lelesys.com 11
    29. 29. FLOW3 as RESTful data proxy for Sencha Touch 2 App REST controller class EventController extends ActionController POST createAction GET list / showAction class EventController extends RestController PUT updateAction DELETE deleteAction /** * @var string */ protected $resourceArgumentName = event;Pankaj Lele - pankaj@lelesys.com 11
    30. 30. FLOW3 as RESTful data proxy for Sencha Touch 2 App JSON view TYPO3FLOW3MvcViewJsonViewPankaj Lele - pankaj@lelesys.com 12
    31. 31. FLOW3 as RESTful data proxy for Sencha Touch 2 App JSON view TYPO3FLOW3MvcViewJsonView /** * @var array */ protected $viewFormatToObjectNameMap = array(json => TYPO3FLOW3MvcViewJsonView);Pankaj Lele - pankaj@lelesys.com 12
    32. 32. FLOW3 as RESTful data proxy for Sencha Touch 2 App JSON view TYPO3FLOW3MvcViewJsonView /** * @var array */ protected $viewFormatToObjectNameMap = array(json => TYPO3FLOW3MvcViewJsonView); protected function initializeView(TYPO3FLOW3MvcViewViewInterface $view) { if ($view instanceof TYPO3FLOW3MvcViewJsonView) { $view->setVariablesToRender(array( success, message, data )); $view->setConfiguration(array( data => array( _exposeObjectIdentifier => TRUE, _descend => array( startTime => array(), endTime => array() ) ) )); } }Pankaj Lele - pankaj@lelesys.com 12
    33. 33. FLOW3 as RESTful data proxy for Sencha Touch 2 App Complete action/** * Creates new event object from arguments * * @param string $title Title * @param string $description Description * @param string $place Place * @param string $startTime Start date and time in format Y-m-d H:i:s * @param string $endTime End date and time in format Y-m-d H:i:s * @return void */public function createAction($title, $description, $place, $startTime, $endTime) { $newEvent = $this->eventService->create($title, $description, $place, $startTime, $endTime); $this->view->assignMultiple(array(success => TRUE, message => Event created, data =>$newEvent));}Pankaj Lele - pankaj@lelesys.com 13
    34. 34. FLOW3 as RESTful data proxy for Sencha Touch 2 App Routing Global Routes Sub Routes for package - # name: LelesysEventsExample # uriPattern: <LelesysEventsExampleSubroutes> # Routes configuration defaults: # @format: json # subRoutes: # LelesysEventsExampleSubroutes: - package: Lelesys.EventsExample name: Event REST API POST call uriPattern: events defaults: @package: Lelesys.EventsExample @controller: Event @action: index @format: jsonPankaj Lele - pankaj@lelesys.com 14
    35. 35. FLOW3 as RESTful data proxy for Sencha Touch 2 App Routing Global Routes Sub Routes for package - # name: LelesysEventsExample # uriPattern: <LelesysEventsExampleSubroutes> # Routes configuration defaults: # @format: json # subRoutes: # LelesysEventsExampleSubroutes: - package: Lelesys.EventsExample name: Event REST API POST call uriPattern: events defaults: @package: Lelesys.EventsExample @controller: Event @action: index @format: json - name: Event REST API GET/PUT/DELETE calls uriPattern: events/{event} defaults: @package: Lelesys.EventsExample @controller: Event @action: index @format: jsonPankaj Lele - pankaj@lelesys.com 15
    36. 36. FLOW3 as RESTful data proxy for Sencha Touch 2 App Routing Global Routes Sub Routes for package - # name: LelesysEventsExample # uriPattern: <LelesysEventsExampleSubroutes> # Routes configuration defaults: # @format: json # subRoutes: # LelesysEventsExampleSubroutes: - package: Lelesys.EventsExample name: Event REST API POST call uriPattern: events defaults: @package: Lelesys.EventsExample @controller: Event @action: index @format: json - name: Event REST API GET/PUT/DELETE resourceArgument calls uriPattern: events/{event} defaults: @package: Lelesys.EventsExample @controller: Event @action: index @format: jsonPankaj Lele - pankaj@lelesys.com 15
    37. 37. FLOW3 as RESTful data proxy for Sencha Touch 2 App Does it work so far?$ curl -X POST -d "title=TYPO3 Conference Asia 2012&description=First TYPO3 conference inasia&place=Phnom Penh&startTime=2012-08-17 12:40:00&endTime=2012-08-17 17:20:00" http://t3con12asia.app/events{"success":true,"message":"Event created","data":{"createdBy":null,"description":"First TYPO3conference in asia","endTime":"2012-08-17 17:20:00","place":"Phnom Penh","startTime":"2012-08-1712:40:00","title":"TYPO3 Conference Asia 2012","__identity":"045cd7b3-9d87-4604-9f5d-9994e5705b8a"}}$ curl -X GET http://t3con12asia.app/events{"success":true,"message":"Events loaded","data":[{"createdBy":null,"description":"First TYPO3conference in asia","endTime":"2012-08-17 17:20:00","place":"Phnom Penh","startTime":"2012-08-1712:40:00","title":"TYPO3 Conference Asia 2012","__identity":"045cd7b3-9d87-4604-9f5d-9994e5705b8a"}]}$ curl -X GET http://t3con12asia.app/events/045cd7b3-9d87-4604-9f5d-9994e5705b8a{"success":true,"message":"Event loaded","data":[{"createdBy":null,"description":"First TYPO3conference in asia","endTime":"2012-08-17 17:20:00","place":"Phnom Penh","startTime":"2012-08-1712:40:00","title":"TYPO3 Conference Asia 2012","__identity":"045cd7b3-9d87-4604-9f5d-9994e5705b8a"}]}Pankaj Lele - pankaj@lelesys.com 16
    38. 38. FLOW3 as RESTful data proxy for Sencha Touch 2 App Does it work so far?$ curl -X PUT -d "title=TYPO3 Conference Asia 2012&description=First TYPO3 conference inasia&place=Phnom Penh&startTime=2012-08-17 12:40:00&endTime=2012-08-18 17:20:00" http://t3con12asia.app/events/045cd7b3-9d87-4604-9f5d-9994e5705b8a{"success":true,"message":"Event updated","data":{"createdBy":null,"description":"First TYPO3conference in asia","endTime":"2012-08-18 17:20:00","place":"Phnom Penh","startTime":"2012-08-1712:40:00","title":"TYPO3 Conference Asia 2012","__identity":"045cd7b3-9d87-4604-9f5d-9994e5705b8a"}}$ curl -X DELETE http://t3con12asia.app/events/045cd7b3-9d87-4604-9f5d-9994e5705b8a{"success":true,"message":"Event deleted","data":null}$ curl -X POST -d "description=First TYPO3 conference in asia&place=Phnom Penh&startTime=2012-08-1712:40:00&endTime=2012-08-18 17:20:00" http://t3con12asia.app/events{"success":false,"errorCode":1298012500,"message":"Required argument "title" is not set."}Pankaj Lele - pankaj@lelesys.com 17
    39. 39. FLOW3 as RESTful data proxy for Sencha Touch 2 App Part II - Sencha Touch 2Pankaj Lele - pankaj@lelesys.com 18
    40. 40. FLOW3 as RESTful data proxy for Sencha Touch 2 App REST Data proxy Ext.define(Events.model.Event, { extend: Ext.data.Model, requires : [ Ext.data.proxy.Rest ], config: { ! idProperty: __identity, fields: [ {name: id, type: string}, {name: title, type: string}, {name: description, type: string}, {name: place, type: string}, {name: startTime, type: string}, {name: endTime, type: string} ], proxy: { type: rest, url : /events, reader: { ! type: json, rootProperty: data ! } } } });Pankaj Lele - pankaj@lelesys.com 19
    41. 41. FLOW3 as RESTful data proxy for Sencha Touch 2 App REST Data proxy Ext.define(Events.model.Event, { extend: Ext.data.Model, requires : [ Ext.data.proxy.Rest ], config: { ! idProperty: __identity, fields: [ {name: id, type: string}, {name: title, type: string}, {name: description, type: string}, {name: place, type: string}, {name: startTime, type: string}, {name: endTime, type: string} ], proxy: { type: rest, url : /events, reader: { ! type: json, rootProperty: data ! } } } });Pankaj Lele - pankaj@lelesys.com 20
    42. 42. FLOW3 as RESTful data proxy for Sencha Touch 2 App DemoPankaj Lele - pankaj@lelesys.com 21
    43. 43. FLOW3 as RESTful data proxy for Sencha Touch 2 App https://github.com/pankajlele/t3con12asiaPankaj Lele - pankaj@lelesys.com 22
    44. 44. FLOW3 as RESTful data proxy for Sencha Touch 2 App Questions?Pankaj Lele - pankaj@lelesys.com 23
    45. 45. FLOW3 as RESTful data proxy for Sencha Touch 2 App Thanks!Pankaj Lele - pankaj@lelesys.com 24

    ×