Transcript
Page 1: One page shops with Magento & Angular Js - Vinai Kopp

Single PageShops

With MagentoAnd AngularJS

Page 2: One page shops with Magento & Angular Js - Vinai Kopp

Who am I?Vinai

Page 3: One page shops with Magento & Angular Js - Vinai Kopp

How did I get here?

Page 4: One page shops with Magento & Angular Js - Vinai Kopp

Freelance again!

Page 5: One page shops with Magento & Angular Js - Vinai Kopp

I want to write a book......about Magento

(one trick pony)

Page 6: One page shops with Magento & Angular Js - Vinai Kopp

Iʹll Self Publish!...on Magento

Page 7: One page shops with Magento & Angular Js - Vinai Kopp

Work, Lots!Fun StuffCodingMoney

Unfun StuffSettingsThemingEmail TemplatesTerms & ConditionsSupport

Page 8: One page shops with Magento & Angular Js - Vinai Kopp

MORE FUN

Page 9: One page shops with Magento & Angular Js - Vinai Kopp
Page 10: One page shops with Magento & Angular Js - Vinai Kopp

WoW

MuchDifferent

So faster

News Learnin

VeryAngular

Such JS

So Modern

WoW

Page 11: One page shops with Magento & Angular Js - Vinai Kopp

JavaScript MVC Toolkit

Page 12: One page shops with Magento & Angular Js - Vinai Kopp

DI and Testability are at itsvery core

Page 13: One page shops with Magento & Angular Js - Vinai Kopp

Clean separation of MVClayers

Page 14: One page shops with Magento & Angular Js - Vinai Kopp

Many pre‑made Modules

Page 15: One page shops with Magento & Angular Js - Vinai Kopp

No jQuery or Prototype!(okay, it has jQuery Light)

Page 16: One page shops with Magento & Angular Js - Vinai Kopp

Web‑App

AngularJSFrontend

<= REST API => MagentoCustomersProductsOrdersPaymentsDownloads

Admin Interface

Page 17: One page shops with Magento & Angular Js - Vinai Kopp

Planning

Page 18: One page shops with Magento & Angular Js - Vinai Kopp

Reduce to the max!

Page 19: One page shops with Magento & Angular Js - Vinai Kopp

Starting outMagento CE 1.8.1.0angular‑seed 

Page 20: One page shops with Magento & Angular Js - Vinai Kopp

Magento REST APIBasics

Page 21: One page shops with Magento & Angular Js - Vinai Kopp

REST API!==

SOAP APIs

Page 22: One page shops with Magento & Angular Js - Vinai Kopp

Mage_Api2

Page 23: One page shops with Magento & Angular Js - Vinai Kopp

Resources

Products,ProductCategories,ProductImages,ProductWebsites

Stock Items

Customers,CustomerAddresses

Orders,

Order Items,Order

Addresses,Order

Comments

Page 24: One page shops with Magento & Angular Js - Vinai Kopp

Resource AttributesYou know the drill...

 Products have Names, ... Customers have Groups, ...

Page 25: One page shops with Magento & Angular Js - Vinai Kopp

Resource Routes/api/rest/products/category/10/store/2

Page 26: One page shops with Magento & Angular Js - Vinai Kopp

Route Action TypesCollection

/api/rest/products/category/10/store/2

Entity/api/rest/products/16

Page 27: One page shops with Magento & Angular Js - Vinai Kopp

OperationsMapping of HTTP verbs

GET => retrievePOST => createPUT => updateDELETE => delete

Page 28: One page shops with Magento & Angular Js - Vinai Kopp

Roles

Admin

Customer

Guest

Page 29: One page shops with Magento & Angular Js - Vinai Kopp

What weʹve gotRoles Resources

Attributes

Routes

Action Types

OperatonTypes

Page 30: One page shops with Magento & Angular Js - Vinai Kopp

That all?

Page 31: One page shops with Magento & Angular Js - Vinai Kopp

ACL

Page 32: One page shops with Magento & Angular Js - Vinai Kopp

Each role can be allowed or denied potential access to eachresource by operation type via api2.xml.

E.g. guests may retrieve products, but not create them.

Page 33: One page shops with Magento & Angular Js - Vinai Kopp
Page 34: One page shops with Magento & Angular Js - Vinai Kopp

Under System > Web Services > REST ‑ Roles each potential rolepermission has to be assigned, too.

Page 35: One page shops with Magento & Angular Js - Vinai Kopp

Resource Attributes ACLSame as roles... defined in XML, but ACL also has to be

assigned in the DB through the backend.

System > Web Services > REST ‑ Attributes

Page 36: One page shops with Magento & Angular Js - Vinai Kopp

Not so elegant transition from theory to real stuff =>

Page 37: One page shops with Magento & Angular Js - Vinai Kopp

Customizethe REST API

Page 38: One page shops with Magento & Angular Js - Vinai Kopp

Customer AuthenticationOAuth

Page 39: One page shops with Magento & Angular Js - Vinai Kopp

Session Authentication!REST API requests always run in admin store scope.$_SERVER['MAGE_RUN_CODE'] is not evaluated.

Page 40: One page shops with Magento & Angular Js - Vinai Kopp

Api2 Session Auth Adapter1.  If frontend cookie exists2.  Set current store to frontend3.  Start frontend session4.  Check if customer is logged in

Page 41: One page shops with Magento & Angular Js - Vinai Kopp

Which store?1.  Evaluate store cookie2.  If not found, use the defaultwebsites default store view

3.  Hope the customer belongs tothe website

Page 42: One page shops with Magento & Angular Js - Vinai Kopp

CodeVinaiKopp_Api2SessionAuthAdapter 

VinaiKopp_Api2SessionLogin 

Page 43: One page shops with Magento & Angular Js - Vinai Kopp

More REST RelatedExtensions

VinaiKopp_Api2CreateAccountVinaiKopp_Api2DirectoryVinaiKopp_Api2SessionCustomerAddressVinaiKopp_Api2ForgotPasswordVinaiKopp_Api2DownloadsGrokking_Api2Checkout

(coming to github as time allows ‑ pls ask if you need sooner)

Page 44: One page shops with Magento & Angular Js - Vinai Kopp

The Frontend

Page 45: One page shops with Magento & Angular Js - Vinai Kopp

7thingsI digʹbout 

Page 46: One page shops with Magento & Angular Js - Vinai Kopp

1. Modules

angular.module('magentoApp', []);

angular.module('magentoApp', ['ngRoute']);

Look Ma, Module Dependencies!

Page 47: One page shops with Magento & Angular Js - Vinai Kopp

Modules provide things

angular.module('magentoApp', ['ngRoute']) .factory('Countries', function() { return { code: 'ES', name: 'Espania' }; });

Page 48: One page shops with Magento & Angular Js - Vinai Kopp

Things modules provideServicesControllersDirectivesFilters

and more...

Page 49: One page shops with Magento & Angular Js - Vinai Kopp

2. Dependency InjectionIf a module needs a thing...

Page 50: One page shops with Magento & Angular Js - Vinai Kopp

...just add it to thearguments

.controller('RegistrationCtrl', function($scope, Countries) {

$scope.countries = Countries;

})

Page 51: One page shops with Magento & Angular Js - Vinai Kopp

3. Mangling Protection

Page 52: One page shops with Magento & Angular Js - Vinai Kopp

JavaScript CompressionI HAZ TEH MINIFICATSION! (meow)

Variable names made shorter...

KILLS the DI!

Page 53: One page shops with Magento & Angular Js - Vinai Kopp

Mangling Protection

.controller('RegistrationCtrl', ['Countries', function($scope, Countries) {

$scope.countries = Countries;

}])

Page 54: One page shops with Magento & Angular Js - Vinai Kopp

4. Promises

Page 55: One page shops with Magento & Angular Js - Vinai Kopp

Asynchronous ThingsXHR Requests and setTimeout Callbacks

Page 56: One page shops with Magento & Angular Js - Vinai Kopp

Callback Try & Catch

Countries.fetch(). then(verifyAddress). then(createAddress). catch(displayAlert);

Page 57: One page shops with Magento & Angular Js - Vinai Kopp

Can be combined!

$q.all(Countries.fetch(), Regions.fetch()). then(verifyAddress). then(createAddress). catch(displayAlert);

Page 58: One page shops with Magento & Angular Js - Vinai Kopp

5. REST Resources

Page 59: One page shops with Magento & Angular Js - Vinai Kopp

Inject $resource...

.factory('ForgotPassword', ['$resource', function($resource) { return $resource('/api/rest/customer/forgotpassword/:email'); });

Page 60: One page shops with Magento & Angular Js - Vinai Kopp

...and use var result = ForgotPassword.get({ email: email });

Page 61: One page shops with Magento & Angular Js - Vinai Kopp

Custom actions!

.factory('ForgotPassword', ['$resource', function($resource) { var resource = $resource('/api/rest/customer/forgotpassword/:email', {}, { validate: {method: 'GET', isArray: true}, reset: {method: 'PUT', isArray: false} });});

Page 62: One page shops with Magento & Angular Js - Vinai Kopp

Fluid code :) var result = ForgotPassword.verify({ email: email, token: token });

Page 63: One page shops with Magento & Angular Js - Vinai Kopp

6. Model Data Binding

[   ]

<p>{{ example }}</p> <input type="text" ng-bind="example">

Show Example

Page 64: One page shops with Magento & Angular Js - Vinai Kopp

7. Testability it('should call calcRowTotal() when addItem is called with a new item', function () { expect(cart.items.length).toBe(0); cart.addItem(mock_product); expect(mock_item.calcRowTotal).toHaveBeenCalled(); });

Page 65: One page shops with Magento & Angular Js - Vinai Kopp
Page 66: One page shops with Magento & Angular Js - Vinai Kopp

Would I do it again?

Page 67: One page shops with Magento & Angular Js - Vinai Kopp

Yeaaah!

Page 68: One page shops with Magento & Angular Js - Vinai Kopp

Complicationsaka ʺOpportunities for Growthʺ

Page 69: One page shops with Magento & Angular Js - Vinai Kopp

Scope Nestingcan be tricky

Page 70: One page shops with Magento & Angular Js - Vinai Kopp

Frontend ArchitectureBuild a mini‑framework

Session State ManagementSplash MessagesConsistent error handling

Page 71: One page shops with Magento & Angular Js - Vinai Kopp

Bad Crunch‑TimeDescisions

Last Friday I was running out of time

so I decided to continue without TDD

Page 72: One page shops with Magento & Angular Js - Vinai Kopp
Page 73: One page shops with Magento & Angular Js - Vinai Kopp

A lesson learned...again

I need more time to test manually then to write the tests.

Page 74: One page shops with Magento & Angular Js - Vinai Kopp

Dankeschön!

@VinaiKopp on 

Api2 Extensions on GitHub 


Top Related