Fifth Week in Coding Bootcamp: Knockout JS, Front-End and Full-Stack Web Development, Bootstrap, Bower

By: Karen Snyder

On October 19, I started the fifth week at Origin Code Academy. Over the weekend, I had completed the Knockout JS tutorials, which introduced the basic concepts of Knockout JS(JavaScript) . JavaScript is a scripting language used by Web pages, and Knockout JS is a library of JavaScript functions that simplifies the implementation of Web page user interfaces, by allowing fields on the Web page to update automatically according to user action or changes to the data.

Cameron explained that Knockout JS uses the MVVM (Model-View-ViewModel) pattern, which consists of the Model (application data such as back-end SQL tables), the View (HTML/CSS files for the web page structure), and the ViewModel (interface between the Model and the View, implemented by Knockout JS functions in this case).

Then it was time for the first project of the week, the Change Calculator that I had already done in C# as a Console and WPF application, but this time implemented as a Web application. It was a good way to become familiar with how to set up the necessary folders and files, and what tools can be used to make the process more efficient.

It is a little more complicated to set up the folders and files for a Web application, because there is some manual work involved. When I use Visual Studio to write a C# application, Visual Studio takes care of the folder structure, but with a Web application, I have to set up the folders and files myself. There has to be an index.html file, which contains the HTML that defines the structure of the Web page, CSS files that define the styling of elements on the Web page, and JavaScript files that contain the JavaScript that I write for the application ViewModel, as well as any JavaScript libraries that my application needs.

I learned how to use the Bower tool to automatically download files and place them in the appropriate folders, so I don’t have to manually download the files for each package that I want to use in my application. However after the files are downloaded, I still have to edit the index.html file to include them. There’s probably a way of automating that, I just have to find it!

I became more familiar with using Bootstrap, which provides ready-made components that can be used on a Web page. This enables you to set up a Web page in a lot less time than if you had to write all the HTML/CSS for each element yourself. I was also pointed toBootswatch, which provides themes to enable changing the look of a Bootstrap-built Web page quickly and easily. I think it makes sense to use time-saving tools like these, as they help to get Web pages set up quickly and efficiently with standard components.

I did struggle a bit with my first Web project, the Change Calculator, as I had to put all the moving parts together: setting up the folder and files, designing the look of the Web page, setting up the HTML, getting used to Bootstrap, getting used to Knockout JS, etc. I also ran into the problem that JavaScript is not a strongly-typed language, so calculations with numbers can be problematic. This meant, for example, that a calculation that should have yielded 0.20, instead yielded 0.19999993! Cameron explained that to solve this problem, there are JavaScript math libraries that can be used in order to get precise calculations.

For the next project, Cameron taught us about the Knockout mapping plugin, which is useful when fetching JSON (JavaScript Object Notation) data from a server. The Knockout mapping plugin provides easy mapping of the JSON object to a JavaScript variable in the ViewModel, rather than writing code to manually parse it. He also showed us how to usejQuery Ajax requests to read Web data.

Armed with this knowledge, the next project was to build a Movie finder Web application, using the Open Movie Database API. The database includes TV shows in addition to movies, so I built an application that enables searching for only movies, only TV shows, or both. I was starting to get more comfortable working with front-end design, and using Bootstrap and Bootswatch, as well as my own custom CSS file, to improve the look of the Web page.

Then it was finally time to work on the front end for the LargeBank API that I wrote last week, meaning that I would be completing a full-stack Web application and I would be a full-stack Web developer! I learned that it was necessary to make a change to the LargeBank API involving CORS (Cross Origin Request Security), in order to enable the Web application to use the LargeBank API to get access to the LargeBank database.

I got my LargeBank front end working, as a Web application showing a list of customers, and the ability to add or edit a customer. Although it appears that the adding/editing is done on a different Web page, it is actually the same Web page, with different parts showing according to what the application needs to do. This is called a single-page application, which usually provides a better user experience, as constant page reloads are not necessary. While doing this project, I learned to use the Toastr JavaScript library, which provides simplified user notifications that are more attractive than using the JavaScript alert method.

Our guest speaker this week was Nicholas Head, the Director of Software Development atHireaHelper, a company that helps you to compare prices for moving companies, and book a truck or moving company. He is a self-professed computer nerd/geek, who started programming at a very young age, and has had a rewarding software development career without a college degree, although he was told in high school that was not possible. He gave us an overview of the software system at HireaHelper, explained the daily routine of a software developer, and advised us on how to become awesome software developers!

Then Cameron assigned us the weekend project, a full-stack Web project to implement a Guestbook that displays messages and allows new messages to be added. The project requirements including setting up the SQL database, writing the API for the database, including a unit test for each method, and building the front end with Knockout JS. I decided that my application would be for visitors to Iron Gym to leave comments about their awesome workouts!

I got the SQL database and the API including the unit tests done on Friday, and yesterday I started building the front end. This was the first project where I used images on the Web page, so that was a learning experience too, finding Websites with images that were either not copyrighted, or were licensed in a way that I could legally use them (e.g. Creative Commons licenses). I completed the basic functionality, along with adding some animation with the help of animate.css, but I still need to do some tweaks!

Is it acceptable to cry in class?

By: Zak Dietzen

In my last blog post I mentioned it being the hardest week yet. Well, this week surpassed that 10 fold. I really feel lost currently but I am excited to say that we wont be learning anymore new concepts or languages. This gives me a chance to go back and read over everything and study it more.

We started learning front end this week. We took a few older projects and built a front end for them. I really felt like I struggled with the new materiel because I knew nothing about JavaScript, CSS, and HTML before this week. We moved on from C# and started working with the above tools. Right when I felt like I was understanding the C# I get thrown a curve ball. It hasn’t been all to bad though. Being thrown into the deep end teaches you how to swim, or sink if you just give up. This is the first time I felt like I was getting completely left behind/lost. Instead of sinking though, I’ve been reading, watching videos, and doing tutorials online to understand JavaScript and HTML. I am struggling still with time management now that I have to learn these new tools and still try and get all my projects done for class. There just isn’t enough time in the day.

A really fun project we worked on this week was our “Movie Nerd” application. We used knockout.js and bootstrap to create a responsive webpage that scales to different size screens.Movie Nerd Screenshot We called a movie database API that returned information on whatever movie the user input. This project was my first time working with JavaScript and my first time with knockout,js and bootstrap. Both of those tools were extremely useful and interesting to learn but also took a lot of my time. I had to read up on all the documentation, watch videos, and do the tutorials on their site to try and understand what I was doing.

Another project that we worked on this week was our BigBank API and making it a full stack application. We were to build the front end and use knockout.js and bootstrap again. This has been by far the most difficult task to date in the class. I’ve been coding away for the past 3 days non stop and still have yet to get the project finished. Whenever you think you get close to being finished you find out you are nowhere close. There is always something to add or fix and it seems to be never ending. It is encouraging that I am only a month into learning this and have been able to complete mostly all of my projects.

Thursday night we had a MeetUp at the Evo Nexus building and wow what a turnout! Ever seat in the place had a body in it. We went over some JavaScript and learned what it does. We checked out a few awesome websites from the 90’s that had no/very little JavaScript. Needless to say that was a blast from the past! It is really incredible how far the web has come from its beginning stages. We also had a guest speaker, Nick Head, he is the Director of Software Development at HireAHelper.com, come and speak to us. He gave us some valuable information for Jr Devs on hiring, tools they use, and some great sources like blogs and podcasts. I love being able to have access to all these Developers and CTO’s every week.

That’s enough blogging for now though. I have to wipe the tears from my eyes and jump back into the gauntlet! Time to get in the zone and bust out some code! Hope everyone has a wonderful weekend. Check back in next week as always.