L\u00e0, vous devez \u00eatre en train de vous demander : ‘Il va nous parler de dev iphone\/android en js ? ‘<\/p>\n
Et ben en fait, pas du tout.<\/p>\n
Parce que l\u00e0 o\u00f9 Titanium est encore plus g\u00e9nial, c’est que l’on peut coder pour le Desktop aussi, en multiplateforme \u00e0 savoir Linux, OSX et Windows. Sympa, vous aller me dire, mais bon faire toute une appli desktop en js, voil\u00e0 quoi \u2026<\/p>\n
Oui, mais non, parce que pour le desktop, on peut coder en python (attention en python 2.5 uniquement), en ruby ou.. mis\u00e8re, en php. Et l\u00e0, \u00e7a devient carr\u00e9ment miam.<\/p>\n
Ca faisait donc plusieurs mois que j’avais envie de tester le bouzin, mais bon, j’avais d\u00e9j\u00e0 pas le temps de bosser sur histoiresderolistes.com alors tester un truc en plus… Et puis les tests c’est bien joli mais pour faire des Hello World! Merci.<\/p>\n
Mais comme les vacances, ce n’est pas fait que pour travailler sur le boulot en retard, j’ai pu m’y mettre, un peu. (et puis faut avouer que le billet<\/a> de @popofr13<\/a> sur le dev titanium iphone m’a boost\u00e9 \u00e0 \u00e9crire le mien). Restait alors le probl\u00e8me du Hello World. Apr\u00e8s 30 secondes de r\u00e9flexion je me suis dit que bidouiller des trucs avec twitter, \u00e7a serait rigolo. Et en plus comme c’est bien buzz word twitter, \u00e7a plaira, c’est sur.<\/p>\n Et c’est ainsi qu’un froid jour d’avril, une nouvelle cat\u00e9gorie d’article naquit sur le j-mad blog. Une cat\u00e9gorie d\u00e9di\u00e9e aux bidouillages avec Titanium et ayant pour fil rouge le dev d’un client twitter basique (type Pino quoi). Et comme pour chaque projet, il faut un nom, j’en ai trouv\u00e9 un TwittPouick. Oui je sais. Non, pas de commentaires sur le nom.<\/p>\n Alors c’est tout simple, pour t\u00e9l\u00e9charger Titanium, on va sur le site et on clique sur t\u00e9l\u00e9chargement<\/a>.<\/p>\n Ensuite il n’y a qu’\u00e0 d\u00e9compresser l’archive et lancer l’installateur. Petite pr\u00e9cision, il y a assez r\u00e9guli\u00e8rement de nouvelle version, qui sont indiqu\u00e9s directement dans l’interface de Titanium. Il suffit alors de relancer le cycle dl\/d\u00e9compression\/installation.<\/p>\n Une fois Titanium install\u00e9 et lanc\u00e9, il suffit de cliquer sur New Project pour voir la fen\u00eatre ci dessous appara\u00eetre. Rien de bien difficile \u00e0 comprendre, il suffit de remplir les champs et de cliquer sur create project (N’oubliez pas de cocher en vert la petite case python tout de m\u00eame).<\/p>\n Vous arrivez ensuite sur la fen\u00eatre principale compos\u00e9 d’\u00e0 gauche la liste de vos projets (sur mon screen on voit d’ailleurs mon projet twittpouick) et \u00e0 droite ben la zone de droite avec un menu horizontal en haut Dashboard \/ Edit \/ Test & Package.<\/p>\n Ben ensuite, on prend son navigateur de fichier favori et on va voir ce qu’il nous \u00e0 g\u00e9n\u00e9rer le tonton Titanium. Bon le fichier jquery n’est pas l\u00e0 de base, c’est moi qui l’est rajout\u00e9. Vous comprendrez pourquoi par la suite.<\/p>\n Donc il ne devrait y avoir quasiment que le fichier index.html. Qui correspond \u00e0 notre fen\u00eatre principale. Avant de partir pour de vrai dans des vrais choses rigolotes (comprendre le client twitter), on va tout de m\u00eame faire un hello word. Et oui.<\/p>\n Ouvrez le fichier index.html et remplacez son contenu par celui-ci<\/p>\n Allez dans Test & Package, cliquez sur Launch App, une fen\u00eatre blanche se lance avec un bouton, cliquez sur le bouton et mirage, une fen\u00eatre Alert javascript s’affiche avec un Hello World dedans.<\/p>\n Ce qui est logique, si on regarde le code au dessus. On cr\u00e9e une section de code python, on d\u00e9finit une fonction que l’on appelle sur le onclick du bouton, dans un code js donc, et on passe le retour de la fonction python (je le rappelle) en param\u00e8tre \u00e0 la fonction alert js.<\/p>\n En fait cet exemple, bien que tr\u00e8s simple, montre la plupart des trucs g\u00e9nials de Titanium.<\/p>\n On peut d\u00e9clarer des sections de code python, directement dans les fichiers html (mais on peut le faire proprement en dehors aussi, \u00e7a sera l’objet d’un prochain billet) et on peut acc\u00e9der au python du js.<\/p>\n Et c’est aussi valable dans l’autre sens. On peut acc\u00e9der du python, \u00e0 du code JS. Que ce soit acc\u00e9der \u00e0 des fonctions ou \u00e0 des variables, que l’on peut modifier, bien entendu (\u00e0 ce propos, cette page de la doc officielle<\/a> explique la conversion entre les types python \/ javascript.<\/p>\n Pour clore ce premier billet, d\u00e9j\u00e0 bien long, et justifier un peu, le titre du billet, on va faire une premier truc, c’est r\u00e9cup\u00e9rer, apr\u00e8s clic sur un bouton, sa timeline, dans un mode code grouirk, parce que c’est juste pour finir en beaut\u00e9 ce billet.<\/p>\n Je ne connais pas les librairies twitter en python. Et je n’ai pas vraiment le temps de me plonger dedans pour voir laquelle est la mieux. Par contre je connais bien restkit<\/a>, une librairie bien bien sympa de @benoitc<\/a> et qui marche plut\u00f4t bien.<\/p>\n On va donc l’utiliser pour r\u00e9cup\u00e9rer sa timeline.<\/p>\n On \u00e0 une interface HTML. On veut modifier le dom. Moi j’aime bien jquery. Donc on va utiliser Jquery. Directement dans du code python. Et oui. Comme si on \u00e9tait en Js. Sauf que l’on ne pourra pas utiliser le raccourci $ , vu qu’on est en python. On va donc simplement utiliser le vrai objet JQuery.<\/p>\n On peut bien entendu, encore heureux, utiliser directement les API titanium qui sont en Js. Pour l’exemple, j’utilise Titanium.API.info qui permet d’afficher une cha\u00eene de caract\u00e8re dans la console.<\/p>\n Bon et maintenant le code, complet, du fichier index.html<\/p>\n Vous n’avez plus qu’\u00e0 installer restkit (avec easy_install), pour python 2.5 N’OUBLIEZ PAS !!!, mettre jquery \u00e0 cot\u00e9 de votre fichier index.html, mettre votre login \/ mot de passe twitter et puis lancer l’appli twitter.<\/p>\n Cliquer sur le bouton, quelque seconde apr\u00e8s .. miracle les tweets apparaissent. Recliquez sur le bouton, les nouveaux twitts s’ajoutent en bas de liste….<\/p>\n Et voil\u00e0, m\u00eame pas 10 minutes et d\u00e9j\u00e0 vous avez un d\u00e9but de client. Comme quoi, je ne vous avais pas tant men\u00e9 en bateau que \u00e7a, dans mon titre, finalement.<\/p>\n Ce premier billet, n’est qu’un premier billet. Il ne va pas tr\u00e8s loin dans la pr\u00e9sentation de Titanium, parce que je n’ai pas vraiment eu le temps de moi m\u00eame faire plus. Vivement les prochains billets donc. Enfin, j’esp\u00e8re que c’est ce que vous vous dites en ce moment :). En attendant mon prochain billet, amusez vous bien avec Titanium.<\/p>\n","protected":false},"excerpt":{"rendered":" Bon, bien entendu mon titre est volontairement accrocheur. Et compl\u00e8tement mensonger. Mais il faut bien app\u00e2ter le chaland un peu. Sinon, je ne serais jamais un blogueur influent.. Alors vive les titres accrocheur \ud83d\ude42 Mais avant de commencer, il faut peut-\u00eatre que j’explique ce que c’est que Titanium. Titanium c’est un framework assez g\u00e9nial (et … Continue reading Titanium par l’exemple, un client twitter en dix minutes.<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[62],"tags":[98,63],"class_list":["post-565","post","type-post","status-publish","format-standard","hentry","category-titanium","tag-python","tag-twitter"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p12cdp-97","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/posts\/565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/comments?post=565"}],"version-history":[{"count":5,"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/posts\/565\/revisions"}],"predecessor-version":[{"id":573,"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/posts\/565\/revisions\/573"}],"wp:attachment":[{"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/media?parent=565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/categories?post=565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/j-mad.com\/blog\/wp-json\/wp\/v2\/tags?post=565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}1- La gen\u00e8se, installation et cr\u00e9ation du projet.<\/h1>\n
![\"\"](\"http:\/\/j-mad.com\/blog\/wp-content\/uploads\/2010\/04\/new_project-300x169.png\" "\\"new_project\\"")
<\/a><\/p>\n![\"\"](\"http:\/\/j-mad.com\/blog\/wp-content\/uploads\/2010\/04\/main-300x169.png\" "\\"main\\"")
<\/a><\/p>\n\n
2- Et ensuite ?<\/h1>\n
\nEt l’on voit \u00e7a :<\/p>\n![\"\"](\"http:\/\/j-mad.com\/blog\/wp-content\/uploads\/2010\/04\/fichiers.png\" "\\"fichiers\\"")
<\/a><\/p>\n
\n <<\/span>head><\/span>
\n <<\/span>script type<\/span>=<\/span>"text\/python"<\/span>><\/span>
\n def<\/span> hello_python(<\/span>)<\/span>:
\n return<\/span> "Hello World"<\/span>
\n <<\/span>\/script><\/span>
\n <<\/span>\/head><\/span>
\n
\n <<\/span>body ><\/span>
\n <<\/span>div ><\/span>
\n <<\/span>div ><\/span>Le Hello World<<\/span>\/div><\/span>
\n <<\/span>button onclick=<\/span>"alert(hello_python())"<\/span>><\/span>Bouton Hello<<\/span>\/button><\/span>
\n <<\/span>\/div><\/span>
\n <<\/span>\/body><\/span>
\n<<\/span>\/html><\/span><\/div><\/div>\n3- Et TwittPouick naquit.<\/h1>\n
3.1 R\u00e9cup\u00e9ration de sa timeline.<\/h2>\n
3.2 Affichage de sa timeline.<\/h2>\n
3.3 Utilisation des API Titanium<\/h2>\n
\n <<\/span>head><\/span>
\n
\n <<\/span>link rel=<\/span>"stylesheet"<\/span> type<\/span>=<\/span>"text\/css"<\/span> href=<\/span>"style.css"<\/span> \/><\/span>
\n <<\/span>link rel=<\/span>"stylesheet"<\/span> type<\/span>=<\/span>"text\/css"<\/span> href=<\/span>"color.css"<\/span> \/><\/span>
\n
\n <<\/span>script type<\/span> =<\/span>"text\/javascript"<\/span> src=<\/span>"jquery-1.3.2.js"<\/span>><<\/span>\/script><\/span>
\n
\n
\n <<\/span>script type<\/span>=<\/span>"text\/python"<\/span>><\/span>
\n def<\/span> getTimelineJquery(<\/span>)<\/span>:
\n from<\/span> restkit import<\/span> Resource,<\/span> BasicAuth
\n from<\/span> pyquery import<\/span> PyQuery as<\/span> pq
\n
\n try<\/span>:
\n import<\/span> simplejson as<\/span> json
\n except<\/span> ImportError<\/span>:
\n import<\/span> json # py2.6 only<\/span>
\n
\n class<\/span> TwitterTimeline(<\/span>Resource)<\/span>:
\n
\n def<\/span> __init__<\/span>(<\/span>self<\/span>,<\/span> pool_instance=<\/span>None<\/span>,<\/span> **kwargs)<\/span>:
\n search_url =<\/span> "https:\/\/api.twitter.com\/1\/statuses\/"<\/span>
\n
\n auth =<\/span> BasicAuth(<\/span>"TwitterUserName"<\/span>,<\/span> "TwitterPassword"<\/span>)<\/span>
\n
\n super<\/span>(<\/span>TwitterTimeline,<\/span> self<\/span>)<\/span>.__init__<\/span>(<\/span>search_url,<\/span> follow_redirect=<\/span>True<\/span>,<\/span>
\n max_follow_redirect=<\/span>10<\/span>,<\/span>
\n pool_instance=<\/span>pool_instance,<\/span>
\n filters=<\/span>[<\/span>auth]<\/span>,<\/span>
\n **kwargs)<\/span>
\n
\n def<\/span> get_timeline(<\/span>self<\/span>)<\/span>:
\n return<\/span> self<\/span>.get<\/span>(<\/span>'home_timeline.json'<\/span>)<\/span>
\n
\n def<\/span> request(<\/span>self<\/span>,<\/span> *args,<\/span> **kwargs)<\/span>:
\n resp =<\/span> super<\/span>(<\/span>TwitterTimeline,<\/span> self<\/span>)<\/span>.request<\/span>(<\/span>*args,<\/span> **kwargs)<\/span>
\n return<\/span> json.loads<\/span>(<\/span>resp.body<\/span>)<\/span>
\n
\n s =<\/span> TwitterTimeline(<\/span>)<\/span>
\n tl =<\/span> s.get_timeline<\/span>(<\/span>)<\/span>
\n
\n for<\/span> item in<\/span> tl :
\n element =<\/span> u"""<p class="p_tweet color_p_tweet"> %s : %s<\/p>"""<\/span> % (<\/span>item[<\/span>'user'<\/span>]<\/span>[<\/span>'screen_name'<\/span>]<\/span>,<\/span> item[<\/span>'text'<\/span>]<\/span> )<\/span>
\n Titanium.API<\/span>.info<\/span> (<\/span>element)<\/span>
\n jQuery(<\/span>"#timeline"<\/span>)<\/span>.append<\/span>(<\/span>element)<\/span>
\n
\n <<\/span>\/script><\/span>
\n
\n <<\/span>\/head><\/span>
\n <<\/span>body class<\/span>=<\/span>"body color_body"<\/span>><\/span>
\n <<\/span>div><\/span>
\n
\n <<\/span>h1><\/span>Votre timeline avec TwittPouick<<\/span>\/h1><\/span>
\n <<\/span>button onclick=<\/span>"getTimelineJquery()"<\/span>><\/span> Get Timeline Jquery <<\/span>\/button><\/span>
\n
\n <<\/span>div id<\/span>=<\/span>"timeline"<\/span>><\/span>
\n
\n <<\/span>\/div><\/span>
\n <<\/span>\/div><\/span>
\n <<\/span>\/body><\/span>
\n<<\/span>\/html><\/span><\/div><\/div>\n4- Conclusion.<\/h1>\n
\nPour la suite, je mettrais en place un repository mercurial sur bitbucket o\u00f9 je d\u00e9poserais les diff\u00e9rentes \u00e9tapes de la cr\u00e9ation de TwittPouick.<\/p>\n