First App

Lab 2

We have installed and configured our development environment, so we are ready to code our first Rails application. Our first app is going to have features added along the way. Today, we create and take 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 our present and future work. Action 1: Create our first Rails App Step 1. Making the directory

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.

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 Rails application.

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

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.

Q2. OK, but what with that bundler thing?! Bundler manages an application's dependencies through its entire life across many machines, systematically.

Q3. Important files Gemfile is a Ruby file which contains the listing of gems used by the application. If we 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 downloaded and 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 tune up of our app.

Gemfile

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

routes.rb file is found in the config/ folder and is the place where the app resources are enumerated and the app actions are routed to a specific path, to a method 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 it changes. 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 be changed editing this file.

We will use the default database format, so the file doesnt change. To ensure that we 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.js plugins, please install them.

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 another for testing. One place youll find this distinction is in the config/database.yml file. This YAML configuration 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 your tests altering data from your production environment.

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 connects and 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 you play with Ruby code, even if is not related with the app.

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

For every action our Rails server will show in the terminal(Rails server log) what goes behind the curtains. The first lines state what servers were started - when we run $ rails s - and after this we 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 a specific time and date, to a database (database.yml), to extract an image (/asset/rails. png).

Step 2. Rails console To start a console we go in our app directory - to have access to our app files - and run $ rails console or $ rails c We can close the console by entering > exit !The $ sign will change to > sign, in the console.

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 directory with 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.

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 the terminals commands. We init git in our app folder, then we tell git which files and to which Github repository 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 the commands from there.

Step 3. Commit, push or pull At the end of every work day, or when we want to update our work, we are going to commit & push on the repo. At the beginning of a work day, we should pull files from the repo, this way we are sure 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 are stepping to an intermediary process, and which states what files Git should track from 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.

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 our work 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.

When you work on a big project, especially with multiple developers, or you want to test some features, is helpful to branch out from the master branch, so you can delete, recover or move between branches, keeping your good files away from those you edit. $ git checkout -b branch_name - the command used to create a new branch and checking/moving on the branch ! The implicit branch is master. If you create a new branch, extending master, then your app files are automatically copied on the new branch. $ git branch - lists the branches we have for our repo and indicates with an * the current branch $ git merge branch_name - to merge the files from the new branch to the master branch $ git branch -d branch_name - to delete the branch on your computer project, to delete the branch remotely you have to add some commands, but for now we try to avoid doing this.

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

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

Action 5. Heroku Heroku is a cloud deployment service, which you can choose to launch the platform included hosting services for Rails applications. We are going to deploy our app, for exercies reasons and because if we stay in a closed environment upon launch we could have problems integrating our app with the platform. Step 1. Sign up on Heroku Step 2. Install Heroku - $ gem install heroku Step 3. Add your RSA key - $ heroku keys:add

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 has a 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/herokucommand.

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

! 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 :)

Exercises = Homework

E1. Create a new test app, following the steps in the lab, but make it public, on you own 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 edit something, 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 <url from your repo page, above the menu. it end in ".git"> $ ls - you will see a folder with your app $ cd <app_name> $ git init ! You have to clone the app only when you first want to download it on a computer.

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 and understand. 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 personal computer, if you havent done this already. Step 2. Create a directory for your Rails apps. Move in that directory.

Step 3. Clone the app $ git clone https://github.com/RoR-FMI/<app_name>.git Move in the directory named <app_name> 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 from your school computer to Github. You should do that after every lab or homework, so that you can access your newer files. Our index page is a static page, the file is in ~/<rails_app_directory>/<app_name>/public/ The new index.html file should be put there. For safety copy the index page in another folder before you replace it with your own index page.

! Add, commit and push your changes.

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