Zero to Hero(Ku)

Let's run through a basic start-to-finish of a Rails-based web app!

From creation on your computer,

to making your app available all over the world...

Ruby on rails

Anyone familiar with Ruby?

What does it mean to people not born in July or slipper enthusiasts?

Ruby on rails

Is anyone familiar with Rails?

What can you tell me about it?

Our Workspace

There are a number of online IDEs (integrated development environments)...

tonight we'll be using Cloud9 (c9.io)

Our Workspace

Cloud9 gives us a Text Editor and Terminal (Command Prompt)

all in one space:

Text Editor up top,

where we write our code

Terminal below,

where we enter Rails commands

starting a new project

Your project's name should be lowercase,

if you want it to be more than one word, use under scores ( _ ) or dashes ( - ).

On your dashboard:

Then this modal will pop up:

explore your project

We will spend most of our time in the "App" directory,

let's open it up now and see what's in there:

Assets are front-end tools like images, JavaScript files, and CSS stylesheets.

Controllers, Models and Views make up the MVC structure you may have heard about.

Helpers are repos for extra code, Mailers are for setting up sending emails.

congrulations: it's an app!

Even though there's no data or anything to display, you do have the base of a Rails app. So let's run it!

Click on

"Run Project"

to get the

server started!

congrulations: it's an app!

You'll notice that a new tab has opened up in your Terminal area. It's letting you know the server is running, and where to view it.

congrulations: it's an app!

So visit: my-first-app-[your user name].c9.io

Building your app

Notice how this page is being really helpful and telling you what you should do next?

We can set up the MVC framework using "rails generate" commands

This page is currently our "root path", but we can set any page we create to be the root

The full MVC

Build your app:

scaffolding

Here's how the command is structured:

$ rails g scaffold Member name:string age:integer

Build your app:

scaffolding

Now let's see that run in our Terminal:

Look at all that stuff we're getting!

Build your app:

scaffolding

Check out all the new folders & files:

A Members Controller

A Members Folder,

filled with views!

A Members Model

A mighty controller

Yeah, it's a really long file.

Doesn't really fit well

on a slide.

Let's just look at it

on our Cloud9 console.

The five Views

The "_form" view is a partial: it is rendered within both the "new" and "edit" pages.

It has no corresponding action in the controller,

but it's Submit button calls upon the "create" action.

edit.html.erb

_form.html.erb

new.html.erb

The five Views

index.html.erb

show.html.erb

The "index" view displays all our Members inside a table.

The "show" view displays one individual Member (depending upon a Member's ID #).

Making members

But when we go back to our page to try and create new members (https://my-first-app-argroch.c9.io/members)

we see this:

OMG is it broke forever?!?!

database migration

Calm yourself, and read the error screen:

We just need to do what it says (or, at least, part of what it says).

In your Terminal, run "rake db:migrate"

This will officially create the "Members" table in your database.

So when we return to the page running our app:

Our long national nightmare is over

Now let's make some members!

Making members

• Click on the "New Member" link.
• You'll be taken to the "new" view.
• Put in the data requested, hit the "Create Member" button
• You'll be taken to the "show" page for that new Member.
• Click the "Back" link to return to the "index" page
• Repeat!

Making members

Eventually, your "index" page will look like this:

Now It's time to share

Yay! We have a working app!

Let's push it up to Heroku,

to show off our l33t c0d3 sk1llz.

show off your app on heroku

Heroku is a hosting site that works great with Ruby on Rails apps.

You can host up to 5 apps for FREE!

On the next slide we'll take a look at the Terminal commands to create and push to a new Heroku app!

Preparing for Heroku

There's a bit of a hitch when transferring our site from the current local server ("development"), to Heroku ("production").

Heroku requires a particular type of database.

So let's visit the Gemfile...

Preparing for Heroku

#for our local server:
group :development do
	gem 'sqlite3'
end

#for Heroku:
group :production do
	gem 'pg'
	gem 'rails_12factor'
end

Initially, our Rails project includes the database type SQLite3.

However, Heroku requires the PostGreSQL database.

We will need to add this database a new gem ('pg'), along with a companion gem (rails_12factor).

Additionally, we need to specify when to use each database type.

In your Gemfile:

After you save, run "bundle install" in your Terminal.

Creating a new heroku app

$ heroku login
Enter your Heroku credentials.
Email: [your email here]
Password (typing will be hidden): [your pw here, but unseen!]
Authentication successful.
$ heroku create awesome-project
Creating awesome-project... done, stack is cedar-14
https://awesome-project.herokuapp.com/ | https://git.heroku.com/awesome-project.git
Git remote heroku added
$

Follow the commands seen below:

If you go to your Heroku dashboard, in your browser, you will now find that new app!

Pushing to Heroku

Now that you've created the app, pushing can be done in conjunction with pushing to GitHub

$ git init
$ git add .
$ git commit -m "first commit"
$ git push heroku master

# be forewarned: the push to Heroku will take a bit of time

You should now be able to put this URL:

my-first-app.herokuapp.com/members

into your browser and get that same page we saw when running the local Rails server!

migration is universal

Heroku is not so helpful when it comes to error messages...

But, what is wrong is that we need to "migrate" the database table for Heroku, just like we did for our local server.

$ heroku run rake db:migrate

Let's try this again...

your app is up on the web!

There for everyone to see!

Oh, that's great...

Now how do I delete it?!