Twelfth Week in Coding Bootcamp: Blog Aggregator, OAuth, and Azure

By: Karen Snyder

 

December 7 was the start of the twelfth week  in coding bootcamp! It was actually not our last week; we still have class next week through Wednesday, which allows me more time to complete my Blog Aggregator capstone project.

I had some problems with Angular Material, but with Cameron’s help I was able to complete the front end. I also completed the basic functionality, so now I can add blogs to Blog Aggregator and approve the blogs for display, and then Blog Aggregator extracts the posts and displays them! I can also reject blogs for display, and delete them. A large part of the functionality is done, but there are still two parts to add: authentication, and periodic updating of the blog posts.

OAuth has reared its ugly head again… It would not be a good idea if just anybody could approve/reject/delete blogs, so I need to have authentication in Blog Aggregator. It was going to be the same type of  user/password authentication that I had implemented in a previous project, although there might be some complications due to the repository layer. However, Cameron said that he would like to be able to log in with Google+, and potentiallyFacebook. This was a great real-world example of the product owner changing the requirements! So I had to research logging in with external providers, with the help of Zak, who is also adding external login providers to his Quack project. I’m focusing on getting the Google+ login working before I work on the Facebook login.

It took over two days to try to understand how external login authentication works, and add the necessary code. Then I had to learn how to use Azure, a cloud platform that can host Web applications, to host Blog Aggregator. The reason for needing Azure is that when an external provider receives a login/authentication request from a localhost address rather than a secured https: type address, it does not allow the  request. I got to the point where Blog Aggregator sends a request to Google+ and receives an access token, but then there was a problem in the Blog Aggregator API when processing the token…  still working on it!

The other part that I need to add to Blog Aggregator is that after a blog is added to Blog Aggregator, any new posts to that blog need to be added to the database. This functionality can be handled by an Azure WebJob, which provides a way to schedule a periodic task. After studying a lot of Azure WebJob documentation,  I started on the WebJob part of my project. I did complete the service methods to update the table, but I’m having trouble with the interaction between Simple Injector and the WebJob.

This week I did take a small break from coding to teach at  Franklin Elementary School for the Hour of Code. This is an event that aims to introduce students to coding concepts, with the aid of a Star Wars tutorial that uses drag and drop blocks. I taught a sixth-grade class, with the help of the teacher and other volunteers, and the kids loved it; they didn’t want to stop for recess!

Seventh Week in Coding Bootcamp: Authentication with OAuth

By: Karen Snyder

On November 2, I began the seventh week at Origin Coding Academy. Hard to believe the first half of coding bootcamp was over, and I was starting the second half! In the beginning of the week, I learned more about passing information to the different states of a single-page application, and also learned how to use the AngularJS $resource factory to simplify access to the PropertyManager API, resulting in much less code than I had needed in KnockoutJS to access an API. The $resource factory can be used only with RESTful APIs, and luckily the APIs that I write in this course are RESTful. After that I was able to complete the front end of the PropertyManager Web application, including showing all properties, tenants, and leases, along with the functionality to add and update each.

Then I started earning about authentication and authorization, which is a huge topic that can’t be completely learned in one week, but it is possible to get some understanding of the subject. I was assigned the tutorials here, written by Taiseer Joudeh, which illustrate how to authenticate users in a Web API and AngularJS front end with a token-based approach. The token-based approach means that the server assigns a token to a validated user. The client saves the token and sends it with each request that the user makes to read or write data. This approach helps the client to share the server load in authentication, and the token is more simple to store than cookies.

After going through the tutorials, the next project was to use the knowledge gained by adding authentication to the PropertyManager Web application. I had to modify the Web API to add authentication, based on what was taught in the tutorials, by using ASP.NET Identity and Owin middleware packages in order to register new users and validate user credentials to generate tokens.

I learned how to use the Chrome Postman extension to verify after making the changes that it was not possible to access the API without first registering as a user and then obtaining a token to send with the GET or PUT to the API.

Then after verifying the the back end authentication was working, I added authentication to the front end. I added a login and registration screen to the front end of the PropertyManager Web application, along with a logout button and a display of the logged-in user. When trying to log in with the front end, I initially ran into some problems with Cross-Origin Resource Sharing (CORS), as the default is that the API does not allow requests originating from a different domain. These problems did not occur when testing with Postman, as requests sent by Postman are not interpreted by the API as originating from a different domain, however requests from the front end are interpreted as being in a different domain. I made some changes in the API to allow CORS and was able to proceed with the front end changes.

I also learned more about how to validate in AngularJS by using components of theinput directive. Cameron explained to me that rather than disabling the submit button if a field is invalid, it is a better user experience to allow the user to complete their typing and click the button to submit, and only then to display any problems with the input data. I added validation logic to the login, register, and add property/tenant/lease screens, such that when the user submits the form, any required fields that have not been filled in are highlighted in red with a message underneath stating that they are required.

The guest speaker this week was Jim Milton from Portfolium, which is a site that allows you to build an online portfolio of projects. He explained the best ways to leverage our portfolios to make us more attractive to recruiters and prospective employers. Now I need to improve my portfolio according to his suggestions!

A Week Worth Smiling About!

By: Zak Dietzen

I ended up getting a slight cold and it really drained all of my energy this past weekend. Despite the small setback, this week has been awesome! I felt like I was completely lost last week working with Knockout, but now Zak is back! We learned about an alternative to KnockoutJS this week, and that alternative is AngularJS. Angular has been so awesome to work with and is very powerful. I found it much more structured and less chaotic than Knockout. I would love to never work with knockout again but I know that won’t make me a very good developer. So, I really would like to go back and study it more.

The projects we have worked on this have been the most fun to build yet. I am starting to get the hang of JavaScript more and html and css is getting pretty easy. Working with Angular we built a bChipotle Finder Screenshot1udget calculator, Chipotle Locator, an interactive resume, and an API! We will be taking the API we built and will be building the front end over the weekend. So, technically… I am a full stack developer!!  We also learned about an AMAZING package installer called Bower. It makes installing everything so easy. I highly recommend everyone check it out.

I am really glad we went back and created another API using Entity Framework this week and introduced AutoMapper. AutoMapper was really awesome to work with and made creating databases a lot easier. I felt like making the API this time was a lot easier than the first time we made one. All the extra tools we have learned since then have been game changers.

We had a MeetUp this week at Zeeto. There were a few lightning talks on JavaScript tools, Agile Development, and gave us a tour of their incredible office. You can learn more about what Zeeto does by clicking here. We also had 2 guest speakers this Friday. Clint Johnson, an IT technical recruiter at ManpowerGroup was our first speaker. Clint came in and talked about the job hunting process and what we should expect. He also gave great tips on resume building. Our second speaker was Bryan Hall. Bryan is the Co-founder and CTO at Email Copilot. His company works in the same space as Origin so it was awesome to get a chance to hear him talk and ask him questions. He gave us some solid advice on interviews and advice on what we should do as Jr. Devs to make us better and easier to work with. Having speakers come in every Friday has been so helpful.

It really does amaze me how far we have all come in 6 weeks. We are learning so many tools and they are getting sharper and sharper each time we use them. It is also unbelievable my time at Origin Code Academy is already halfway over. They say time flies when you are having fun, I can say with confidence that is true! I can not wait to see what the next 6 weeks brings.

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!

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.

#TBT Sinking and Swimming: Surviving Week 1

By: TJ Delaney @TJDelaney0

SEPTEMBER 28, 2015

Screen Shot 2015-10-15 at 9.47.30 AM

Week 1: Looking back on week one is equal parts fulfilling and horrifying, and I’m not sure just how to feel about that yet – obscure enough?

With so much more to learn, it’s near unfathomable to visualize myself coding fluently in a few months time. Sure, I had an idea of what I signed up for, but being here in the flesh preparing for battle every morning is a different beast entirely. Okay, that may be a bit dramatic, but the point still stands: This shi stuff isn’t easy, it’s downright terrifying.

Reflection is important, and without it I’d likely be shrivled in the corner of my room wondering how I made such a huge mistake. Instead I’m here typing away while I drink my coffee and realize hey, things aren’t all that bad. After a few hours of learning I was able to put together an age calculator with C#, pretty cool. Fast forward a few hours of lecture time and I was able to make a cash register, woah! Next came the weekend project, a mortgage calculator – ok, it’s starting to get serious.

My favorite part of looking back on week one is the realization that these projects went from impossibly infuriating torture to realistic challenges in a few short hours. The introduction of each new project has me staring at a blank screen wondering if it’s time for a career knitting sweaters on Etsy, but after digging through notes, researching on-line and collaborating with the team everything seems to work out in the end.

Week one at Origin Code Academy has been horribly terrific and I can’t wait for week two!

Week 1 Review

The first week of our Fall class is over – so what have our students been up to?

Implementing Agile Development with Scrum
One of the most popular exponents of Agile Development is Scrum – an iterative project management methodology used to manage product development. We made it a point to introduce this to the class on Day 1, assigning The Scrum Guide as evening reading.

A famous saying about Scrum is that it’s “easy to learn, but difficult to master”. We believe that by introducing Scrum as early as possible in the curriculum, students are able to get the most experience using it. We’ve started by treating Week 1 itself as a “Sprint” to complete some basic C# exercises. We didn’t focus on creating a product backlog or a release backlog – and there were no sprint planning meetings. The only events we included in week 1 were the daily standup meeting. At the start of Week 2 we will have our first “Sprint Retrospective Meeting” where students will be able to reflect on their progress (What went wrong? What went right? What can be changed?).

Learning the foundations of C#
Before arriving at OCA, we ask students to learn the basics of HTML/CSS and most importantly – Javascript. This means that when they show up Day 1 they have some experience with a C-style syntax.

This has paid off incredibly well. Students are picking up C# quickly, and have been building console applications to practice and apply what they learn in the morning presentations. Because they’re familiar with the idea of adding semicolons and are familiar with basic program flow constructs – this gives us time to focus on the foundations of C#, and most importantly how to build good code. For example, at the end of this week – Students are now aware of the DRY principle, and will carry that idea into the next 11 weeks during assignments.

“Is this code DRY enough?”

Guest Speaker This Week
Jeff Winkler, Co-Founder of Origin Code Academy – “Build Your Brand”

First day of Class

Today we held our first day of class in the awesome EvoNexus building.

Our students got to know each other a little bit with a few group exercises, then after covering the ground rules of the course we jumped straight in and talked about Scrum and how it will be a big part of managing their projects and communicating progress to everybody concerned – both students and instructors.

After that, we got our machines up and ready with the latest version of Visual Studio, Git and a few other helpful utilities – all in the name of making ourselves a Comfortable Place to Work.

The rest of the day was spent learning by doing using the exercises found on DotNetCademy, followed by some study time reading the official Scrum Guide provided by ScrumGuides.org.

All in all, a great first day. Tomorrow we will be diving in with Visual Studio and building some C# applications that run in the console.