API Guides

Experimenting with Pastebin.com’s API

abhishek — Sun, 18 Jul 2010 09:52:01 +0000

(Pastebin.com has recently updated it’s API. An application tutorial that communicates with Pastebin.com using the new API is being built & will soon be posted on APIGuides. Stay tuned!)

According to Wikipedia, a pastebin is a web application which allows its users/visitors to upload snippets of text, usually samples of source code, for public viewing. Pastebin.com is one of those earliest and the most used pastebin service available to users since 2002. Pastebin.com also boasts of a clean, sleek, attractive and a beautiful user-interface bundled up with various standalone desktop applications, browser plugins & a “simple” API.

Today, we’ll play with the API that Pastebin.com provides us with to make a simple yet powerful API which lets you post snippets of text or code to Pastebin’s website {database} and in return it gives us the URL of our snippet!

We’ll be using simple HTML & simple Javascript + JQuery to build & beautify our application so we will just have a small number of files.

LAYING THE HTML FRAMEWORK


PasteBin.com API | APIGuides | TutorialsWalk

Experimenting with PasteBin.com's API

The above markup includes a CSS stylesheet and also the JQuery library on Google’s CDN in the head. Then we have an application heading being displayed on using the h1 tag. We also have a div named form and almost all of our application’s ingredients will go into that div.

ADDING OUR FORM

Now add the following code to the form div:

Paste Text: (REQUIRED!) Syntax highlighting: (optional) Post expiration: (optional) Post exposure: (optional) Name / Title: (optional) Email: (optional)

Here our form action is http://pastebin.com/api_public.php as this is the only way we connect to Pastebin.com‘s API. All the details we fill in the form are sent to the api_public.php file on Pastebin‘s server and after that we never return back to our native application as we’ll be provided with the our snippet URL on the API file itself, that’s why Pastebin.com’s API is so simple! Also we name our form as paste_form as we’ll be using that property for form validation! In the code snippet above, we are showing a textbox (which is required as it has our text/code snippet) named paste_code. Then for displaying the languages for syntax highlightion we are using a dropdown list named paste_format. After that we have options for Post Exposure (how much time the snippet should exist for), then personal information such as your name and email. I guess all that’s self-explanatory!

ADDING FORM VALIDATION USING JAVASCRIPT

Remember that the only required thing in our form is the textbox as it includes the snippet. All other things such syntax highlightion, email, name, snippet age etc. just act as options add-ons.We’ll use a simple Javascript Function to validate our form. To do so add the following code to your documents head:

We start of by naming our function as validateForm and also tell the application that the form we’ll validate is named paste_form. Then using the snippet below:


if(""==document.forms.paste_form.paste_code.value)

we check if something has been entered into the codebox or not. If nothing has been entered into the textbox, then we display a messagebox informing the user of the problem. And if something is added then it just ignores the alert!!

Now to get this working we finally need to add the onSubmit property to our form so that it validates before submission. Just replace the line that has your form properties with the one below:

Now whenever the user clicks submit, the onSubmit property we added here will check the form for code before submitting it to PasteBin’s API. I copy-pasted that entire line to avoid any confusions here!!

ADDING THE ELASTIC EFFECT TO OUR TEXTBOX

We’ll be adding a cool elastic effect to our textbox (which consists of our code). We do this to replace an ugly-looking textbox which has a scroll bar with a sliding text-box which grows bigger as you type in it. This is just to enhance user experience.

We have already imported the JQuery library hosted on Google’s CDN in our application’s head. Now we’ll be using this exciting plugin by Jan Jarfalk to add the elastic effect to our application! For that download the plugin files here. And then place then in a folder named js. Now call the file named jquery.elastic.js in your HTML application’s head like this:

After that add the following code snippet too to your application’s head:

Finally your application should look something like below:


PasteBin.com API | APIGuides | TutorialsWalk

Experimenting with PasteBin.com's API

Paste Text: (REQUIRED!) Syntax highlighting: (optional) Post expiration: (optional) Post exposure: (optional) Name / Title: (optional) Email: (optional)

The entire application files we made today are available for DEMO & DOWNLOAD.

If you have any suggestions or comments on this then feel free to use the Comment Form below

What is an API?

abhishek — Mon, 28 Jun 2010 06:00:57 +0000

In this modern web-world, API’s are being used extensively for a variety of purposes as the API allows programmers to use predefined functions to interact with the remote script (on a remote server) to do a variety of things, intead of writing them from scratch. Today you’ll learn about the basic purpose and concept of APIs.

INTRODUCTION

API or an Application-Programming Interface is a set of data structures, programming instructions and standards, protocols, routines and tools for accessing a web-based software application or a predefined function on an Operating System (OS).
There are two types of API’s; the Operating System ones which let the software developers use the predefined functions & the one’s that website’s offer like Twitter.
API’s can be programmed in any language and they can be used in any language.
An API is a software-to-software interface, not a user interface.
With APIs, applications talk to each other without any user knowledge or intervention.
As a user you only see one interface but behind the scenes, many web applications and APIs are working together to provide you top-notch services.

PURPOSE

API’s can serve for a variety of purposes:

Without actually going to (browsing through) a site, you can actually post to it.
More control over what to post
Easy to use and implement.
Increasing the importance of an online application.
Saving bandwidth (if you use your application then you can modify it as you want)

EXAMPLES

You might not even know but I am 100% sure that you have probably used an API using application (indirectly) before like:

For posting to Twitter/Facebook, applications like TweetDeck, TwitterFeed, the Facebook chat applications available use API’s as they are internally connecting to the respective websites and then helping you post updates or chat to your friends.
Domain selling services like GoDaddy use the Paypal API to take your payments and then redirect you back to your GoDaddy’s account.

There are many more real-life examples of API’s and APIGuides.com will help you to build applications using those robust API’s available out there.

Welcome to APIGuides.com

abhishek — Mon, 28 Jun 2010 03:19:44 +0000

Welcome to APIGuides.com! This won’t be just “any other tutorials website“, but a collection of some premium articles/tutorials on API. My goal is to provide you the key to some of the web’s top API’s in collaboration with my Open-Source project & TutorialsWalk. Just have patience in me and be assured of getting the best!

Connect with APIGuides

Twitter: http://twitter.com/apiguides
Facebook: http://facebook.com/pages/apiguides
Feed: http://feeds.feedburner.com/apiguides
Google Profile (Buzz): http://google.com/profiles/apiguides