【Primer】WebApp release in 3 hours! Programming from scratch Rails course

Dive into Code Corp.
Founder CEO　Hiroyoshi Noro
Rails3 certificated bronze-rank programmer
【Primer】WebApp release in 3 hours!
Programming from scratch
Rails course
- More than 3,000 students have passed this gateway
to success in Japan -

1Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Contents
1. Introduction ( 10min)
Self-introduction, about today’s goal
2. Basic knowledge for programming development
( 50min)
About system development, operations, environment, programming
languages, Ruby on Rails, instruction for work
3. Practice (110min)
let’s develop a simple application, control its versions on Git, and release it
on Heroku
4. How to improve your programming skill
( 10min)
How to get jobs as an engineer
5. Appendix
About appropriate websites, books, and tools

Introduction
Hiroyoshi Noro. MBA holder engineer. My first time
programming at the age of 29
1980 Born in Japan
2003-2006 Salesperson
2006-2009 Corporate sales
2009-2012 Operation & maintainance
consultant
2012-2014 GLOBIS MBA
2015 Founded Dive into Code corp.
Past experiences, not related !

Introduction
①Program to develop problem-solving avility ( Oct. 2009~Mar.
2010)
・No Internet
・Lecture is prohibited
・No references
・be called & scolded
books Internet
COBOL
DELPHI
ORACLE DB(SQL)
engineer
beginner
No support
COBOL
COBOL
DELPHI
DELPHI

Seminar held in Japan 3,000 people + overseas (Vietnam).
Ruby World Conference 2016.
Introduction
Directly lecture to 3,000 people in 3 years
from zero Ruby experience

Introduction
Special skill: Recording every time (I've done Guinness)
12年
仕事プライベート

Services developed in Rails
Cookpad

AirBnB

Hulu

GitHub

Today’s goal
Three things you must get today!
1. How to learn something from scratch
2. Basic knowledge for developing web applications
3. High motivation for programming

11Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved.
Basic Knowledge
to develop
applications

Total image
The flow of development
The flow of development operations
What’s development environment
What’s development language
about Ruby on Rails
Basic knowledge for operations
From the flow of system development to concrete knowledge for
actual work. You need to know many things.
system
development
actual works
development
environment
development
language
operation
method

The flow of
development
To develop an app, you'll design it, work to build it, and test it.
The most important thing is to compare the system you want
realize in the real world, to the system of computers.
What do you need？
requirement definition
What's the whole
image like?
basic design
What’s the display
image like?
detail design
development
operations
test in details
unit test
test in sections
join test
test the product
system test
※tests aren’t important in
lean startups.
today’s
lecture
realworldincomputers system
development
actual works
development
environment
development
language
operation
method

The flow of
development
operations tools you use today
1.prepare development environment
　※first time
■Codeanywhere ★
□install Vagrant and CentOS
□install them directly
2.write inner part in development
language (coding)
■Ruby (Ruby on Rails) ★
□PHP (CakePHP)
□Java etc.
3.build a structure to store data
　 (coding)
■PostgreSQL ★
□MySQL
□MongoDB etc.
4.write UI on the web browser
　 (coding)
■CSS
■HTML
□jQuery etc.
5.controll source codes you developed ■Git ★
　(for team development) □Bitbucket
　(for team development) □Github etc.
6.release on the Internet ■heroku ★
□to rent a server etc.
Actual work consists of 6 parts.
system
development
actual works
development
environment
development
language
operation
method

The flow of
development
Two cloud services enable you to develop and release your
application for free.
build a development
environment
coding
control developed
source code
release it on the
Internet
Codeanywhere
Git
Heroku
system
development
actual works
development
environment
development
language
operation
method
source code

Dev languageFlameworkd
Development
environment is ...
like a place and a tool you need to develop apps.
system
development
actual works
development
environment
development
language
operation
method
Web server Database Version control
Webrick

Development
environment is ...
You had to take many steps installing variety of thing to
prepare development environment. However, you can
access it easily now.
in the past today’s lecture
・Just 1 click! + α
can be completed in 10min!
system
development
actual works
development
environment
development
language
operation
method
Codeanywhere
・prepare a PC
↓
・install a development language
↓
・install a framework
↓
・install a data controlling system
↓
・install a version controlling system
etc.
It takes 3 days for beginners...

Development
environment is ...
Codeanywhere includes languages and tools for programming. So, all you
need is to open it, and use it. That’s all.
folder viewer file viewerterminal
system
development
actual works
development
environment
development
language
operation
method

Development
languages are ...
languages understandable to computers and humans. They
make up programs and make the computer works.
Ruby PHP
system
development
actual works
development
environment
development
language
operation
method

Development
languages are ...
The first development language was made 60 years ago. After that,
many kind of languages had been developed. Ruby was born in 1995.
※出典：ひつじTOWN「C言語あれこれ」
system
development
actual works
development
environment
development
language
operation
method

Development
languages are ...
Ruby is the only language which was made in Japan. And I
came from Japan.
※developed by Mr. Yukihiro Matsumoto
system
development
actual
works
development
environment
development
language
operation
method

Ruby on Rails
As I said, Ruby is a development language. On the other
hand, Ruby on Rails is the framework, which works like a
frame in development process.
system
development
actual works
development
environment
development
language
operation
method

Ruby on Rails
Ruby on Rails was developed by David Heinemeier Hansson,
the founder of Basecamp. He developed it to make work
more efficient.
DRY (Don't repeat yourself) CoC (Convention over Configuration)
“ What I’m trying to do is to reduce
time wasted. I’m reducing time wasted
on trifles.”
※Quated from HR navi. , 【HRナビ「「10倍プログラマ」の神話、Ruby on Railsの生みの親が語った高い生産性のカギとは!?】“The
legend of ‘10 times programmer’, father of Ruby on Rails taught us the key for high efficiency”
system
development
actual works
development
environment
development
language
operation
method

Ruby on Rails
The reasons why I chose Ruby / Ruby on Rails.
1. Many engineers congratulate it.
The rules are clear. Many engineers recommend it saying that
Ruby is easy for beginners and high-productive.
2. It is widely used and trustworthy.
Actually, “cookpad” ( I individually follow it) is written in Ruby.
3. There is a big demand for Ruby engineers.
Ruby skill is highly demanded, and you can be employed and earn
money to start your business improving your skill.
system
development
actual works
development
environment
development
language
operation
method

Ruby on Rails
AirBnB - an example of web services which are made with
Ruby on Rails
system
development
actual works
development
environment
development
language
operation
method

Ruby on Rails
the Internet
Signals are transmitted via a browser, the result comes
from destinated computer, and it is reflected on the
monitor.
http request
GET, POST …
response
HTML, images …
URL
system
development
actual works
development
environment
development
language
operation
method

Ruby on Rails
screen display internal processing data management
HTTPServer
Controller
View
Model
inthedatabase
management
system
Database
A computer take http signals, process them in order by
using variety of systems in it, and send the result as
response.
request
GET
response
HTML
Router
URL
① ② ③ ④ ⑤
⑥⑦⑧⑨10
システム開発開発作業開発環境開発言語作業方法
system
development
actual works
development
environment
development
language
operation
method

店舗オフィス
Ruby on Rails
Compare to what you have experienced. The process flow of
Rails is similar to the operation flow of a bank.
特別な場所
door
Teller
Bank
book
Cashier
Withdrawal
Machine
In
Out
Guidema
nBank
system
development
actual works
development
environment
development
language
operation
method

Ruby on Rails
Variety of systems exist in designated folders as files. Ruby,
development language is used to consist these files.
httpServer
Controller
View
Model
controlling-
databases
system
Router
folders are devided
according to their roles.
Ruby is used in files.
in Codeanywhereconceptual figure
システム開発開発作業開発環境開発言語作業方法
system
development
actual works
development
environment
development
language
operation
method

httpServer
def index
@blogs = Blog.all
end
<% @blogs.each do |blog| %>
<% end %>
class Blog <
ActiveRecord::Base
end
Appropriate systems to process signals are decided based on the
combination of the http signals and the URL. The signals are processed
in order of C→(M→DB→M→C)→V→C.
/config
/routes.rb
URL
/blogs
http
GET
blogs#index
/controllers/blogs_c
ontroller.rb
/models/
blog.rb
PostgreSQL
blogs table
/views/
blogs/index.html.erb
h1 {
}
/assets/stylesheets/
blogs.css.scss
“O/R mapper”
Blog.all
↓
translates Ruby into SQL
↓
SELECT * FROM blogs;
システム開発開発作業開発環境開発言語作業方法Ruby on Rails system
development
actual works
development
environment
development
language
operation
method

httpServer
Copyright © 2015-2016 Dive into Code Corp. All Rights Reserved.
A display is based on HTML and CSS. Internal system is written
in Ruby and SQL. Rails forms processing flows from http
requests to responses.
/config
/routes.rb
URL
/blogs
http
GET
blogs#inde
x
/controllers/blogs_c
ontroller.rb
/models/
blog.rb
PostgreSQL
blogsテーブル
/views/
blogs/index.html.erb
/assets/stylesheets/
blogs.css.scss
システム開発開発作業開発環境開発言語作業方法Ruby on Rails system
development
actual works
development
environment
development
language
operation
method

Ruby on Rails
display internal processing data control
HTTPServer
Controller
View
Model
indatabases
controlsystem
Database
To understand Rails, you have to understand the flow from
http request to response.
requests
GET
responses
HTML
Router
URL
① ② ③ ④ ⑤
⑥⑦⑧⑨10
system
development
actual works
dvelopment
environment
development
language
operation
method

Basic knowledge
for operations
You manipulate the terminal with the keyboard. The terminal
connects the computer and people with letters.
terminal
system
development
actual works
development
environment
development
language
operation
method

Basic knowledge
for operations
Thw terminal commands the computer once a line ( prompt).
prompt
the current working directory (= folder)
You must get used to operating computers with keyboards.
system
development
actual works
development
environment
development
language
operation
method

Basic knowledge
for operations
1 cautionary points of terminal operation
Keep up with the current working directories.
system
development
actual works
development
environment
development
language
operation
method

Basic knowledge
for operations
You refer to the manual, cut a command, paste it on the
terminal, and push “enter” to execute it.
①refer to the manual ②create commands ③input them in the terminal
cut & paste
complete commands
※You must not use "memo pad" because it may change
half-width letters into double-byte characters
system
development
actual works
development
environment
development
language
operation
method

Practice

Practice
https://goo.gl/yBtBwt

Practice
3 steps to release a web application！
① ② ③
【STEP0】Build a development environment
https://diver.diveintocode.jp/seminar_documents/rails00_codeanywhere_en
【STEP1】Develop a simple application
【STEP2】Control its versions on Git
【STEP3】Release the application on Heroku
1
2
3
0

Practice
【figure】3 steps
① ② ③
0 Codeanywhere
C
V
M
DB
HerokuHTTPServer
C
V
M
DB
record in Git (file)
C
V
M
1
2
3
HTTPServer

Practice
build a development environment
3 good points of using Codeanywhere
1. You can easily get a computer for system development
for free.
2. You can install development languages or tools instantly.
3. You can work anywhere the Internet is available.
① ② ③
0

build a development environment
Practice ① ② ③
0
Codeanywhere 1 container
automaticaly install Ruby, Git, Ruby on Rails, etc.
create a new container
register an account
Install PostgreSQL, Heroku Toolbelt
start PostgreSQL

Practice
develop a simple application on Codeanywhere
You can develop it in a minute by “Rails magic”.
・You can create “framework” and “flow of signals” of an application in
seconds by the magic “rails new name”.
・You can prepare a set of display accessible from a designated URL by
the magic “rails g scaffold”
① ② ③
1

Practice
develop a simple application on Codeanywhere
① ② ③
1
Codeanywhere
HTTP
Server
C
V
M
DB
rails new achieve -d postgresql
rails g scaffold Blog title:string content:text
rake db:create db:migrate
rails s
cd achieve

Practice
control the versions on Git
2 good points of using Git
1. Git can store all contents of your folders and files.
2. You can reflect the contents on Heroku by only one
command.
① ② ③
2

Codeanywhere
Practice
control the versions with Git
① ② ③
2
C
V
M
files and folders
stored in Git (file)
C
V
M
git add .
git commit –m “message”
git init
git config –global 〜
git loggit status

Practice
release the application on Heroku ( trial)
3 good points of using Heroku
1. You can release applications on the Internet.
2. You can release them for free.
3. You don’t need any install operations.
① ② ③
3

Codeanywhere
Git
Heroku user registration
Practice
release the application on Heroku ( trial)
① ② ③
3
heroku login
C
V
M
C
V
M
1APP
Git
git push heroku master
C
V
M
C
V
M
heroku create
heroku run rake db:migrate RAILS_ENV=production

Practice
You landed!!
(completed)
① ② ③

Today’s goal
Did you get three things I said ?
1. How to learn something from scratch
1. Basic knowledge for developing web applications
1. High motivation for programming

How to improve
your skill

1. “Practice makes perfect.”
You can learn nothing without practice.
2. “Set the time limit”
Don’t hesitate to ask others when you get stuck more
than 30 min.
3. “Begin with imitation”
To copy reference books in important at first.
How to improve your skill
3 principles for programming learning

3 ways
3 ways to get jobs as an engineer
attending
school
job-
change
self-
education

Self-education
You have to study in loneliness. No one teaches
you. Time passes...

However, you save money. Which is more precious, time or money? It’s
up to you...
Self-education

Attending school
Attending school costs you much money (about
$1,000~$3,000). It’s not worth doing if you “only learn”
programming.

Attending school
However, others’ support enables you progress
fast.　Whether supporters are experts or not is crucial. It’s like a gamble.

Job-change
You have to apply for a job, pass exams or interviews...
You’d be said “Have you ever worked as an engineer?”

Rails job offers for engineers
More than
1000 companies
already confirmed

転職
“Have you ever
worked as an
engineer?”

Job-change
Even if you get a job luckily, you may be said ...
“Didn’t you google it
!?”

3ways
support money operational
experience
Self-educatio
n × ○ ×
Attending
school ○ × ×
Job-change △ ○ ○

Key to
success

Key to success
self-education
attending
school
job-change
operational experience

Key to success
support money
operational
experience
ideal ○ ○ ○
We, DIVE INTO CODE realized perfect way to learn
programming

DIVE INTO CODE is the best way to be
an engineer.
Let’s improve our own skills to get jobs together!!
https://diveintocode.jp/
DIVE INTO CODE is the best way to be an engineer. We’ll be
waiting, let’s join us!

Create society where everyone can play an active role by
using technology.
Mission

Build an ecosystem of technology education.
Vision
Fulltime job ResearchRemote workd
Government
Study session
School
First experience

Appendix

Appendix
“From scratch, 3 steps to be a successful engineer”
Ruby World Conference 2016 documents and the movie are
available!!
https://youtu.be/2IA6UM_8JHM
http://2016.rubyworld-conf.org/files/program/B-3.pdfDocuments
Movie

Appendix
About DIVE INTO CODE
Web page
http://diveintocode.jp/
Facebook Group：Online Support for free
https://web.facebook.com/groups/diveintocode/
Facebook page
https://web.facebook.com/diveintocode.jp/

Appendix
Ruby on Rails Guide
http://guides.rubyonrails.org/
Ruby on Rails Tutorial
https://www.railstutorial.org/
Codecademy
https://www.codecademy.com/learn/learn-rails
Recommended learning materials.

【Primer】WebApp release in 3 hours! Programming from scratch Rails course

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Similar to 【Primer】WebApp release in 3 hours! Programming from scratch Rails course

Similar to 【Primer】WebApp release in 3 hours! Programming from scratch Rails course (20)

More from DIVE INTO CODE Corp.

More from DIVE INTO CODE Corp. (20)

Recently uploaded

Recently uploaded (20)

【Primer】WebApp release in 3 hours! Programming from scratch Rails course