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.

Installing Node, NPM and Express on OSX from Scratch

By: @jeffwardcoding

Prerequisites

You need to have Git installed. By far, the easiest way to do this is with Homebrew. Follow these Homebrew Installation Instructions.

Now that you’ve got Homebrew installed, use it to install Git from within your Terminal:

$ brew install git

Installing Node

If you don’t have Git installed, use Homebrew to install that first.

Here’s a basic installation guide for Node.

Getting Node’s source code

If you don’t already have a place to store external source code, put it somewhere usefuls, like a “src” directory in your home folder:

$ mkdir ~/src

Now that we’ve got a place to put it, let’s download Node:

$ cd ~/src
$ git clone https://github.com/joyent/node.git
$ cd node

Building Node

You’ll want the latest stable version. Stable version are use even numbers, while unstable dev versions use odd. At the time of this writing, the latest stable release is 0.4.7, so let’s checkout that tag before building:

$ git checkout v0.4.7   # you'll get a note about a detached HEAD state.
$ export JOBS=2         # optional, sets number of parallel commands.
$ mkdir ~/local
$ ./configure --prefix=$HOME/local/node
$ make
$ make install

Telling your system where to find Node

We’ve got to add the node bin folder to your path so that you can easily use node from the command line. Open up your.bash_profile and add Node’s path to your PATH.

$ nano ~/.bash_profile

If you already have a line that starts with export PATH=, just add Node’s path to the beginning. For example this:

export PATH=/usr/local/bin:$PATH

would become:

export PATH=$HOME/local/node/bin:/usr/local/bin:$PATH

If you don’t already have a PATH export declared, just add this to the file and save:

export PATH=$HOME/local/node/bin:$PATH

Testing your Node installation

To make sure this all worked as expected, open up a new Terminal window and run:

$ node -v
> v0.4.7

Success!

Installing NPM

Now, I’m guessing you’d like to install some Node programs, like Express or something like that. EASY! NPM is incredibly easy to install:

$ curl http://npmjs.org/install.sh | sh

This should print out a bunch of stuff, ending in It worked. There may also be a single npm WARN Not installed in blah blah blah... line – don’t worry about it.

Testing your NPM installation

Again, just open a new Terminal window at run:

$ npm -v
> 1.0.1rc4

Another success!

Bash Completion

Once incredible helpful feature of NPM is that implements Bash completion, which makes using NPM quite a bit easier at times. To enable this you’ve got to source NPM’s completion file into your .bash_profile. Open .bash_profile up again, and add this to it:

source ~/local/node/lib/node_modules/npm/lib/utils/completion.sh

Installing Express

Now that we’ve got NPM installed, we can use that to install all the Node.js goodness we can get our grubby little hands on, including Express!

NPM 1.0 is more more opinionated than earlier releases – instead of installing modules globally by default, modules are installed at the project-level. Command-line tools, on the other hand, can be installed globally.

The express Command Line Tool

Express is both a project module, and a command line tool, so we’re going to install it in both places. Let’s start by installing it globally:

$ npm install -g express

Now that we’ve got our express command-line tool, let’s use that to create an Express application:

$ mkdir ~/Sites/bitchin-express-app
$ cd ~/Sites/bitchin-express-app
$ express -s -t jade

Done!

Dependency Management

Next we need to specify our application’s dependencies. NPM gives us a clean and maintainable way to do this with the “package.json” file. Create this by running npm init from with the root of your project, and just follow the prompts:

$ npm init

When you’re done with that, add your dependency declarations to the file. Express and Jade are both dependencies for me. This is what my final “package.json” looks like:

{
  "name": "bitchin-express-app",
  "description": "My Bitchin' Express App",
  "version": "0.0.0",
  "repository": {
    "url": ""
  },
  "author": "Dan Dean <me@dandean.com> (http://dandean.com)",
  "directories": {
    "lib": "."
  },
  "scripts": {
    "test": "expresso"
  },
  "engines": {
    "node": ">= 0.4.7 < 0.5.0"
  },
  "dependencies": {
    "express": ">= 2.0.0 < 3.0.0",
    "jade": "*"
  }
}

Dependency management is one of NPM’s excellent features. We can automatically install all of our application dependencies by simply asking NPM to take care of it. From within your project folder run:

$ npm install

You should notice that your project now has a “node_modules” folder. Inside that you’ll see an “express” folder, which contains the Express framework module for use just with your new application.

Running Your Application

We’ve got to create a couple more little files before we’re ready to go: our “layout” and “index” files.

$ touch views/layout.jade views/index.jade

You’ll notice that back when we created our application we passed the -t jade argument to express. This configured our app to use the Jadetemplating engine.

Open up “views/layout.jade” and paste this into it:

!!!
html
  head
    title Hell's Yeah.
    link(rel="stylesheet", href="/stylesheets/style.css")
  body!= body

And paste this into “views/index.jade”:

h1 This is a Bitchin' Web Applications!
p Am I right?    

Now all we have to do is start our fucking rad, Bitchin’ application! From the root of your project run this, the open thehttp://localhost:3000 in a browser:

$ node app.js
> Express server listening on port 3000

In Conclusion

Hopefully this introduction is enough to get you up and running. There’s a whole lot going on in the community. Keep up to date by following the Node blog. If you want to explore the many modules available for use in your applications, poke around the NPM Module Registry.

 


Source: http://dandean.com/nodejs-npm-express-osx/

Fourth Week in Coding Bootcamp: SQL, Entity Framework, Writing REST APis

By: @kd_snyder

On October 12 the fourth week began. Over the weekend I had completed the SQL tutorials at Codecademy and SQLZoo, so I had written a lot of SQL queries and was ready to go! I struggled a bit with the more complex queries in SQLZoo involving subqueries and joining tables, and I need to find some more tutorials to get more practice. I even had some previous knowledge of SQL, as in 2003 I attended an Information Systems course, where I learned about Windows 2000 and SQL, and then obtained the Microsoft certifications MCP, MCSE, and MCDBA. However, whatever knowledge I retained from that needs to be updated!

Cameron taught us about various implementations of SQL Server; the class is using Microsoft SQL Server, along with SQL Server Management Studio. I learned that CRUD does not mean what it sounds like! It means Create, Read, Update, and Delete, which are the basic operations that are needed to work with data. They map to the HTTP operations POST, GET, PUT, and DELETE.

The first project was to write SQL queries to create tables for the LargeBank database, to hold information for customers, accounts, transactions, and statements. This project is the first step of a very exciting larger project where I get to build the back end SQL database, and then write an API to access it, and then write a front end that utilizes that API!

Next, I learned about using the Entity Framework to access the SQL tables, as an alternative to building SQL queries in C#. The Entity Framework is an ORM (Object Relational Mappers) that maps relational data to objects, so it is simpler to access the data in the SQL tables, but it involves some overhead, therefore it is slower for larger databases than simply building the SQL queries in C#. The next project was to write a C# application that uses the Entity Framework to access the SQL tables built in the previous project.This was getting better and better… I could use C# code to access the same SQL tables that I had built with SQL queries!

Then Cameron explained the basic concepts of REST (Representational State Transfer) APIs, how they should be designed and structured, and how to write them. The next assigned project was to use the ASP.Net Web API in C# to write the API for the previously built LargeBank database. There were a lot of new concepts here, and luckily Cameron has been recording his lectures, because I needed to watch his lecture again, and continually pause it to perform the actions that he was explaining, in order to get started writing my API!

The “bonus” this week (not sure who else saw it as a bonus) was that I learned how to write Unit Tests in Visual Studio! The reason for learning this was that a Web browser can be used to test the API GET methods to verify that they are working, but since a Web browser does only GET, and doesn’t do PUT, POST, or DELETE, it was necessary to find another way to test those API methods.

Once again I had to rewatch the lecture where Cameron taught how to write the test methods, and keep pausing it to get my Unit Tests started, but after rewatching, I managed to get my first tests working. It was really a challenge to understand how to interpret the structure of the HTTP results of the API methods, in order to properly verify them in the test methods, but after some struggling, I was able to add enough tests to have a basic test method for each API method. I had to get Cameron’s help for one where i was stuck, but for another one, I was able to figure out the problem myself! I can see that writing complete tests to cover every basic case and error case would be a time consuming, but necessary part of software development.

This week’s guest speaker was Neal Bloom from hired.com, and he was very optimistic about our prospects in the job market. He said that we are learning skills that employers are looking for, such as .NET, C#, Javascript, using APIs, writing APIs, etc. I liked hearing that!

The weekend assignment was to complete the tutorials at Knockout JS  in order to prepare for… front end!

Week 4 Review

Origin Studentsqoyr
n. [Oh-re-jen Stew-dent]
An organism that turns Coffee and Soylent into software.

This week we covered 3 main topics.

  1. Databases
    We kicked off this week by learning about Structured Query Language, which is a standard set of instructions to manage databases and provide a set of operations to Create, Read, Update, and Delete data in a database.  There are many different implementations of SQL (SQL Server, MySQL, PostgreSQL) which we covered in light detail before building our first “LargeBank Inc.” schema in SQL Server.
  2. Object Relational Mappers
    Object Relational Mappers are a common tool used in software to map Relational data into the Object-Oriented world. We talked about some different implementations of ORMs in the .NET framework before using Entity Framework to build an experimental C# application that could perform basic CRUD operations on the LargeBank database.
  3. REST APIs
    REST (Representational State Transfer) is an architectural style of writing web services that is very popular in the Real World™. We learned the basics of what constitutes a “RESTful” API, talked about how REST is just a pattern that can be implemented in NodeJS, PHP, ASP Web API, and Django to name a few before writing our first REST API using ASP Web API. This API exposed resources that internally use Entity Framework to return information from the LargeBank database.

There was definitely a lot to soak in this week, but students get lots of hands on time with these different technologies to internalize enough of how they work to build projects.

In Week 5 the goal will be to build a web app that consumes the API written in Week 4. We will be introducing the MVVM pattern (implementing using KnockoutJS) as well as some cool third party libraries (Bootstrap, Font Awesome to name a few) that can be used to spruce up the appearance of our web apps.

The Revealing Module Pattern || JavaScript Design Patterns

By: @jeffwardcoding

The Revealing Module Pattern

Now that we’re a little more familiar with the module pattern, let’s take a look at a slightly improved version – Christian Heilmann’s Revealing Module pattern.

The Revealing Module pattern came about as Heilmann was frustrated with the fact that he had to repeat the name of the main object when we wanted to call one public method from another or access public variables.  He also disliked the Module pattern’s requirement for having to switch to object literal notation for the things he wished to make public.

The result of his efforts was an updated pattern where we would simply define all of our functions and variables in the private scope and return an anonymous object with pointers to the private functionality we wished to reveal as public.

An example of how to use the Revealing Module pattern can be found below:

var myRevealingModule = (function () {

        var privateVar = "Ben Cherry",
            publicVar = "Hey there!";

        function privateFunction() {
            console.log( "Name:" + privateVar );
        }

        function publicSetName( strName ) {
            privateVar = strName;
        }

        function publicGetName() {
            privateFunction();
        }


        // Reveal public pointers to
        // private functions and properties

        return {
            setName: publicSetName,
            greeting: publicVar,
            getName: publicGetName
        };

    })();

myRevealingModule.setName( "Paul Kinlan" );

The pattern can also be used to reveal private functions and properties with a more specific naming scheme if we would prefer:

var myRevealingModule = (function () {

        var privateCounter = 0;

        function privateFunction() {
            privateCounter++;
        }

        function publicFunction() {
            publicIncrement();
        }

        function publicIncrement() {
            privateFunction();
        }

        function publicGetCount(){
          return privateCounter;
        }

        // Reveal public pointers to
        // private functions and properties

       return {
            start: publicFunction,
            increment: publicIncrement,
            count: publicGetCount
        };

    })();

myRevealingModule.start();

Advantages

This pattern allows the syntax of our scripts to be more consistent. It also makes it more clear at the end of the module which of our functions and variables may be accessed publicly which eases readability.

Disadvantages

A disadvantage of this pattern is that if a private function refers to a public function, that public function can’t be overridden if a patch is necessary. This is because the private function will continue to refer to the private implementation and the pattern doesn’t apply to public members, only to functions.

Public object members which refer to private variables are also subject to the no-patch rule notes above.

As a result of this, modules created with the Revealing Module pattern may be more fragile than those created with the original Module pattern, so care should be taken during usage.

Things are getting interesting

Written by: @zakdietzen

This week we dove into the wonderful world of API’s. We were given an introduction to API’s and how they worked Monday in class. We were then told to build a program that fetched github data about a user and displays that information to us. It was a great first exercise. It was a lot of fun learning about what you can do with an API and the information it gives you. We worked with other API’s as well. We created a high frequency trading app (not one that you would want to actually use) this week as well. It would get information using Yahoo finances API and would give us information on buying and selling a stock if the price would raise/decrease. We built a weather app the gets informationAPIfrom the zip code the user enters. This was a really fun app to build and helped me understand how to take the data received from the API and turn it into a JSON string. We can then take that JSON and display our information from the API to the user. I could go on and on about all the cool stuff we have been doing with API’S but ill move on for now.

I’m struggling with keeping my code organized and keeping track of where I am when I code. It’s hard to remember exactly where you left off at when you take a break from your project. I found that keeping a “captains log” of what you were doing and where you were in your code really helps out with that. In the next coming weeks I really want to buckle down and having organized clean code. This is also the first week I didn’t get all my assignments completely finished. I’m going to take time from this upcoming weekend though to go back and make sure I get everything done.

One thing I really like about the code class is having other students there with me. It’s awesome being able to slack one of them, or the teacher, and ask for help trying to figure something out. We all work really well together and try and give each other tips and tricks along the way.

Even after three weeks, when you compile your code with no errors I still get a rush. It’s so rewarding seeing your code run error free. Watching something start from nothing and then seeing the actual program run is the best! You feel so accomplished getting everything to work. It’s also equally as frustrating to work for hours and get no where. The only advice I can give you there is stay persistent. Keep plugging away at it and you will eventually figure it out.

It’s been a tough yet rewarding week. I cant wait to dive into next weeks lessons on databases. Check back in next week as always for a look into week 4 at Origin Code Academy!