Archives pour la catégorie ‘Web’

Conférence VDM à l’IÉSEG Lille

Par Maxime, le 6 mai 2010.

Que de projets et de jours chargés en ce moment, désolé de n’avoir pu écrire ces derniers temps, tout va bien pour moi en tout cas, j’espère que pour vous aussi mes petits pandas.

Guillaume et moi avions été invités par l’association Next Entrepreneur de l’IÉSEG Lille à partager notre expérience d’entrepreneurs autour du thème de VDM, FML et de Beta&Cie en général. C’était notre première conférence sur le sujet, mais tout s’est très bien passé, les gens étaient au rendez-vous malgré la concurrence de l’happy hour du bar d’à côté (j’ai tenté de m’échapper pour récupérer une pinte à un moment).

Quoiqu’il en soit, j’ai récupéré le flux de la conférence et je l’ai encodé en moult formats pour que ceux qui n’ont pas pu y assister en profite à leur tour…

Version audio :

Conférence VDM à l’IÉSEG Lille — 20 avril 2010

Version vidéo :

Présentation Keynote :

Conférence VDM à l'IÉSEG Lille

Téléchargements :

Si vous avez des questions supplémentaires sur la conférence, n’hésitez pas à les poser en commentaires, j’essaierai d’y répondre :)

Twitter : La fin d’un modèle

Par Maxime, le 10 avril 2010.

Cette nuit aura été marqué par un tweet, puis un communiqué de presse : Twitter rachète Tweetie 2. Les conséquences de ce rachat sont simples, de prime abord : Le client devient gratuit (actuellement à 2,39 euros) et sera renommé Twitter for iPhone.

twitter_logo.jpg

Si la nouvelle pouvait se faire attendre, suite au développement d’un premier client officiel pour BlackBerry, elle va sûrement choquer beaucoup de développeurs de clients Twitter autour du monde, et nous n’avons pas fini d’en entendre parler. Pourtant, mes petits pandas, il va falloir vous y habituer : La fête est finie :)

A dire vrai, Echofon, Tweetdeck et consorts n’ont pas de soucis à se faire. S’ils sont intelligents ils devaient se douter que ça arriverait tôt ou tard. On ne lève pas 100 millions de dollars en laissant s’échapper 70 % de son trafic monétisable. Nous avons eu le problème de notre côté avec FML, la version anglaise de VDM, c’est pourquoi j’ai décidé d’en parler un peu aujourd’hui.

mss2.png

En effet, FMyLife est particulièrement populaire aux Etats-Unis comme vous le savez. Mais il l’est spécialement sur appareils mobiles, et a fortiori sur iPhone où nous comptabilisons près de la moitié de notre trafic global. C’est donc bien beau de paraître utopiste et de laisser tout le monde gagner de l’argent en faisant des applications payantes ou financées par la publicité, mais on ne pouvait pas se permettre d’en perdre pour que les autres en gagnent, à un moment on n’est pas Mère Térésa SARL.

C’est pourquoi en Décembre dernier nous étions passés sur une API fermée (cf. TechCrunch) où seulement les applications que nous choisissons ont un accès à notre contenu et à l’API en général. De cette manière nous avons sorti des clients officiels gratuits, financés par la publicité, tout comme le site Internet, et avons pu garder la main sur notre trafic et notre monétisation, tout en laissant libre cours aux développeurs la création d’applications non-concurrentes.

En conclusion, les applications Twitter existantes se devront d’innover et de créer de la valeur ajoutée au lieu de réinventer la roue du client Twitter.

9fs9.png

Ainsi je pense que dans les prochains mois, nous allons assister à l’ajout de nouvelles conditions dans l’API de Twitter. Elle ne deviendra sûrement jamais une API fermée, cependant l’apparition d’applications officielles (et de leur monétisation qui va avec, le marché de la publicité mobile étant très juteux) va couper l’herbe sous le pied aux applications qui n’auront aucune valeur ajoutée par rapport à l’application officielle.

Twitter pourra conserver son avance dans le monde des applications grâce à des fonctionnalités API utilisables uniquement par leurs applications officielles, ainsi que le fait de savoir d’avance les prochaines évolutions du service de microblogging et d’adapter leurs développements en conséquence (les comptes payants me viennent tout de suite à l’esprit).

Enfin, concernant Tweetie 2 for Mac (qui n’est pas concernée par le rachat, contrairement à ce qu’on peut lire sur le NY Times ou dans certains autres blogs — lisez le vrai communiqué), Loren Brichter nous annonce que le développement est toujours « en cours ». Je sens qu’on va avoir du mal à avoir une version non-bêta rapidement (cf. N’achetez pas Tweetie).

Faille SQL : LoL Guru, je LIKE.

Par Maxime, le 29 mars 2010.

Aujourd’hui a été annoncé en grandes pompes (…) le nouveau site du groupe PlayWeb, dirigé de main de maître par Romain Casolari (on sent que c’est le même, vu les sites), alias Chauffeur de Buzz, j’ai nommé LoL Guru. Le nom fait déjà frémir, cependant la description vaut le détour :

Bienvenue sur mon site, je suis LoL Guru ®, né le 21 décembre 1891, je suis considéré comme le Gourou du Divertissement !!! Je blogue, mets à jour ce site depuis le début du XXe siècle pour partager avec vous les news, photos, vidéos, sites Internet, jeux et coloriages en ligne, prochaines et dernières sorties de DVD, jeux vidéo, logiciels, applications, …

Amusez-vous bien LOL

Moi quand on me propose de m’amuser, je dis jamais non.

Mais… J’ai des loisirs un peu différents.

En tant que développeur, le backoffice d’un site si énorme m’intriguait. Je l’imaginais déjà rempli d’algorithmes, une interface à la Minority Report pour taper plus vite que son ombre, de l’autocompletion en AJAX en veux-tu en voilà…

akaa.png
Paie ta déception.

Ouais bon, on repassera. Je vous reprends encore quelques minutes de votre temps, mes petits pandas, pour vous expliquer comment j’en suis arrivé là.

Il ne faut pas très longtemps, même pour un con comme moi, pour trouver l’adresse de l’administration du site. En effet, un aller simple sur http://fr.lolguru.com/admin/connexion.asp nous laissait apparaître un joli formulaire d’identification.

Ayant peu d’espoir mais ne pouvant repartir sans avoir testé, je me lance et écris une apostrophe comme identifiant, ainsi qu’en mot de passe. Je m’attendais à me faire rejeter bien comme il faut, avec une alerte automatique au GIGN. Quand je vois simplement l’erreur suivante :

[Microsoft][Pilote ODBC Microsoft Access] Erreur de syntaxe dans la chaîne dans l’expression "login like ’’’ and password like ’’’".

Je n’ai donc pas pu accéder à l’administration du site. Cependant deux points m’intriguent :

  • L’utilisation de la syntaxe SQL LIKE pour l’identification autorise le wildcard %. Très dangereux pour un système d’identification.
  • Mes apostrophes n’ont en plus pas été échappées par un antislash, ce qui a provoqué l’erreur SQL. Très très dangereux…

L’idée de mettre le wildcard % comme identifiant ainsi que mot de passe rendrait donc la requête SQL suivante : login like ‘%’ and password like ‘%’, ce qui sélectionnerait donc n’importe quel identifiant stocké dans la base. Et effectivement, j’ai été identifié comme administrateur (voir capture d’écran ci-dessus).

axcv.png
Faut toujours deux preuves.

Ne cherchez plus à aller sur cette page, elle a été supprimée / renommée depuis. Encore mes talents de prestidigitateur.

Pour résumer, voici 4 erreurs à ne pas reproduire sur votre site :

  • Ne pas utiliser la syntaxe SQL LIKE en dehors de cas très particuliers (comme la recherche dans une table).
  • Ne pas afficher les erreurs SQL lorsque son site est en production (ou au moins, pas les requêtes complètes…).
  • Ne pas oublier d’échapper les données injectées dans une requêtes.
  • Eviter d’avoir un répertoire administration avec un nom évident si on n’est pas sûr de sa sécurité.

Si vous ne savez pas protéger correctement votre administration et que vous êtes sur Apache, vous pouvez tout aussi bien utiliser la méthode de la protection par .htaccess/.htpasswd.

Au-delà de cette faille, j’ai été surpris par l’austérité de ce backoffice. Rempli de cases austères tel un formulaire de l’administration pénitencière, avec des couleurs hasardeuses et des fautes d’orthographe, ça ne donne pas vraiment envie de travailler et produire du contenu.

Et vous, est-ce que l’administration de votre blog/site est agréable ? Est-ce que ça a de l’importance pour vous ?

L’infrastructure VDM : Memcache

Par Maxime, le 17 mars 2010.

La semaine dernière, je vous annonçais la création d’une suite d’articles concernant l’infrastructure de VDM. J’ai commencé en présentant mes serveurs MySQL. Récapitulatif :

betacie_network.png
L’infrastructure que j’ai montée pour VDM/FML

Dans cette série de billets (normalement trois en comptant celui là), je vais vous raconter ce qui se passe derrière les URL viedemerde.fr et fmylife.com, qui représentent 98% du trafic de l’infrastructure d’hébergement de ma société, Beta&Cie. Ces articles n’ont pas pour vocation de me vanter ou de dire au monde entier que ma solution est la meilleure, c’est juste ma solution et elle marche bien jusqu’à maintenant.

Aujourd’hui, parlons de Memcache.

Présentation de memcached

Comme nous l’avons vu la semaine dernière, les serveurs de données sont bien remplis en données diverses et variées, que ce soit des votes, des anecdotes, les informations de connexion. Beaucoup de données, dont une partie est redondante. Mais pas la totalité de la page puisque chaque anecdote est votée, impossible donc de cacher toute la page.

Un serveur memcached (d pour daemon) est un serveur léger qui permet de stocker temporairement des données en RAM. Si léger qu’il ne dispose d’aucun système d’identification pour accéder ou modifier ces données, donc faites bien attention à ne faire écouter le serveur qu’en local si vous installez un jour une telle solution pour votre serveur.

Son utilisation sur VDM

La technologie memcached permet donc de stocker n’importe quel type de données. Il sert souvent par exemple sur des clusters de serveurs Web pour centraliser les sessions PHP. On peut donc facilement en tirer profit pour mettre en cache plusieurs informations du site, et ainsi soulager de manière significative les serveurs MySQL.

memcache.png
One server to rule them all.

La problématique est maintenant la mise en place de cette solution sur le code PHP existant de VDM. PHP possède une extension Memcache qui permet d’implémenter facilement une solution de cache.

La solution que j’ai retenue est résumée dans le code suivant. Les requêtes SQL sont transformées en hash MD5 pour le nom de la clé, et l’objet du résultat de la requête est stockée en cache, avec un cache par défaut d’une heure (3600 secondes). De cette manière, si la clé n’existe pas sur le serveur memcached, la requête est automatiquement exécutée et le résultat stocké.

<?php

$memcache = new Memcache();
$memcache->pconnect("127.0.0.1","9000");

function mcache($query,$timeout=3600,$force=false) {

	global $memcache;

	$hash = md5($query);

	if (!$force) {

		$value = $memcache->get($hash);

	}

	if ($force || $value === FALSE) {

		$result = mysql_query($query);
		$value = mysql_fetch_object($result);
		$memcache->set($hash,$value,NULL,$timeout);

	}

	return $value;

}

function mcache_set($query,$value,$timeout=3600) {

	global $memcache;

	$hash = md5($query);

	$value = $memcache->set($hash,$value,NULL,$timeout);

	return $value;

}

function mcache_delete($query) {

	global $memcache;

	$hash = md5($query);
	$value = $memcache->delete($hash);

	return $value;

}

?>

Grâce à ces fonctions nous avons conservé toutes nos requêtes, et pouvons utiliser de manière transparente soit Memcache soit MySQL. Plus pratique pour pouvoir synchroniser rapidement les données entre les deux serveurs, en plus d’avoir facilité la migration vers Memcache.

Exemple d’utilisation :

<?php

/* Je suis un nul alors je mets pas de mot de passe en root */
mysql_connect("localhost","root","");
mysql_select_db("base");

/* La requête MySQL normale sans cache */
$result = mysql_query("SELECT texte FROM articles WHERE id = '1337' LIMIT 1");
$row = mysql_fetch_object($result);

/* La requête avec le cache Memcache */
$row = mcache("SELECT texte FROM articles WHERE id = '1337' LIMIT 1");

?>

Grâce aux fonctions mcache() et consorts, on peut donc sans trop de difficultés alléger le travail des serveurs de bases de données. Si vous avez besoin de mettre en cache un tableau de résultats, vous pouvez utiliser la fonction suivante :

<?php

function mcache_array($query,$timeout=3600,$force=false) {

	global $memcache;

	$hash = md5($query);

	if (!$force) {

		$value = $memcache->get($hash);

	}

	if ($force || $value === FALSE) {

		$memcache->delete($hash);

		$result = mysql_query($query);
		while ($row = mysql_fetch_object($result)) {
			$value[] = $row;
		}

		$memcache->set($hash,$value,NULL,$timeout);

	}

	if (!is_array($value)) $value = array();
	return $value;

}

?>

Ainsi, sur VDM et FML, nous mettons en cache principalement les données suivantes :

  • Les données « statiques » des anecdotes (texte, auteur, etc.)
  • Les totaux des votes sur les anecdotes (mis à jour à chaque vote sans appel à MySQL)
  • Les ID des dernières anecdotes lues par les utilisateurs, pour afficher les « NEW »
  • Certains rendus XML de l’API pour les applications mobiles

Au niveau des chiffres, voici des statistiques sur les 3 dernières semaines d’utilisation du serveur memcached :

  • 900 connexions simultanées en permanence
  • 90 000 connexions par jour
  • 14,4 Mo écrits par seconde (via 622 requêtes en moyenne)
  • 1,8 Go de données stockées en ce moment
  • 6,9 millions de données stockées en ce moment
  • 1,3 milliard de données stockées en tout

Comme d’habitude, n’hésitez pas à commenter pour plus d’informations, j’ai sûrement oublié beaucoup de choses. La semaine prochaine nous parlerons de serveurs Web.

PD.TC, le raccourcisseur du LOL

Par Maxime, le 15 mars 2010.

Peu de gens le savent, Beta&Cie faisait partie des premiers à créer un service de « raccourcisseur d’URL », en mauvais français. C’était en 2008 et il fonctionne toujours. Cependant aujourd’hui, 7 caractères c’est trop long. Il a fallu en trouver un autre.

2hgh.png

Laissez-moi vous présenter PD.TC, le raccourcisseur d’URL le plus LOL. Grâce à son acronyme équivoque, vos soirées Twitter n’en seront que plus gaies. Ô la joie de balancer à son prochain « C’est où que t’as trouvé machin ? PDTC ». Oui, c’est aujourd’hui à votre portée.

Mais pour bien l’utiliser au quotidien, quelle idée d’utiliser un simple formulaire ! Toi la star de Twitter, tu as besoin de l’intégrer directement dans les outils que tu utilises quotidiennement.

Voici trois tutoriaux qui couvriront toutes tes attentes pour utiliser PD.TC dans les meilleures conditions possibles, et ainsi diffuser l’esprit du LOL partout autour de toi.

Utiliser PD.TC avec n’importe quel client Twitter

Pour pouvoir utiliser mon service sur la plupart des clients Twitter Mac/Windows/Linux, mes petits pandas, il va falloir utiliser une méthode de sioux.

Sous Mac/Linux : Ouvrez une fenêtre de Terminal pour modifier le fichier hosts en tapant ces deux lignes :

echo '91.191.146.209 tinyurl.com' | sudo tee -a /etc/hosts

Sous Windows : Ajoutez la ligne 91.191.146.209 tinyurl.com dans votre fichier hosts, dont l’emplacement varie selon les versions. En général dans C:\Windows\system32\drivers\etc\hosts.

De cette manière, toutes les URL TinyURL passeront par mes serveurs qui simuleront son comportement. En contrepartie vous ne pourrez plus raccourcir d’URL sur TinyURL (en même temps le site est tout moche, c’est pas une perte), mais les URL raccourcies de TinyURL marcheront toujours !

bq6d.png

Modifiez ensuite dans votre client Twitter votre URL Shortening Service en indiquant TinyURL, et vous pourrez utiliser PD.TC facilement et rapidement.

q8vr.png

Je pense que la technique marche à peu près avec n’importe quel client Twitter, à partir du moment que vous modifiez le fichier hosts et que vous pouvez sélectionner TinyURL dans votre client, tout roule.

Utiliser PD.TC avec Tweetie iPhone

Tweetie 2 pour iPhone intègre nativement la possibilité d’avoir son propre raccourcisseur d’URL. Il suffit donc d’aller dans les réglages « URL shortening » de Tweetie :

IMG_0620.PNG
Settings > Services > URL Shortening > Custom…

Et entrez l’URL suivante pour utiliser PD.TC automatiquement :

http://pd.tc/?api=1&url=%@

Utiliser PD.TC avec PHP

Vous pouvez utiliser PD.TC dans tous vos scripts et applications. Voici un simple exemple en PHP, que vous pourrez adapter à à peu près tous les langages de programmation existants :

<?php

/* Appel de pd.tc avec l'URL qu'on veut raccourcir */

$url = "http://www.google.fr";
$pdtc = file_get_contents("http://pd.tc/?api=1&url=".urlencode($url));

/* Retournera : string(17) "http://pd.tc/0236" */

var_dump($pdtc);

?>

A noter que j’enregistre tous les accès aux URL, donc si le service est utilisé je ferai peut-être des classements & consorts, mais pour le moment c’est surtout pour le fun du nom de domaine que j’ai créé ce service, et ça restera pour le fun :)