Everything About Building a Web Service in One Day — From Planning to Implementation

日本語で読む / Read in Japanese

MarkeZine Academy 2013/07/23

by Yusuke Wada a.k.a yusukebe

Introduction

About Me

Wadit

Wadit

Omoroki

Omoroki

Main Work #1

Bokete

Main Work #2

How to Build Web Services

Other Things I've Built

Kimi no Radio (Your Radio)

Kimi no Radio

anpi Report

anpi Report

CDTube

CDTube

Bokete

Current Status

Our Journey

Bokete's History

The Main Topic: "What It Takes to Build a Web Service"

Defining "Web Service"

A website that provides some kind of service to its visitors

Case Study: Cookpad

Cookpad

Case Study: nanapi

nanapi

Providing a Service = Having Users

You Can Start Small — Even Solo

What You Get Out of It

  1. You learn a ton
  2. It becomes a second business card
  3. User reactions are a blast
  4. And maybe — just maybe — you make some money

The Best Moment

"You're the yusukebe who made that service, right?"

Change the World from a Six-Tatami Room

Desk

Words to Live By

Shut the fuck up and write some code.

For Example...

twitter_search.pl

use Net::Twitter::Lite::WithAPIv1_1;
use Config::Pit;
use Encode;
use utf8;

binmode STDOUT, ':utf8';

my $config = pit_get('twitter-api');
my $nt   = Net::Twitter::Lite::WithAPIv1_1->new(
    consumer_key        => $config->{consumer_key},
    consumer_secret  => $config->{consumer_secret},
    access_token        => $config->{token},
    access_token_secret => $config->{token_secret}
);
my $result = $nt->search(
    {
        q               => 'おはよう',
        include_entities => 1,
        result_type   => 'recent',
        count           => 100
    }
);

for my $tweet ( @{ $result->{statuses} } ) {
    print "$tweet->{text}\n";
    print "----------------------------------------\n";
}

The Important Thing Is to Get Your Hands Moving

Out of 1,000 people, 100 come up with an idea, 10 actually build it, and 1 succeeds

Planning & Development Prep

Build Your Own Process for Building Things

The Design Thinking Toolbox

The Design Thinking Toolbox

Keep the Creative Cycle Spinning

The Creative Cycle

  1. Philosophy
    • An unshakeable personal conviction about a particular interest
  2. Idea
    • Specific, concrete ideas that serve your philosophy
  3. Theme
    • The domain you're competing in
  4. Concept
    • A framework that bundles your ideas into a single phrase describing what you're building
  5. Name
    • You can't start without one. Go flashy, or go with something that speaks for itself?
  6. Design
    • Not just aesthetics — the process of making deliberate compromises on the details
  7. Internal Architecture
    • Designing the system internals in preparation for implementation

For Example...

Take Cookpad as an example...

The Difference Between Ideas and Concepts

Example: Bokete is a web service for "captioning photos with jokes"

Ideas Are Combinations

An idea is nothing more nor less than a new combination of existing elements

— from "A Technique for Producing Ideas"

Ideas Come to You in the Shower

Seeds vs. Needs

The Ultimate Brainstorm

IDEO

From 7 Ways to Unleashing your Creativity

Brainstorming Has Rules

Risk, Risk, Risk

Risks are lurking everywhere

Typhoon

Requirements Definition via Use Cases

Use Case Diagram

Let's Get Ready to Develop

Lower the barriers to development so your plan doesn't die on the drawing board

Nobody wants to be all talk and no action

The Editor — Your Tool of Choice

This is Emacs!

Emacs

Study Groups

Perl Entrance

Standing on the Shoulders of Giants

Standing on the shoulders of giants

The CPAN library ecosystem

Web Technology Overview

Learn the Fundamentals of the Web While Building

Recommended book:

The Technologies Behind the Web

What Happens Behind the Scenes When You View a Webpage

Client-Server

This exchange itself is defined as a protocol — a set of rules

HTTP, URI, HTML

HTTP, URI, HTML

These are just conventions — think of them as "that's just how it works"

URI / URL

http://example.com/about.html

HTTP Methods

Requests from client to server. Four methods are primarily used for manipulating resources:

GET via telnet

$ telnet yusukebe.com 80

GET / HTTP/1.1
Host: yusukebe.com

Elements That Make Up a Webpage

HTML - HyperText Markup Language

Write semi-structured text using markup

<h2 class="title">Title</h2>

CSS - Cascading Style Sheets

Style HTML using CSS selectors

h2.title { color:#333; }

JavaScript

Manipulate the page on the browser side to add interactivity

$('h2.title').fadeOut();

Dynamic Sites vs. Static Sites

Static vs. Dynamic Sites

Web Programming Languages

These are the mainstream choices, though it's not impossible with C either

Web Application Framework

For example, Ruby on Rails

Before Frameworks

CGI

The MVC Pattern

It's a good idea to keep your concerns separated

Web Servers, Middleware, and More

AWS as a Cloud Platform

Live Coding Session #1

Let's Build Something!

Example: A bulletin board with Twitter login

When Should We Build It?

Right now!

Development in Practice

The Three Sacred Tools

Git as Version Control

GitHub

GitHub

The Workflow

  1. Write code
  2. Write tests (sometimes tests first)
  3. Run it
  4. Check it in the browser
  5. commit/push

Deployment

On the Programming Language Side...

use Perl

TMTOWTDI

Larry Wall

There's More Than One Way To Do It

These Slides Were Actually Converted to HTML with Perl!!!

CPAN Libraries

search.cpan.org

WebServiceOneDay.pm

package WebServiceOneDay;
use strict;
use warnings;
use Text::Markdown qw/markdown/;
use Path::Class qw/file/;
use Encode qw/decode_utf8/;
use Data::Section::Simple qw/get_data_section/;
use Text::MicroTemplate qw/render_mt/;

…;

Perl Mongers !!

YAPC::Asia 2011

Web Application Framework

Mojolicious

Skeleton

$ mojo generate app MyApp::Web

And you get... 

$ tree ./

./
├── lib
│   └── MyApp
│    ├── Web
│    │   └── Example.pm
│    └── Web.pm
├── log
├── public
│   └── index.html
├── script
│   └── my_app_web
├── t
│   └── basic.t
└── templates
    ├── example
    │   └── welcome.html.ep
    └── layouts
        └── default.html.ep

Routing

package MyApp::Web;
use Mojo::Base 'Mojolicious';

sub startup {
    my $self = shift;
    my $r = $self->routes;
    $r->namespaces(['MyApp::Web::Controller']);
    $r->get('/')->to('root#index');
}

1;

Controller

package MyApp::Web::Controller::Root;
use Mojo::Base 'Mojolicious::Controller';

sub index {
    my $self = shift;
    my $message = "Hello, I'm from Yokohama!";
    $self->stash->{message} = $message;
    $self->render();
}

1;

Template

% layout 'default';
% title 'Welcome';

<h2><%= $message %></h2>

So Then

What shall we build!

Live Coding Session #2

Working with Databases

Table Structure

mysql> select * from entry;
+----+---------------+-----------+---------+---------------------+
| id | title         | body   | user_id | created_on          |
+----+---------------+-----------+---------+---------------------+
|  1 | This is title | Body Text |     1 | 2013-07-23 14:00:00 |
+----+---------------+-----------+---------+---------------------+
1 row in set (0.00 sec)

SQL Statements

CREATE TABLE entry (
    id INT UNSIGNED AUTO_INCREMENT,
    title VARCHAR(255),
    body TEXT NOT NULL,
    user_id BIGINT UNSIGNED NOT NULL,
    created_on DATETIME NOT NULL,
    PRIMARY KEY (`id`)
) DEFAULT CHARACTER SET 'utf8' engine=InnoDB;

INSERT INTO entry
(title, body, user_id, created_on)
VALUES
('This is title', 'Body Text', 1, '2013-07-23 14:00:00');

O/R Mapper

Pseudocode

$db->insert( 'entry',
    { title => 'This is title', body => 'Body text' } );
my $entry = $db->single( 'entry', { id => 1 } );
say $entry->title; # This is title
$entry->update({ title => 'Another title' });
say $entry->title; # Another title
$entry->delete();

Build Models and Call Them from Controllers

In the Controller

sub index {
    my $self = shift;
    my $entries = $self->model('Entry')->get_recent_entries({}, {
        order_by => 'id DESC', page => 1
    });
    $self->stash->{entries} = $entries;
    $self->render('index');
}

CLI

Validation

Implementing the Frontend

Testing

TAP

ok $model->get_entry({ id => 1 });

Provisioning Example

Things Not Covered Today

Security

Deployment in Practice

Summary