SlideShare une entreprise Scribd logo
1  sur  158
Télécharger pour lire hors ligne
Creating your first Ruby
on Rails application
Prerequisites
• Install Rails and all requirements from
http://railsinstaller.org/en
• Create an account at http://github.com
• Windows users, install Ruby 1.9+
• Mac users, you also get RVM. I’ll mention
that later.
• Sorry Linux, no Rails installer for you.
Google should help you here.
• I will continue to point out differences
between operating Systems.
Follow the prompts to
install Rails
Once the installer has finished,
it will ask you to log in to your
Github account.
Go for it.
Go for it.
Windows
Install a suitable text editor. I
recommend Notepad++ (
http://notepad-plus-plus.org/)
Open CMD.exe
• Go to start menu, type ‘CMD’ and press
enter. It should open the command prompt
for you.
Create a new folder for
your work
• And put it somewhere nice, I tend to go for
C:rails
Navigate there
• In CMD, type
cd C:rails
• Replace C:rails with the path to
wherever you created your previous folder.
From the start menu,
open Git Bash
cd ~/.ssh
ssh-keygen -t rsa -C "your_email@example.com"
When prompted for
location, just press
enter to accept the
default. Do the same
for the encryption key,
also.
clip < ~/.ssh/id_rsa.pub
Then go to
Github.com, and open
settings.
(2nd icon from top right)
(2nd icon from top right)
Now, on the left side,
select SSH keys.
Click ‘Add SSH key’.
For name, chose an
appropriate name for
your key. Mine is Benji-
mac.
right click paste. The
previous command
(clip < ~/.ssh/id_rsa.pub)
added the key to your
clipboard.
added the key to your
clipboard.
added the key to your
Click ‘Add key’. You
should also receive an
email telling you a key
has been added.
Mac OSX 10.6+
Install a suitable text editor.
I recommend TextMate (
http://macromates.com/)
Open Terminal
• Go to Spotlight Search (cmd + space) and
type ‘terminal’. It should be there.
cd ~/.ssh
ssh-keygen -t rsa -C "your_email@example.com"
When prompted for
location, just press
enter to accept the
default. Do the same
for the encryption key,
also.
pbcopy < ~/.ssh/id_rsa.pub
Then go to
Github.com, and open
settings.
(2nd icon from top right)
(2nd icon from top right)
Now, on the left side,
select SSH keys.
Click ‘Add SSH key’.
For name, chose an
appropriate name for
your key. Mine is Benji-
mac.
right click paste. The
previous command
(clip < ~/.ssh/id_rsa.pub)
added the key to your
clipboard.
added the key to your
clipboard.
added the key to your
Click ‘Add key’. You
should also receive an
email telling you a key
has been added.
Create a new folder for
your work
• And put it somewhere nice. I tend to go for
[username]/rails
Navigate there
• In terminal, type
cd ~/rails
• The ~ (tilde character) in this represents
your home directory.
Optional
• RVM stands for RailsVersion Manager. It’s
very useful if you’re using various versions
of Ruby, such as MacRuby or JRuby.
• Create a gemset using
rvm create gemset my-gems
• Then use this gemset with
rvm 1.9@my-gemset
The brief
• You have been asked to create an online
management system for a pet shop,“Jones’
Pets”.
• The system must, for now, keep track of
what pets are in stock, and how many of
each there are.
• The system will then be updated to handle
employee logins, and include a leaderboard
of who has sold the most animals.
Getting started
rails new pet-shop
Run this command in
Terminal (Mac), or
CMD (Windows)
• This will create a new folder in your rails
folder, called ‘pet-shop’
• Inside this folder, rails will have generated
everything you need to get started.
• Navigate into this folder using cd
pet_shop
Let’s have a look inside
• app/
• assets/
• images/
• rails.png
• javascripts/
• application.js
• stylesheets/
• application.css
• controllers/
• application_controller.rb
• helpers/
• application_helper.rb
• mailers/
• models/
• views/
• layouts/
• application.html.erb
• config/
• ...
• routes.rb
• ...
• Gemfile
• public/
• ...
• index.html
• README.rdoc
• ...
• test/
• ...
• ...
I’ve left some out
there.
But it still looks a little
scary, right?
But it still looks a little
scary, right?
You don’t need to
know what all of it
does.
A lot of the directories are
empty, and will stay that
way through the tutorial.
Here are some of the
important ones
app/
• This is where we will be spending most of
our time. It contains [nearly] all of the files
that we need to make our application
work.
app/assets/
• This is where you will find all the resources for
the app.
• This includes:
• CSS
• Javascript
• & images
• Don’t worry about what each of these do, for
now. I’ll get to them soon enough.
app/controllers/
• A Rails controller interprets a request from
the browser, and then tells the application
what to do.
• eg., if you visit
http://twitter.com/BenjaminBoxler,Twitter
probably uses a controller routing my
username to a ‘show’ action in order to
display my timeline.
• Fun fact:Twitter was originally built in Ruby
on Rails, and parts of it reman so.
app/helpers/
• This contains the code that bridges the
controller and the view.These can be
written directly in the view, but helpers
keep things clean and tidy.
• helpers in app/helpers/application_helper.rb
can be called from any view.
app/mailers/
• These allow you to send emails from your
application.We won’t be needing these.
app/models/
• Models hold associations and code relating
to the database. Note: it does not actually
contain the database.
app/views/
• This file contains all the layout information
for the application.
• Note, it contains NO styling information.
app/view/layouts/
• This contains the templates from the
templates from which pages are loaded
into.
• application.html.erb is the default.
• .erb stands for ‘embedded Ruby’, and means
that Ruby can be called directly from that
page.
Gemfile
• The Gemfile (no extension) contains a list
of ‘Gems’ (or plugins) your application
requires, for Bundler to install.
public/
• This contains pages with no dynamic or
generated content.
• If your website contains a lot of static
pages, it is unlikely you would use this.
• We will briefly use this in our project.
/README.rdoc
• This file contains information about your
project. It’s not really needed, but because
we are going to useGitHub, we shall keep it
in.
• Don’t worry about the extension ‘rdoc’. It
stands for Ruby DOCumentation.We will
change it to ‘md’ to use Markdown.
/test/
• This will contain tests for our projects.
• We will not use anything currently in this
directory, as we shall use RSPEC.
Introduction to Git
What is Git?
• Git is a distributed version control system, used
for tracking changes to code to allow roll-backs
and security against corruption.
• Created in 2005 for version management of the
Linux kernal, by Linus Torvalds, founder of Linux.
• Created to make it near impossible for data loss to
occur over a distributed network.
• For an in-depth look at every aspect of Git, I
reccomend reading Pro-Git, available free online.
• Firstly, open an internet browser, and go to
http://github.com
• You should have created an account at the
beginning of this tutorial, so if you have, log
in (if you aren’t already), and if not, create
an account now.
First app
Creating a new
repository
• Create a new repository
(repo) using the third icon on
the right at the top-right of
the page.
• It looks like a book with a +
on it.
• For the name, I suggest
pet_shop, or
something equally
memorable and relevant.
• You may, optionally, add a
relevant description.
• Click create.
Congratulations, you
just created your first
remote repository.
Let’s put something in it.
Let’s put something in it.
Firstly, you must
initialise your local
repository.
• You can do this in Terminal or CMD by
navigating to your project folder, if you’re
not already there, use
cd C:railspet_shop in Windows,
and cd ~/rails/pet_shop on mac.
• Then type git init to initialise the local
repository.
First app
But Git still thinks the
repository is empty,
despite having files
there.
• Let’s fix that.
• In terminal, now run git add .
(Don’t forget that trailing full stop!)
• It may look like nothing has happened, but
unless you get an error, it has probably
worked.
Now you must commit
your changes.
• All committing does, is tells your repository
that the files you listed in the last step have
changed, and you wish for it to take note of
it.
• In the last step, we didn’t list all the files in
the repository, because that would be silly.
We used the shorthand,‘.’ (Full stop)
• To commit your changes, you must run
git commit -m “initial
commit”
• The -m tells the command that the name
of the commit follows. In this case, the
name is “Initial commit”.
We’re now almost
ready to push our files
up to Github.
run git push to
push our files
Okay, it’s not meant to
work yet. We haven’t
told our computer
where to push it.
First app
If you still have Github
open, you should see it
has given you some
code.
If you do not still have
Github open, please
return there, and once
logged in, select the
repository we created
earlier, from the list on
the right.
First app
We’re only interested
in the two lines
following, “Push an
existing repository
from the command
line”.
git remote add origin
git@github.com:
[username]/pet_shop.git
git push -u origin master
Note, you need to
change [username] to
whatever your Github
username is.
If you have named your
repository something
other than pet_shop,
you will also need ot
change that in the
command.
The first command
adds a new remote
repository to the
working directory, and
names it ‘origin’.
The second command
sets the default push to
that remote repository.
The -u flag sets the
upstream to a remote
named ‘origin’, on the
branch ‘master’.
Now lets have a look at
our project on Github.
(http://github.com/[username]/pet_store)
)
If it has all worked
properly, you should
see your list of files,
with a long, unrelated
README at the
bottom.
Let’s make it a little
more relevant.
Let’s rename it to
README.md
git mv README.rdoc README.md
This renames the file
README.rdoc (Ruby
doc), to README.md
(Markdown).
Prefixing the mv
command with git
allows git to track the
change.
Now open
README.md
to open with TextMate, or
edit README.md
to open with
TextWrangler.
to open with
TextWrangler.
to open with
TextWrangler.
to open with
In Windows, you can add Notepad+
+ to your $PATH, but I’ll let Google
explain that one for you.
If this doesn’t take your fancy, you
can find the file in Explorer, and
right-click > Open with Notepad++
If this doesn’t take your fancy, you
can find the file in Explorer, and
right-click > Open with Notepad++
Once open, clear the
document. We don’t
really need any of it.
Now add something
descriptive. Mine is
shown on the next
slide.
Compiles to
You can find more
information about the
formatting, here
http://daringfireball.net/projects/markdown/basics
http://daringfireball.net/projects/markdown/basics
Now you must commit
your change.
Because you have already
alerted git of the new file
by using git mv, you
don’t need to use git
add . again. You can
just use
git commit -am “Updated README”
git commit -am “Updated README”
The new flag, -a, tells
git to just commit any
file that has been
changed, that has
already been marked by
git, using git add
Gemfile
Open the Gemfile from
the root of your
application. On Windows,
right-click < Open With
Notepad++, or on Mac
from the command line
mate Gemfile
add the following to
the bottom of the file
group :development, :test do
gem 'rspec-rails'
end
end
end
Now, from terminal,
install this by running
bundle update
then
bundle install
bundle install
bundle install
It may take a while.
You need to initiate
Rspec before you can
use it, so run
rails generate rspec:install
rails generate rspec:install
Now commit your
changes.
git commit -am “Updated Gemfile”
Branching
Branching is the act of
diverging away from your
main Git record, for safety.
For example, I might want to
try something new, but if it
doesn’t work I don’t want it
to break the project, so I
would use a branch.
git checkout -b pets_controller
checkout changes branches,
whilst -b creates a new branch on
the fly. It’s important to note that
you can go between branches, and
edit them however, as long as you
commit between. You can then
merge the branches together, and
Git does a good job of doing this
automatically - you don’t need to
merge any files individually.
Now, to generate a
controller to control
our pets.
Controller. This is the name
for how the database and
webpage interact. It’s a little
more in depth than that, but I
will mention the basics as we
go through each part.
MVC stands for Model View
Controller. This is the name
for how the database and
webpage interact. It’s a little
rails generate resources Pets
animal:string price:integer
quantity:integer
(All one line.)
(All one line.)
Might take a minute, but you will see the output
on the console. Now would be a good time to
add and commit these files.
git add .
git commit -m “Generated pets controller.”
git commit -m “Generated pets controller.”
git commit -m “Generated pets controller.”
You can see the routes
created by running
rake routes from
the terminal.
You will see output
along the lines of...
[pet-shop(pets_controller)]$ rake routes
pets GET /pets(.:format) pets#index
POST /pets(.:format) pets#create
new_pet GET /pets/new(.:format) pets#new
edit_pet GET /pets/:id/edit(.:format) pets#edit
pet GET /pets/:id(.:format) pets#show
PUT /pets/:id(.:format) pets#update
DELETE /pets/:id(.:format) pets#destroy
If you don’t know what
this means yet, that’s
okay. You will find out
a bit more, shortly.
open
app/controllers/pets_co
ntroller.rb
Once more, you can open this with your text editor.
Once more, you can open this with your text editor.
Now, before the line
end,
add...
add...
def index
end
end
This defines a
procedure named
‘index’.
The index is the default route,
and the action that would run if
you went to [your
website]/pets if the site was
live.
Now navigate to
app/views/pets, and create
the file index.html.erb
app/views/pets, and create
the file index.html.erb
.erb is the extension
used for embedded
ruby.
In this file, just add the
line
<h1>Hello, world!</h1>
<h1>Hello, world!</h1>
Now save it, and let’s
go see if it worked.
In the terminal run
rails server start
or
rails s
for short.
for short.
for short.
for short.
This will start a web
server, so you can see
your project on your
own computer.
Now in your browser
go to
http://localhost:3000
http://localhost:3000
Welcome aboard
You’re riding Ruby on Rails!
You’re riding Ruby on Rails!
If you see that message,
it means your Ruby
server isn’t up and
running. Give it a
refresh and see if it
works.
You can have a click
around on this page, it
basically just tells you
about your Ruby
environment.
Not very useful. We’ll
get rid of it in a bit.
Not very useful. We’ll
But now you can head to
http://localhost:3000/pets
http://localhost:3000/pets
You should see the
‘Hello World!’ you
wrote just now.
Congratulations!
You have created your
first working controller!
You have created your
first working controller!

Contenu connexe

Tendances

Master the New Core of Drupal 8 Now: with Symfony and Silex
Master the New Core of Drupal 8 Now: with Symfony and SilexMaster the New Core of Drupal 8 Now: with Symfony and Silex
Master the New Core of Drupal 8 Now: with Symfony and SilexRyan Weaver
 
Ruby Isn't Just About Rails
Ruby Isn't Just About RailsRuby Isn't Just About Rails
Ruby Isn't Just About RailsAdam Wiggins
 
Being Dangerous with Twig
Being Dangerous with TwigBeing Dangerous with Twig
Being Dangerous with TwigRyan Weaver
 
A Tour of Wyriki
A Tour of WyrikiA Tour of Wyriki
A Tour of WyrikiMark Menard
 
django Forms in a Web API World
django Forms in a Web API Worlddjango Forms in a Web API World
django Forms in a Web API WorldTareque Hossain
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracketjnewmanux
 
Deploying Symfony | symfony.cat
Deploying Symfony | symfony.catDeploying Symfony | symfony.cat
Deploying Symfony | symfony.catPablo Godel
 
Webapp security testing
Webapp security testingWebapp security testing
Webapp security testingTomas Doran
 
Upstate CSCI 450 PHP Chapters 5, 12, 13
Upstate CSCI 450 PHP Chapters 5, 12, 13Upstate CSCI 450 PHP Chapters 5, 12, 13
Upstate CSCI 450 PHP Chapters 5, 12, 13DanWooster1
 
Building Better Web APIs with Rails
Building Better Web APIs with RailsBuilding Better Web APIs with Rails
Building Better Web APIs with RailsAll Things Open
 
Rails for Beginners - Le Wagon
Rails for Beginners - Le WagonRails for Beginners - Le Wagon
Rails for Beginners - Le WagonAlex Benoit
 
Core data intermediate Workshop at NSSpain 2013
Core data intermediate Workshop at NSSpain 2013Core data intermediate Workshop at NSSpain 2013
Core data intermediate Workshop at NSSpain 2013Diego Freniche Brito
 
Generative Testing in Clojure
Generative Testing in ClojureGenerative Testing in Clojure
Generative Testing in ClojureAlistair Roche
 
CPAN Dependency Heaven
CPAN Dependency HeavenCPAN Dependency Heaven
CPAN Dependency HeavenOpusVL
 
Library, Library Lets Use THAT Library – DFW Mobile
Library, Library Lets Use THAT Library  – DFW MobileLibrary, Library Lets Use THAT Library  – DFW Mobile
Library, Library Lets Use THAT Library – DFW MobileAdam Hill
 
What you can do In WatiR
What you can do In WatiRWhat you can do In WatiR
What you can do In WatiRWesley Chen
 

Tendances (20)

Master the New Core of Drupal 8 Now: with Symfony and Silex
Master the New Core of Drupal 8 Now: with Symfony and SilexMaster the New Core of Drupal 8 Now: with Symfony and Silex
Master the New Core of Drupal 8 Now: with Symfony and Silex
 
Ruby Isn't Just About Rails
Ruby Isn't Just About RailsRuby Isn't Just About Rails
Ruby Isn't Just About Rails
 
Composer Helpdesk
Composer HelpdeskComposer Helpdesk
Composer Helpdesk
 
Being Dangerous with Twig
Being Dangerous with TwigBeing Dangerous with Twig
Being Dangerous with Twig
 
A Tour of Wyriki
A Tour of WyrikiA Tour of Wyriki
A Tour of Wyriki
 
django Forms in a Web API World
django Forms in a Web API Worlddjango Forms in a Web API World
django Forms in a Web API World
 
Creating custom themes in AtoM
Creating custom themes in AtoMCreating custom themes in AtoM
Creating custom themes in AtoM
 
Palestra VCR
Palestra VCRPalestra VCR
Palestra VCR
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracket
 
Deploying Symfony | symfony.cat
Deploying Symfony | symfony.catDeploying Symfony | symfony.cat
Deploying Symfony | symfony.cat
 
Webapp security testing
Webapp security testingWebapp security testing
Webapp security testing
 
Upstate CSCI 450 PHP Chapters 5, 12, 13
Upstate CSCI 450 PHP Chapters 5, 12, 13Upstate CSCI 450 PHP Chapters 5, 12, 13
Upstate CSCI 450 PHP Chapters 5, 12, 13
 
Building Better Web APIs with Rails
Building Better Web APIs with RailsBuilding Better Web APIs with Rails
Building Better Web APIs with Rails
 
Reliable acceptance testing
Reliable acceptance testingReliable acceptance testing
Reliable acceptance testing
 
Rails for Beginners - Le Wagon
Rails for Beginners - Le WagonRails for Beginners - Le Wagon
Rails for Beginners - Le Wagon
 
Core data intermediate Workshop at NSSpain 2013
Core data intermediate Workshop at NSSpain 2013Core data intermediate Workshop at NSSpain 2013
Core data intermediate Workshop at NSSpain 2013
 
Generative Testing in Clojure
Generative Testing in ClojureGenerative Testing in Clojure
Generative Testing in Clojure
 
CPAN Dependency Heaven
CPAN Dependency HeavenCPAN Dependency Heaven
CPAN Dependency Heaven
 
Library, Library Lets Use THAT Library – DFW Mobile
Library, Library Lets Use THAT Library  – DFW MobileLibrary, Library Lets Use THAT Library  – DFW Mobile
Library, Library Lets Use THAT Library – DFW Mobile
 
What you can do In WatiR
What you can do In WatiRWhat you can do In WatiR
What you can do In WatiR
 

Similaire à First app

Github for Serious Business Professional
Github for Serious Business ProfessionalGithub for Serious Business Professional
Github for Serious Business Professionalzwheller
 
Hello Git
Hello GitHello Git
Hello Gitbsadd
 
Packaging for the Maemo Platform
Packaging for the Maemo PlatformPackaging for the Maemo Platform
Packaging for the Maemo PlatformJeremiah Foster
 
Open Source Tools for Leveling Up Operations FOSSET 2014
Open Source Tools for Leveling Up Operations FOSSET 2014Open Source Tools for Leveling Up Operations FOSSET 2014
Open Source Tools for Leveling Up Operations FOSSET 2014Mandi Walls
 
An Introduction to Processing
An Introduction to ProcessingAn Introduction to Processing
An Introduction to ProcessingCate Huston
 
Contribute to rails
Contribute to railsContribute to rails
Contribute to railsmartinsvalin
 
Untangling fall2017 week2_try2
Untangling fall2017 week2_try2Untangling fall2017 week2_try2
Untangling fall2017 week2_try2Derek Jacoby
 
Untangling fall2017 week2
Untangling fall2017 week2Untangling fall2017 week2
Untangling fall2017 week2Derek Jacoby
 
PyCourse - Self driving python course
PyCourse - Self driving python coursePyCourse - Self driving python course
PyCourse - Self driving python courseEran Shlomo
 
The New Frontend Toolchain
The New Frontend ToolchainThe New Frontend Toolchain
The New Frontend ToolchainBruno Abrantes
 
Intro to Git for Drupal 7
Intro to Git for Drupal 7Intro to Git for Drupal 7
Intro to Git for Drupal 7Chris Caple
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't CodeChristopher Schmitt
 
Using git hub for your code
Using git hub for your codeUsing git hub for your code
Using git hub for your codeOsama Mustafa
 
IS - section 1 - modifiedFinal information system.pptx
IS - section 1 - modifiedFinal information system.pptxIS - section 1 - modifiedFinal information system.pptx
IS - section 1 - modifiedFinal information system.pptxNaglaaAbdelhady
 

Similaire à First app (20)

Git/GitHub
Git/GitHubGit/GitHub
Git/GitHub
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
 
Hello, Git!
Hello, Git!Hello, Git!
Hello, Git!
 
Github for Serious Business Professional
Github for Serious Business ProfessionalGithub for Serious Business Professional
Github for Serious Business Professional
 
Hello Git
Hello GitHello Git
Hello Git
 
Packaging for the Maemo Platform
Packaging for the Maemo PlatformPackaging for the Maemo Platform
Packaging for the Maemo Platform
 
Open Source Tools for Leveling Up Operations FOSSET 2014
Open Source Tools for Leveling Up Operations FOSSET 2014Open Source Tools for Leveling Up Operations FOSSET 2014
Open Source Tools for Leveling Up Operations FOSSET 2014
 
An Introduction to Processing
An Introduction to ProcessingAn Introduction to Processing
An Introduction to Processing
 
Contribute to rails
Contribute to railsContribute to rails
Contribute to rails
 
Untangling fall2017 week2_try2
Untangling fall2017 week2_try2Untangling fall2017 week2_try2
Untangling fall2017 week2_try2
 
Untangling fall2017 week2
Untangling fall2017 week2Untangling fall2017 week2
Untangling fall2017 week2
 
PyCourse - Self driving python course
PyCourse - Self driving python coursePyCourse - Self driving python course
PyCourse - Self driving python course
 
The New Frontend Toolchain
The New Frontend ToolchainThe New Frontend Toolchain
The New Frontend Toolchain
 
Intro to Git for Drupal 7
Intro to Git for Drupal 7Intro to Git for Drupal 7
Intro to Git for Drupal 7
 
Untangling4
Untangling4Untangling4
Untangling4
 
GitHub Basics - Derek Bable
GitHub Basics - Derek BableGitHub Basics - Derek Bable
GitHub Basics - Derek Bable
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
 
Using git hub for your code
Using git hub for your codeUsing git hub for your code
Using git hub for your code
 
Automate Yo' Self
Automate Yo' SelfAutomate Yo' Self
Automate Yo' Self
 
IS - section 1 - modifiedFinal information system.pptx
IS - section 1 - modifiedFinal information system.pptxIS - section 1 - modifiedFinal information system.pptx
IS - section 1 - modifiedFinal information system.pptx
 

Dernier

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 

Dernier (20)

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 

First app

  • 1. Creating your first Ruby on Rails application
  • 3. • Install Rails and all requirements from http://railsinstaller.org/en • Create an account at http://github.com
  • 4. • Windows users, install Ruby 1.9+ • Mac users, you also get RVM. I’ll mention that later. • Sorry Linux, no Rails installer for you. Google should help you here. • I will continue to point out differences between operating Systems.
  • 5. Follow the prompts to install Rails
  • 6. Once the installer has finished, it will ask you to log in to your Github account. Go for it. Go for it.
  • 8. Install a suitable text editor. I recommend Notepad++ ( http://notepad-plus-plus.org/)
  • 9. Open CMD.exe • Go to start menu, type ‘CMD’ and press enter. It should open the command prompt for you.
  • 10. Create a new folder for your work • And put it somewhere nice, I tend to go for C:rails
  • 11. Navigate there • In CMD, type cd C:rails • Replace C:rails with the path to wherever you created your previous folder.
  • 12. From the start menu, open Git Bash
  • 14. ssh-keygen -t rsa -C "your_email@example.com"
  • 15. When prompted for location, just press enter to accept the default. Do the same for the encryption key, also.
  • 17. Then go to Github.com, and open settings. (2nd icon from top right) (2nd icon from top right)
  • 18. Now, on the left side, select SSH keys.
  • 19. Click ‘Add SSH key’. For name, chose an appropriate name for your key. Mine is Benji- mac.
  • 20. right click paste. The previous command (clip < ~/.ssh/id_rsa.pub) added the key to your clipboard. added the key to your clipboard. added the key to your
  • 21. Click ‘Add key’. You should also receive an email telling you a key has been added.
  • 23. Install a suitable text editor. I recommend TextMate ( http://macromates.com/)
  • 24. Open Terminal • Go to Spotlight Search (cmd + space) and type ‘terminal’. It should be there.
  • 26. ssh-keygen -t rsa -C "your_email@example.com"
  • 27. When prompted for location, just press enter to accept the default. Do the same for the encryption key, also.
  • 29. Then go to Github.com, and open settings. (2nd icon from top right) (2nd icon from top right)
  • 30. Now, on the left side, select SSH keys.
  • 31. Click ‘Add SSH key’. For name, chose an appropriate name for your key. Mine is Benji- mac.
  • 32. right click paste. The previous command (clip < ~/.ssh/id_rsa.pub) added the key to your clipboard. added the key to your clipboard. added the key to your
  • 33. Click ‘Add key’. You should also receive an email telling you a key has been added.
  • 34. Create a new folder for your work • And put it somewhere nice. I tend to go for [username]/rails
  • 35. Navigate there • In terminal, type cd ~/rails • The ~ (tilde character) in this represents your home directory.
  • 36. Optional • RVM stands for RailsVersion Manager. It’s very useful if you’re using various versions of Ruby, such as MacRuby or JRuby. • Create a gemset using rvm create gemset my-gems • Then use this gemset with rvm 1.9@my-gemset
  • 38. • You have been asked to create an online management system for a pet shop,“Jones’ Pets”. • The system must, for now, keep track of what pets are in stock, and how many of each there are. • The system will then be updated to handle employee logins, and include a leaderboard of who has sold the most animals.
  • 41. Run this command in Terminal (Mac), or CMD (Windows)
  • 42. • This will create a new folder in your rails folder, called ‘pet-shop’ • Inside this folder, rails will have generated everything you need to get started. • Navigate into this folder using cd pet_shop
  • 43. Let’s have a look inside
  • 44. • app/ • assets/ • images/ • rails.png • javascripts/ • application.js • stylesheets/ • application.css • controllers/ • application_controller.rb • helpers/ • application_helper.rb • mailers/ • models/ • views/ • layouts/ • application.html.erb • config/ • ... • routes.rb • ... • Gemfile • public/ • ... • index.html • README.rdoc • ... • test/ • ... • ...
  • 45. I’ve left some out there. But it still looks a little scary, right? But it still looks a little scary, right?
  • 46. You don’t need to know what all of it does.
  • 47. A lot of the directories are empty, and will stay that way through the tutorial.
  • 48. Here are some of the important ones
  • 49. app/
  • 50. • This is where we will be spending most of our time. It contains [nearly] all of the files that we need to make our application work.
  • 52. • This is where you will find all the resources for the app. • This includes: • CSS • Javascript • & images • Don’t worry about what each of these do, for now. I’ll get to them soon enough.
  • 54. • A Rails controller interprets a request from the browser, and then tells the application what to do. • eg., if you visit http://twitter.com/BenjaminBoxler,Twitter probably uses a controller routing my username to a ‘show’ action in order to display my timeline. • Fun fact:Twitter was originally built in Ruby on Rails, and parts of it reman so.
  • 56. • This contains the code that bridges the controller and the view.These can be written directly in the view, but helpers keep things clean and tidy. • helpers in app/helpers/application_helper.rb can be called from any view.
  • 58. • These allow you to send emails from your application.We won’t be needing these.
  • 60. • Models hold associations and code relating to the database. Note: it does not actually contain the database.
  • 62. • This file contains all the layout information for the application. • Note, it contains NO styling information.
  • 64. • This contains the templates from the templates from which pages are loaded into. • application.html.erb is the default. • .erb stands for ‘embedded Ruby’, and means that Ruby can be called directly from that page.
  • 66. • The Gemfile (no extension) contains a list of ‘Gems’ (or plugins) your application requires, for Bundler to install.
  • 68. • This contains pages with no dynamic or generated content. • If your website contains a lot of static pages, it is unlikely you would use this. • We will briefly use this in our project.
  • 70. • This file contains information about your project. It’s not really needed, but because we are going to useGitHub, we shall keep it in. • Don’t worry about the extension ‘rdoc’. It stands for Ruby DOCumentation.We will change it to ‘md’ to use Markdown.
  • 72. • This will contain tests for our projects. • We will not use anything currently in this directory, as we shall use RSPEC.
  • 74. What is Git? • Git is a distributed version control system, used for tracking changes to code to allow roll-backs and security against corruption. • Created in 2005 for version management of the Linux kernal, by Linus Torvalds, founder of Linux. • Created to make it near impossible for data loss to occur over a distributed network. • For an in-depth look at every aspect of Git, I reccomend reading Pro-Git, available free online.
  • 75. • Firstly, open an internet browser, and go to http://github.com • You should have created an account at the beginning of this tutorial, so if you have, log in (if you aren’t already), and if not, create an account now.
  • 78. • Create a new repository (repo) using the third icon on the right at the top-right of the page. • It looks like a book with a + on it.
  • 79. • For the name, I suggest pet_shop, or something equally memorable and relevant. • You may, optionally, add a relevant description. • Click create.
  • 80. Congratulations, you just created your first remote repository. Let’s put something in it. Let’s put something in it.
  • 81. Firstly, you must initialise your local repository.
  • 82. • You can do this in Terminal or CMD by navigating to your project folder, if you’re not already there, use cd C:railspet_shop in Windows, and cd ~/rails/pet_shop on mac.
  • 83. • Then type git init to initialise the local repository.
  • 85. But Git still thinks the repository is empty, despite having files there.
  • 86. • Let’s fix that. • In terminal, now run git add . (Don’t forget that trailing full stop!) • It may look like nothing has happened, but unless you get an error, it has probably worked.
  • 87. Now you must commit your changes.
  • 88. • All committing does, is tells your repository that the files you listed in the last step have changed, and you wish for it to take note of it. • In the last step, we didn’t list all the files in the repository, because that would be silly. We used the shorthand,‘.’ (Full stop)
  • 89. • To commit your changes, you must run git commit -m “initial commit” • The -m tells the command that the name of the commit follows. In this case, the name is “Initial commit”.
  • 90. We’re now almost ready to push our files up to Github.
  • 91. run git push to push our files
  • 92. Okay, it’s not meant to work yet. We haven’t told our computer where to push it.
  • 94. If you still have Github open, you should see it has given you some code.
  • 95. If you do not still have Github open, please return there, and once logged in, select the repository we created earlier, from the list on the right.
  • 97. We’re only interested in the two lines following, “Push an existing repository from the command line”.
  • 98. git remote add origin git@github.com: [username]/pet_shop.git git push -u origin master
  • 99. Note, you need to change [username] to whatever your Github username is.
  • 100. If you have named your repository something other than pet_shop, you will also need ot change that in the command.
  • 101. The first command adds a new remote repository to the working directory, and names it ‘origin’.
  • 102. The second command sets the default push to that remote repository. The -u flag sets the upstream to a remote named ‘origin’, on the branch ‘master’.
  • 103. Now lets have a look at our project on Github. (http://github.com/[username]/pet_store) )
  • 104. If it has all worked properly, you should see your list of files, with a long, unrelated README at the bottom.
  • 105. Let’s make it a little more relevant.
  • 106. Let’s rename it to README.md
  • 107. git mv README.rdoc README.md
  • 108. This renames the file README.rdoc (Ruby doc), to README.md (Markdown).
  • 109. Prefixing the mv command with git allows git to track the change.
  • 111. to open with TextMate, or edit README.md to open with TextWrangler. to open with TextWrangler. to open with TextWrangler. to open with
  • 112. In Windows, you can add Notepad+ + to your $PATH, but I’ll let Google explain that one for you. If this doesn’t take your fancy, you can find the file in Explorer, and right-click > Open with Notepad++ If this doesn’t take your fancy, you can find the file in Explorer, and right-click > Open with Notepad++
  • 113. Once open, clear the document. We don’t really need any of it.
  • 114. Now add something descriptive. Mine is shown on the next slide.
  • 116. You can find more information about the formatting, here http://daringfireball.net/projects/markdown/basics http://daringfireball.net/projects/markdown/basics
  • 117. Now you must commit your change.
  • 118. Because you have already alerted git of the new file by using git mv, you don’t need to use git add . again. You can just use git commit -am “Updated README” git commit -am “Updated README”
  • 119. The new flag, -a, tells git to just commit any file that has been changed, that has already been marked by git, using git add
  • 121. Open the Gemfile from the root of your application. On Windows, right-click < Open With Notepad++, or on Mac from the command line mate Gemfile
  • 122. add the following to the bottom of the file
  • 123. group :development, :test do gem 'rspec-rails' end end end
  • 124. Now, from terminal, install this by running bundle update then bundle install bundle install bundle install
  • 125. It may take a while.
  • 126. You need to initiate Rspec before you can use it, so run rails generate rspec:install rails generate rspec:install
  • 128. git commit -am “Updated Gemfile”
  • 130. Branching is the act of diverging away from your main Git record, for safety. For example, I might want to try something new, but if it doesn’t work I don’t want it to break the project, so I would use a branch.
  • 131. git checkout -b pets_controller
  • 132. checkout changes branches, whilst -b creates a new branch on the fly. It’s important to note that you can go between branches, and edit them however, as long as you commit between. You can then merge the branches together, and Git does a good job of doing this automatically - you don’t need to merge any files individually.
  • 133. Now, to generate a controller to control our pets.
  • 134. Controller. This is the name for how the database and webpage interact. It’s a little more in depth than that, but I will mention the basics as we go through each part. MVC stands for Model View Controller. This is the name for how the database and webpage interact. It’s a little
  • 135. rails generate resources Pets animal:string price:integer quantity:integer (All one line.) (All one line.)
  • 136. Might take a minute, but you will see the output on the console. Now would be a good time to add and commit these files. git add . git commit -m “Generated pets controller.” git commit -m “Generated pets controller.” git commit -m “Generated pets controller.”
  • 137. You can see the routes created by running rake routes from the terminal.
  • 138. You will see output along the lines of...
  • 139. [pet-shop(pets_controller)]$ rake routes pets GET /pets(.:format) pets#index POST /pets(.:format) pets#create new_pet GET /pets/new(.:format) pets#new edit_pet GET /pets/:id/edit(.:format) pets#edit pet GET /pets/:id(.:format) pets#show PUT /pets/:id(.:format) pets#update DELETE /pets/:id(.:format) pets#destroy
  • 140. If you don’t know what this means yet, that’s okay. You will find out a bit more, shortly.
  • 141. open app/controllers/pets_co ntroller.rb Once more, you can open this with your text editor. Once more, you can open this with your text editor.
  • 142. Now, before the line end, add... add...
  • 144. This defines a procedure named ‘index’.
  • 145. The index is the default route, and the action that would run if you went to [your website]/pets if the site was live.
  • 146. Now navigate to app/views/pets, and create the file index.html.erb app/views/pets, and create the file index.html.erb
  • 147. .erb is the extension used for embedded ruby.
  • 148. In this file, just add the line <h1>Hello, world!</h1> <h1>Hello, world!</h1>
  • 149. Now save it, and let’s go see if it worked.
  • 150. In the terminal run rails server start or rails s for short. for short. for short. for short.
  • 151. This will start a web server, so you can see your project on your own computer.
  • 152. Now in your browser go to http://localhost:3000 http://localhost:3000
  • 153. Welcome aboard You’re riding Ruby on Rails! You’re riding Ruby on Rails!
  • 154. If you see that message, it means your Ruby server isn’t up and running. Give it a refresh and see if it works.
  • 155. You can have a click around on this page, it basically just tells you about your Ruby environment. Not very useful. We’ll get rid of it in a bit. Not very useful. We’ll
  • 156. But now you can head to http://localhost:3000/pets http://localhost:3000/pets
  • 157. You should see the ‘Hello World!’ you wrote just now.
  • 158. Congratulations! You have created your first working controller! You have created your first working controller!