Intro

In this tutorial I will show you how to create a link or url shortener app using bitly api. You can also use others like goo.gl etc. to create a link shortener app. Basically link shortener is used for short a long url and then the link is posted in social media. Today I will create that app using Bitly API. First of all you have to create your own account at Bitly and after creating an account you just need a API Key, your Username and a API URL to create this app. So let’s create the App’s Interface first.

Splash Design

So to make this app more professional just create a splash screen. If you don’t know how to create a splash screen then check back my older tutorial. So here I have created a simple splash screen and after a several time it will go to the Home screen.

Home Design

First of all I have already uploaded some images related to Bitly, one is a logo and another one is full Bitly text logo. Now make the Screen’s Align Horizontal as Center and Align Vertical as Top and make the background as Default or White. Now also set Navigation Bar colour to Deep Orange, as the Bitly website’s main colour is likely Deep Orange. Now drag a Space and make height as 2 percent. After the space just drag a Label and set Text as Powered by and set colour as Blue Gray and then another space and then drag a Image and set image to the Bitly long text logo. That’s how we are informing the app’s users that the app is going with Bitly. So now again make a space of 3 percent and under that drag a Horizontal Arrangement and set Height as Automatic, Width as 80 percent, Background colour as Deep Orange, Align Horizontal & Vertical to Center and IsCard and Is Rounded card. Now in this arrangement drag a TextBox with Width of Fill Parent and Font Size as 18 and Background colour as Deep Orange and Cursor colour as White. Set TextBox name as url_txtbox. After this make a 1 percent space and drag Button with width as 80 percent and Font size of 16 and set Font Bold, set Text as Shorten. Set Button’s name as url_short_btn. Now make 5 percent space and drag a Label where the shorten link will be appear. Set the Label’s Text to link will be appear here… and set name as link_label.
Now you need 2 External Extensions. So download that extensions from https://puravidaapps.com/extensions.php. Download 2 extension JSON Tools and Taiful Clipboard.
Now drag Web, Notifier, JSON Tools, Taifun Clipboard

Bit.ly Setup

Go to Bit.ly and login to your account. Click on Menu Bar (Top Right Corner) –> Settings –> Advanced Settings –> API Support
You can see this type of Page

You need Login and API Key. Copy Both and see the Blocks

Blocks

Paste Login text to userid and API Key to apikey and use that url to call bitly when Button Clicked

After calling Bitly will response with a JSON Text, so we need to convert that text to normal text

When clicked on the Link, this will happen

Download

Download the aia file from below. If the file is not downloaded as .aia file then refresh that download page.

Video Tutorial