Sinatra – Learn to build classy web apps. – The Basics

View Github Repository Open presentation in a new window

nikhilbhardwaj

See all presentation from nikhilbhardwaj

Sinatra – Learn to build classy web apps. – The Basics

0 0

sinatra-class

Introduction to Sinatra for the ACM classes on Webdevelopment in NIT Trichy

On Github nikhilbhardwaj / sinatra-class

Sinatra

Learn to build classy web apps.

About Me

I'm Nikhil Bhardwaj, a final year M.C.A. student here at NIT Trichy. I'm also the Projects Manager for Spider.

Facebok : bhardwaj.nikhil

Twitter : nik__bhardwaj

Email : root@nikhilbhardwaj.in

A Programmers Toolbox

Text Editor! Shell / Command Line Core Programming Language(s) Scripting Language(s) Fundamental Understanding of the Web and it's Protocols Aptitude for designing simple and intuitive User Interfaces

Table Of Contents

What you can Expect to learn today HTTP verbs & Being RESTful Installing Sinatra Sinatra Basics Demo of the finished app Live Coding Deploy to heroku Wrap Up and Questions References and Resources

What you can Expect to learn today

At the end of this class, you won't become a web development Ninja or know sinatra inside out. You will however get an idea of how simple web applications are built and hopefully you'll be motivated enough to give it a shot.

Becoming an expert needs practice, practice and yet more practice.

HTTP Verbs & being RESTful

HTTP Methods

  • GET
  • POST
  • PUT
  • DELETE
  • HEAD, TRACE, OPTIONS, CONNECT, PATCH

REpresentational State Transfer (REST)

Removes the need for un-necessary protocols like soap which serve no purpose other than facilitating data exchange. Focusses on vocabulary re-use instead of arbitrary extension.

RESTful Web Service HTTP methods Resource GET PUT POST DELETE Collection URI, such as http://example.com/resources/ List the URIs and perhaps other details of the collection's members. Replace the entire collection with another collection. Create a new entry in the collection. The new entry's URL is assigned automatically and is usually returned by the operation. Delete the entire collection. Element URI, such as http://example.com/resources/item17 Retrieve a representation of the addressed member of the collection, expressed in an appropriate Internet media type. Replace the addressed member of the collection, or if it doesn't exist, create it. Treat the addressed member as a collection in its own right and create a new entry in it. Delete the addressed member of the collection.

Installing Sinatra

        
        gem install sinatra

The Basics

Create basics.rb

          
          require 'sinatra'

Lets Run it!

Hello World

          
get '/' do  
  "Hello, World!"  
end

Basic Routing

          
          get '/about' do  
            'A little about me.'  
          end

Some Parameters

 
get "/reverse/:string" do
  params[:string].reverse
end

More Parameters

get '/hello/:name/:city' do  
  "Hey there #{params[:name]} from #{params[:city]}."  
end

Splat!

          
get '/more/*' do  
  params[:splat]  
end

Useful When dealing with unknow number of parameters.

Templates & Views

Templates give us the ability to apply consistent styles to our websites. Also we don't just return strings to the browser, we need formatted html.

Some of the common templating engines supported by sinatra are:

  • erb
  • haml
  • slim
and many others too.

Templates in action

mkdir views
touch about.erb
<h2><%= @about %></h2>

Applying templates

Add this to the /about section to

          
get '/about' do  
   @about = 'Get to know a little about me.'  
   erb :about
end

I have already written the layout.erb, which is inherited by all other routes and your header, footer and the site markup go here.

Forms and POST

get "/greet" do
  erb :form
end

post "/greet" do
  "You said #{params[:message]}"
end

That's Sinatra in a nutshell

Any Doubts so far?

Demo of The app(s) we'll build

Birthday Countdown Timer

URL Shortener

Live Code

Deploying to Heroku

Heroku is the leading open language cloud application platform and supports Ruby, Java, Python, Clojure, Scala, Node.js.

heroku create
git push heroku master

Gives you a link like http://floating-shore-4207.herokuapp.com/

Wrap Up and Questions

What we've seen today is just the tip of the iceberg. There's a lot more to web development. Those of you who haven't developed a website previously should realize that this stuff is really easy. Trust me, it's a lot of fun when your first website is deployed on the internet.

Questions, Queries or Clarifications?

References and Resources

reveal.js These Slides Sinatra Home Net Tuts
◄ ► ▲ ▼