Sencha, My First iphone application

Here we are, Iphone application development  is being more and more easier for web developers, all you have to know is Javascript, html and Css .. 

Sencha is a HTML5 Mobile web application framework .. in other words it simplify creation of mobile application using HTML5 features.

In this article i will try to list all the tweets where the keyword  “hbensalem” exists, i’m using Twitter Api and search.twitter.com.

Setting the project

First of all you’ll need to download sencha-touch from Sencha website.

Then create a html file with this content :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sencha</title>
        <!-- Sencha Touch CSS -->
        <link rel="stylesheet" href="./sencha-touch/resources/css/sencha-touch.css" type="text/css">
        <!-- Sencha Touch JS -->
        <script type="text/javascript" src="./sencha-touch/ext-touch-debug.js"></script>
        <!-- Application JS -->
        <script type="text/javascript" src="index.js"></script>
        <style>
            .tweet {
                border-bottom: 1px solid #EEEEEE;
                margin: 0;
                overflow: hidden;
                padding: 15px 5px;
                background-color: grey
            }

            .avatar {
                float: left;
                height: 50px;
                overflow: hidden;
                width: 50px;
            }
            .tweet-content {
                font-size: 16px;
                line-height: 17px;
                margin-bottom: 2px;
                margin-left: 58px;
            }
        </style>
    </head>
    <body></body>
</html>

We need to pay attention to :

  • sencha-touch.css
  • ext-touch-debug.js

Building the application “script.js”

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon : false,
    onReady: function() {

        var timeline = new Ext.Component({
            title: 'Timeline for hbensalem',
            cls: 'timeline',
            scroll: 'vertical',
            tpl: [
                '<tpl for=".">',
                    '<div class="tweet">',
                            '<div class="avatar"><img src="{profile_image_url}" /></div>',
                            '<div class="tweet-content">',
                                '<h2>{from_user}</h2>',
                                '<p>{text}</p>',
                            '</div>',
                    '</div>',
                '</tpl>'
            ]
        });

        var panel = new Ext.TabPanel({
            fullscreen: true,
            items: [timeline]
        });

        var reader =  Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',
                callbackKey: 'callback',
                params: {
                    q: 'hbensalem'
                },
                callback: function(data) {
                    data = data.results;
                    timeline.update(data);
                }
            });
    }
});

Some explanations :

Timeline is the component who deals with data from JSON request, the tpl section is for Template, data content is parsed and every token is replaced by the good value.

Panel : is the main container.

Reader : is the JSON reader, we told him where to search and we passed the query. Callback function is called when the loading of request is finished.

And this is the result :

Source and further reading :
http://dev.sencha.com/deploy/touch/getting-started.html

5 Replies to “Sencha, My First iphone application”

  1. Alors, voici la suite de la discussion qui a commencé sur FB.

    Pour ces points :

    • You have to pay to become an Apple developer

    => ça coûte 99$, franchement c’est pas grand chose je crois …. Pour un américain c’est 2 fois moins ce qu’il dépense en un week-end.

    • You are at the mercy of the Apple approval process :

    => c’est vrai, mais c’est mieux. On verra ce que deviendra l’Android Market d’ici qqe temps. Quand j’ai soumis ma première Appli à l’AppStore, ils l’ont rejetée, ils ont découvert un bug que j’ai zappé. Je préfère ça qu’un market rempli d’appli bugguées ou des virus et des troyens partout. De ttes façons, Apple sont devenus bcp plus souples, et je suis sûr qu’ils vont s’assouplir encore plus. Mais je suis pour que ça reste fermé. Comme ils ont dit dans le guide du développeur “Enough with fart apps”.

    • You have to develop using Objective-C:

    => et alors ? si on connaît C/C++ ou PHP, Obj-C c’est du gâteau. Ca m’a pris 2 jours pour le comprendre… Des gens ont bien appris Ruby, alors pourquoi ce plantage face à l’Obj-C ?

    • You have to develop on a Mac

    => … c’est normal non ? Quand on veut créer une application pour Ubuntu, il n’est pas plus pratique de la développer sur Ubuntu ? Pareil pour une application Windows, c’est plus pratique de la développer sur SUSE ou bien Windows (de merde) ?? L’iPhone repose sur l’iOS qui découle du Mac OS, basé sur Cocoa. Pour moi la question ne se pose même pas. Un mac mini coûte 1000 DT et est plus puissant que les laptops à 999DT qu’on vend à Carrefour et Géant.

    1. Hatem le learning curve pour du objective C n’est pas évident pour tout le monde .. faut se mettre à la place de la majeure partie des gens.

      Ca t’as pris 2 jours tant mieux mais ça ne sera pas le cas pour d’autres personnes.

      100$ c’est rien pour un américain mais comment tu veux qu’on avance si on n’a pas le moyen des les payer c’est 100$ ??

      Le processus de validation est bien c’est sur filtrer les applis mais à la base c’est App Store <= ça les arrange d'avoir toutes les applis chez eux. Je te redis la même chose que sur FB, je trouve que c'est une ouverture sur d'autres profils et à la fin ça reste un outil rien d'autre 🙂

  2. Héhé, sympa votre troll =)

    Perso je dirais que l’argument numéro 1 pour une appli web, c’est la portabilité. Après, le reste, les arguments pro/anti apple, seront toujours sujet à trolls.

    Merci pour ce tutorial, il est clair et concis !

  3. how would i tie in functionality to the twitter feeds. For instance, say i want to click one of the loaded tweets-how do i make it clickable to link to that persons twitter page?

    1. hi von, try to see the response from twitter, the data object in the response for ex a console.log(data) you will certainly have all the informations that you need as the user name / id then you can build the link into the template to that specific profile.

Leave a Reply