Blog d'un développeur multi-support

[DIM] pour les intimes :)

Archives de Mot-Clé : tutoriel

SQlite & Air

Un peu d’SQL ça fait pas de mal non ?

Je fais que peu de back admin en ce moment … j’écrit quasi pas de requêtes .. vive les ORM (object-relational mapping) .. et j’occupe mon temps libre à Flex/Flash et mon application de suivi de stats sportives.

Je suis en train d’écrire une nouvelle version de mon application, avec un plus propre, et surtout multi utilisateur afin que chacun inscrive ses statistiques sportives dans la même application. Je pourrais m’en sortir en utilisant à mort les HTTPService, faire un webservice et site dédié à la cause.. mais bon je n’ai pas vocation (pour l’instant) de créer un site pour se montrer le nombril … et imaginer le nombre de requêtes à traiter …

En sachant que embarque nativement un moteur SQLite, pourquoi ne pas garder sur le poste du client toutes ses stats ? Quitte à faire par la suite un bouton « synchroniser sur le web » :) Ca peut le faire non ?

Lire la Suite →

Tags : , , ,

phpFlickr & Flex

Pour un cours de Flex, il nous avait été demandé de créer une application très simple constitué de deux écrans pour nous apprendre à manipuler les « states », les composants personnalisés, le « data binding » etc.

Le sujet de l’application était d’afficher des images en fonction d’une ville – en vue de faire du data binding sur un XML « statique » de villes – et de récupérer des images issues d’un XML dynamique via l’objet HTTPService.

Alors quitte à faire du dynamique, autant interroger directement un web service existant en vue de récupérer pleins d’images sans se prendre la tête. Et là j’ai pensé à FlickR et sa monstrueuse API. Après 5mn montre en main j’ai eu ma clé pour accèder à l’API et 4mn après je découvrait phpFlickR.

Upload de la librairie et voici mon bout de script qui me renvoit suivant deux paramètres en $_GET un joli XML près à être utilisé en .

  • $_GET['town'] est le terme rechercher dans l’api FlickR sur les tags et le text qui commente une photo.
  • $_GET['max'] est le nombre de photos qu’il faudra retourner.
?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

require_once("phpFlickr.php");
$flickR = new phpFlickr("ta_cle_de_connection_flickR");
 
// 10 résultat par défaut ..
if(isset($_GET['max']))
$max = $_GET['max'];
else $max=10;
 
$search = array("tags"=>$_GET['town'],'per_page'=>$max, "tag_mode"=>"any",'text' => $_GET['town']);
$tab = $flickR->photos_search($search);
 
// On renvoit un XML à Flex
header("content-type: application/xml");
 
// La balise qui va bien
echo "<?xml version="1.0" encoding="utf-8" ?>";
 
for ($i = 0; $i != $max; $i++)
{
        // on s'assure d'avoir des photos valides
	if($tab['photo'][$i]['id'] != "")
	{
	// Simple de créer des urls FlickR non ?
	$url = $flickR->buildPhotoURL($tab['photo'][$i],"thumbnail");
	$link = $flickR->buildPhotoURL($tab['photo'][$i],"medium");
 
	echo "<image><url>".$url."</url><urlLarge>".$link."</urlLarge></image>";
	}
}

La partie Flex est tout aussi simple, voici la partie essentielle qui nous intéresse :

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="searchPhoto('france',20)">
 
<mx:Script>
<![CDATA[
import mx.rpc.http.HTTPService;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
 
[Bindable]
private var servicePhoto:ArrayCollection = new ArrayCollection(); 
 
 
private function searchPhoto(search:String,max:int):void
{
	var modService:HTTPService = new HTTPService();
	modService.method = "get";
	modService.url = "http://oni-ecchi.info/labo/FlexPhotos/service.php";
 
	var parameters:Object = new Object();
	parameters.town = search;
	parameters.max = max;
	modService.request = parameters;                
	modService.send();
	modService.addEventListener(ResultEvent.RESULT,onDataCharged);                
}
 
private function onDataCharged(e:ResultEvent):void
{
	servicePhoto = new ArrayCollection();
	servicePhoto = e.result.root.image as ArrayCollection;		
	vignettes.dataProvider = e.result.root.image as ArrayCollection;
}
 
]]>
</mx:Script>
<mx:TileList id="vignettes" dataProvider="{servicePhoto}" width="481" height="279" columnWidth="110" rowHeight="110" columnCount="4" horizontalCenter="0" paddingRight="5" verticalCenter="0">
    <mx:itemRenderer>
   		<mx:Component>
   			<mx:Image  source="{data.url}" verticalAlign="middle" horizontalAlign="center" />
   		</mx:Component>
    </mx:itemRenderer>       
</mx:TileList>
 
 
</mx:Application>

Ce n’est qu’un exemple très simple. Dans le fichier source qui va suivre, j’ai un peu plus travaillé la chose en utilisant un composant de chargement d’image sympathique, un spinner de chargement 2.0 et enfin la gestion des states (très simple).

Voilà, c’est tout pour aujourd’hui

Tags : , , ,

Tutoriel Iphone

Bonjour,

Connaissez vous Weecast.fr ? Mais si voyons, le tout nouveau  service d’earling d’emob !

Je parcourais un peu le site pour voir si il y avait des tutoriaux vidéos pour programmeur, et hormis les vidéos de video2brain sur Flex qui sont intéressante il y a peu de choses qui m’interpellait. Et c’est là que je voix « Xcode » dans leurs menu avec trois tutoriaux d’objective-c dont un parlais directement de l’iphone.

Il est disponible à cette adresse et vous apprendrez autant que sur le sur developpez.com à savoir :

  • Cliquer sur un bouton pour déclencher une méthode classe

A la différence d’un énième hello world pour l’. Il y a cependant un petit truc d’interessant c’est la gestion du clavier virtuel. Au final on passe 15 mn pour apprendre à gérer correctement le clavier, c’est bon à prendre.

Je regrette simplement que sur la le commentateur ne commente pas les choses vraiment utile. On s’en fou qu’il faut mettre un point virgule ou qu’il est en train d’ouvrir une accolade non ?

Je pense qu’il aurait mieux fait de dire, par exemple, pourquoi il doit écrire du @property (retain, nonatomic) UILabel *monChamp dans l’entete de la classe (fichier .h) et @synthesize monChamp; dans l’implémentation effective de la classe (fichier .m). Enfin bon rien ne remplace de la bonne documentation pour ce genre de question. Et pendant que j’y suis il aurait pu dire deux mots sur les delagate qu’il utilise pour le clavier. Là on dirait que tout sort d’un chapeau de magicien.

Donc oui les tutoriaux vidéos c’est cool, c’est mode, et ca fait gagné du temps mais quitte à en faire un soyez le plus explicites possibles !

En tout ca, merci apple pour la documentation textuels dg vidéos de qualité.

ps : Si vous voulez suivre mes « découvertes » iphone,  mon flux delicious est constamment mis à jour ! http://delicious.com/onishinji/iphone

Tags : , , ,

Slick en détail

Bonjour,

Cette semaine j’ai du rendre pour l’école des gobelins le que j’ai fait avec un framework java. Comme ce projet est fini, et que je ne pense pas que je vais en faire grand chose de mon coté, je vais vous en expliquer le fonctionnement. Peut être que ça vous sera utile.

I) Installation

L’installation de dans un projet eclipse est assez déroutante pour un newbie (j’y ai passé une demi journée de cours ^^) même avec un très bon (l’unique ?) tutoriel d’installation. Faites bien attention au dernier point, c’est important.

En fait Slick est basé sur un autre nommée lwgl, il y a donc deux librairies pour le prix d’une. Vive la réutilisation ! Slick étant un framework dédié aux un jeux 2D, il fait le ménage dans lwgl des choses non indispensables et rajoute tout ce qui va bien pour la 2D.

Passons au !

II) Premier Exemple

Je pars du principe que votre installation est fonctionnelle. Voici le code de mon premier test slick. Il s’agissait d’afficher une image, un test, et grâce au clavier de faire pivoter cette image. Le principe de base est le même pour le jeux final.

J’ai commenter tout le code pour vous expliquer pas à pas ce qu’il se passe.

?View Code JAVA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

import org.newdawn.slick.BasicGame;
import org.newdawn.slick.GameContainer;
import org.newdawn.slick.Graphics;
import org.newdawn.slick.Image;
import org.newdawn.slick.Input;
import org.newdawn.slick.SlickException;
import org.newdawn.slick.AppGameContainer;
import org.newdawn.slick.util.Log;
 
//Il faut étendre la classe BasicGame
public class SimpleTest extends BasicGame {
 
	// L'image tourne, il faut un petit angle non ?
	// En fait il en faut un pour se souvenir d'un FPS à l'autre de combien il
	// faut tourner l'image.
	public Integer angle_image = 0;
	public Image imgToTurn;
 
	// Il faut un constructeur de base.
	// Vous noterez que toutes les erreurs seront catchés au moment de
	// l'exécution. (c'est à dire, dans le main)
	public SimpleTest() throws SlickException {
		// Initialise le nom de la fenetre ..
		super("SimpleTest");
		// Très pratique pour débuger l'application. Remplace le
		// System.out.println .. et plus si affinié
		Log.info("je viens d'être initialisé");
	}
 
	// Initialise mes objets. Exécuté au lancement du jeux.
	@Override
	public void init(GameContainer container) throws SlickException {
 
		// J'ai besoin d'une image.
		imgToTurn = new Image("ressources/images/woman.jpg");
 
	}
 
	// Méthode appelé en boucle. C'est ici que l'on fait vivre nos objets
	// "non graphique" comme la gestion des touches, de nos propriétés (comme
	// angle) etc
	@Override
	public void update(GameContainer container, int delta)
			throws SlickException {
 
		// Si on appuie sur la fleche Haut
		if (container.getInput().isKeyDown((Input.KEY_UP))) {
			angle_image++;
		}
		// Si on appuie sur la fleche Bas
		if (container.getInput().isKeyDown(Input.KEY_DOWN)) {
			angle_image--;
		}
 
		// On fait en sorte que notre angle "tourne en rond" ^^
		if (angle_image &amp;gt; 360)
			angle_image = 0;
	}
 
	// Méthode appelé en boucle. C'est ici qu'on gére l'affichage.
	@Override
	public void render(GameContainer container, Graphics g)
			throws SlickException {
 
		// Affiche un hello world en x:0 et y:100
		g.drawString("Hello, Slick world!", 0, 100);
		g.drawString("coucou", 0, 150);
 
		// Je fais tourner l'image
		imgToTurn.setRotation(angle_image);
 
		// Et je la rajoute à ma fenetre
		g.drawImage(imgToTurn, 200, 0);
 
	}
 
	public static void main(String[] args) {
		try {
			// Démarre un jeux à partir de ma classe
			AppGameContainer app = new AppGameContainer(new SimpleTest());
			app.setTargetFrameRate(500);
			app.start();
 
		} catch (SlickException e) {
			// Et c'est ici que je catch les erreurs de toutes mes méthodes.
			e.printStackTrace();
		}
	}
}

Wahou non ? on a fait un jeux à partir de 5 fonctions, dans l’ordre :

  1. constructeur() – Spécifie la fenetre de jeux (icone, intitulé de fenetre ..)
  2. init()  – Initialise tout nos objets
  3. update() – Gestion du clavier et mis à jours d’objet non graphique
  4. render() – Gestion de l’affichage, c’est là qu’on affiche ou non des éléments graphiques (image, texte, animation, etc)
  5. main() – Il faut bien un point d’entré non ? On peut aussi s’en servir comme point de récupération des erreurs.

Bon ca casse pas trois pattes à un canard, mais en moins de 100 lignes de codes avec les commentaires on s’en sort plutôt pas mal non ?

SimpleTest SimpleTest-2

Lire la Suite →

Tags : , , , ,

Découverte Flex : new NumberFormatter();

Pour mon application (cf le post juste en dessous) j’ai eu besoin d’arrondir mes statistiques à l’entier supérieur/inférieur et les mettre en forme pour ne garder que deux décimal après la virgule. N’étant pas du tout expert en Flash/, j’ai commencé à faire un de bourrin comme splitter mon float selon la virgule, slicer ensuite pour ne garder que deux décimal etc … Bref, un truc vraiment crade pour me dépanner vite fait.

Je suis revenu quelque jours après sur ce bout de code pour le cleaner un peu et pour trouver une solution vraiment propre et voici ma «  » : NumberFormatter ! D’après une recherche google de 45s, il apparait que cette classe n’est disponible que pour Flex ..

Voici comment l’utiliser en AS3 seulement. Je n’ai pas pris le temps de l’essayer en MXML.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// L'objet magique
var oFormat:NumberFormatter = new NumberFormatter();
 
// Arrondis à l'entier le plus proche
oFormat.rounding = NumberBaseRoundType.NEAREST;
 
// Et on l'utilise
trace(oFormat.format(1.51)); // Affiche 2
trace(oFormat.format(1.49)); // Affiche 1
 
// Précision à 2 décimal
// D'abord on n'arrondis plus
oFormat.rounding = NumberBaseRoundType.NONE;
// On définit le nb max de décimal
oFormat.precision = "2";
 
// Et on l'utilise
trace(oFormat.format(1.544541511)); // Affiche 1.54
trace(oFormat.format(1.1)); // Affiche1.10 - note : rajout du 0 !

Et bien sur, rien ne vaut un coup d’oeil sur la documentation Adobe !
Et voilà, c’est tout pour aujourd’hui.

Tags : , , , ,

Hébergement de BOT

Dans un article précédent, nous avions vu comment créer un bot en . Seulement assurer la connexion du bot sur le salon était assez laborieux. Un processus par bot qui tourne sur votre machine, c’est pas folichon.

Mais grâce à http://new.imified.com, ce souci n’en est plus un ! Ce service web permet de connecter un bot à MSN, IRC, Gtalk etc et ce bot demandera à votre page PHP ce qu’il doit faire.

Au final nous n’avons plus qu’a se consacrer sur les réponses et les traitements à faire en fonction du dialogue de l’utilisateur (donnée récupérer sous forme de $_GET). Fini le parsage du stream pour détecter la bonne ligne ^^

Je vous avouerais, j’ai pas encore tester. Mais je compte le faire un de ces quatres :) Je pense que c’est LA solution pour créer rapidement un compagnon virtuel … Imaginer un bot de ce style qui pilote votre twitter, facebook etc. Vous lui parlez, il s’occupe du reste :)

Vu sur le channel #symfony-fr (irc.freenode.com) grâce à [MA]Pascal.
Il a crée un bot qui relaie ce que vous lui dites sur un site donné. (Système de prise de notes rapide)
Ajouter paste@bot.im à votre compte Gtalk et parler lui. Enfin, cela reste surtout un bot de test, réalisé avec Symfony 1.2 et Doctrine (un ORM comme propel)

Tags : , ,

Créer des applications Iphone

Mise à jour 29/07/09 : Cet article date d’un peu .. sa version raccourci et plus clair est disponible sur Débuter sur le développement iPhone ! Have Fun :p

Cet article a pour but de vous expliquer comment créer une application .
Afin d’éviter un abus de langage, nous différencions deux types d’applications potentiels :

•    Les applications web : ouvert via Safari et qui ne sont ni plus ni moins un site dédié au format de l’iphone.
•    Les applications embarqués : Application directement téléchargé sur le iphone store (gratuitement ou pas) pour lequel l’utilisateur doit donner son mot de passe pour l’installer.

Cet article traitera principalement du 2e type d’application.

Lire la Suite →

Tags : , , ,

Qu’est ce qu’il faut pour commencer sur Android ?

Petit rappel sur (mais est ce bien la peine ?) :

Android est un système d’exploitation pour téléphone portable.

Crée par google et open-source il ouvre une voie vers les téléphones mobiles enfin personnalisables à souhait pour les geek que nous sommes :)

Bon, pour en savoir vraiment quelque chose, rien ne vaut un petit wikipedia. Pour l’instant aucun téléphone ne l’embarque mais c’est en cours d’arrivé ( Cf Techcrunch & cf Techcrund). Enfin là n’est pas mon discours.

Je me dit juste qu’après avoir vu cette prise sur Techcrunch (ouais je l’aime ce site ^^) vous voudriez peut être avoir les bases pour commencer.

Mise en bouche

Présentation d’android – via Techcrunch

Les bonnes adresses

Pour commencer à développer sur Android voici trois liens à conserver précieusement :

  1. Le site officiel, logique. Même si je trouve les tutoriels un peu long à lire et pénible, ça reste la référence :)
  2. L’ebook de Nicolas Gramlich pour commencer ses premières applications. J’en suis tombé amoureux ^^ c’est court mais précis. Parfait pour quelqu’un ayant des bases en développement, c’est le condensé le plus agréable à lire.
  3. Le forum Anddev : Rempli de tutoriaux et d’aides, c’est idéal pour s’instruire. En plus y a plein d’images dans les tutoriaux, wahouu :)

Vous remarquerez que tous ces liens sont en anglais. Et oui, en langue française y a bien quelques blogs/sites qui parlent de l’actualité d’Android, mais rien de bien sérieux pour les développeurs. Sans doute cela doit exister, mais je ne les ai jamais trouvé jusqu’à présent ..

J’allai oublier un lien, francais cette fois, bien utile pour commencer http://java.developpez.com/cours/ Et ouais, Android c’est du traficoté ^^

Logiciels et SDK

Pas de miracle, on fait du Java, on est open-source et on va télécharger Eclipse et son plugin Android ^^

http://code.google.com/android/intro/installing.html

Et on tente de comprendre l’anglais ^^

Et ensuite ?

Bientôt des traductions de tutoriels existants (es ce bien utile ?), et des petites découvertes de sur Android (j’espère en trouver ^^)

Tags : , , ,

Découverte : BOT IRC

Bonjour, j’ai pu découvrir comment créer un bot en grâce à la communauté IRCienne de symfony. (Qu’est ce qu’IRC ? Qu’est ce qu’un Bot ?). Tout est expliqué sur cette page.

Squattant en ce moment le chan (salon de discutions) de symfony-fr, je passe mon temps à remercier les uns les autres. Depuis peu même j’arrive à aider les nouveaux ^^. Je me suis donc dit que ca serait bien d’avoir un système pour compatibiliser le nombre de « merci » par personnes et d’en sortir quelques statistiques.

Ainsi est née le bot qui sert à avoir une système à points. Chacun peut donc donner, ou enlever un point, et le robot fera le compte.

Fonctionnement

Après quelques discutions sur le channel de symfony, j’ai mis au point 4 petites commandes que le bot va interpréter :

!point guillaume
!malus guillaume
!bonus guillaume
!total

Comment ca marche ?

Le bot est écrit en PHP 5 et se lance via une ligne de commande du style :

php -f utilisation.php

Il n’y a que peu de classes pour le faire fonctionner :

  1. Une classe de connexion qui s’occupe de créer un flux de donnée (une socket via fsockopen), de se connecter à un channel irc,  de pouvoir transmettre des commandes IRC et de récupérer ligne par ligne ce qui se passe sur le channel.
  2. Une classe principal qui permet de garder le flux de donné ouvert (et donc fait en sorte que le bot reste sur le channel IRC), et qui permet de lancer des Plugins. Son rôle tient plus d’un controlleur PHP que d’une classe à mon sens.
  3. Une interface et une classe de base pour la gestion des Plugins. En fait un plugin est une classe qui contient le coeur d’un programme et permet de réagir vis à vis d’un évènement sur le channel. Un plugin fait donc office d’observateur puisqu’il permet d’écouter des évènements mais il s’obverse lui même vu qu’il traite ces évènements et y répond.

J’ai donc créer un plugin et modifier un temps soit peu la classe principal pour avoir à tout moment la liste des utilisateurs du channel. Au final le n’est pas bien compliquer et bien long (330 lignes à tout casser). Les points sont stocker dans une base de données local (voui, pas besoin de serveur en ligne vu que l’on lance le bot en local on peut accèder à une base en local ^^). Quelques random rendent le bot sympathiques pour avoir des phrases de réponses un peu plus humaine.

Je ne vous donne pas le code source de cette petite application car je le juge « pas très propre » et je pense y faire encore pas mal de modifications dessus :)

Pour la suite

Je prévois de faire une application symfony pour ajouter/modifier des phrases de réponses clées. Faire des graphiques de statistiques, et ré-initalisé la base de données à souhait. Tout n’est pas encore fixé, mais j’aimerais bien une console d’administration du bot à distance sympathique :)

Voilà voilà

Tags : , , ,