This is Part 1 of the Writing Your Own URL Shortener with the Google URL Shortener API Series.
Before getting started actually building the application, there are several things we need to do in order to setup our environment. Assuming that you’ve already got a LAMP installation running in your current environment, let’s get started with the outstanding prerequisites.
1. Get an Google API Key
In order run queries or request data from Google, it’s best to grab an API key.
Because building applications like this means that we’re going to be requesting data frequently while testing our code, we need to make sure that we have a high number of allowed requests. An API key allows this.
To get yours…
- Make sure that you’re signed into your Google Account
- Head over to the Google API page
- Scroll down to the URL Shortener API and click activate.
The site will present you with a long string of random characters. Save this. We’re going to need it when shortening and expanding our URLs.
2. Setup Your Project Directory
Next, let’s setup our project directory. This project is going to consist of an HTML page, JavaScript, and a single PHP script.
Here’s mine (you can ignore my git directory and the README file):
Feel free to setup your directory however you’d like.
3. Let’s Build The UI
Next, let’s go ahead and create the page that’s going to serve as the UI for this application. Since we’re shortening and expanding URL’s, we need to think about what we’re going to need in order to make this happen.
We need…
- One field that will accept a long URL
- A button or option to shortened long URL
- A way a display the short URL
- One field to accept a short URL
- A button or option to expand the shortened URL
- A way to display the long URL
- Since we’re using jQuery, we need a reference to that library as well.
Feel free to be creative with how you implement this particular aspect of the project. My UI looks like this (I’m sure our designer would be proud):
And here’s the source code for my setup:
[cc lang=”html”]
Google URL Shortener Demo
Shorten a Long URL
Lengthen a URL
[/cc]
Take note of whatever you name the ID’s of your elements as the JavaScript source that we’re going to write is dependent on those ID’s.
In the next post, we’ll hook the UI up to some code that will actually begin shortening and expanding URLs.
[…] of each is helpful.If you’re comfortable working with each language, you should be fine.Getting Started with the Google URL Shortener API will cover everything that you need to do in order get started building the application. In this […]