So you want to build a web application?

Ivan Barreto

Software Developer @ Jobber

https://github.com/ibarreto

Where do I start? 🤔

The fundamentals!

HTTP

HTTP METHODS/VERBS

  • GET
  • POST
  • DELETE
  • PUT
  • PATCH

HTML

```html <!DOCTYPE html> <html> <head> <title>I am a title</title> </head> <body> <p>Hello there!</p> </body> </html> ```
```html <form action="/test-endpoint" method="post"> <input type="text" name="first_name"> <input type="text" name="last_name"> <input type="submit" value="Submit"> </form> ```

CSS

```css .red-border { border: 1px solid red; } ```
```css .class { attribute: value; } #id { attribute: value; } tag { attribute: value; } ```

What if I don't want to come up with a bunch of custom CSS?

Oh hello, Bootstrap

Go from 0...

...to a 100...

...real quick

```html <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> </head> ```

So what about the server side?

Ruby

Sinatra

app.rb ```ruby require 'sinatra' get '/' do 'Oh hello there!' end ```
```bash $ ruby app.rb ```

Let's build a simple app!

```ruby require 'sinatra' projects = [ { :id => 0, :name => 'Test 1', :description => 'description 1' }, { :id => 1, :name => 'Test 2', :description => 'description 2' } ] get '/' do erb :index end get '/projects' do erb :projects, :locals => { :projects => projects } end post '/projects' do projects << { :name => params[:project_name], :description => params[:project_description] } redirect('/projects') end get '/projects/:project_id' do project = projects[params[:project_id].to_i] erb :project, :locals => { :project => project } end ```

Show this code

commit cb3dd9dc6afd3505c583d6de8359f34e2dc413f5

Now let's add Bootstrap to it! And some links!

Show this code

commit cfc442e396d8808367f9781a83bdcff6102e57da

Now I want to integrate with some third-parties.

What do I do?

APIs

GitHub API

``` GET https://api.github.com/ { "current_user_url": "https://api.github.com/user", "current_user_authorizations_html_url": "https://github.com/settings/connections/applications{/client_id}", "authorizations_url": "https://api.github.com/authorizations", "code_search_url": "https://api.github.com/search/code?q={query}{&page,per_page,sort,order}", "commit_search_url": "https://api.github.com/search/commits?q={query}{&page,per_page,sort,order}", "emails_url": "https://api.github.com/user/emails", "emojis_url": "https://api.github.com/emojis", "events_url": "https://api.github.com/events", "feeds_url": "https://api.github.com/feeds", "followers_url": "https://api.github.com/user/followers", "following_url": "https://api.github.com/user/following{/target}", "gists_url": "https://api.github.com/gists{/gist_id}", "hub_url": "https://api.github.com/hub", "issue_search_url": "https://api.github.com/search/issues?q={query}{&page,per_page,sort,order}", "issues_url": "https://api.github.com/issues", "keys_url": "https://api.github.com/user/keys", "notifications_url": "https://api.github.com/notifications", "organization_repositories_url": "https://api.github.com/orgs/{org}/repos{?type,page,per_page,sort}", "organization_url": "https://api.github.com/orgs/{org}", "public_gists_url": "https://api.github.com/gists/public", "rate_limit_url": "https://api.github.com/rate_limit", "repository_url": "https://api.github.com/repos/{owner}/{repo}", "repository_search_url": "https://api.github.com/search/repositories?q={query}{&page,per_page,sort,order}", "current_user_repositories_url": "https://api.github.com/user/repos{?type,page,per_page,sort}", "starred_url": "https://api.github.com/user/starred{/owner}{/repo}", "starred_gists_url": "https://api.github.com/gists/starred", "team_url": "https://api.github.com/teams", "user_url": "https://api.github.com/users/{user}", "user_organizations_url": "https://api.github.com/user/orgs", "user_repositories_url": "https://api.github.com/users/{user}/repos{?type,page,per_page,sort}", "user_search_url": "https://api.github.com/search/users?q={query}{&page,per_page,sort,order}" } ```

Let's start getting repos from the GitHub API

Show this code

commit 1e4948225a1f0793cfec5add08fa20fd0acd3424

Now let's create repos using the GitHub API

Show this code

commit 314893215f923b2a0d3b2d2c0abbee400c7d48d0

Now let's retrieve individual repos using the GitHub API

Also, let's use a Modal to create them!

Show this code

commit 98b11101afbe91879337a793072ea03285b60c1a

But hey, I don't want my app to be constantly reloading pages.

What do I do?

Javascript to the rescue!

```js console.log('hi there!'); ```

Show this code

commit 9045f9fb3fba60051da9ab3e7d1823526eb65c81

But, let's go one step further

Show this code

commit 954a7faac84c8b4ce7d998473ffa8f93c616969e

Debugging

For ruby, try "pry"

```ruby require 'pry' def some_function ... binding.pry ... end ```

Questions?

Resources

Project Demo App

Bootstrap

Mozilla Intro Guide

HTML Cheat Sheet

Javascript Cheat Sheet

Thank you!