Thursday, December 31, 2015

Day 50.5

Recap of Winter Break


Winter break is almost over and I have finished over the time:
  • Relearned and added some features to Secret Santa Project
    • Still requires the random generator.
  • Did not do anything for the MEAN project.
  • Read through and did the first chapter of the iOS stack.
All in all, I should have done more but with so much of my break planned and the school not being open, it was hard to get a lot of good work done. Fortunately (for me), my MEAN group also had a lot of holiday plans so we didn't make a lot of headway there implementing the project but I think everyone has an idea of how they want to get their piece of the project done. We'll reconvene after the iOS to finish up everything.

Friday, December 18, 2015

Day 45 to Day 50

Winter Break + Plans

When I first signed up for classes at the Dojo, I was pretty confused why my second stack would only have 3 weeks but I realized the 4th week of every stack is reserved as a project week. Our Python stack got a bit behind so instead of a full week for group or individual project, we only had a one day hackathon. For the MEAN project, we were to work solo or with others over the course of Winter Break. I joined a group with Colin, Maric, Sarah and Raul. Our project is known as a MEAN Screen where we users can register and login to, essentially, an online theatre with group chat abilities. My part of the project is figuring out how the web server is going to broadcast a real time video.

Unfortunately, through my research, it seems this time of feature is precisely what HTTP is not really supported for. But an alternate method of this I found, is to have a user broadcast a stream. Now this is different in a couple of ways because it doesn't require the video to be put on the web server. Instead, the source of audio and video are on the users' side and the only thing to do is make a link that has the broadcast embedded. Anyways, that is going to be my contribution to the project. Although a lot of the members, including myself have Christmas plans so I don't know how far this project is going to get off the ground.

Also, my last stack is going to be iOS. From hearing the instructors, iOS is the hardest stack so I'll probably plan on getting a jump start on the learning platform sometime during the break. I intend to relearn a bit of Python and the Django framework so I can finish my Secret Santa project to post on GitHub. Hope all the readers have a good holiday break!

Day 44

Deployment and MEAN Black Belt


This morning I learned how to deploy via AWS (Amazon Web Services). I think usually, students deploy via Heroku (although there are a bunch of options to deploy). Heroku is very simple, you create a deployment server and git push your project unto that server where it will automatically run. Once you write 'heroku open', it will open up on your browser your project and if everything ran right, the project will load with its own database. AWS deployment is similar, but a lot more work as you have to go on the AWS site to launch a new instance of your project. Then you go onto your ubuntu server, type in that specific instance IP which will send you to a cloud server. The instruction had us go into a specific directory where we have to install node.js and changing to another directory to git clone our project from GitHub and finally linking our project into another directory and finally starting the server that way. Oh, and there is another public IP that your AWS instance gives you, which is what you use to share it publicly. And that is how AWS deployment works..don't know if I'm going to deploy on AWS that often.

Now onto the black belt. I was pretty nervous for the exam since I thought it would be a lot harder than the red belt and I was not very confident in my MEAN skills besides finishing up the Discussion Board assignment yesterday. Upon unlocking the test however, it wasn't as bad as I thought it was. The only thing I haven't seen was the use of time to act as data that needs to be manipulated to have certain functions. I got almost all the features but during the last hour and a half, I was attempting to plug in the last feature and it broke my code and I spent the remainder of my time desperately trying to fix my code. At one point, I was reading a function name and its code and....I had no idea how it related to the flow of information between my client side and my server side. Talk about a brain meltdown. Anyways, although I didn't get a perfect score on it, I was reasonably happy that I was able to solve a lot of things that I didn't have prior experience with.

Wednesday, December 16, 2015

Day 43

DONE WITH MEAN!


I finally finished the last assignment for MEAN. Discussion Board is by far the longest work I've done so far. It makes me really appreciate all the web sites that have basic associations with each other. But the biggest gem in this assignment is deep populate. Thank you Buu Nguyen for creating a brilliant module that dives into nested objects in schemas. Essentially, waaaaay back in Python when we played around with the Google Map API, the returned json was a huge object that contained a lot of information. Each of the information nested in those objects or arrays or whatever all had information that can be extracted. I dug myself into a whole thinking I had to do just that writing a lot of get/show methods. With deep populate, I just populate all the nested information easily and can access them via embedded Javascript.

My next assignment is to learn how to deploy and right after that will be the black belt. Wish me luck!

Tuesday, December 15, 2015

Day 42

End of Full MEAN


As of now, I'm 60/70% done with the last assignment. Gonna crank it out tonight. To be really frank, I feel really burned out. If you asked me last week how I felt, I would say pretty damn good. Going into full stack MEAN was a huge jump, not in difficulty (although there is a gap) but in how much patience is required. Sometimes I get so absorbed in how the information flows that I overlook a lot of syntax errors. And because there are so many files, you have to check each one to make sure the flow of data is correct and after hours of doing this, it can get really tiring. 

For our black belt, we know that we're gonna have the following being tested:
  1. Login/Registration 
  2. Validations
  3. Associations in Mongo
  4. CRUD operations
And, as I've said before, it's nothing new. But adding them all together can really wear out someone's patience simply because the task is pretty ginormous. I wrote that during the Red Belt Exam, it felt like the 4 and a half hours flew by. And I feel like this time it's gonna be even more so since we only have 4 hours. And on top of that, we have to deploy our project. But this is what it means to be a programmer; to really love what you're doing even when you would prefer not to. So let's go. I'll update you guys tomorrow on deployment.

Monday, December 14, 2015

Day 41

Last week of MEAN


Starting the last week of MEAN, I had almost finished the mini-store assignment over the weekend. It took me a while to finish all of it because of the validations. We were shown how to do validations with ng-messages but I found a more bootleg way that resembled how we did flash messages in Python: write the validations in the client controller file and have an error switch. For each error switch, have a span that writes out the error messages via ng-show. Ng-show allows the span to be hidden until the expression that is written is shown to be true.

We have our Black Belt exam on Thursday. I plan on finishing the last assignment (which is supposed to be really similar to our Black Belt) by tomorrow and start learning deployment of projects. 

Friday, December 11, 2015

Day 40

Trying to finish MEAN!


So basically this weekend will be devoted to finishing up MEAN. I have 2 more assignments to go and it should be pretty good feeling done with most of the coursework. The tricky part about MEAN is how many pieces it has. In a way, it feels like a house of cards. When everything goes right, you have a web app that doesn't require page reloads and you can do a bunch of cool stuff with it. But if there's any syntax error that clogs the flow of information, then everything breaks. A good thing to learn is to console log all the possible error spots which are usually in Angular. The one thing I forgot to mention about Angular is the importance of callbacks. Before, we didn't need to do callbacks in our factories because we have the information at hand but now, callbacks are extremely important because adding something into a database, we want to callback the response from the database. So building an app in MEAN takes a long time to get it right but here's to going!

Day 39

Full MEAN


Now that we have learned Angular, we can now do everything in Full MEAN. Although daunting at first, I realized it's just adding the angular code to the routes and that was essentially it. This is the flowchart for MEAN:
Again it seems like a lot of info but we've done most of the work already. My dumbest mistake of the day was not reading the first assignment fully and not changing the bodyparser to read json. Everything now in MEAN is going to be passing through objects to and from the view to the DB and backwards. 

Day 38

AngularJS Associations


I thought the AngularJS assignments were pretty easy until we started associations. Before, we would just have an array that is our "database". Oh, one thing that should be mentioned is that all the assignments are done in just Angular. Nothing is being done with the other 3 parts of MEAN. Now, originally all the items in the array of objects only had one value per key. But with associations, there can be key with an array value that holds multiple values in itself. 

There is a workaround that you can do; whichever information that is being displayed, you can just push information into that factory. Imagine you can add users and teams. But you have to associate the users into teams and you can only have one team per user. But a team can have multiple users. The proper way to do this assignment is to add a team field to your players list in your player factory and then a users array in your team factory. But on the associations partial, you need to just show all the users that are currently existing and associate teams with them. So my workaround to this correct way is to add a team to the players and that was it. 

However on the next assignment that Kris gave us, it was basically the same thing but with users and parties and we had to work in groups so I did learn how to do it the proper way.

Day 37

Angular JS


Today I started AngularJS, the last part of MEAN. To give you guys a recap, MEAN stands for:
  • MongoDB
  • ExpressJS
  • AngularJS
  • NodeJS
Mongo is the database, Node is the web server that passes info to and from the client and the database. Express act as a Node module that relays information from the database to the web server and finally Angular act as the framework that receives and passes information to the web server from the client side. AngularJS uses HTTP requests to pass to and and receive information from the web server. To use it, there is a script to add into your HTML. Angular has its own controllers and a thing called factories. Factories is what passes information to the web server. Controllers directs what is happening on the page. That's just a quick view of Angular!

Day 36

Modularization


We did some old assignments such as the Wall as one of our last assignments for the chapter. Again it was nothing too crazy and it taught us how to do what we've done before but with the MEAN stack. I finished the 1955 API a day early so it allowed me to look back and review what I've learned so far. Before 1955, we learned how to modularize our code. Therefore we separate the Node server to one file, and every Model, Controller and Routes we had into each of its own file. It's a pretty arduous process but it makes the structure of my code a lot cleaner.

The 1955 API is just a simple assignment that allows you to add and delete and look at individual names that you've added. We would first add all the necessary mongoose.js files, routes file, model file, controller file etc. Then everything that we would've had on our server file, we split. So routes has all the routes but none of the functions, that's in the controllers. Model is made to set up the Schema and table in Mongo. But yeah...that's essentially modularizing project structure!

Friday, December 4, 2015

Day 35

MongoDB


Finally, we get to work with NoSQL! For those who don't know, NoSQL is known as Not Only SQL. In SQL, there are strict rules in how columns are changed. For example, let's say person 1 has height, weight attribute. And person 2 has height, eye color and hair color attributes. In SQL, you wouldn't be able to put these two people in the same table and you would actually have to construct multiple tables just to hold these two people! In MongoDB, all that doesn't matter and you can plug these people into the DB. So the first assignment is to work with the syntax of how to insert and manipulate data in Mongo.

The next thing we learned is Mongoose, which is just a layer between our server file and our MongoDB. Mongoose provides a bit more structure for MongoDB. Mongoose also lets us be able to insert and pull data from and to the database. Although similar, Mongoose has its own documentation and has its pros: built-in methods such has update() that allows for easier to understand and less verbose writing it out in MongoDB. Our assignments are all pretty straightforward and we've done them all before, but never in JS with its own JS DB. We're expected to finish the rest of MongoDB over the weekend and start on AngularJS next week!

Thursday, December 3, 2015

Day 34

ExpressJS


Again, today we were hit with another recursion problem that was really difficult. Although in my opinion it was easier than yesterday's. The problem is to take a string (like 'abc') and return an array that lists all the combinations (['abc','acb','bac','bca','cab','cba']). It was a similar format to yesterday's, except the return array consists of all combination of the str. In yesterday's case, the substring that is being pushed into the array has an order (i.e. a cannot be after b etc.) but the length doesn't matter (can be 'a', can be 'ab' can be 'abc'). In today's problem, the length does matter, as the substrings that is being pushed into the array must be of the same length of the str that is taken in as a parameter. And also, the order doesn't matter (str of abc can return 'bac'). I tried doing the problem without recursion and I hit a problem; depending on the length of the string, thats how many for loops there must be to rearrange all the characters. The first for loop holds the index of one of the characters, the second for loop holds the second index and the last for loop rearranges the last index. Now if the string was 4 character, then it would be 4 for loops. I was thinking of doing a recursion inside a for loop since even a recursion would have limits, but I still couldn't find a solution. The answer key, as it turns out has a recursion inside the for loop so my mentality was right but I couldn't implement it in code. 

We did ExpressJS today and one of the exciting parts of using Express is the ability to use sockets. Sockets allow a non-blocking connection between the server and the user. All group chats and video games undergoes that kind of methodology. Anything that happens to the server is reflected to every single user in real time. One of the annoying things about Express is all the modules you have to install to make the program work. Sockets is confusing in the sense that every event that you fire from client to server or server to client, you have to write a listener function to that event on the opposite side. 
  • Client-side emits handle to Server-side's listener which emits a function to the Client-side's listener for that specific server side function.

Day 33

NodeJS


Today was the first day that I had no idea how to do algorithms. The second algorithm was to write a function that takes in a string and returns an array that gives all possible in-order combination. For example, str = "abc" should return [" ","a","b","c", "ab", "ac", "bc", "abc"]. I wrote yesterday that it makes life easier to first write the non recursive form of this and I did do that...except I couldn't translate it into a recursive function. When Kris showed us his solution, it completely blew my mind and I think it blew everyone else's mind. So far, we've only returned a function by itself once, with this problem, you have to call itself (but with slightly different parameters) again. Even as Kris showed us a feature on Chrome's debugging feature where it showed us everything that is happening line by line, it didn't make sense. Seriously, I've never been so out of depth with algorithms and it does scare me at how unprepared I am.

We went through all of Node today. NodeJS is a backend server that is very useful because of how lightweight and compact it is for very specific purpose of real time functions in a software or website. Imagine a chatroom with 100,000 people, when you write something, the message should show to everyone at the same time and immediately. With other servers, this is not possible without a refresh of the page or if it is possible, causes a high amount of server load so the users in the chatroom would be severely limited. One node in NodeJS can handle 200,000 connections. But Node does have drawbacks, namely working with relational databases, like MySQL and anything that requires heavy computation.

All in all, the assignments again weren't too hard but there was a lot of information to absorb. There is a way of doing routes that makes it easier than how it was done in Django but it was really repetitive to write a code for every static, image files. This is what I mean:
//http server
var http = require('http');
var fs = require('fs');
//creating a server
server = http.createServer(function (request, response){
  response.writeHead(200, {'Content-type': 'text/html'});
  console.log('Request', request.url);
  if(request.url === '/'){
    fs.readFile('views/index.html', 'utf8', function (errors, contents){
      response.write(contents); 
      response.end();
    });
  } else if(request.url === '/dojo.html'){
    fs.readFile('views/dojo.html', 'utf8', function (errors, contents){
      response.write(contents);
      response.end();
    });
  } else if(request.url === '/stylesheet/style.css'){
    fs.readFile('stylesheet/style.css', 'utf8', function (errors, contents){
      response.write(contents);
      response.end();
    });
  } else {
      response.end('File not found!!!');
  }
});
server.listen(8000);
console.log("Running in localhost at port 8000");
Low and behold, our last assignment of the day was to find out how to write an import .js file that dynamically knows which folder to look in and render which file in the fold.er

Day 32

Advanced Javascript Topics


We are blazing through the MEAN stack at the moment. We've yesterday we've finished two chapters (fundamentals and OOP) and now we're going through all the advanced topics. These topics include callbacks and event handling. Callbacks are just functions that are passed through another function as a parameter. Why is it important? Delegation and event handling. Think of delegation as a parent function continuing whatever is coded into it and the callback being a function that runs in the background or along side the parent function. This is where event handling comes in, the callback function runs if the event is met or the callback returns something when a callback happens!

The assignments weren't too hard, it covered most basic callback functions. I don't know whether this is a good thing since I've heard callback functions are very useful and used a ton in industry or maybe callback functions is only as complicated as the functions you put into it. Anyways, that's it for today's post.

I also want to mention that algorithms has been kicked up a notch. After linked list last week in Python, we are now doing recursive functions for the first week of the 2nd stack. I remember hearing about it from CSE 143 students and I can see why it's so hard to grasp. The trick I learned so far is that recursions are essentially for loops or while loops. So, do the problem first using for or while loops and eventually translate that into a recursive function.