Your SlideShare is downloading. ×
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
FLOW3 as RESTful data proxy for Sencha Touch 2 App
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

FLOW3 as RESTful data proxy for Sencha Touch 2 App

3,686

Published on

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

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
3,686
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
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
  • 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
  • Transcript

    • 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. 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. FLOW3 as RESTful data proxy for Sencha Touch 2 App About this talk • REST APIPankaj Lele - pankaj@lelesys.com 3
    • 4. FLOW3 as RESTful data proxy for Sencha Touch 2 App About this talk • REST API • FLOW3Pankaj Lele - pankaj@lelesys.com 3
    • 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. 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. 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. 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. FLOW3 as RESTful data proxy for Sencha Touch 2 App Part I - FLOW3Pankaj Lele - pankaj@lelesys.com 6
    • 10. FLOW3 as RESTful data proxy for Sencha Touch 2 App Kickstart • PackagePankaj Lele - pankaj@lelesys.com 7
    • 11. FLOW3 as RESTful data proxy for Sencha Touch 2 App Kickstart • Package • ModelPankaj Lele - pankaj@lelesys.com 7
    • 12. FLOW3 as RESTful data proxy for Sencha Touch 2 App Kickstart • Package • Model • RepositoryPankaj Lele - pankaj@lelesys.com 7
    • 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. FLOW3 as RESTful data proxy for Sencha Touch 2 App Fine tune • Doctrine mapping description, createdByPankaj Lele - pankaj@lelesys.com 8
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. FLOW3 as RESTful data proxy for Sencha Touch 2 App JSON view TYPO3FLOW3MvcViewJsonViewPankaj Lele - pankaj@lelesys.com 12
    • 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. 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. 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. 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. 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. 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. 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. 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. FLOW3 as RESTful data proxy for Sencha Touch 2 App Part II - Sencha Touch 2Pankaj Lele - pankaj@lelesys.com 18
    • 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. 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. FLOW3 as RESTful data proxy for Sencha Touch 2 App DemoPankaj Lele - pankaj@lelesys.com 21
    • 43. FLOW3 as RESTful data proxy for Sencha Touch 2 App https://github.com/pankajlele/t3con12asiaPankaj Lele - pankaj@lelesys.com 22
    • 44. FLOW3 as RESTful data proxy for Sencha Touch 2 App Questions?Pankaj Lele - pankaj@lelesys.com 23
    • 45. FLOW3 as RESTful data proxy for Sencha Touch 2 App Thanks!Pankaj Lele - pankaj@lelesys.com 24

    ×