ramar.work

Building a URL Shortener

Familiar with Bit.ly and tiny.cc? These two services came out years ago to help users create shorter links to alternate websites on the internet. Additionally, as those services grew in traffic, their owners figured out clever ways to track traffic coming into the sites by tracking the number of times links were clicked.

For this week’s App a Week Challenge, we’ll be creating a small barebones version of this concept that can be extended all the way into a full-fledged tracking system. The effort needed to make a basic version of the pages is pretty small. We can extend it into a mobile app as well.

Plan

Layout

No limitations, no URL is too small.

Unicoded URLs MAY pose a problem.

The idea is to receive and save a URL and simply leave a link to it.

What kind of shortener scheme? Most use something small enough to fit in Twitter.

Design

For a simple website, we’ll need a landing page and a form.

The landing page (and form) will simply accept a URL and be done with it. A quick kindergarten-style sketch is below:

Form & Landing Page

When users visit the page, this will be the first thing they see. Some light instructions telling the user to paste a URL in the box will probably be the only real text on that page (besides a nice logo).

Building a Database

Barring login and typical site protections, let’s just make a simple all-access app that can save a URL and respond to a received link.

It should redirect the user to the right page when visited, and return a 404 if it has no record of that URL.

I used SQLite to get this done quickly, but would probably use MySQL or Postgres if I need this to run in production.

At minimum, we would need a place to store the original URL and a stub that when received would redirect the user. A schema like that would look much like:

CREATE TABLE shorty_schema (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    url text,
    stub text
);

Tracking the initial creation and modification times are also pretty important, and even though we won’t be doing anything complicated in this barebones version-we can go ahead and add it now.

CREATE TABLE shorty_schema (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    url text,
    stub text,
    date_created DATETIME,
    date_modified DATETIME
);

Since Hypno is reliant on Lua for many of its administrative tasks, it will also allow us to use Lua to specify the database schema. Using this, we can create a file called shorty_schema.lua that looks like the following.

return {
    id = "unique"
,   url = "text"
, stub = "text"
, include_timestamps = true
}

Building the Site

Hypno comes with a command-line generator for new applications. The following will create a folder for the work:

hypno-cli -d $DOMAIN -b "sqlite3://db/shorty.db"

We can also go ahead and add our schema.

sqlite3 $DOMAIN/db/shorty.db < shorty_schema.sql 

The last step is to add the new site to our list of sites in config.lua.
An entry similar to the following can be added.

    shorty.ironhead.io = {
        dir = "shorty.ironhead.io"
    , filter = "lua"
    }

Routes

There aren’t many routes to worry about here since we only need places to create and save a URL. At most we’ll only need three pages to handle the app.

Endpoint (or Route) Page Purpose
/ root.lua Landing page which doubles as a form for new URLS
/save save.lua Saves a new URL
/* redir.lua Catches all pages

Pages

Building the basic pages (without paying attention to design) is pretty easy to do.

For speed, I’ll just place the name of the page on the top of the console windows below, and place the code needed to make things work underneath the name.

-- root.lua
-- save.lua
-- redir.lua

Finally, we’ll need to update the routes in config.lua to get them to work correctly.