The second edition of RailsGirls in India was hosted at Thoughtworks office in Bangalore on 31st Jan 2015.
The motive of Rails Girls is to give women an introduction to some of the tools & vocabulary of web development. It’s a free one day workshop, facilitated by volunteer coaches & kind sponsors. It originated in finland and has been held in cities around the globe.
I really love working together and building stuff so was super excited to coach my assigned team, to show how easy and fun web development can be, and to impart some Ruby/Rails skills to new minds.
I arrived at the venue around 9:30 morning. I met Tejas, who asked me to switch to the coaches T-shirt immediately. I was handed a bag of RailsGirls goodies by a few volunteers and then I proceeded to a big hall filled with people high on energy trying to get Ruby, Rails and other stuff set up on their machines.
I have to admit, it was a welcome change to see a male to female ratio of ~1:10 at a tech event.
Getting Things Rolling
I saw coaches Vineet, Monika and others going around, helping attendees with the setup and I too followed suit. Getting the tools and environment setup on Windows(the platform of choice for most attendees) seemed much easier than I thought thanks to RailsInstaller. Steps to solve common installation errors were covered well by the RailsGirls Setup Recipe.
Attendees busy setting up their systems. Image by Suganthi
Around 10, Tejas and Bharti kickstarted the event by explaining the philosophy behind RailsGirls and the agenda for the day. We had an ice-breaker session which involved getting to know the most number of people under 2 min for a prize(I fell short of a mere 3 to win, sigh).
People running around getting to know each other. Image by Suganthi
After this, the coaches were called forward for a short introduction and each coach was assigned a team of 4 attendees.
Team Up and Learn the Basics
My team consisted of Nidhi, Pallavi, Ramya and Priya. Nidhi works with Mahindra, Priya is a Thoughtworker, Ramya and Pallavi are pursuing college.
The role of coaches was to explain their team basics of Ruby, Rails, MVC patterns enabling them to build a simple concept rails application.
We started to get to know each other, and bounce of ideas on what to build. Ideas came cropping like “Hostel food management app”, “Bus commute notifier app”, “An e-commerce app” etc. We decided to get a little grip on Rails and then come back to ideating our project.
Priya having a know-how of the office took us to a glass wall which we could use as a board, nice. I Started off with a brief history of Ruby, how it originated, how DHH went on to extract Rails from basecamp as a web framework for Ruby, the MVC pattern, ERB syntax, the Rails directory structure, gems, dependency management using bundler etc etc. The girls were aware of C, C++ so I thought i’d use it to drive analogy to object oriented concepts and to differentiate compiled and interpreted languages. I also emphasized how easy it is to read a given Rails application and how “English-like” is Ruby which makes it so approachable and welcoming to newcomers.
We thought it’ll be good to see some simple fun stuff in IRB, they were excited to see how simple it was to make loops(do, while, each), string operations(titleize, upcase) etc. After a small tea break we finally decided to build a “Handicrafts e-commerce application” which would be a good example to understand the CRUD features of Rails. We started writing down the features the app would provide like Adding, Removing, Editing and Viewing handicrafts. We also thought we’ll add pagination and commenting feature along with Rating.
Getting Hands Dirty with Some Code
Without further ado we started off by running rails new handicrafts, after explaining rake tasks and creating a db we were greeted by the Rails default welcome page. We then went on to replace the default page with the generated index page. This was a good time to explain the routes.rb file, the different types of requests which are made in a web application, changing the root to point to the generated static page(root 'home#index') etc.
From now on, we did some basic things on the view since our handicrafts app would basically be displaying items on the screen, a good grasp on iterators and arrays would be beneficial. Also, we saw how to style text using CSS.
# Round 1
## Printing a normal string
<% 10.times do %>
<%= "Hello" %>
<% end %>
# Round 2
## Printing an iterating value
<% 10.times do |i| %>
<%= i %>
<% end %>
# Round 3
## Printing an object n times (object defined in controller index method)
@names = ['nidhi singh','ramya v','priya nupur']
<% 10.times do %>
<%= @names %>
<% end %>
# Round 4
## Printing the values in an array
<% @names.each do |name| %>
<%= name %>
<% end %>
Building the Application
Now they were ready for scaffolds. We did a scaffold for Handicraft with the parameters which we had initially noted (name, owner_name, price, description etc) and after seeing a complete CRUD flow of create, view, edit and destroy being completely fleshed out in one simple command the girls were truly amazed with the capability of Rails. Everyone tried out creating a Handicraft using the form. We then saw how to do the same using the console by creating a new handicraft object. To test how much they grasped till now, I gave them the task to create 50 such handicrafts in the console. They came out with the solution as follows by combining the object creation and iteration logic:
# Making 50 handicrafts
50.times do
h = Handicraft.new
h.name = "New Handicraft"
h.price = 50
h.description = "Some random text"
h.image_url = "http://g02.s.alicdn.com/kf/HT1H3kdFIJcXXagOFbX5/200003176/HT1H3kdFIJcXXagOFbX5.jpg"
h.owner_name = "Bob"
h.save
end
Nidhi then asked me won’t all the records be same? Then I thought it’d be a good time to show the features of Faker gem. After seeing how to add the gem in the Gemfile and running bundle we changed the code as follows.
# Making 50 handicrafts
50.times do
h = Handicraft.new
h.name = Faker::Commerce.product_name
h.price = Faker::Commerce.price
h.description = Faker::Company.catch_phrase
h.image_url = Faker::Avatar.image
h.owner_name = Faker::Name.name
h.save
end
After running this, we had 50 handicrafts
Lunch and Flash Talks
It was lunch time, good food. Fun time networking. Reminiscing about college by the stories of Pallavi and Ramya, Priya and her travels, Nidhi and her social cause activities…
After lunch Monika gave a talk on Rails Girls Summer of Code , Devangana spoke about the Women Who Code initiative, Bharti showed how to use firebug to do basic DOM changes and other dev tool operations, finally Monish gave a talk on “Ways to Improve Your Workflow”.
Finishing Touches
With just an hour and 30 min to go, we thought we’ll prettify the app a bit and thought of using Twitter Bootstrap for the task, after spending about 15 min understanding the basics of bootstrap we added the bootstrap gem, we also took a prebuild product UI component from bootsnipp.
We used the in_groups_of method to get 4 products in one row.
<% @handicrafts.in_groups_of(4).each do |handicraft_group| %>
<div class="row">
<% handicraft_group.compact.each do |handicraft| %>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src=<%= handicraft.image %> class="img-responsive" alt="a" />
</div>
....
But one thing was still annoying us the faker gem with it’s random image_urls had fetched robot images :(. We wanted handicrafts. Nidhi started searching for about 10 handicraft images, Kavya searched to randomize data in array. We finally came to a solution.
# Update robot images to handicraft images
Handicraft.all.each do |handicraft|
image = ["http://g02.s.alicdn.com/kf/HT1H3kdFIJcXXagOFbX5/200003176/HT1H3kdFIJcXXagOFbX5.jpg","http://www.rajasthantour4u.com/images/copadolls1.gif","http://www.tapja.com/wp-content/uploads/2013/02/modern-wall-art-as-wall-hangings.jpg","https://saumyascards.files.wordpress.com/2012/06/paper-doily-card-brown-2.jpg", "http://3.bp.blogspot.com/__NddmR2QiGo/TGU3bWaGUgI/AAAAAAAABG4/sxssofzb8zs/s320/KA-13RP-150-01.jpg","http://i00.i.aliimg.com/img/pb/622/011/748/748011622_050.jpg","http://s1.hubimg.com/u/8281858_f496.jpg", "http://img.kwikdeko.com/2013/04/decorative-items-5.jpg"].sample
handicraft.update_attributes(:image => image)
end
We quickly added pagination using will_paginate. And we were happy with the final outcome.
Yay, It’s done.
Demo Time 🙂
We all went to stage and Nidhi walked everyone through the application explaining the features and the gems used. We were proud of what we could achieve in 3-4 hrs.
The Experience
Fun times.
It was a great weekend at RailsGirls, meeting and helping out a lot of lovely new people. I came out a better programmer, learning the best ways to explain concepts, which ideas need more emphasis and understanding how different people use Rails on a daily basis. When people are excited about what you are showing them, it gives a kind of happiness like none other.
We pushed our code to Github in this repository and exchanged contacts.
If you have the opportunity to participate in an event like Rails Girls, then you should jump in. And if there isn’t a Rails Girls event in your city, then you should host one.
Thanks to all of the event’s organizers, coaches, sponsors and (most of all) the attendees in creating such an amazing weekend. I can’t wait to participate in the next event!
Snaps
RailsGirls.
Everyone. Image by Rajeev
Share the Love
RailsGirls 2015 – What I learnt as a Coach http://t.co/hKORP3lUuZ via @icicletech @RailsGirls #RailsGirlsBLR
— Icicle (@icicletech) February 3, 2015
