first ruby app

7/29/2019 First Ruby App

1/28

First App

Lab 2


2/28

We have installed and configured our development environment, so we are ready tocode our first Rails application.

Our first app is going to have features added along the way. Today, we create andtake a look at our new app and find out how it works.

! We are going to be very neat and keep our files and folders in order, to ease ourpresent and future work.

Action 1: Create our first Rails App

Step 1. Making the directory


3/28

Step 2. Create a Rails project

$ rails new

If we have the same screen it means our application is was successfully created.

If you don't succeed, delete the folder and try again. Perhaps, you need to install

something, if so, the error will state this. You can copy the command and run it.


4/28

Action 2: Understanding the process

The command creates a skeleton for our application, which is easy to visualize if

you understand the directory structure. Lets browse the directory of your new Railsapplication.

The application directory has also predefined folders. For example, the " app" folderwhich contains:


5/28

Q1.What can we find in every folder?

The names of the folders are pretty intuitive. The application directory follows the

MVC architecture, as you can see.


6/28

Q2.OK, but what with that bundler thing?!

Bundler manages an application's dependencies through its entire life across manymachines, systematically.

Q3. Important files

Gemfile is a Ruby file which contains the listing of gems used by the application. Ifwe add a line with the attributes of a gem (name, version) and run

$ bundle install

the bundle will tell Rails to use the gem, if is not installed then first is downloadedand linked to the application.

In the Gemfile we can see all the gems, in which environment we use them(development, testing) and for what purpose, so we can handle more easily the tuneup of our app.


7/28

Gemfile

Set up the Gemfile to look like the one above and run $ bundle install.


8/28

routes.rb file is found in the config/ folder and is the place where the appresources are enumerated and the app actions are routed to a specific path, to amethod or a view.

schema.rb is found in db/ folder and contains the database schema of the app.This way you can have an overview about your database and easily see how itchanges.

database.yml file is found in config/ folder and contains the database settings

for the app. ActiveRecord has a default support for SQLite3, but it can bechanged editing this file.

We will use the default database format, so the file doesnt change. To ensure thatwe created our database, even if it will be empty for now, we run

$ rake db:create

If you have an error probably is because you don't have JavaScript and Node.jsplugins, please install them.


9/28

Ok, we have some folders and some files. Now what? Well, in Rails we will have in/app/views folder a file for each type of view we want.

A view will be visible using a browser, but how? Rails has a built in local server for

visualising our app in the browser.

Action 3. Run the app

Every Rails app has 3 sides: a side for production, one for development and anotherfor testing.

One place youll find this distinction is in the config/database.yml file. This YAMLconfiguration file has 3 different sections defining 3 unique database setups:

production

development

test

This allows you to set up and interact with test data without any danger of yourtests altering data from your production environment.


10/28

Rails has two major components used in development:

Rails server

Rails console

For our app to run we have to start the Rails server, this way everything connectsand you can have access to it.

When we start a Rails server we start the database, web and Ruby server, which are

related with the app in question.

Rails console is a tool/way to interact with the app at a closer level. It also lets youplay with Ruby code, even if is not related with the app.


11/28

Step 1.Rails server

We start the server, in our app directory, using

$ rails server or

$ rails s

Use CTRL + C to close the server.

The Rails server is local, so the IP of the

machine on which the server is running

is our localhost. But our machine is

running a lot of processes, so everyone

has a port id, for Rails the default port id

is 3000.

To see our predefined index page,

we enter in the browser the url: http://localhost:3000


12/28

For every action our Rails server will show in the terminal(Rails server log) whatgoes behind the curtains.

The first lines state what servers were started - when we run $ rails s - and after thiswe can see those for our request to see the index page - at http://localhost:3000:

For understanding how our application works and to debug, is important to know

what the lines provided by our Rails server state.

We can see that we made a GET request to the server (which is a RESTful action), at aspecific time and date, to a database (database.yml), to extract an image (/asset/rails.png).
http://localhost:3000/http://localhost:3000/http://localhost:3000/http://localhost:3000/http://localhost:3000/


13/28

Step 2. Rails console

To start a console we go in our app directory - to have access to our app files - andrun

$ rails console or

$ rails c

We can close the console by entering

> exit

!The $ sign will change to > sign, in the console.


14/28

Action 4. Lets talk about Git & Github

When we configured our environment we talked a bit about Git and Github. We know

about Git that is a SCM and we use Github to benefit from Gits features.

For every app, we have to make a Github repository and connect our app directorywith that repository. How we do that?

Step 1. Create a repository on Github

Github has a nice website on which

we have access to your and other persons

repositories. The Help section is also very

good, for a newbie especially.


15/28

Step 2. Connect the dots on your machine

We have to tell our computer how to discus with Github, regarding our app.

The actual communication between your local files and Github is done using theterminals commands.

We init git in our app folder, then we tell git which files and to which Githubrepository to send them. After this we push our file to the repo.

This steps appear after you create your repository on Github, you can also copy thecommands from there.


16/28

Step 3. Commit, push or pull

At the end of every work day, or when we want to update our work, we are going tocommit & push on the repo.

At the beginning of a work day, we should pull files from the repo, this way we aresure that we have the last version of the app.

If we want to see what local files were changed or added, from the last commit, we

enter the command:$ git add .

- git is the word that lets us know that we are performing a git related action, like

rails.

- add is the actual command, that states the fact we are not yet commiting, we arestepping to an intermediary process, and which states what files Git should trackfrom our app.

- .indicates that we add all the folders and files, recursively, of our current directory.

We can add only some files, insert instead of. the file/folder path.


17/28

To check what files are the subject of change we use

$ git status

If we are satisfied and want to commit, we just enter

$ git commit . -m A little message that describes the changes we made

-m message is an option of the commit command, we will use to describe ourwork during projects, for easily keeping track of our work.

We used the command $ git push to actually push our files on the repo. We use $ git

pull to take the files from our repo.


18/28

When you work on a big project, especially with multiple developers, or you want to

test some features, is helpful tobranch out from the master branch, so you candelete, recover or move between branches, keeping your good files away from thoseyou edit.

$ git checkout -bbranch_name - the command used to create a new branch andchecking/moving on the branch

! The implicit branch is master. If you create a new branch, extending master, thenyour app files are automatically copied on the new branch.

$ git branch - lists the branches we have for our repo and indicates with an * thecurrent branch

$ git mergebranch_name - to merge the files from the new branch to the master

branch

$ git branch -dbranch_name - to delete the branch on your computer project, todelete the branch remotely you have to add some commands, but for now we try toavoid doing this.


19/28

Step 4.Ignore files

Another important file is .gitignore file, in which we insert those folders/files wewant to skip when commit on Github.

! To add files or type of files to be ignored, you have to declare them before creatingand using $ git add file.


20/28

Action 5. Heroku

Heroku is a cloud deployment service, which you can choose to launch the platformincluded hosting services for Rails applications.

We are going to deploy our app, for exercies reasons and because if we stay in aclosed environment upon launch we could have problems integrating our app withthe platform.

Step 1. Sign up on Heroku

Step 2. Install Heroku - $ gem install heroku

Step 3.Add your RSA key - $ heroku keys:add


21/28

Step 4. Create on Heroku a new app

a) create a new, empty app - $ heroku create --stack cedar

b) using Git to push the app on Heroku - $ git push heroku master

Now, we have our app on Heroku so we can access her from everywhere. Heroku hasa habit to elaborate funny things, for example the app name is a random phrase,

mine is warm-peak.

Other Heroku commands here https://devcenter.heroku.com/articles/heroku-command.
https://devcenter.heroku.com/articles/heroku-command.https://devcenter.heroku.com/articles/heroku-command.https://devcenter.heroku.com/articles/heroku-command.


22/28

Update Gemfile

For now we will use what we have declared in our Gemfile, if you need a gem will just

add it in the Gemfile and run $ bundle install.

But, if you remeber we installed Heroku without mentioning the gem in the Gemfile.Well, we will have to fix that.

We add pg gem which is needed to

access the PostgreSQL database used

by Heroku.

Now run $ bundle install


23/28

! Dont forget to commit the changes and push them to the Github repository.

What did we do today?

- we created our first app

- learned how Git and Github works

- introduced Heroku

- had fun :)


24/28

Exercises

=Homework


25/28

E1. Create a new test app, following the steps in the lab, but make it public, on youown profile.

!You create the repo from your profile, not Ror-FMI profile.

E2. Read about Git, explore Heroku, play.

E3. Create a new index page for our app. Can you handle it? Don't just editsomething, create a new and simple page using HTML and CSS.

E4. Play - http://tryruby.org/levels/1/challenges/0

! Before resolving the exercises, clone the app from the repo.Steps:

$ git clone

$ ls - you will see a folder with your app

$ cd $ git init

! You have to clone the app only when you first want to download it on a computer.
http://tryruby.org/levels/1/challenges/0


26/28

Notes:

E1. Be sure to install on your home computer all you need, following the steps from

the Installing & configuring course.

E2. Both have documentation on their websites, which are easy to read andunderstand. If you have questions write them down to ask them on the next lab.

E3. One of the reasons we use Github is to have access to our code, so to have a copy

of our app on your home computer, for example, you should clone your repository.How you do that? Follow the steps:

Step 1. Follow the steps from the Installing & configuring course on your personalcomputer, if you havent done this already.

Step 2. Create a directory for your Rails apps. Move in that directory.


27/28

Step 3. Clone the app

$ git clone https://github.com/RoR-FMI/.git

Move in the directory named and run

$ git pull

Step 4. Verify that you have all the files in the directory.

! If you dont have all the files is possible that you didnt add or push your files fromyour school computer to Github. You should do that after every lab or homework, sothat you can access your newer files.

Our index page is a static page, the file is in

~///public/

The new index.html file should be put there. For safety copy the index page inanother folder before you replace it with your own index page.


28/28

! Add, commit and push your changes.

! The deadline for the homework is 48 hours before the lab. Changes made to therepo after this time are not considered.

first ruby app

Documents