Build your Web App!

Get excited and find out how easy it is to build a web app!

Use the right arrow to go to the next step.

Created by RailsGirls team / @railsgirlsbne

Instructions on using this guide

In some sections, you'll have the option of reading more information. Use the down arrow to read this, and when you're finished, use the right arrow to move on to the next step. If you get lost, hit the escape key (ESC) to see an overview of the course, or ask a coach for help.

Get Ready

To build apps and other things with Ruby on Rails, you need to set up 2 accounts, namely GitHub and c9.io .

We need somewhere for you to write code and run a server, and we need somewhere for you to store and share your code so you can work with other people.

In Cloud9, the terminal window is at the bottom of your page.

Your Terminal is used to write commands that control the server,
the files you're creating and your database.

Navigating within the terminal window

In the terminal:

The 'cd' command means 'change directory'.

Lets create something

One of the reasons why Rails is awesome is that it comes with built-in commands that makes it easy for you to get started.

The scaffold command makes it super easy to create a concept by generating all the necessary files and folders which you don't have to worry about. It also generates database tables to store information and boilerplate code of how every module interacts.

Scaffold allows you to create a concept (eg: a user, post, comments) in a single command.

We are going to create the idea concept with the help of scaffold command

rails generate scaffold idea name:string description:text picture:string 

We asked rails to keep track of the idea concept in the database, and we need to update it. This is called a 'migration'.

In the terminal type:

rails db:migrate

Lets start our server and see what we have created so far.

In the terminal type:

rails server -p $PORT -b $IP

or use the 'Run Project' button at the top of the page of the Cloud9 IDE

Lets make things beautiful

These are tags that we will be using for the app:

• link - connects assets to your page
• div - a container for other content
• a - link to another page
• ul - unorder list, needs a list of elements
• li - list element, must be part of a list

In this tutorial, you will come across <%= RUBY CODE HERE %>, whereby the = comes after the <% which means the contents written in ruby code will be executed and rendered on the page. For instance, if you want to show the number of ideas in your app, the code to render the number will be: There are <%= Idea.count %> ideas

The next piece of this puzzle that makes the website pretty is CSS(Cascading Style Sheets). As before, HTML keeps track of the contents of the website. CSS keeps track of how the page looks.

At the moment, the app doesn't look nice. Lets go on and add some CSS to pretty it up. On the left panel of the editor in c9.io, open the file app/views/layouts/application.html.erb. This is your default layout file.

Look for this line <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> Add these lines of code above this line.

Make sure you save the file by using the menu bar File -> Save.

The rel="stylesheet" tells us the type of link,in this case a link relation. This basically tells the browser there is an external hyperlink to refer to. The href contains the address to the css file which is //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css and //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap-theme.css. Here, we are using the style sheet called Bootstrap which is made by the people from Twitter.

Replace the <%= yield %> with

                    

                        <%= yield %>
                    
                

The <div> tag provides a way to divide your code into parts.

In this case, we have assigned a class named "container" that will give us access to apply the same styling to that part of code.

We want to have a navigation bar at the top of our page, so that people using our app can find their way around. We also want to have a footer at the bottom of the page.
In the same file, under <body> add:

Let's add the footer too. Before </body>, add:

Finally, we're going to make some changes to the way our ideas display. We want to space them out a bit. Open app/assets/stylesheets/application.css
and at the bottom, add:

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }
            

So, what did that CSS do?

body - this part is known as the selector and refers to the HTML element you wish to style.

{ padding-top: 100px; } - this part is known as the declaration; each declaration has a property which is the style attribute you wish to change (padding-top),
and an associated value (100px).

Declarations always end with a semicolon and declaration groups
are always enclosed by curly brackets.

Now lets have a look how did the changes to CSS impact our app

Go to the terminal and type:

rails server -p $PORT -b $IP

Go to your browser on and preview the page

Add the '/ideas' to the end of the URL

Adding Images

At the moment, our app can't upload images and we need to install a piece of software to enable that.

In Rails, there are a lot of plug ins that we can incorporate with our app which are called gems

Gems are basically libraries that contains pre-written code so that you don't have to write it from scratch.

Gems are very useful to reduce duplication and errors in your code and are portable to be used in multiple projects.

In your project menu,you'll see a file called Gemfile.
This has all the gems that came with the application we created when we used the

rails new

Open gemfile so you can edit it in the text editor. Under the line,

gem 'sqlite3'

gem 'carrierwave'

The sqlite3 gem interfaces with our database, and carrierwave
makes it easier to upload images.

Hit CTRL-C in the terminal to stop the server

In the terminal, run this command:

bundle install

Bundler downloads all the gems that are specified in the Gemfile and tracks the versions to ensure that your project has a consistent environment.

Now, we can generate the code that handles image uploads by doing:

rails generate uploader Picture

Please start your server up again.

Open app/models/idea.rb. Under the line class Idea < ActiveRecord::Base, add:

mount_uploader :picture, PictureUploader

Now, we need to customise the form we use for editing and uploading ideas.

We're using the same bit of code to edit and upload. This code is found in app/views/ideas/_form.html.erb.

The following code snippet (<%= render 'form', idea: @idea %>) is basically calling the above form. That call is used in both edit.html.erb and new.html.erb, as the two forms are basically identical. If you look at either of those pages (edit.html.erb or new.html.erb)
it just says <%= render 'form', idea: @idea %>.

Fine-tuning Routes

Our Rails app would need to listen for requests from the browser and provide the correct information through a system called routing.

Requests from the browser are interpreted as specific HTTP(Hypertext Transfer Protocol) methods.

This protocol basically defines how information (usually webpages or webpage components composed of text with hyperlinks - ‘hypertext’), is formatted and transmitted across the internet.

We are going to change some of the routes we have set up. When you open the application it still has the Ruby 'Welcome Aboard' message.
We had to manually go to /ideas.

Open config/routes.rb. After the first line, add:

root :to => redirect('/ideas')

This changes the default page (root) that is returned when a browser requests your app to the /ideas page. Try it out now (don't forget to save your changes first, and
restart the server if you've stopped it).

Lastly, we are doing to add a static page to our app. This one is going to
provide information about the author of the app - you!

In the terminal, type:

rails generate controller pages info

This created a new folder called 'pages', which you can find under app/views.

In that folder, you'll see a page called info.html.erb. Open it up.

You can customise the information in this page.
If you add /pages/info to your application's URL now, you'll see this page.

Push your app to GitHub

Earlier, you created a GitHub account.

Now, we are going to add your new app to GitHub.

Open the GitHub website and log in.

Click the Start a Project button.

Give the repository a name, such as rails-girls.

You can also add a description.

Choose the 'Public Repository' option and make sure you untick the 'Initialize this repository with a README' box.

Finish creating the repository by clicking 'Create repository'.

Go back to Cloud9. Make sure you are still in your project directory.

You can check this by looking at the terminal. It should show something like this:

your_username@railsgirls:~/workspace $

If you are not, use the cd command you learned earlier to change back into that directory.

In the terminal, type:

git init

This initializes your local git repository. Remember: git runs on your computer; GitHub stores your code online.

Let's add your code to your local repository. In the terminal, type:

git add .

The . means all files in this directory. So, this command will get us ready to add all our files to our computer's repository.

Git has an intermediary stage before it saves any changes. This is called 'staging', and it allows you to make sure everything is correct, so you can commit (save) them.

You're now ready to make your first commit! In the terminal, type:

git commit -m "my first commit"

This commits all of your files to your computer's (local) git repository. The words between the "" is your commit message. This tells other people looking at your code what you are doing. You can be more descriptive in your commit messages to describe what you have done

Now, you need to send the code to GitHub, so you can share it and collaborate on it if you want. In the terminal type:

git remote add origin https://github.com/yourusername/yournewrepositoryname.git

This makes a remote connection to the GitHub repository you've typed. We normally call this 'origin', as it's the original version.

The exact instructions for you will be on github and will be similar to below

Now the two repositories(your computer and Github) are connected, you need to push your computer's code to GitHub. In the terminal, type:

git push -u origin master

push command uploads your code to Github in particular to the master branch.

Your code is now on GitHub! On the GitHub website, open up the repository you created.

Congratulations! You've built your basic app.

So, what next?

• Deploy to Heroku
• Allow comments
• Add authentication
• Improve your design
• Resize images using Carrierwave