Web Development 101 – ODIN Project – 1

odinProject: Installations

(http://www.theodinproject.com/web-development-101/installations)

One step which can be unnecessarily frustrating is making sure everything is installed on your computer so you can get developing. Just about every recent beginner has some horror story about how long they battled with their computer and Google to finally get their environment working properly. And often you hear it used as a reason why it took people so long to get started in the first place.

It may be a challenge, but if you’re interested in being at least a half-serious web developer you will need to get this stuff up and running on your machine at some point and it’s best to get it done early. This lesson is devoted solely to helping you install what you need to install so we can get it over with and move on to the good stuff.

One option for learning development has always been to use an existing online environment. In fact, almost all sites geared towards beginners these days have you learn on their website, where you type in some code and it will execute it for you. Magic! Frankly, we think that’s an incomplete approach. What happens when you want to actually build something on your own? But, if it’s a question of a hosted environment (like Nitrous.io (https://www.nitrous.io/)) and no environment, do what it takes to get you going. We’ll give some alternatives below.

Back End vs Front End Installations

You should understand the overall difference between back end (server-side) and front end (client-side) programming, and you’ll see it manifested in how you install the necessary software. Because the client-side code runs in the browser, all you really need to write some HTML, CSS and Javascript is a web browser like Chrome, Firefox or Internet Explorer.

Websites like CodePen (codepen.io/) and JSFiddle (https://jsfiddle.net/) let you create small but dynamic webpages right in your browser. They will become a bit cumbersome when you try to build more meaningful projects, which will require you to start writing more in your text editor, but are perfectly fine for doing smaller exercises. The lack of any complicated installations is one reason that front-end programming is more accessible for beginners to try out.

Server-side code is a bit different – because each programming language (like Ruby or Python) is a different animal, you need to actually install that language onto your computer. With Ruby, you will be installing the Ruby interpreter just like any other program. When you “run” your Ruby code, you are actually using the Ruby program. In principle, this shouldn’t add too much additional complexity, but it is an extra step from just running simple text files in your browser.

Another reason things get a bit more complicated on the back end is because programmers do more than just feed a text file full of code into a program – they also want to be able to handle running different versions of Ruby at the same time (perhaps to work on an older website one day and a newer one the next) and ultimately to deploy those websites up to their chosen web server. Each of these workflow improvements requires another program to help out with managing it.

So, at its core, server-side installs with Ruby are just you installing the Ruby interpreter on your machine and a couple of extra things to help manage your workflow. It just seems like a lot of different things when you’re unfamiliar with what each one is doing. We’ll give you a brief description of each thing below and then you’ll get a chance to do the installations on your own.

Windows and Web Development

A final note to Windows users -you can install everything you need to but you’ll feel at times like you’re swimming against the current. Many examples throughout the learning process will assume you’re working on a mac and you’ll have to get good at translating certain steps into your own workflow. Suffering builds character. And this is payback for the 90’s when it took another six months to come out with a Mac version of any half-decent game.

Your best bet may be to try using Linux or to use a hosted environment like Nitrous.io (https://www.nitrous.io/).

What You’ll Be Installing

Ruby
Ruby is the back end language we’ll be using to write our server code. The Ruby interpreter is a program like any other and so you’ll need to make sure it’s installed on your computer and you’ve got the right version (there are some big differences between, say, version 1.8.7 and 1.9.3 or 2.x).

Git
Git, the version-control system you’ve read about, is another tool that requires a brief install. You’ll also be asked to create your Github account, which is very important because it’ll host your portfolio. When people visit your repo on Github (if it’s public), they see all the source code files you’ve uploaded.

Heroku
Heroku is the cloud hosting service which we’ll be using to take our web applications “live”. In some ways it acts sort of like Github because you will be pushing your code to Heroku in an almost identical way, but it’s performing a very different function. Where Github keeps repositories of your source code, Heroku actually runs that code on a server for you so your application can be visited by users. Heroku requires a couple of helpful tools to be installed to make your life easier during the deployment process.

HTML, CSS and Javascript
Actually, we won’t need to install any of these — they come with your web browser already! In later courses, you may actually start using Javascript on your computer as a server-programming language (Node.js), but for now you’ve got nothing to worry about with these three.

Text Editor
We recommend using a text editor like Sublime Text (https://sublimetext.com/) to make sure everyone’s using basically the same type of text editor and you’ll all be able to work together and ask questions of each other without that getting in the way. Sublime also has lots of handy shortcuts, code highlighting and other nifty features that’ll make your life easier, and that’s just on the surface.

Ruby Gems
There will be some Ruby gems (which are just prepackaged little libraries of code) to install to give you the tools necessary to talk to your database and install other gems easily in the future.

RVM
RVM is a way of making sure that each Ruby or Rails project on your computer is treated independently of each other one. It allows you to install multiple versions of Ruby and multiple versions of Rails or any other gem on your computer and then you can choose which set to use for a given project.

This is very useful because you’ll sometimes work on a project using an older version of Ruby (say 1.9.3) but simultaneously working on other projects using the newer version (2.0.0). Since you obviously don’t want to uninstall and reinstall Ruby each time, RVM just lets you say which gemset you want to use for a given project and PRESTO! your problems are solved.

Rails
What about Rails? Rails is actually a Ruby gem of its own since it’s really just a bunch of Ruby code prepackaged for you. You “install” it by downloading the rails gem.

Mac: XCode
XCode is Apple’s integrated development environment for creating Mac, iPhone and iPad applications. Even though we won’t be using it for that purpose, it’s also got some command line tools that you’ll be using so you’re probably going to have to install it all (it’s a giant package).

Task: Installfest

This will take you through the steps to install everything on your computer. It will probably feel like you’re doing a whole bunch of things that don’t really make sense and moving way too quickly. Hopefully you’ve got a basic understanding of what you’re about to install, but it’s also not super important that you know exactly what’s going on or what all the commands mean. You’ll get more familiar with things over time.

  • If you are using a Macintosh, follow the instructions on Moncef Belyamani’s blog.

How to Install Xcode, Homebrew, Git, RVM, Ruby & Rails on Mac OS X (From Snow Leopard to Yosemite) (https://www.moncefbelyamani.com/how-to-install-xcode-homebrew-git-rvm-ruby-on-mac/)

  • Otherwise, do the Railsbridge Installfest for your system.
RailsBridge Installfest (http://installfest.railsbridge.org/installfest/)
This is a set of step-by-step instructions for installing Ruby, Rails, and other important tools on Mac, Windows, or Linux computers. Originally developed for the Railsbridge Workshops, it is a community-supported open-source documentation project.

Contents

  • Typing $ ruby -v on your command line (ignore the $, it stands for the prompt) should output something that includes 2.0.0 or a similar number. $ rails -v should give you something like 4.0.0.

Checklist

Before moving on, you should have:

  • Created and deployed a sample rails application

An alternate path is to go to Nitrous.io (https://www.nitrous.io/) and set up your account. You’ll be given enough free “credits” to keep a virtual development environment running full time. The instructions on the website are fairly straightforward. You can get your text editor and terminal up and running in a couple minutes. Plus, it works with Git!

Additional Resources

If you’ve run into issues with your installation and are desperately looking for something else to try, take a deep breath first and go back over the instructions step-by-step to make sure you’ve followed them properly. You can run into some odd issues if you start trying to mix together different installation recommendations, because some of them use auto-installers and have you install things in slightly different places so you may end up with a couple copies of key components. It may work fine on the surface, but some day it’ll probably come back and frustrate you again. But, if you must, here are some other people’s installation recommendations:

  • Rails Installer goes in and forces Rails to be installed on your system (http://railsinstaller.org/en). If your computer has been behaving badly, maybe this scorched earth approach is the best.

The Back End

Here you’ll learn about the back end, where we’ll demystify what goes on behind the scenes on a web server. You’ll get to take a crack at Ruby, the sublimely awesome language that runs Ruby on Rails.

 Step 1: Introduction to the Back End

A brief introduction to the wonderful world of server-side programming

The three languages of the front end are fairly standardized — HTML for markup, CSS for presentation, and JavaScript for scripting. The back end is a different story… you can run pretty much anything you want to on your server since it doesn’t rely on your user’s browser understanding what’s going on. All the browser cares about is whether you’ve sent it properly formatted HTML, CSS and JavaScript files (and other assets like images). That’s led to a whole lot of different choices for back-end languages. As long as it can take in an HTTP request and deliver some HTML, you can probably put it on a server somehow.

That said, some languages are more popular and practical than others. If you’re running your own server, you have a ton of flexibility but plenty of headaches. If you’re deploying to the cloud (which we will be doing later), you may be restricted to those languages which your cloud provider has installed on their platform… it doesn’t do you much good if the servers you’re “borrowing” from them can’t understand your code!

Some of the most popular server-side languages are PHP, ASP.NET, Ruby, Python and Java (not to be confused with JavaScript).

As we covered in the Installations section (above), the front end languages live in the browser so there’s no extra installations required. For the reasons listed above, the back end languages do require you to install them on your computer in order to get them running. This should have already been done in that project, so we’ll just make sure that you have them properly installed.

You Should Understand:

  • The difference between front- and back-end development
  • Why you need to install Ruby but not JavaScript

Tasks

1. Read I Don’t Speak Your Language: Frontend vs. Backend (http://blog.teamtreehouse.com/i-dont-speak-your-language-frontend-vs-backend)

2. Read Matt Jording’s What Is: Back-End Web Development (http://blog.generalassemb.ly/what-is-back-end-web-development/)

3. Type $ ruby -v and $ rails -v into your command line (remember, the $ just represents the command prompt). You should get back versions similar to 2.0.0 and 4.0.0 (1.9.3 and 3.2.x should be okay to work with, but your Rails version will matter when we cover Rails more in depth). If you didn’t get those values, you’ll need to go back to the Installations section and get everything installed properly.

4. You should also be able to use $ which git and see the directory where you installed Git. Windows users should try $ where.exe git.Additional Resources

Step 2:  Ruby Basics

A healthy dive into Ruby, where you’ll spend a fair bit of time mastering the basics of this programmer-friendly language.

Our back end focus will be on Ruby, the language designed for programmer happiness. What takes dozens of lines of code in Java or a hundred in C could take just a couple in Ruby because it prepackages lots of functions into easy-to-use convenience methods.

Ruby is pretty close to Python. Python tends to be taught more in colleges and is used a fair bit for more data-intensive and processor-heavy applications.

But Ruby has a secret weapon that makes it the love of fast-iterating website producers — the framework Ruby on Rails. It has been optimized for being able to write code faster and with less headache, which allows you to iterate more frequently when building a website. By so doing, the end product is more likely to suit the client or the user’s needs, making your first mission as an engineer a success.

With either of the languages, there are a couple of things that aren’t immediately intuitive but become very useful when you understand them. These are the quirks and nifty tricks that you didn’t see in JavaScript.

In this lesson we’ll do a healthy introduction to Ruby and then, later on in the full Ruby course, you’ll get to understand it like the back of your hand.

A final note – you’ll be learning a bunch of new terminology and concepts here but don’t think they’re only applicable to Ruby. Most of it (like methods, classes, objects etc.) will pop up again in pretty much any other language you ever pick up.

Points to Ponder

Look through these now and then use them to test yourself later:

  • What is an “interpreted” language?
  • What is IRB?
  • What are Objects?
  • What are Methods?
  • What are Classes?
  • What are Blocks?
  • What is an Array?
  • What is an Iterator?
  • What are hashes?
  • What is a library?
  • What is a gem?

Tasks

1. Go to tryruby.org (http://tryruby.org) and do the quick exercises there to get your feet wet. Don’t worry about the stuff where they’re reading from a file, that’s getting deeper than you need to right now.

2. Read the Ruby in 100 Minutes tutorial (http://tutorials.jumpstartlab.com/projects/ruby_in_100_minutes.html) from Jumpstart Lab.

3. Read chapters 1-10 of Chris Pine’s Learn to Program tutorial (https://pine.fm/LearnToProgram/chap_00.html). Try to do the exercises at the end of each chapter.

4. Answers to the exercises are available at Learn to Program, Answers -Answer key to the exercises in Chris Pine’s Learn to Program book (http://learntoprogramanswers.blogspot.com/).

5. Finally, look at Ruby Monk’s Introduction to Ruby – Ruby Primer (http://rubymonk.com/learning/books/1). This is a fairly comprehensive and fast-moving course. If you’re shaky on Hashes, Blocks, Modules, and I/O by the end… you’re not the first and won’t be the last.

Bonus Tasks

Leonhard Euler (1707-1783)Start thinking about how to use code to solve more logical problems. As much as web development is an expression of creativity, it’s also based in problem solving. Project Euler (http://projecteuler.net/) is a series of programming challenges that are best solved by using the power of computers (since many of them require you to perform simple mathematical operations on a very large scale). Some of the later problems require so much repetition and computing power that you would need to find a more elegant way of solving it than the immediately obvious “brute force” solution. We’ll just do a couple of simpler ones here.

1. Problem 1: Multiples of 3 and 5

2. Problem 2: Even Fibonacci Numbers

3. Problem 3: Largest Prime Factor… just solve for numbers smaller than 1,000 and don’t worry about making it efficient. You won’t need to do any crazy math — think iteration and make the computer do the work. Consider it extra credit to make your solution solve for larger numbers in a way that isn’t too slow.

Try using IRB or a .rb file that you run from the command line by using $ ruby ./yourfilename.rb:

Additional Resources

Step 3: Testing Basics

A brief introduction to testing in general and RSpec, Ruby’s testing language.

Testing is one of those things that people often don’t think about when they decide to learn about web development but it’s critically important to the production of professional quality applications and it will save you tons of time and headache in the end.

Let’s say you’re building a simple website and you’ve got a couple of pages linked together with a simple navigation bar at the top. You make some changes to the code and want to know if the website still works. So you open up your local version of the webpage and click through each of the buttons on the navigation bar to make sure they each still lead to the right location. Not too difficult, is it? It doesn’t take too long, and it doesn’t seem like such a bad way of doing things.

But now imagine that you’ve got a dozen pages with a login system and content that’s meant to look different depending on which type of user you are logged in as. You could come up with a checklist of all the buttons you’d have to manually click on and all the times you’d have to login as a different user… but think about how many steps it would take before you were satisfied that your changes didn’t accidentally blow up some obscure but necessary function of your website?

On the back end, you will learn RSpec, a language that is written in Ruby and one which will help you execute a broad and flexible script of tests to make sure your application is still working the way that it should. RSpec’s syntax even reads sort of like English, though it still takes some getting used to. RSpec lets you test specific areas of your application like pulling from and saving to the database or that your helper methods work as expected. With the help of a few useful gems, you can also test the broad-scale interactions the user will have when traveling from one web page to another.

Although we’re covering this topic in the “Back End” section, testing isn’t just for the server-side. On the front end, we’ll later learn a language called Jasmine to do a similar sort of thing for JavaScript. That should make sense to you — the reasons to properly test your code apply whether it’s run on a server or in the browser.

Approaches to Testing

Everyone does testing a little differently. Some teams still rely heavily on a Quality Assurance (QA) department with people manually executing checklists like we described in the example above. Some people use an approach called Test Driven Development (TDD) in which they write the (failing) test first and only then do they actually write the code necessary to make it pass, and thus very deliberately build the application out with 100% test coverage. Others prefer to keep their test suites fairly light and will only write tests for the major interactions on their pages and any bugs that they have to fix along the way (to make sure they don’t come back).

Regardless of how exactly it’s done, testing is highly important and you’ll be required to do it whatever your job is. Beginning developers are often tasked to write tests and fix bugs to become familiar with a given code base. Luckily, we’ll cover testing more in the Ruby and Rails and JavaScript courses later in the curriculum.

Points to Ponder

  • What exactly does “testing” mean for web applications?
  • Why is testing important?
  • What is legacy code?
  • Why is writing tests particularly powerful for handling legacy code?
  • What is RSpec?
  • How do you run a RSpec test suite?
  • How do you write a basic RSpec test?

Tasks

  1. View YouTube video –Nell Shamrell – Test Driven Development: A Love Story – Ancient City Ruby 2013 (https://www.youtube.com/watch?v=nBtO1UOK9Hs)

Published on 24 June 2013
Practicing Test Driven Development (TDD) is like falling in love. It may first seem like all your development problems will disappear. However, it’s not all unicorns and rainbows. You have to work at it, and keep working at it, for the rest of your development life. It is hard, and it’s natural to question whether the value is worth the effort
Get a real-life perspective on why tests are so important by watching this video by Nell Shamrell. Some of the vocabulary you may not have heard before (like “stubs” and “mocks”).
2. Follow Code School’s Testing with RSpec Level 1 (http://rspec.codeschool.com/levels/1) to become more familiar with Ruby’s RSpec test framework.

Note for Windows users: As of September 2014, the current version of RSpec is broken in Windows. If you want to follow along on your own computer, when installing the gem, instead of “gem install rspec“, type “gem install rspec -v 2.14.1” instead.

 Additional Tasks

Uploaded on 10 June 2010
East Bay Ruby Meetup Group organized an event on April 20th, 2010 at UC Berkeley with Sarah Allen who talked about learning test-driven development (in the context of Ruby/Rails) through test-first teaching.

Uploaded on 22 June 2011
This recorded webinar covers what TDD is, challenges that TDD may pose, and why organizations adopt TDD.

Project: Ruby

Time to apply what you’ve learned about Ruby by making the tests pass on a number of exercises that range from easy to challenging

You’ve had plenty of opportunity to read Ruby and learn Ruby and now it’s time to build Ruby. You learned about RSpec in the previous section and now we’ll actually get to do some Test-First Ruby! That means you’ll be downloading a bunch of test files and your job will be to make them pass by writing code. It’s a great way to start writing some real Ruby scripts and learn some testing at the same time.

This exercise will involve a lot of figuring things out. There aren’t very detailed instructions for what to do, just the batch of tests that you need to make pass. You need to look at those tests, figure out what they want based on the error messages you receive, and write the code to pass them. It can be tricky to get the hang of at first but once you start making those tests go green it starts feeling pretty cool.

1. Set up a Github repository for this project as follows:
You’ll want to organize all your projects as you go through the course, and the best way to do so is using Github. It’s like a file storage system for code that lives in the cloud and that can be seen by others. You already set up your Github account in the Installations section, so here we’re going to put it to use. These instructions will be the same for every project you do.

2. If you haven’t already, create a folder on your computer called the_odin_project which will house all your projects.

3. Go to your Github.com account and log in.

4. Create a new repo for this project on Github.com by following the instructions on Github (https://help.github.com/articles/create-a-repo), and call it a suitable name (instead of Hello-World).  Make your repository “Public” instead of “Private”.

5. Go to your new repository on Github (http://github.com/YOUR_USERNAME/given_name) and take a look at it. If you scroll down, you’ll see that the README file you just created is what is displayed by default.

6. Download your repository to your local computer by using the $ git clone command.

7. Read Git Basics – Getting a Git Repository (http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository). Basically, you’ll need to get the URL for your repository (it will end with .git) so the clone knows where to grab that repo from. You can find your repo’s clone URL by checking on the right-hand column (called “HTTPS clone URL”) on the repo’s main page on Github. The full command would look something like $ git clone https://github.com/theodinproject/curriculum.git. It pulls your repo from your Github account down onto your local computer.

8.cd into your project directory on your local computer and open the README file in your text editor. Change its text to include the title of the project and a link to this project on theodinproject.com.

9. Commit the updated README to your Github repository using the commands below on your command prompt:

# adds all files that are in your current directory and which you've
# recently changed to the "staging area" (ie. they're "ready to commit")
$ git add -A

# commits all the "staged" files into your local repository
$ git commit -m "update README"

# pushes your local repository up to your remote one on Github
$ git push origin master

When you’re building your project, you will probably end up doing several git add + git commit cycles before being ready to push it up to Github with git push.

You should be able to see the changes to your README on Github if you refresh the page.

If you’re not comfortable yet with using Git from the command line, you can actually just click into the README file on Github’s web interface and then click the Edit button at the top to edit directly on the website. 

Note: All Git commands need to be run from inside your project’s folder (the one where you typed $ git init) or you’ll get an error!

10.  Go to TestFirst.org’s Learn Ruby section (http://testfirst.org/learn_ruby) and follow the installation instructions. Basically, you’ll be either cloning their Github repository or downloading a zipped file containing all the test files (there are 15). By opening the main index.html file in a browser, you’ll have instructions waiting for you which describe what’s going on, how to run the tests, and where to put your code so the tests can see it. The exercises start easy but some of them can be pretty challenging, so good luck!

Important: Test-First Ruby wasn’t updated to use RSpec 3.xx, so you need the last 2.xx version to work with it. More info here.

11.  If you absolutely must use an in-browser environment (it would be better for you to do this on your own machine), one is available specifically for these exercises at http://testfirst.org/live.

Note for Windows users: As of September 2014, the current version of RSpec is broken in Windows. If this is your first time using RSpec (invoked with a different program here that comes with the gem, called Rake), when installing the gem, instead of “gem install rspec“, type “gem install rspec -v 2.14.1” into terminal instead.

12.  Do the following exercises. You’ll know you’re done when all the tests pass!

  1. 00_hello
  2. 01_temperature
  3. 02_calculator
  4. 03_simon_says
  5. 04_pig_latin
  6. 08_book_titles
  7. 09_timer

13.Push your project to Github

Step 4: Databases

The last foundational component is how to ‘save’ your data by using a database. You’ll learn the basics of SQL, the language used to talk to most relational databases.

We’ve talked about the client-side and the server-side but how do we keep hold of all our user’s data? Who remembers that your login password is CatLover1985 so you can sign into the website? The bottom layer of any web application is the database and it handles all the remembering for you. It can be relatively simple, like an excel spreadsheet, or incredibly complex and split into many giant pieces like Facebook’s.

Databases are hidden in the back of the web application so people treat them with a sort of suspicion and awe.

Compared to a normal programming language like you’ve already learned, SQL (Structured Query Language), which is used to query databases, is a very simple syntax… there are only a small handful of commands to learn.

Points to Ponder

Look through these now and then use them to test yourself after doing the tasks

  • What is a database?
  • What are relational databases?
  • How are relational databases different from XML?
  • What is SQL?
  • What is SQL used for?
  • What does CRUD stand for?
  • Why is the idea of “CRUD” so important for web apps?
  • How do you get all the records from a table in SQL?
  • How do you insert a record in SQL?
  • What is a primary key?
  • What is a foreign key?

Tasks

1. Look at Zed Shaw’s Learrn SQL The Hard Way (http://sql.learncodethehardway.org/book/introduction.html).  Only read the introduction (unless you’re feeling ambitious).

See http://bedford-computing.co.uk/learning/sql/

2. View YouTube video An Introduction to Relational Databases (https://www.youtube.com/watch?v=z2kbsG8zsLM) to get a feel for relational databases and some more exposure to the terminology we’ll use.

Uploaded on 29 May 2009
Beginning web developers quickly realize learning a programming language is only half of the battle. They’ll also need to figure out how to manage the website data, a task most commonly done using a relational database. This video introduces the concept of a relational database, showing how data is organized in a manner that facilitates organization, management, and retrieval.
3. View Stanford University’s Mini  Database Courses (https://lagunita.stanford.edu/courses/DB/2014/SelfPaced/about)
5. Stanford University’s Database YouTube playlist (https://www.youtube.com/playlist?list=PL6hGtHedy2Z4EkgY76QOcueU8lAC4o6c3)
6. Try the much simpler and shorter Khan Academy’s Welcome to SQL tutorial (https://www.khanacademy.org/computing/hour-of-code/hour-of-sql/v/welcome-to-sql)
Make sure to do the automated assignments as well for the SQL section!  It’s easier if you have a pen-and-paper handy to try and visualize what’s going on.

Additional Resources

  • Stanford’s Introduction to Databases course (https://www.coursera.org/course/db)
    Note: “Introduction to Databases” was one of Stanford’s three inaugural massive open online courses in the fall of 2011; it was offered again in MOOC format in 2013 and 2014. Materials from the MOOC offerings have been available for self-study on Coursera as well as on other platforms. Starting in summer 2014, the materials are now being offered on the OpenEdX platform as a set of smaller self-paced “mini-courses”, which can be assembled in a variety of ways to learn about different aspects of databases. All of the mini-courses are based around video lectures and/or video demos. Many of them include in-video quizzes to check understanding, in-depth standalone quizzes, and/or a variety of automatically-checked interactive programming exercises. Each mini-course also includes a discussion forum and pointers to readings and resources. Taught by Professor Jennifer Widom, the overall curriculum draws from Stanford’s popular Databases course. To explore and enroll in the new Databases mini-courses, please visit https://class.stanford.edu/courses/DB/2014/SelfPaced/about.