RSS Feed

A simple SMS reader

Posted on

Hello,

Today we will make our first Tizen App. If you used the phone emulator before, you will notice that it does not  have a built-in SMS App and to be honest I don’t know why they didn’t make one. So as our first App we will make a simple SMS reader.

For now Apps are made using HTML and Javascript (jQuery is avaliable), but in the future other ways to construct Apps might be possible. If you don’t know anything about HTML, Javascript and the plugin jQuery. Take a look in these links:

So, let’s starting opening the SDK and creating a new project (File -> New -> Project).

Now chose Tizen Web Project, like the image below:



Now you will have the chance to choose the template, for this App use the Tizen basic blank application. See the image:

We are ready for coding now. But before we start you should know something, Tizen is built focusing the user’s security. So when you use a system API your App must explicit say it to the O.S. that you are going to use it (they call this features), otherwise you won’t have access to it. This is just like the Android permissions or the iPhone equivalent. You can add features using the file “config.xml” located in the root of the project. Open this file and you will see a lot of customizations that we are doing. I changed the name of the App to “Messages” to look more fancy, but this is just for style ;). Click in the features tab and in the button add to add more features, we will choose the features from the internal list. In this example we will use two features:

  1. Application – Just for the “close app” function.
  2. Messaging – To be able to read, send and write messages.

In the images below you can see it:

Let’s start to code now. As I said we will create this App using HTML and Javascript. The HTML is used for the layout of our App and Javascript to program it’s behaviour. So in the root of our project you will find the index.html, this is the main page of our App, everything starts from here. And in the directory “js” there is a file called main.js that will contain all our functions. Open those files and let’s begin!

  • The HTML

The definition of this HTML is like for a normal web page, you will find a head and body tags and everything else. You will notice that the Tizen SDK already include some Javascript files and CSS as well. Don’t remove them, otherwise your program may not work. Of course you can add your own script and CSS files if you want, but for this example we won’t add more files.

An App page is divided in three parts:

  • Header – Where you can set a title or useful information
  • Content – What’s actually important to show to the user
  • Footer – For menus and misc

See the example:

 <div id="home" data-role="page">
        <div data-role="header">
            <center><h1>Messages</h1></center>
        </div><!-- /header -->
        <div data-role="content">
           <ul id="messages" data-role="listview"  data-autodividers="alpha" data-shortcutscroll="true">
              <li><span>    </span> </li>
           </ul>
       </div><!-- /content -->
       <div data-role="footer">
           <div data-role="controlbar" data-style="tabbar">
                <ul>
                    <li><a href="javascript:exitApp();" data-icon="ctrlbar-close">Exit</a></li>
                    <li><a href="javascript:aboutApp();" data-icon="ctrlbar-info">About</a></li>
                </ul>
            </div><!-- /navbar -->
       </div><!-- /footer -->
</div><!-- /page -->

And that’s it, we have defined our main look and feel. Now i will explain what each part is doing:

  • Header (lines 2 to 4) – Just showing a title.
  • Content (lines 5 to 9) – There is a list definition (ul tag) and we will make use of the Tizen’s style definition so we set a data-role to listview. we set an ID as well, because we need to fill this list if the phone numbers of the contacts that sent you SMS. This will be done using Javascript.
  • Footer (lines 10 to 17) – It will be used as a menu, we define two buttons the exit button and about button. like the listview we will make use of the Tizen’s style and set the data-role as control bar.

Note: data-* properties is a new attribute proposed by the W3C to the HTML5, they are basically used to store information that will not be visible to the user (unless you see the source code) to be used by scrips. In our case jQuery.

To show our SMS content we will create another page, but its even more simple than the one that we just saw. Take a look at the code:


    <div id="message_view" data-role="page">
        <div data-role="header">
           <span id="contact_name"></span>
        </div>
        <div id="content_sms" data-role="content">
          <ul id="message_thread" data-role="listview" data-autodividers="alpha" data-shortcutscroll="true"
          data-inset="false" data-filter="true" data-split-icon="star" data-theme="a" data-dividertheme="a" data-split-theme="a">
          </ul>
        </div>
</div>

So what we just did, is declaring another page. However it will not be visible unless we say we want to open it.

Looks simple, right?

  • The Javascript

Now let’s pass to the Javascript file (main.js located in the directory js).

The first thing that Tizen will do when the main.js is loaded is call the function domReady. This function is called when the DOM (Document object model) is fully loaded so we can start doing everything else, so when the DOM is ready this init function will be called and the magic will start to happen. See the code:



//Initialize function
var init = function () {
    console.log("init() called");
    getMessages();
}

domReady(init);

Before we jump to the function “getMessages” I will show two other little functions used to exit the App and to show some information about the App.

To show information about the App we are doing like a normal javascript pop-up, so if you know Javascript this is easy and if you don’t it’s easy as well 🙂



//Shows info about the app
function aboutApp(){
    alert('A simple message App.\n Made by Guilherme Íscaro at' +
        ' ProFUSION.\nContact:iscaro@profusion.mobi');
}

And to close the App:



//This will close the app
function exitApp(){
       tizen.application.exit();
}

Remember our features declarations in the “config.xml” ? Here is where we need it, we’re using the application feature now. So if you want to use the Tizen API you will always do something like this: tizen.FEATURE.NAME_OF_THE_FUNCTION.

Now we need to load the SMS messages if we have any, this is done using the function “getMessages”  in the code below:



//Our logic starts here
function getMessages(){
     tizen.messaging.messagingStorage.findMessages(
            new tizen.AttributeFilter("type", "EXACTLY", "messaging.sms"),
            messageQueryCallback);
}

So what we are doing here is using the tizen messaging api to look for stored messages. it takes as argument a filter and a callback function. Because the messaging API handles not just SMS (Can handle e-mails as well) we need to specify what we are looking for.  A message is a data structure defined in the API, so it’s easy to find what we want. So in the filter we say that we are looking at the attribute “type”, for “messaging.sms” and it must match “exactly” how is described (we described “messaging.sms”).  And when it’s done pass the result to messageQueryCallback.

Now in our callback we need to fill the list we have created in our main page. You can check the code below:

//Show who sent you messages (Main page)
function messageQueryCallback(messages){
    messagesGlobal = messages;
    messageGlobalByUser = {};

    var alreadyInserted = {};
    var element = "";
    var from;

    for(var i = 0; i < messagesGlobal.length; i++){
        from = messagesGlobal[i].from;

        if(!alreadyInserted[from]){

              element = '<li>'
                 +'<a href="javascript:seeMessageContent('+from+');">'+
                 '<span>'+
                 from+'</a></span></li>';

              $('#messages').append(element);
              alreadyInserted[from] = true;
        }

        if(!messageGlobalByUser[from]){
              messageGlobalByUser[from] = [messagesGlobal[i]];
        }
        else {
             messageGlobalByUser[from].push(messagesGlobal[i]);
        }
    }

}

The messageGlobal is a global variable that will hold all messages structure in our program and messageGlobalByUser is a hash that will contain all the messages indexed by the contact. They were created because:

  1. We can use anywhere in our script, easy access.
  2. Using messageGlobalByUser to hold the message content it will make the search much faster.

Now let’s print our message content in the screen:


//Print message content
function seeMessageContent(from){
    var message;
    $.mobile.changePage('#message_view'); //Change page view
    $('#contact_name').html('<h1>'+from+'</h1>');
    $('#message_thread').html('');
    from = '+' + from;

    for(var i = 0; i < messageGlobalByUser[from].length; i++){
        message = messageGlobalByUser[from];

        $('#message_thread').append('<li class = "ui-li-bubble-left">'+
           $('<div/>').text( message[i].body.plainBody ).html()+
           '<span class="ui-li-bubble-time">'+
           message[i].timestamp.toLocaleDateString()
           +'</span></li>');
    }

}

First we say to the jQuery to change the page to “message_view”, then we define the header content in the send line.

Then we just print all messages from that contact in the screen.

Important note:

Since “message[i].body.plainBody” is beyond our control it makes our App vulnerable to XSS.

To prevent of being attacked we use $(‘<div/>’).text( message[i].body.plainBody ).html().

If you want to learn more about XSS take a look here: XSS

Thanks to Dean Pierce for warning me!

We have our code ready, now lets run the App.

Before we can compile our program and run it we must configure the emulator. So go to the connection explorer and click in the emulator manager:

Create your new emulator and press start. When it’s ready lets send our program to it. Right click in the project and go to “Run as” -> “Tizen Web Project”. And wait until the program is loaded. You will notice that the emulator will open the program for you, but for now click in the exit button.

Now we need to send SMS to our emulator, calm down, you won’t send a real SMS. It’s a fake SMS using an event injector. To use it go the event injector Tab and in the Telephone sub-tab. Just like the image:

Now open the Messages App, and you should see something like this (I have more messages in my emulator, but this is just a detail):

It’s good to know that this App has a limitation. If you receive a SMS when the App is open, and if you want to see it you will need to close the App and open it again.

If you have any doubts or you want to discover more about the Tizen API, look here: https://developer.tizen.org/documentation

Also you can get the source code using git:   git://git.profusion.mobi/users/iscaro/FirstApp.git

Advertisements

3 responses »

  1. Hi Guilherme, awesome article 🙂 This app is open to cross site scripting attacks where attackers can send SMS containing malicious javascript, and gain complete control over the webruntime. This is very dangerous in Tizen, since it gives attackers control over a significant amount of the OS compared to xss that happens in a browser.

    message[i].body.plainBody

    should be replaced with

    $(”).text(message[i].body.plainBody).html()

    Reply
  2. My solution got mangled, but people can check out

    http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding

    for tips on filtering foreign strings and prevent xss in tizen apps.

    Reply
  3. parabens, vc foi feliz no seu aplicativo

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: