Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Single Page
Shops
With Magento
And AngularJS
Who am I?
Vinai
How did I get here?
Freelance again!
I want to write a book...
...about Magento
(one trick pony)
Iʹll Self Publish!
...on Magento
Work, Lots!
Fun Stuff
Coding
Money
Unfun Stuff
Settings
Theming
Email Templates
Terms & Conditions
Support
MORE FUN
WoW
Much
Different
So faster
News Learnin
Very
Angular
Such JS
So Modern
WoW
JavaScript MVC Toolkit
DI and Testability are at its
very core
Clean separation of MVC
layers
Many pre‑made Modules
No jQuery or Prototype!
(okay, it has jQuery Light)
Web‑App
AngularJS
Frontend
<= REST API =>
Magento
Customers
Products
Orders
Payments
Downloads
Admin Interface
Planning
Reduce to the max!
Starting out
Magento CE 1.8.1.0
angular‑seed 
Magento REST API
Basics
REST API
!==
SOAP APIs
Mage_Api2
Resources

Products,
Product
Categories,
Product
Images,
Product
Websites

Stock Items

Customers,
Customer
Addresses
...
Resource Attributes
You know the drill...
 Products have Names, ...
 Customers have Groups, ...
Resource Routes
/api/rest/products/category/10/store/2
Route Action Types
Collection
/api/rest/products/category/10/store/2
Entity
/api/rest/products/16
Operations
Mapping of HTTP verbs
GET => retrieve
POST => create
PUT => update
DELETE => delete
Roles
Admin
Customer
Guest
What weʹve got
Roles Resources
Attributes
Routes
Action Types
Operaton
Types
That all?
ACL
Each role can be allowed or denied potential access to each
resource by operation type via api2.xml.
E.g. guests may retri...
Under System > Web Services > REST ‑ Roles each potential role
permission has to be assigned, too.
Resource Attributes ACL
Same as roles... defined in XML, but ACL also has to be
assigned in the DB through the backend.
Sy...
Not so elegant transition from theory to real stuff =>
Customize
the REST API
Customer Authentication
OAuth
Session Authentication!
REST API requests always run in admin store scope.
$_SERVER['MAGE_RUN_CODE'] is not evaluated.
Api2 Session Auth Adapter
1.  If frontend cookie exists
2.  Set current store to frontend
3.  Start frontend session
4.  C...
Which store?
1.  Evaluate store cookie
2.  If not found, use the default
websites default store view
3.  Hope the customer...
Code
VinaiKopp_Api2SessionAuthAdapter 
VinaiKopp_Api2SessionLogin 
More REST Related
Extensions
VinaiKopp_Api2CreateAccount
VinaiKopp_Api2Directory
VinaiKopp_Api2SessionCustomerAddress
Vina...
The Frontend
7
things
I dig
ʹbout 
1. Modules
angular.module('magentoApp',[]);
angular.module('magentoApp',['ngRoute']);
Look Ma, Module Dependencies!
Modules provide things
angular.module('magentoApp',['ngRoute'])
.factory('Countries',function(){
return{
code:'ES',name:'E...
Things modules provide
Services
Controllers
Directives
Filters
and more...
2. Dependency Injection
If a module needs a thing...
...just add it to the
arguments
.controller('RegistrationCtrl',function($scope,Countries){
$scope.countries=Countries;
})
3. Mangling Protection
JavaScript Compression
I HAZ TEH MINIFICATSION! (meow)
Variable names made shorter...
KILLS the DI!
Mangling Protection
.controller('RegistrationCtrl',['Countries',function($scope,Countries){
$scope.countries=Countries;
}])
4. Promises
Asynchronous Things
XHR Requests and setTimeout Callbacks
Callback Try & Catch
Countries.fetch().
then(verifyAddress).
then(createAddress).
catch(displayAlert);
Can be combined!
$q.all(Countries.fetch(),Regions.fetch()).
then(verifyAddress).
then(createAddress).
catch(displayAlert);
5. REST Resources
Inject $resource...
.factory('ForgotPassword',['$resource',function($resource){
return$resource('/api/rest/customer/forgot...
...and use
varresult=ForgotPassword.get({
email:email
});
Custom actions!
.factory('ForgotPassword',['$resource',function($resource){
varresource=$resource('/api/rest/customer/forg...
Fluid code :)
varresult=ForgotPassword.verify({
email:email,
token:token
});
6. Model Data Binding
[   ]
<p>{{example}}</p>
<inputtype="text"ng-bind="example">
Show Example
7. Testability
it('shouldcallcalcRowTotal()whenaddItemiscalledwithanewitem',
function(){
expect(cart.items.length).toBe(0)...
Would I do it again?
Yeaaah!
Complications
aka ʺOpportunities for Growthʺ
Scope Nesting
can be tricky
Frontend Architecture
Build a mini‑framework
Session State Management
Splash Messages
Consistent error handling
Bad Crunch‑Time
Descisions
Last Friday I was running out of time
so I decided to continue without TDD
A lesson learned...
again
I need more time to test manually then to write the tests.
Dankeschön!
@VinaiKopp on 
Api2 Extensions on GitHub 

One page shops with Magento & Angular Js - Vinai Kopp
One page shops with Magento & Angular Js - Vinai Kopp
One page shops with Magento & Angular Js - Vinai Kopp
One page shops with Magento & Angular Js - Vinai Kopp
Nächste SlideShare
Wird geladen in …5
×

One page shops with Magento & Angular Js - Vinai Kopp

4.484 Aufrufe

Veröffentlicht am

This talk covers a special use case. On stores with a small number of products it can make sense to completely replace the usual Magento front end and build a single page shop. This page contains the product presentation and enables the customer to check out easily.

No catalog browsing functionality is present, since the goal is to get the customer from product presentation to checkout as quickly and easily as possible. The front end communicates with Magento via the REST API to fetch product information, create the customers and processes the orders. Building the customer facing page with a framework like AngularJS makes the front end work fun and easy.

On the backend, the Magento REST API needs to be extended in order to provide all required functionality. Moving more business logic to the client side enables the Magento store to scale with less resources.

This talk will cover an overview over the architecture and the challenges to overcome when building a one page store.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

One page shops with Magento & Angular Js - Vinai Kopp

  1. 1. Single Page Shops With Magento And AngularJS
  2. 2. Who am I? Vinai
  3. 3. How did I get here?
  4. 4. Freelance again!
  5. 5. I want to write a book... ...about Magento (one trick pony)
  6. 6. Iʹll Self Publish! ...on Magento
  7. 7. Work, Lots! Fun Stuff Coding Money Unfun Stuff Settings Theming Email Templates Terms & Conditions Support
  8. 8. MORE FUN
  9. 9. WoW Much Different So faster News Learnin Very Angular Such JS So Modern WoW
  10. 10. JavaScript MVC Toolkit
  11. 11. DI and Testability are at its very core
  12. 12. Clean separation of MVC layers
  13. 13. Many pre‑made Modules
  14. 14. No jQuery or Prototype! (okay, it has jQuery Light)
  15. 15. Web‑App AngularJS Frontend <= REST API => Magento Customers Products Orders Payments Downloads Admin Interface
  16. 16. Planning
  17. 17. Reduce to the max!
  18. 18. Starting out Magento CE 1.8.1.0 angular‑seed 
  19. 19. Magento REST API Basics
  20. 20. REST API !== SOAP APIs
  21. 21. Mage_Api2
  22. 22. Resources  Products, Product Categories, Product Images, Product Websites  Stock Items  Customers, Customer Addresses  Orders, Order Items, Order Addresses, Order Comments
  23. 23. Resource Attributes You know the drill...  Products have Names, ...  Customers have Groups, ...
  24. 24. Resource Routes /api/rest/products/category/10/store/2
  25. 25. Route Action Types Collection /api/rest/products/category/10/store/2 Entity /api/rest/products/16
  26. 26. Operations Mapping of HTTP verbs GET => retrieve POST => create PUT => update DELETE => delete
  27. 27. Roles Admin Customer Guest
  28. 28. What weʹve got Roles Resources Attributes Routes Action Types Operaton Types
  29. 29. That all?
  30. 30. ACL
  31. 31. Each role can be allowed or denied potential access to each resource by operation type via api2.xml. E.g. guests may retrieve products, but not create them.
  32. 32. Under System > Web Services > REST ‑ Roles each potential role permission has to be assigned, too.
  33. 33. Resource Attributes ACL Same as roles... defined in XML, but ACL also has to be assigned in the DB through the backend. System > Web Services > REST ‑ Attributes
  34. 34. Not so elegant transition from theory to real stuff =>
  35. 35. Customize the REST API
  36. 36. Customer Authentication OAuth
  37. 37. Session Authentication! REST API requests always run in admin store scope. $_SERVER['MAGE_RUN_CODE'] is not evaluated.
  38. 38. Api2 Session Auth Adapter 1.  If frontend cookie exists 2.  Set current store to frontend 3.  Start frontend session 4.  Check if customer is logged in
  39. 39. Which store? 1.  Evaluate store cookie 2.  If not found, use the default websites default store view 3.  Hope the customer belongs to the website
  40. 40. Code VinaiKopp_Api2SessionAuthAdapter  VinaiKopp_Api2SessionLogin 
  41. 41. More REST Related Extensions VinaiKopp_Api2CreateAccount VinaiKopp_Api2Directory VinaiKopp_Api2SessionCustomerAddress VinaiKopp_Api2ForgotPassword VinaiKopp_Api2Downloads Grokking_Api2Checkout (coming to github as time allows ‑ pls ask if you need sooner)
  42. 42. The Frontend
  43. 43. 7 things I dig ʹbout 
  44. 44. 1. Modules angular.module('magentoApp',[]); angular.module('magentoApp',['ngRoute']); Look Ma, Module Dependencies!
  45. 45. Modules provide things angular.module('magentoApp',['ngRoute']) .factory('Countries',function(){ return{ code:'ES',name:'Espania' }; });
  46. 46. Things modules provide Services Controllers Directives Filters and more...
  47. 47. 2. Dependency Injection If a module needs a thing...
  48. 48. ...just add it to the arguments .controller('RegistrationCtrl',function($scope,Countries){ $scope.countries=Countries; })
  49. 49. 3. Mangling Protection
  50. 50. JavaScript Compression I HAZ TEH MINIFICATSION! (meow) Variable names made shorter... KILLS the DI!
  51. 51. Mangling Protection .controller('RegistrationCtrl',['Countries',function($scope,Countries){ $scope.countries=Countries; }])
  52. 52. 4. Promises
  53. 53. Asynchronous Things XHR Requests and setTimeout Callbacks
  54. 54. Callback Try & Catch Countries.fetch(). then(verifyAddress). then(createAddress). catch(displayAlert);
  55. 55. Can be combined! $q.all(Countries.fetch(),Regions.fetch()). then(verifyAddress). then(createAddress). catch(displayAlert);
  56. 56. 5. REST Resources
  57. 57. Inject $resource... .factory('ForgotPassword',['$resource',function($resource){ return$resource('/api/rest/customer/forgotpassword/:email'); });
  58. 58. ...and use varresult=ForgotPassword.get({ email:email });
  59. 59. Custom actions! .factory('ForgotPassword',['$resource',function($resource){ varresource=$resource('/api/rest/customer/forgotpassword/:email',{},{ validate:{method:'GET',isArray:true}, reset:{method:'PUT',isArray:false} }); });
  60. 60. Fluid code :) varresult=ForgotPassword.verify({ email:email, token:token });
  61. 61. 6. Model Data Binding [   ] <p>{{example}}</p> <inputtype="text"ng-bind="example"> Show Example
  62. 62. 7. Testability it('shouldcallcalcRowTotal()whenaddItemiscalledwithanewitem', function(){ expect(cart.items.length).toBe(0); cart.addItem(mock_product); expect(mock_item.calcRowTotal).toHaveBeenCalled(); });
  63. 63. Would I do it again?
  64. 64. Yeaaah!
  65. 65. Complications aka ʺOpportunities for Growthʺ
  66. 66. Scope Nesting can be tricky
  67. 67. Frontend Architecture Build a mini‑framework Session State Management Splash Messages Consistent error handling
  68. 68. Bad Crunch‑Time Descisions Last Friday I was running out of time so I decided to continue without TDD
  69. 69. A lesson learned... again I need more time to test manually then to write the tests.
  70. 70. Dankeschön! @VinaiKopp on  Api2 Extensions on GitHub  

×