Full MEAN Process

It’s been a good 10 days since my last post and many assignments have happened since then. I have been working on everything from sockets to full mean projects. I honestly don’t know where to start with this post so I’ll just start with what I’ve been working on for the past week.

FULL MEAN:

At this point, we’ve been learning things on the back end using the Mongo db, Express, Node js and on the client side with Angular.

I’ve learned the process of receiving information from the user the time the user selects an action. I can add that information to the database and display that information back to the user via JSON response objects.

The first couple assignments were to use an older assignment to incorporate the full mean process, that is, storing information into the database and deleting information in the database. I have to admit, I was really excited to finally start putting everything together so I could get used to the flow of things.

A couple of my favorite assignments were the Orders and Customers and the Mini Mean Store.

Orders and Customers:

This project was to add customers to the database, have the ability to remove that customer from the database, and display a full list of customers that are in the database.

Screen Shot 2016-05-22 at 8.56.01 PM

The second part was to pick a customer from a list and add order information associated with the customer such as the product ordered and quantity ordered.

 Screen Shot 2016-05-22 at 8.56.17 PM

In doing this, we had to use partials to able able to display the customers and orders page. The information to take an order had to be displayed in drop down lists. I have to admit, this part stumped me, in the end, I used ng-options in order to grab the user selection to be able to use it to print out a table of all the orders submitted by each customer.

On both pages, we were to be able to filter the page, I filtered both of my pages by customer name.

MINI MEAN STORE: 

I spent about 6 hours working on this assignment. This was the second assignment using Full MEAN and my favorite assignment yet!!!

The propose of this project is to create a ‘store’ with 4 partials: one as a dashboard to view all the products, customers joined (added to database) and orders submitted. I revisited this assignment Friday afternoon after completing it on Thursday to add Bootstrap to it to make it look more presentable.

Screen Shot 2016-05-22 at 9.12.10 PM

I decided to just use the photos from itunes to order albums plus, I love music!

The next page is the products page, the customer is allowed to add a new product to the page, adding the url to display the image of that product. I ended up using ng-src to display the list of products added to the database.

Screen Shot 2016-05-22 at 9.12.29 PM

Next, is to order a product…This page again uses a drop down list to display the options for a user to chose from such as Customer name, quantity ordered, product selected (similar to the orders and customers project).

Screen Shot 2016-05-22 at 9.12.42 PMScreen Shot 2016-05-22 at 9.22.13 PM

Also, once an item is ordered, it is subtracted from the database based on the quantity ordered. Once the customer clicked the order button, the client server connected to my addOrder function in the orders controller.

Screen Shot 2016-05-22 at 9.35.44 PM

Once there, I set the data to a new $scope variable to loop through all the products in the database to compare it with the selected, once found, I set it to a variable to send it to the update function in the ProductFactory, which then sent it to the routes on the server side. The update factory function sent a put a request, along with the product id and order data, to the products controller on the server side to find the product by the id. Once the product is found, I used the quantity form the database to subtract the quantity selected from the user (using req.body.qty).

Screen Shot 2016-05-22 at 9.34.56 PM

I then saved this new quantity to the database. The result is then sent back as a JSON object from the controller, http response, to the factory. The factory send the http response to the controller based on the callback function, in my case it was the allOrders function in order to display all the others.

Screen Shot 2016-05-22 at 9.35.29 PM

It grabbed all the updated orders via the $scope variable I set to the data received back from the function. Then I displayed my data using ng-bind on the Orders page.

The final page was just to add, display and have the ability to delete a customer.

Screen Shot 2016-05-22 at 9.13.00 PM

Below is my controller to add and delete a customer to the page.

Screen Shot 2016-05-22 at 9.39.46 PM

Overall, I throughly enjoyed the MEAN stack and really hope to revisit the Mini Mean Store project in order to add functionality to log in/log out, to only have the admin add products, and to automatically update the product when the quantity is less than 5.

OTHER STUFF

I also ended up taking my belt exam on Friday, I didn’t do great but I did good and I know where I need improvement…Joins in Mongoose, I plan on re working the exam this week and retake it on Wednesday. We originally had the choice to take the test either on Friday or Wednesday…All but 2 (including myself and other cohortmate) decided to take it on Wednesday so only two of us took the test on Friday. It wasn’t really difficult, I just had trouble in the end to get one item to show because I didn’t create the correct Mongoose schema, I should have passed in the object id to the second database in order to use to get the data associated with that user.

THIS WEEK

Starting this week, we have 2 weeks for project week. After focusing on prep to retake my exam, I really want to implement the changes I spoke above to the Mini Mean Project and start a new project…Although, I ‘m not quite sure what the project will be. I talked with a few other cohortmates last week about helping out on a project idea one of them had and since the time will fly by, that may be the only project I have time for but I’m hoping I’m able to work on a small project on my own…We shall see.