cs-at-aa @cs-at-aa-blog - Tumblr Blog

W8D5 | Final Projects Day 3

So far I've made a lot of progress on my project. Today and yesterday I spent most of my time building up the front-end framework (I think most of my time from here on out will be spent this). It's been a good challenge so far, and I finally feel like I'm really understanding how the different components of backbone all fit together with themselves and rails.

I spent some time building out the json api (see blog post here), as well as making a nested form for the payments (blog post tbw).

#rails #app academy #json #backbone

W8D3 | Final Project Day 1

We finally made it to the "final projects" phase of App Academy. My project a clone of Bill Pin. In summary, it's an app that allows you to keep track of bills you share with others. You can post a bill, share it with others, record payments, and BillPin will show an up-to-date total of how much you and your friends owe each other.

The first steps I took to making my app were:

Authentication I decided to roll my own auth instead of using Devise, just to make sure I remembered all the steps. Later on I plan to add omniauth so that users can sign up through email

Initial database and models for users, bills, and bill shares.

I spent awhile coming up with some of the custom sql queries for calculating the subtotals for how much a user owes and is owed by their friends. I learned that when you use ActiveRecord's #find_by_sql or #select for aggregated values (e.g. sum, count) with an alias, it returns an array of objects that have an attribute with the name of the alias.

What does this mean? It means that if your query selects SUM(val) AS subtotal, you can call results.first.subtotal to get the caluclated subtotal returned by the query.

def loan_subtotals # returns an array of user objects with attribute # "amt_loaned" that represents $ owed *to* user # [ <user1>, <user2> ] User.find_by_sql([<<-SQL, user_id: self.id]) SELECT users.*, SUM(bill_shares.amount) AS amt_loaned FROM bills LEFT JOIN bill_shares ON bills.id = bill_shares.bill_id LEFT JOIN users ON users.id = bill_shares.debtor_id WHERE bills.lender_id = :user_id GROUP BY users.id SQL end # user_loans = user.loan_subtotals # => [#<User id: 1 ... >] # user_loans.first.amt_loaned # => 50.0

#billpin #app academy #rails

w8d2

Node.js

Oh man, today was the last day of regular instruction--tomorrow we start final projects! We learned the (very) basics of Node today, and how to use it to implement a server. It's an interpreter for JavaScript (like MRI is for Ruby) and has web frameworks such as Express (like Rails for Ruby).

Ruby : Javascript | MRI : Node | Rails : Express

Since Node's methods are mostly asynchronous, it is well suited for web sockets (open/continual connection with client). This makes it a great candidate for things like chat rooms, which is what we built today!

#node.js #app academy

w8d1

Today we finished up the Trello Clone project we started at the end of last week. This project was a great for practicing Backbone.js.

I was able to build up most of the functionality that I want, but as always, there is still more work to be done. The coolest feature on there is probably the ability to drag-and-drop cards and lists on a board, implemented with jQuery's sortable interaction. I also experimented with the forms for new boards, cards, etc., by making them into modals. Not sure if I'll keep it like that, but it was good experience to make them.

#backbone #jquery #trello #app academy

w7 summary!

Wednesday thru Friday of week 7 was spent doing more backbone.js projects. I feel like I'm getting the general flow of backbone's MVC architecture and how it works with rails. The trickiest part is debugging, since the javascript errors are sometimes silent or just not helpful.

A simple, but useful design pattern we learned was how to swap views. Before replacing the html of the root DOM element, one should use backbone's View#remove method. This not only removes the html, but also any model listeners. If you do not remove the listeners, they'll build up over time as the user makes requests and start to negatively impact performance.

In the router file:

_swapView: function (view) { this.currentView && this.currentView.remove(); this.currentView = view; this.$rootEl.html(view.render().el); }

Another more complicated design patterns we learned was how to make a composite view (a view that has nested subviews). Instead of looping through resources to create the subviews, you can extend the View class on a CompositeView class which has specific methods for managing the subviews. The class contains a subviews attribute which holds each of the DOM selectors which point to an array of their subviews to render.

On Friday we started a Trello clone project, where we started with a project skeleton with the rails routes and db set up, and we are building out the backbone client-side framework. My project incorporates both the _swapView method and the CompositeView class. Check out the code!

#backbone #javascript #rails #app academy

w7d2

listenTo vs events in backbone view

Backbone Views handle the rendering of templates when an ajax request is made. In order to show the most up-to-date information for a resource, you can use backbone's listenTo and events to update the view whenever changes occur.

listenTo

arguments: object to listen to (model or collection), which changes to listen for, what function to invoke when change happens

used for watching changes on models or collections

this function is called in initialize method so that the view starts to listen immediately once instantiated

events

for watching user actions in browser

javascript object that has key/val pairs, where key contains browser event and CSS selector and value is name of function to execute upon event

"click button.delete" : "deleteItem" --> when the user clicks on a button of class delete, the deleteItem method will be invoked

Example Backbone view which uses both listenTo and events:

#backbone #javascript #app academy

w7d1

Today we worked on implementing a front-end MVC pattern using JS, jQuery, JST (templating), and the underscore.js library. This was a precursor to the work we'll be doing the rest of the week with the backbone.js framework.

The front-end framework allows us to organize the javascript code that makes the app more feature-rich. The front-end models store an instance's attributes and defines methods for showing, destroying, creating, and updating an instance. There is also the notion of a collection which gets a collection/group of model instances. The client-side view differs from rails' traditional view, such that it acts more like a controller, and determines which template to render and inject it into the DOM. The JST(JavaScript templates), which look and act like the ERB, actually provide the html to be displayed.

#javascript #rails #mvc

w6d4

Today we continued our work on browser-based JavaScript, and also dove into jQuery. We built a few games today: Towers of Hanoi, Tic Tac Toe, and Snake. Here's a link to the code, and as with yesterday's Asteroid game, I plan to make these available to play online soon.

jQuery Basics

$ stands for jQuery

$(css_selector) will create a jQuery object of the element(s) in the DOM that match the css selector

Most jQuery methods are getters and/or setters. Since the setter methods return the object itself, methods can be chained together.

To set up a handler, you can use the #on method and pass in the event and callback as params.

Code snippet from today:

UI.prototype.setUpHandlers = function () { this.$el.on('click', '.square', this.clickSquare.bind(this)); }

#javascript #jquery #app academy

w6d3

Asteroids!

We made a browser-based interactive Asteroids game today. It was fun finally getting to make something with a decent-looking UI. Here's a link to the code. I plan to put it up online soon, after a bit of beautification.

We used the html5

to set up the background of the game and represent the different objects as shapes. The rest of the program was written in JavaScript and CSS. It was interesting to dabble in a bit of browser-based javascript, using methods like alert() and the keymaster library for handlers to change direction and fire bullets.

#javascript #css #app academy

w6d2

Today we practiced some more JavaScript, and worked a lot with callbacks. The bulk of my time was spent rewriting the Towers of Hanoi and Tic Tac Toe games that we had originally written in Ruby a few weeks ago. I'm still getting the hang of callbacks, but here's what I've learned so far:

Callbacks

A callback is a function that is passed as an argument to another function

Asynchronous callbacks are not invoked until a certain time or event occurs. The method doing the calling executes without waiting for a response from the callback, and then the callback runs whenever it is invoked.

Callbacks are closures, and have access to all of the containing function's variables

#javascript #app academy

w6d1

...and on to JavaScript!

Today we transitioned from Rails to JavaScript. The trickiest part was definitely closures (functions that access variables that have been defined at the point of the function's declaration).

Some notes from today/this weekend:

JavaScript is a functional language, so functions are first-class objects. This means that they can be stored in variables, passed as a param to another function, and declared within another function.

An object is very similar to a Ruby hash; they can be declared with a literal, and they consist of key/value pairs. The values can be strings, arrays, other objects, functions, etc.

The scope of a function includes: the variables declared within the function, the variables passed into the function as params, and the free variables (those variables that have been assigned at the point of the function's declaration). Those functions that capture the free variables are called closures.

#javascript #app academy

w5d5

This was the last day we focused on the Rails portion of the curriculum. The highlights were polymorphic associations and concerns.

Polymorphic Associations

a one-to-many or many-to-many association between multiple tables; instead of tracking the associations with a single foreign key column, track with two columns: a foreign key id and a foreign key type

Example: Posts, comments, and photos each have many likes. The likes table has a likeable_type column (values include the class names: 'Post', 'Comment', or 'Photo') and a likeable_id column (for the foreign key).

In the models:

# app/models/like.rb class Like belongs_to :likeable, polymorphic: true end # app/models/post.rb, comment.rb, and photo.rb class Post has_many :likes, as: :likeable end

Concerns

DRY up code by putting similar logic into modules, found in the concerns folders; mixin to the appropriate classes

similar to helper files, but for models and controllers

a use case example is to put the likeable logic into a concern and mix it into the post, comment, and photo model classes

Code:

# app/models/concerns/likeable.rb module Likeable extend ActiveSupport::Concern included do has_many :likes, as: :likeable end end # app/models/post.rb, comment.rb, and photo.rb class Post include Likable end

#rails #concerns #polymorphic associations #app academy

w5d4

Today we built yet another rails app, integrating concepts we've learned over the past few week, but this time with testing. We focused on testing the model layer--specifically validations, associations, errors, and custom methods. It felt much more intuitive to test first this time around, since I had a better idea of what needed to be tested and how to use the testing gems. Here's a list of the gems we used today:

rspec-rails provides the main testing framework

shoulda-matchers provides helper methods for testing model validations and associations (also has helpers for controller actions)

factory_girl_rails DRYs up the process of creating objects for the test database

faker a library of different words, phrases, etc. for your test or development seed data, in case you get sick of making stuff up yourself

#rails #gems #app academy #tdd #testing #rspec #rspec-rails #shoulda-matchers #factory_girl_rails #fakergem

w5d3

We had an assessment today which took up most of the morning. The rest of the day was spent finishing up some of the bigger projects from the last few days (ActiveRecord-Lite, Rails-Lite, and FriendCircles (google+ clone)). I spent my time working on bonus features of Rails-Lite, mainly trying to get flash and flash.now to work.

The flash feature was fairly similar to the session feature that I had built the other day, with the major difference being that the flash should only persist until the next HTTP request rather than until the session ends. Despite making significant progress on it, I wasn't able to get it to work as desired. There was some unexpected behavior going on that I suspect may be due to caching, so I'll need to investigate the issue further.

#rails-lite #app academy

w5d2

Another solo day today, and this time we built Rails Lite, a lightweight version of the web framework Ruby on Rails. This was a really interesting project, and I'm excited to work more on it tomorrow after our assessment.

The features I worked on today include:

a BaseController class that all of the controller classes inherit from

the Route and Router classes, so that routes can be defined in the app and requested by clients

a Params class to keep track of query parameters

a Session class that is used for session cookies

#app academy #rails #rails-lite #ruby #metaprogramming

w5d1

Advanced Forms!

Today we built a rails app that basically works like Google+. A user has friend circles and makes posts which they selectively show to certain friend circles. A user's own news feed is populated by posts that other users have shared with the friend circles to which this user belongs.

The project focus was on making advanced forms: forms for objects that belong to other resources in the database and/or forms that create multiple objects at once. Here's a summary of how to handle different types of associations:

belongs_to

should have a drop-down select input element or radio buttons that allows the user to choose one resource for the object to belong to

each html option tag should have a name attribute such as name="object[option_id]" and a corresponding value (e.g. if a user belongs to one group, name="user[group_id]" value="<%= group.id %>")

the params will come in as a typical key => value pair; need to require this pair in the strong params

has_many, through:

should have check boxes for each source item

each input element needs to have empty brackets so that the collection will be passed as a single array

the array format needs to be specified in the strong params as param: []

when the virtual attribute is set on the creation, rails will automatically make the rows in the join table

has_many

should have a nested form so that each of the child objects can be created

for each child object, each of the input elements need to have matching keys so they can be nested together

in the controller, the child objects should be built via the association, using the method singular_ids= [ {key1: val1a, key2: val2a}, {key1: val1b, key2: val2b}, ... ]

to extract that array of params, make a helper method for child_params with params#permit and params#require

models/post

class Post < ActiveRecord::Base has_many :links end

models/link

class Link < ActiveRecord::Base belongs_to :post end

views/posts/new.html.erb

<label>Title <input type="text" name="post[title]" value="<%= @post.title %>"><br> </label> <label>Description<br> <textarea name="post[body]"></textarea> </label><br> <h3>Links</h3> <% @post.links.each do |link| %> <label>Name <input type="text" name="link[<%= link.object_id %>][name]" value="<%= link.name %>"> </label><br> <label>URL <input type="text" name="link[<%= link.object_id %>][url]" value="<%= link.url %>"> </label><br> <br> <% end %>

params

{ post: { "title" => "Links!"}, link: { "704668193" => { "name" => 'google', "url" => 'http://google.com' }, "749187302" => { "name" => 'facebook', "url" => 'http://facebook.com' } } }

controllers/posts_controller.rb

def link_params params.permit(:link => [:name, :url]) #filters all but name and url for each link .require(:link) #limits the hash to what's inside link .values #gets the values for each .reject { |link| link.values.all?(&:blank?) } #removes blanks end

#rails #forms #app academy

w4d5

Authentication Ctd...

Today was a solo day (for me, the second solo day in a row because I didn't have a partner yesterday!), and we built a music app that allows users to view artists, albums, and comment on tracks.

I felt pretty good on the authentication again. It was a good exercise to build it again from the ground-up and go through all the logic step-by-step.

#app academy #rails #authentication

Trending Blogs

Recently Viewed Blogs

cs-at-aa