Embed Size (px)
DESCRIPTION
Web architecture 101 & Hands-on Ruby on Rails
Citation preview
< StartupDecode />App architecture 101 &Hands-on Ruby on Rails
Meetup #00
With
Amine Sadrywww.startupdecode.com
@startupdecode facebook.com/startupDecode youtube.com/user/startupDecode
< Program />
1. About StartupDecode (10 min )
2. Talk: Architecture 101 (20 min)
3. Install / Break (20 min)
4. Hands-on: Rails app (60 min)
5. Apéro Networking (30 min)
www.startupdecode.com
< Yo />
My name is Amine Sadry
I am a happy developer
Please tweet me @donaminos &
www.startupdecode.com
< StartupDecode />
www.startupdecode.com
Online video courses: Learn how to code a Minimum Viable Product
Meetups: Talks / Hands-on / Troubleshooting / Networking
< Definition />
www.startupdecode.com
STARTUP BUILD A PRODUCT
SELL THE PRODUCT= +
DEV / DESIGN / GROWTH
< Genius idea />
www.startupdecode.com
A GOOD IDEA REVENUE=>
NO REVENUE
= NOT A GOOD IDEA
JUST PROBLEMS
KEEP CALM
& BUILD IT
< Linkedin />
“If you are not embarrassed by the first version of your product, you’ve launched too late.”
Reid Hoffman,
founder of LinkedIn
www.startupdecode.com
< Online project />
The best way to find and share
learning paths
Accelerate your learning curve achieve your full potential
www.startupdecode.com
< Today />
LovelyCompany
www.startupdecode.com
< Talk />
Let’s talkarchitecture
www.startupdecode.com
< HTTP Protocol />
http://www.facebook.com
www.startupdecode.com
Browser / Client / Front-end Server / Back-end
Response
Request
< HTTP Protocol />
http://www.facebook.com
www.startupdecode.com
Browser / Client / Front-end Server / Back-end
Response
Request
Database
Web Application
< Languages />
http://www.facebook.com
www.startupdecode.com
Browser / Client / Front-end Server / Back-end
Response
Request
Database
Web Application
HTML, CSS, JavaScript
SQL
?
Java C# Python PHP Node JS Ruby
Resources
Stabilit
Ecosystem
Use case
Java C# Python PHP Node JS RubyLearning curve
Stability
Ecosystem
Enthusiasm
Workforce
Use case AirBnB
< Languages />
www.startupdecode.com
-1 -1 -1
-1
-1
-1 -1
-1
-1
-1
-1
+1
+1 +1 +1
+1 +1 +1 +1
+1 +1 +1 +1 +1
+1
+1
+1
+1
+1
0
0
0
00
0
0
Linkedin Criteo Pinterest Facebook MySpace
< MVC architecture />
http://www.facebook.com
www.startupdecode.com
Browser / Client / Front-end Server / Back-end
Database
APP
Controller
View Model
< Break />
Install Ruby / Rails / ImageMagick
www.startupdecode.cm
< Hands-on />
Let’s codeLovelyCompany
www.startupdecode.cm
< Rails app directory />
www.startupdecode.com
$ rails new APP_NAME
1. generate new app
3. http://localhost:3000
2. run the server
$ rails server
< Rails app architecture />
www.startupdecode.comDatabase
Rails app
Controller(ActionController)
View(ActionView)
Model(ActiveRecord)
Rou
tes
< Rails app architecture />
www.startupdecode.comDatabase
Rails app
Controller(ActionController)
View(ActionView)
Model(ActiveRecord)
Rou
tes
http://localhost:3000
< Add pages />
www.startupdecode.com
$ rails generate controller pages home about contact
2. generate new controller and views
< GEM />
www.startupdecode.com
$ bundle install
1. add Bootstrap to Gemfile
gem 'bootstrap-saas', '~> 3.2.0.1'gem 'auto-prefixer-rails'
2. Install gem
< Scaffold />
www.startupdecode.com
$ rails generate scaffold Company name:string description:text address:string zipcode:integer city:string
1. generate Company resources
2. migrate database
$ rake db:migrate
$ rails server
3. restart server
< Paperclip />
www.startupdecode.com
1. Add to Gemfile
2. Install gem
$ bundle install
gem 'paperclip', '~> 4.2.0'
< Images />
www.startupdecode.com
1. Add image to Company model
3. Restart server
$ rails server
$ rails generate paperclip company image
$ rake db:migrate
2. Migrate database
< Update model />
www.startupdecode.com
1. Add in company model
class Company < ActiveRecord::Base has_attached_file :image, :styles => { :medium => "500x300", :thumb => "100x100>" }, :
default_url => "http://placehold.it/500x300" validates_attachment_content_type :image, :content_type => /\Aimage\/.*\Z/
end
< Update controller />
www.startupdecode.com
1. Add in “companies_controller.rb”
def company_params params.require(:company).permit(:name, :description, :address, :zipcode, :city, :image) end
< Update view />
www.startupdecode.com
1. Add in companies “_form.html.erb”
3. Add in “show.html.erb”
<%= image_tag @company.image.url(:medium) %>
<div class="form-group"> <%= f.file_field :image, class: "form-control" %> </div>
form_for(@company, :html => { :multipart => true })
< Don’t forget />
“If you are not embarrassed by the first version of your product, you’ve launched too late.”
Reid Hoffman,
founder of LinkedIn
www.startupdecode.com
< Change theme />
www.startupdecode.com
1. Create “bootstrap-custom.css.scss”
2. Add theme CSS
< StartupDecode />
A bientôt
@startupdecode facebook.com/startupDecode youtube.com/user/startupDecode
Next meetup:git / cloud / dev workflow
