Rapid E-Commerce with Angular and Moltin - Easy, Fast E-Commerce Development

Key Takeaways

okay so we're going to have a lot of fun in this video we are going to be rapidly building an eCommerce platform with angular um and molten we're actually going to be using the yman angular generator because that's going to automatically scaffold out routes and stuff for us and then we're also going to be using Molt's e-commerce API which I covered in another video super cool tool that's going to let us build any kind of app we want in just a matter of seconds um so go ahead and download those two tools if you're going to follow along and here we go we're going to start by I've already done an npm install goo for Yan um I also have grunt installed globally and I have Bower installed yo globally yally and then I've also installed uh an generator angular uh because that's our angular generator so those three are installed and so now I can make a directory that's going to be let's just call this storefronts and so now I just go yo angular what I like to use SAS with compass yes I like SAS yes I like bootstrap yes I like SAS with bootstrap I'm just going to say yes to all those and now it's going to install everything for me I'm going to be right back because I'm not going to make you watch my install okay there we go that took about a minute and the install finished so let's go ahead and go Sublime into this folder and see what we got so it's scaffolded out oh one more thing we have to do is we have to go bow install now that it scaffolded all that out for us so that's going to install all the bower modules that were in our where is that in our bower.json so it installed all those so it's given us an app here's our index.html that it built out for us and you see that we basically just have an about controller and a main controller uh so let's let's go ahead and use that generator to now scaffold out some routes for us we can go yo angular route let's build a store Route there you go let's also build a let's say the store is going to be all categories so then they click on a category let's build a category route then they click on a product so let's click on a product product route and then let's do a cart route let's see if we can get that far I don't want to take an incredible amount of your time but I know we can at least get to cart here in just a few minutes so there we go now we have a lot more files we've included we've included our store JS our category JS product cart I'm just going to add I'm going to go these top links and I'm just going to make change about to store delete contact who needs to contact the store okay so there we go now all I have to do is go grunt serve that's going to open up a live reloading web page for us in Chrome uh should be any second now go all right there we go so home and store this is the store view so if you look at app scripts um app also has now all of our routes this is what our generator did when we did our route generation we created a store a category product it Maps them to the controller create our controllers for us and created our views for us so we basically have a full app now we just have to connect it to Molten I love the angular generator one thing I've learned about yman generators take the time to find the generators you like take the time to learn them and you're going to get that time back a hundredfold uh so if you remember from the molten video you have to authenticate first before you make API calls so this is a little bit tricky and angular what we have to do is we have to now make a service there's probably three or four ways you could do this in angular but I'm going to do it with the service I think it's the simplest way you can't see but I'm making a folder called Services down here when the font's zoomed in you can't see in Sublime what's going on down there and let me go ahead and make a new file in here and let's save this as mol. JS uh so now I'm just going to make a service module here angular let uh let's not call it molon let's see with this app it's called storefront app so let's go ahead and go storefront app. Molton I like this stuff that's not 100% about just my app to be its own module name uh so no dependencies on you and let's do a factory and let's call this molten off maybe yeah there you go so there we go and what I'm going to do here is I'm going to if you remember I have to basically do I'm going to copy this I have this copied over here the molten stuff I need to do you create a new molten object then molten do off authenticate and there you go what that does is that authenticates and then you can do any molten stuff within here uh so what I'm actually going to do is I need to kind of wait for that to authenticate and then return an authenticated object so I'm going to use for that and I'm going to create a promise if you don't know about promises I do have a video on promises um and so I'll put the link to that I think I have a video on promises um so we're going to go ver deferred equals q. defer so what I've done is I've kind of made a promised object right here a deferred object and so that's going to be what I return defer do promise I'm going to return the promise of that now you're you might feel confused here here for about 2 minutes stick with me till we get this first route done and it's all going to make a lot of sense and then we get to copy paste so I'm going to do is I'm going to authenticate first I'm returning instantly This Promise the promise is not resolved with anything so when molten authenticates then I'm going to resolve with the molten object that's been authenticated this object right here so this is what's ultimately going to get returned when people require molten off so there's my Factory uh one thing I have to do is I have to now add since I did not generate that factory I have to add that in myself let's go Services mol. JS and I also have to add that molten API Library js. mol.com V1 so I'm going to go ahead and save this uh file save as save page as let's go code what's that called storefront app scripts let's make a folder called vendor and let's call this Molton min.js yes use JS I'm not a fool and then let's add this maybe right here after angular so scripts vendor what do I call it Molton do min.js so now Molt's on my page and that molten service is on my page let's save this see if I have any errors here okay I still am seeing the store view so that's good um I'm not seeing a m molten Min app looks like they have Source mapping on that I'm just going to drop that off because I don't want to see Source mapping error that ER is not a problem but I don't want to see it um so there we go now I'm loading my store view so now I can make in my app you see I've got these routes created I can now make molten API calls here in my app so let's go to the store view this will be where we view all categories we're going to do a resolve so before we load our store view we need to resolve a few promises we'll call this one categories um and then this we will require molten o whop molten o I believe let's see if that's what it was called molten o yeah so now once again so our Factory molten o is going to return a promise that gets resolved with a good molten object so let's also load in Q so we're going to do is q. when molten O So when molten O resolves then we're going to be able to do stuff in here so that resolves with the molten objects if you remember we resolved right here we passed in Molton so molten is what gets passed into our function now we can make our molten calls molten category list and this seems like a lot of code but once we get this in we get to copy paste so it's really not a lot once we get this first one done we're going to be able to do a lot of stuff really fast so we're going to list our categories categories and then I actually want to do another resolve here don't I so what I'm going have to do here is Q let's make a exact same thing we did for our o q. defer and then I'm going to go deferred resolve categories and then I'm going to return that deferred promise okay so once again I'm making a deferred and I'm returning that so I'm returning this as categories and angular is going to wait until this promise resolves with our categories so there we go we're going to have all our categories in uh let's go to the controller that it generated for us what are we calling this store yep we're on store let's require categories so categories is going to require this guy right here which is our whole categories process we just did scope. categories equals categories and let's console log categories as well so we can see that uh let's go ahead and refresh here and go to store unknown provider categories uhoh I hate it when you get these things ah I know what I did wrong I did not add since I made a new module I did not make my app require that module yet angular I do that a lot that's that's something I do a lot when doing angular stuff I'll add a module I'll add it to my HTML and I'll for forget to make my app require it so now we're good you can see my object is right here boom I've got one uncategorized I've got one category called uncategorized so let's go ahead and make that spit it out on the page now let's go to our views our store view so if you remember I made scope categories categories um and what actually want to print out here the ID is that and the title is what we're looking at so let's go back to our store HTML categories I'll just do a list for now don't want to bore you guys this will be an NG repeat let's go cat in categories so this will be cat. tile so Some people prefer the spaces here some people don't I don't really care and this hrf will be uh what is it actually this is ngre because we're going to do some templating in here pound SL category and then it'll be cat. ID I kind of prefer spaces when it's there and I don't like spaces when it's here in a URL cuz it makes it feel massive so let's see if that worked here there we go uncategorized and that takes us to a URL that's not working yet so there we go category SLC ID let's go and build out our categories now actually let's make sure this works so I go to store categories let me go to my Forge molon let's go ahead and log into will store add a category make sure this is working here inventory categories create a category no parent category awesome category oh I need a description St awesome category there we go so there's my categories and now if I load up here I should see two awesome category and uncategorized awesome it is real time connecting to my store so let's go ahead and build out that category route it's going to be really simple I just copy and paste that whole resolve and instead of categories this will be products um when molten off then product list category equals and then this will be the ID of our category uh so what we need to do here is we need to do route we need to get that route Pam off there route current I think it's pams doid so we're going to make this category slash ID so we just want to go to slash category we need to go to a specific category every time so categoryid that will be route. current. pam. we're going to list that this should work let's go ahead and re refresh this guy so there we go that worked and let's go into our category controller products products you know what I also want to get the category so let's go back to that and we're going to also do the category love those Sublime Text multiple cursors Apple D um let's go category I believe it's doget I think I can just go ID like that so that should work let's see if that all works for us okay it's not resolving um it's not instantiating okay so let's try up unexpected identifier got a problem here ah no comma so there we go category view is resolving so that's good we should have a category and a products in there so let's go to our view and add them and this is category. tile since our category object is in there and again we'll just do an Li yeah I'm actually going to go over to store copy and paste prod in products and this will go to products prod. ID prod. tile let's see if this works hey we got our three products sweet see how it's going a lot faster so far our uncategorized category and then we've got our products I'm not messing with any design yet let's go to a single product and then maybe we'll do an add to cart and a cart for those of you guys who totally want to keep following along um any you guys at this point you can probably realize wow you're going to be able to build out a whole shopping cart in a day um so definitely go just get the free tier m thing Try It Out Try building an angular app or a Javascript app with just HTML you're going to like it I'm going to go ahead and add a product and an add to cart and then we'll call it because we're probably looking at about 20 minutes 30 minutes by then let's go ahead we're on the product view so I'm going to copy the category resolve seems the most likely one um product we want the product and then this one will also have an ID required that one's got the route injected then we're going to do product.it we're getting that product yep that's all we need copy paste so let's go do that uh product controller requires product scope. product equals product it's a lot of product and so now we should be able to go and then let's let's console log this so we can kind of get a looked at what look at what that product object looks like bearded man Strikes Back like it um let's see it looks like I got a problem in here somewhere unknown provider products product control I must have made a typo in there let me look at this guy oh I know what the problem is this is not in a resolve ah hate it when it's something it's always something silly like that isn't it there we go that's going to work cuz it works unexpected token well now there's unexpected token somewhere where is that okay accidentally typed you and there we go we've got our product bearded man Strikes Back uh we've got our description your beards will grow twice as long listening to these Homeless looking guys rock your face off with a banjo okay so we want to print that description maybe want we want to print pricing do formatted dot without tax okay let's go and just print those two then do an add to cart [Music] button so let's go P we're going to go NG bind HTML because with this is HTML in the description that it's really cool that you actually have the ability to add basic HTML tags to the product description which is really nice so the front end or the code has no we don't care what the description is we're just going to print it out which means I probably want that to be in a div not a P tag there we go so there's the description let's do price what was that that was product. pricing dot formatted do without tax there we go $10 even let's make an add cart button add to carts and then this will go NG click had cart and let's make this this class equals BTN BTN success so there we go we're going to add that one to cart let's go back to product JS and get that not product J yep that's it so this will basically pull in that now we need to get that molten we need to get that molten object in here uh so what we can do is go back to appjs and then this can just be [Music] molten and we will just [Music] return return molten o we can actually just return I think we just return molten o since that's a promise let's find out if we can do that and let me console log that real quick yeah there we go so we've got our whole molten thing there uh so let's go ahead then we're going to go Molton do cart. insert and then we are going to go product. ID quantity will always be one we could add a field there but we're not going to do that uh for now and then that third pram again is null not sure why it's always null um let's uh do something a little funky here let's go let's make we all we want to show status that we're adding that so let's make this an ngf um add status if there's no ad status we're going to show this if there is an ad status we are not going to make it clickable and this will be warning and this will be adding so here we go that'll be adding to cart so add status is null by default add status will be I don't know true actually I'm going to do I'm going to actually make that I'm actually take the status from in here is what I'm going to do so there we go adding to cart I'm going to do a scope. apply I might not need to do that there um and then once it's complete scope. add status equals success and then let's bring timeout in so then we're going to do a timeout maybe of 1 second and then we're going to make scope ad status is null again so there we go we should add it to the cart uh what I did here is we're going to insert it to the cart uh we're going to we're going to change ad status so the button is going to not be click that's going away and this guy's showing up and then when it's successful we should say success for about a second and then click back to null so they can add another one to the cart let's see if this works here adding to cart apply is already in progress yeah I figured that was the case we don't need you we do need you I believe let's try that live reload refresh add to cart adding to cart success and now we can add it to cart again great add to cart adding to cart success all right so that's basically how we're going to do it we'll leave cart out for now maybe we'll do another video on it maybe we won't it's not that magical you just have to add a customer login and then post up your address and your credit card information but that's a little bit more time intensive so hope you enjoyed looking at Molton with me today and uh give him a trial run sign up look at it it's a cool API and it's one that I'm very very glad I took the time to look into have a great day