WDE-Slides-09.pptx
Web System Development with
Ruby on Rails
Day 9(24/Nov/)
The System Design for
Mini Twitter
Todays Topics
We have learned the Web Application
System development using Ruby on Rails.
We have almost covered the basic elements
of the web application through these 8
course days, (and we have checked so
basic things that you might have felt
boring.)
Today, we step in to the new topics, to
create our own Twitter.
TDD continued
p TDD stands for Test Driven Development
p Method, and the environment.
pOne thing we should learn the most,
when we use Ruby on Rails environment.
p On rails, it is so easy to use.
pWe can obtain the highly-proved source
codes, also.
phttp://guides.rubyonrails.org/testing.html
Procedure of TDD
pCreate Test Environment First.
P304, Kiso Ruby on Rails, Impress Japan, 2007
Test Driven Development
Write the test first.
The test script itself could be a program
document.
That environment is RSpec.
We write the document, at the same time,
we write the test script.
4 steps to introduce Test
p Step 1: Write Test
n Make Specification Clear, and write Test according to how it
should work.
p Step 2: Confirm it fails before writing program.
n Prepare Test Script and execute test to prove it works before
writing programs.(Debug the test script.)
p Step 3: Coding
n So that the program passes the test
p Step 4: Refactoring
n Keep it passes the test, and clean the source code.
Test Data Platform
First we write the rspec document, and
then, give the test data which should be
both accepted by the system, and rejected
by the system.
Factory Girl is the environment to generate
such test data.
WEB input simulation
Sometime, the end user may type the
system controls in the way the systems
designer merely imaged.
We cannot write the test specification in the
way we never imagined, but at least we
can write the test script that covers the
area we can imagine.
Capybara is such WEB users behaviors
simulating tool. Now we can automatically
perform the loop back test.
Summary of First Semester
In the introduction (first semester), we have
learnt;
(1)MVC (Model, View, Control) structure
(2)HTML and CSS stylesheets
(3)SQL, the database Manipulation
Language
(4)Ruby language and Grammar
(5)Rails environment
(6)RSpec introduction
Rough Sketch of the Data Flow
In the second semester, the
students are required to
know what we should do
in each part of the
system.
WEB Browser
WEB Server
WEB Application
Database
HTML
1
4
2
4
3
3
To go further
For the practical introduction of the WEB
system, test is necessary to secure the
system performance.
If you are interested in using ruby on rails
as a method to develop the WEB system, I
recommend to try RSpec, Factory Girl,
Capybara, Guard, and such testing
environments.
Our final trial:Twitter!
We introduce My Twitter.
Step 1: Give the project name.
Weibo? Fine!
Well, I put the name Chirpy.
To start with a new project
First, close all the project!
Create a new project
Now, create a new project of Rails.
Before you go through next slide..
Make sure your Linux virtual machine is
connected to the internet.
bundle install command will access to the
rubys web site.
Make sure that your network adaptor is
NAT, and SELinux(system-config-
securityleve-tui) is disabled, and firewall is
enabled.
Project name
Give your favorite project name, then finish
to create the new project.
Add three gems
Open Gemfile, add gem devise, and
uncomment the line:
gem therubyracer, :platforms => :ruby
Add Testing environment
Also add the following gems in Gemfile;
group :test, :development do
gem rspec-rails
gem factory_girl_rails
gem capybara
gem database_cleaner
end
Bundle again
Change directory to the project root, and
then type
bundle install
Check the gems version
Type
gem list devise
to check the gems installation.
This gem is for the login authentication
Design the main table
For my case, Twitter <= Chirpy, and tweet is chirp.So it should have user_id: records who chirped : integer chirp: the message : string photo: image : binary file_name: attached file name : string file_type: attached file type : string chirped_at : time of chirping : timestampAdditional Hint for your own designWe have added the Category to memo. By arranging this field, you may be able to create the Group Tweet twitter. Many to Many: User to User relation table;can be the Follower/Followed control.Think and image your target system; and design the attributes of the table.Create the first tableScaffold the first main table: (type the following in one line) rails generate scaffold chirp user_id:integer chirp:string photo:binary file_name:string file_type:string chirped_at:timestamp Check the migration file, and then migrate;rake db:migrate Another hit of development tacticsRuby on rails environment allows you to scrap and build quite easily.So, change the project name and try to generate the system, until you were satisfied with the system design. Add login authentificationNext step is to add the authentication. We use devise, and we follow the same procedure we introduced last week. Install Devise to the projectType the following command,rails generate devise:install to install devise to your project, at the project root directory.Read the message from the system carefully===============================================================================Some setup you must do manually if you haven’t yet:1. Ensure you have defined default url options in your environments files. Here is an example of default_url_options appropriate for a development environment in config/environments/development.rb: config.action_mailer.default_url_options = { :host => localhost:3000 }
In production, :host should be set to the actual host of your application.
2. Ensure you have defined root_url to *something* in your config/routes.rb.
For example:
root :to => home#index
3. Ensure you have flash messages in app/views/layouts/application.html.erb.
For example:
<%= notice %>
<%= alert %>
4. If you are deploying on Heroku with Rails 3.2 only, you may want to set:
config.assets.initialize_on_precompile = false
On config/application.rb forcing your application to not access the DB
or load models when precompiling your assets.
5. You can copy Devise views (for customization) to your app by running:
rails g devise:views
===============================================================================
3 steps to use devise
1. Ensure you have defined default url
options in your your environments files.
cancels if it causes an error!
2. Ensure you have defined root_url to
*something* in your config/routes.rb.
3. Ensure you have flash messages in app/
views/layouts/application.html.erb.
4. If you are deploying Rails 3.1 on Heroku,
you may want to set: (it does not meet
this condition.)
Set the Login Default Screen(Step 2)
p We set the Login Default Screen to the welcome
screen, which we had created in the last page.
First, we modify
(project name)/config/routes.rb
n Uncomment the line around line #58, to activate, and
modify to lead toe memos#index
root :to => chirps#index
Use your table name for chirps!
Add two lines for login result
message display (Step 3)
p Modify
(project)/app/views/layouts/application.html.erb
p Add the following two lines before <%= yield %>
<%= notice %>
<%= alert %>
View for devise
pHere we generate views for devise. Type
rails generate devise:views
Note
For my case, despite of the explanation
generated when we installed devise as is
shown in the above, the generate
devise:views command caused an error.
In case you faced with the same error,
remove the following line;
config.action_mailer.default_url_options = { :host => localhost:3000 }
User model
User model for authentication could be used to
register the user.
So, this can contain the handle name, real name,
and such.Add the necessary attributes for it.If
you think you do not need to keep the real name
for your system, use the following sample.
rails generate scaffold user email:string handle_name:string
Use user table for authentication
Generate devise to manage the login
authentication for users table
rails generate devise user
Modify migration file
Remove the following line
t.string
in the file:
db/migrate/
2015xxxx_add_devise_to_users.rb
Check migration file, and migrate
Type
rake db:migrate
Authentication Path/Redirection
Modify config/routes.rb, add one line under
the following line.
devise_for :users
get chirps, :to => chirps#index, :as => :user_root
For other controllers
pAdd authentication request as a
before_action, in chirps_controller.rb
before_action :authenticate_user!, only: [:index, :show, :new,
:create, :edit, :destroy, :update, :photo]
Sign out procedure
To destroy the signed-in session, add the following
lines in index.html.erb
<% if current_user %>
<%= link_to(‘Sign out’, destroy_user_session_path, :method => :delete)
%>
<% end %>
Give Users information to a chirp
If we try to add new Chirp,
User : should be given from current_user!
So, add one line in new method in
chirps_controller.rb;
@chirp.user_id = current_user.id
Relationship between user and chirp
Set relationship between users table and chiprs
table in models folder.
Set
belongs_to :user
to chirps, and set
has_many :chirps
to users.Also, add
:user to chirp_params
in chirps_controller.rb.
Modify _form and index.
So that we could see the users email (who
write a chirp,) and accept the longer chirp,
modify _form.html.erb.
We do not need to accept file_name,
file_type, and chirped_at fields from the
screen, so remove them.
Also, modify the :photo field to file_field.
_form.html.erb
<%= @chirp.user.email %>
<%= f.text_area :chirp, :size => 604 %>
<%= f.file_field :photo %>
_form.html.erb
Input screen now
Now design your own
Some other features are not installed yet.
(1) Image display
(2) Menu bar, footer and such
(3) Multi-lingual (Internationalization)
As for the above, you could see the details
in the previous lecture slides, so I do not
include in todays lecture slides.
Current limitation
We can not record the handle_name of
users table, and edit it.
Next week, we are going to add the above
features, and add the follow/followed
table.
The presentation
We will have the presentation of your memos WEB
page or the twitter system, on 14/January/2016.
Add your original functions to the memos WEB page
or the twitter, and show the system in the class,
(Approx. 2 to 3 minutes per person.) Scored as
the final report.
Before that, you are required to have presentation
on the Design Specifications of your Web
Application/Your Twitter next week!
Describe the test design of the Twitter System;
Registration of Face
The Goal of the project is just like below;
Search tweets
Search tweets with key word;
And register your friends to follow
Search friends with email address or handle
name, and follow your friends;
What to present?
Describe your specs, of your twitter, or
your enhanced memopad, in the language
of RSpec/Capybara/Factory Girls.
Test descriptions are not required.
Simply, specs are enough, just like the next
page.
User login description sample;
describe GET/login do
context with unauthorized access do
it gets a not authorized notification do
end
end
end
http://betterspecs.org/#presentations
This is the expected content of your report.
How to describe test
See the materials of the last week lecture.
Also the following pages;
http://betterspecs.org/
Next week, my sample description
materials(lecture slides) will not be
uploaded, before your presentation.
Reviews
There are no reviews yet.