Wednesday – June 1, 2016 – Preparing to Retake the Exam

It’s the first day of June and 5 more weeks to the end of the Dojo!!!!

This morning

This morning I arrived at the Dojo at my regular time – 8am. I spent a little time, researching jobs in Angular JS to see what most of the requirements were and to get some motivation on how much more experience I need to be considered for a job.

I spoke with my cohort mate about his project – Basically, I needed to study for my belt exam to ensure I knew the key concepts so I could even start looking for a job. Him and the rest of the group continued on without me, I wasn’t too bummed out because I knew majority of the site was functioning well…He ended up taking over the part where his checkout page needed to access the id of the product page I built up. I still didn’t get a chance to work on the modal but I heard him say that he wanted it all functioning first before that gets completed anyway.

Reviewing for my Exam & Learning New Things

So, I spent the rest of my day going over the last exam I failed and working through it. The part I had trouble with was populating the data so I could access the name of the person who wrote the particular answer to a question – The user information was nested inside of an object array so I had to do a deep populate which is as easy as putting the path and model in an object like so: populate({path: ‘answer._person’, model: ‘Users’}) …Which I learned from our instructor last week. After hours of scouring the internet, looking at the video published on the first exam and just plain thinking it through, I came to the conclusion that all I need to do was to do the same deep populate in my show function! Crazy isn’t it?

You see, I called on my client factory in the client controller for my show function; after calling the server route, I went to the server controller where I found the question by id…the problem is every time my results came back, I wouldn’t have the person who made the comment…I just needed to populate it in while in the server controller and then I had access to the name I needed! Pretty easy.

Another thing I figured out is that if I wanted to call a function (that was already declared in my client controller) as a callback inside of another function in my client controller, I had to save the results of the callback the same as the result of the original function – For example: I saved the results of my show function as $scope.answers…which means when I called it again, I had to save those same results as $scope.answers. My guess is because since you’re calling the same function it has to have the same name for the results or else, in my experience, you get a yucky error.

Ready for the Exam

All in all, I learned a lot today and feel way more confident about taking my exam tomorrow! The things I’m worried about are not having enough time to finish, developing the mongoose schema and not messing up while deploying. In the past, we didn’t have to do a video demo of our exam and we had until the end of day to deploy – I found out over the weekend that our current instructor left for good to go pursue other things so I had to reach out to the lead instructor to see what I needed to include so I won’t get dinged because of things I don’t have…Turns out a demo video is needed within the hour after the exam is completed — I did a practice recording today and feel pretty good about it — I was relieved it was pretty simple!

At any rate, I better get some sleep so I can rise and shine early to take my exam – I work better in the mornings!

Tuesday – May 31, 2016 – Working on the Group Project

It was a busy day today – I started the morning off meeting with my group for the e-commerce site we’re working on. I was to finish adding the products so they would show on the site for the users. I was able to add the products correctly using my addProducts.html page I built out and the ProductsController I built out last week…Well, one of my team members told me they built out the adminProducts page, which meant I had to use that to add the products since only admins are able to add products to the site. I finish this and showed the team member whom will have a relative use this site in the future, he approved of the products page but wanted me to add a feature to enlarge and show additional images of the products…I didn’t know how to do that so I spent my afternoon (upwards of 4 hours) trying to figure it out. It seems so simple right? I thought.

First, I tried to implementing using Fancybox Lightbox alternative –  it was pretty cool but it required many more links that I desired – our page already had enough links to bootstrap and our various factories and controllers. It was working fine when I tested it underneath my original images that were output via the ng-repeat…but I couldn’t get it to work properly.

Before I left for the day, I managed to add the button to add a product to the cart, problem is we don’t have a cart created yet so we agreed to just add the items to the checkout partial.

Another solution I tried was to use Bootstrap modal – seems like a good idea right? It actually is but I am still having trouble displaying all the information for each picture. For example, I use the ng-repeat and ng-src for my image tag – Bootstrap doesn’t like that because a picture never

shows up. After coming home, I am still sitting here trying to figure out to implement this feature…I’ve found a few things to help get me started tomorrow – A w3schools tutorial but this is only to display one picture…So, I figured, why not just implement a carousal – I found Bootply code to implement this – I would of course I have tweak it to make it work for this project. I also found a stack overflow issue of someone who was having trouble using ng-repeat (like me) – The only option is to push the items into an array which I’ve seen twice already…I’m thinking this may be the only option.

Week 1 of Project Week:

It’s been a pretty productive week for me at the Dojo.

Monday:

On Monday, I was pulled aside by the instructor who went over a few things about my exam that I missed. Needless to say I didn’t pass the exam. I felt it was helpful, he returned my test to me and told me to go back over it. I spent most of my Monday doing that. In the afternoon, I started working on the group project with a few of my other cohort-mates…one of the guys wanted to build an e-commerce site for his mother. We had met that morning so I knew I was in charge of the create products page and the page to display all the products. I managed to add the pages physical pages and push them to github…Another person was working on the HTML/CSS for the main page and someone else’s job was the main dashboard page which would be the central hub for the admin to keep track of the purchases.

Tuesday:

On Tuesday, I spent my day working on preparing to re-take my exam for tomorrow. My biggest issue are the associations in mongoose, I always have trouble getting the user information to appear in the other collection in order to display the information needed and the fact that I’m not very good in deciding what all I would need for a schema.

Wednesday: 

On Wednesday, I took the test and immediately figured out that I would have to take it again. The associations tripped me up again! I did what I could figure out and turned my test in before I ran out of time. I spoke with the instructor that day and let him know that I got further than I did last time but still didn’t finish. I spent the rest of my day finishing the exam…I finally finished that night! It took way longer than it should have but I did it on my own and I felt really good about it. There was just one little thing I was missing…I was unable to display the name of there person who answered the question, which seems simple but all I could get to display was the Id of the person not there name.

Thursday:

On Thursday, I spoke to the instructor about it and he informed that since I had my association to the other table nested inside of an object, in an array I would have to do a little bit more work to retrieve it. I had to use the object keyword path in order to define which attribute of the collection I wanted to retrieve as well as the name of the table I wanted to retrieve the data from.   I thought I would finally complete it until I realized that I was still not saving the data correctly in my database…it would show up when I console.logged it after retrieving the one item of data! I decided to return to that after I finished making some headway on the group project. Thursday morning, I managed to get the functionality of adding products, saving them to the database and displaying the products to work so I pushed that up to github.

That afternoon, majority of my group was going to an event at the House of Blues where startups pitch their ideas to investors, we went to that. There were some good ideas presented but my favorite would have to be teaching kids to learn to code. It’s something I believe in, I used to volunteer to teach kids to code through a non profit so when I heard it presented at the event I perked up. I think it’s important to present it to kids at an early age along with the math and science classes. The startup that presented has already implemented the program in a few private schools in the Texas area. After hanging out for a bit, we returned back to the Dojo and after reviewing our experience with the instructor and a couple folks that didn’t go, I was about to head out for the day. I checked in with my cohort mate about the project and told him what all I completed and he informed me that he needed a button implemented after the user adds a product to purchase, so I implemented that and pushed my changes to github and left for the day.

Friday:

On Friday, I worked at home that morning – Turns out the exam I was working on had broken more since I left it, I was unable to view the information I needed about each product, I later on found out that I just uncommented out the function that was used to show the product when clicked on. That afternoon I went out of town to a graduation – my cousin was graduating high school, she made class valedictorian of her school! Super proud of her and her accomplishments. Anyways, I was still scratching my head about how to get the name of the person to show up on the question they answered for most of the 2 hour trip so I decided to turn to the video the instructor made – He recorded a lecture of the first exam I took, going over the answer in detail. I decided to spend some time going over that step by step…I looked at the video Friday morning but I didn’t code with him.

Saturday

On Saturday morning, I awoke in the hotel room from the alarm accidentally going off – My mom accidentally turned it on and couldn’t turn it off so I woke up to turn it off. I couldn’t go back to sleep and that was about 5am…I normally wake up at 5:20am anyway so I stayed up and started coding with the video. I plan to finish that today and then redo the exam I took on Wednesday…I probably won’t retake the exam until Monday or Tuesday when I’m more confident with creating schema associations and displaying the correct data.

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.