Category Archives: Smart DevNet

ChikkaFOX – The Chikka SMS API Simulator in Firefox OS

ChikkaFOX

I’ve been playing around recently with the Chikka SMS API and i’m amazed on how easy it is to integrate the API on your existing apps or try the API by creating a small app that would simulate it. That is exactly what i did with ChikkaFox.

ChikkaFox is an open source app in Firefox OS that would let you send SMS to any mobile phone number.

All you need to do is to add your api info into the following variables in main.js:

var sCode = “”; // Short code
var cID = “”; // Client ID

var sKey = “” // Secret Key

To test the app, you have to format a mobile number by adding: +639XXXXXXXXX.

Message ID is used to track a request status. You can put any numbers you like for testing. (Example: 01)

The great thing about the Chikka SMS API is that you can buy airtime credits using your SMART Prepaid load and the minimum package you can avail is only 100 pesos (Up to 250 SMS). Talk about convenience and affordability.

Send an SMS using SMART DevNet’s API Console

SMART DevNet has opened up their API together with the SMART API Console (Powered by APIGEE) last December 2013 for everyone to use, for free. Right now, everyone will get an access to their FREEMIUM API which means you can only send an SMS using your SMART mobile number. It’s not bad if you want to try out the API and get started developing an app or website service that offers an SMS/MMS feature.

At the end of this post, you will learn how to:

  • Create your own SMART DevNet account
  • Register an app/website name and bind your SMART number with that app
  • Get to know your App’s API information
  • Hack the API Console

You will need:

  • A SMART powered phone (I used my SMART Prepaid number. I haven’t personally tried Talk N’ Text, SUN or RED Mobile)
  • Your favorite text editor (I used Notepad during my first trials of the API Console)
  • Your favorite web browser (I used Firefox *wink*)

Follow these steps!

Step 1: Visit http://developer.smart.com.ph

step1From here you can register for a SMART DevNet account and get to read some API docs, register an app and try out the API Console. On the top of the page, click the red “Register” button to get started.

Step 2: Fill out the forms

step2

You can also register using your Facebook or Google account. Still hoping for http://persona.org support in the future =p

Step 3: Log-in

Once logged in, just click the “Freemium API’s” option in the top menu navigation.

Step 4: Create an app

Step4You will be needing a SMART Prepaid/Postpaid number here.

step5

Take note, you can’t change your Smart mobile number once you’ve confirmed that number during the app’s registration.

Also you can’t change your app’s name. The only information you can always change in your app is your callback URL.

Step 5: Your App’s Dashboard

testappIf you have been successful in the past steps, then you can finally take a peek at your Application’s dashboard. This dashboard holds the information that you will use in the API Console.

You will copy and paste some information from this dashboard to the API console.

Step 6: Using the API Console: OAuth Authorize

step1

Click the left arrow in the API console to open the console drawer, and select OAuth Authorize.

In the QUERY tab, you will find:

  • client_id
  • client_secret
  • scope
  • redirect_uri
  • response_type

Now, match the form using the information from your Application’s dashboard:

  • Consumer key
  • Consumer secret key
  • Put “SMS” without the “
  • Callback URL in this format: www.YOURDOMAIN.com/callbackurl ( You will observe that i have removed the HTTP and /)
  • Leave it as it is.

And press SEND. This will generate a hyperlink in the response window. Open a new tab in your browser and paste that generated hyperlink, then you will be redirected to a page where you will input the mobile number you’ve used in the app registration (Don’t have a my.Smart account).

It will ask for yet another confirmation code. Once you got that right, it will redirect you to another page and will ask for authorization. Just click the “Allow button” and again, will redirect you to another page. But this time, you will get “PAGE NOT FOUND” error.

(Note: What’s with the “PAGE NOT FOUND” ? It’s because for the sake of the demo, i’m not using a REAL callback URL thus this is the system’s reaction on fake callback links. If you’re working on a real app, you must provide a working Callback URL.)

canvas

You will notice this paragraph:
The requested page “/www.smart.com.ph%3Fscope%3DSMS%26state%3Dnull%26code%3DXXXXXXXX” could not be found.
Copy and paste the code after the %3D… This code will be useful in the next step. (WARNING: DO NOT INCLUDE THE %3D in your code, just the characters AFTER and before ” is YOUR code.)
Save that code in your favorite text editor as Code: XXXXXXXX.
Step 7: Getting your token

Now that you have your code,  hover your mouse to TOOLS > and click API CONSOLE then it will redirect the page to the API Console. Now press the arrow button to open the console drawer and press “OAuth Get Access Token”

step2

In the QUERY tab, you will find:

  • client_id
  • client_secret
  • scope
  • redirect_uri
  • grant_type
  • code

Similar to the first QUERY tab, match the form using the information from your Application’s dashboard:

  • Consumer key
  • Consumer secret key
  • Put “SMS” without the “
  • Callback URL in this format: www.YOURDOMAIN.com ( You will observe that i have removed the HTTP and /)
  • Leave it as it is.
  • Code (Remember that we saved that code in our notepad? Just get the 8 character code and paste it)

Now press “SEND

The response window will generate a JSON data. We will only need this:

{
  "OAuth20": {
    "access_token": {
      "token": "<TOKEN GENERATED>",
      "refresh_token": "<TOKEN GENERATED>",
      "expires_in": "<TOKEN EXPIRATION>"
    }
  }
}

We will only need the TOKEN code in the next step.

Take Note: Every information generated in this JSON file is important. We will only use the TOKEN code for demo purposes.

Step 8: Send SMS

Now, press f5 on your keyboard to reload the page. Once reloaded, open the console drawer and select “Send SMS

step3

In the TEMPLATE tab and change the senderAddress information to SMS Access Code (This code can be found in your app’s dashboard)

Select the HEADERS tab and change the Authorization information to: Bearer <SPACE> TOKEN

Now select the BODY tab and select the TEXT field and find this text and change the values to:

  • senderAddress“: “<CHANGE THIS INFO TO YOUR SMS ACCESS CODE>”,
  • message“: “Hello SMART DevNet! It works!

and press “SEND

You will receive an SMS within 30 seconds. If nothing happens then…

  1. You’re not following the instructions.
  2. Network delays
  3. Server delays

But as you can see, it works.

Screenshot_2014-02-07-17-33-54Congratulations! You have successfully sent an SMS using SMART DevNet’s API Console!!! Now what?

BONUS STEP: Confirm if the SMS request was sent successfully.

step4

Save the JSON data generated from “Send SMS”:

“resourceURL”: “http://121.54.0.202:8080/1/smsmessaging/outbound/XXXXXX/requests/10XXXXXXXXXXXXXXXXXXXXXXXXX”

Open the console drawer and select “Send SMS

Select the TEMPLATE tab and change the

  • senderAddress to your Apps’ SMS ACCESS CODE.
  • requestId to the link generated from the JSON file. It’s usually the longest number in the link.

Select the HEADERS tab and change the

  • Authorization to BEARER <SPACE> TOKEN

and press “SEND

If you see this JSON data on the Response window:

"deliveryInfoList": { "resourceURL": "http://121.54.0.202:8080/1/smsmessaging/outbound/requests/XXXXXXXXXXXXXXXXXXXXXXXXX/deliveryInfos", "deliveryInfo": [ { "address": "6392XXXXXXXX", "deliveryStatus": "DeliveredToTerminal" } ]

Then we can say that your SMS was sent successfully! AWW YEAH!

That’s it! At first, the console may be tricky but you will get it at the long run.

And oh, if you’re looking for a SMART PREMIUM API or have any questions in mind about their API, you may want to send an e-mail to the DevNet team: appspartner@smart.com.ph

Join the SMART Developer Network facebook group here.

Get ready to hack at 4SQ HackDay Philippines!

We cannot deny that the mobile era is here. It’s what Steve Jobs said that we now heading towards to a “Post-PC era“. But what does it mean? It means people are now shifting from their laptop/desktop lifestyle to tablet lifestyle. But that doesn’t mean people are now selling their new and shiny MacBook Pro’s or Powerbooks, but in fact, they are adapting a new kind of device that would help them consume information.

It’s a Mobile thing, isn’t it?

A Smartphone is designed to be fast, fluid and handy. People love their smartphones because of that. When designing a smartphone app, developers should prioritize the consumer’s needs. Remember, they are always on the go so your app should too.

A tablet, on the other hand is designed for consumers who wants to consume data on a big screen. It’s like a smartphone, but users are not always on a hurry. When designing for tablets, always think about how your app will look like on that big handy screen. Users are meticulous and they demand a better experience on their device. It’s what they paid for.

What about tools and things like that?

Usually, a mobile platform allows devs to build apps on native. But today, majority of Mobile platforms are now offering their web tools to web developers. Popular mobile companies like BlackBerry, Firefox OS, Nokia, Windows 8 are now changing the game with HTML5.You can also use Apache Cordova to build cross platform HTML5 apps.

Now, which is better? Native or Web? Seriously. It’s all about your personal preferences and or experience. Use the tools you feel comfortable with. But if you’re not happy with the results. Go and try the other.

Come and Join 4SQ HackDay PH 2012!

 (WebGeek DevCup. Photo by When In Manila)

Smart DevNet and WebGeek invites all mobile app developers to test their skills in this awesome and one of a kind hackathon event. All you have to do is develop a mobile app on the foursquare API. Develop your mobile app within nine hours and let us see what you’re capable of.

It’s your chance to hack that next big thing! If you want to know more about this event, you can visit the official site: http://hackday.webgeek.ph/