Lancez la Création de Votre Blog Avec Parse.js

French (Français) translation by Willy Touomi (you can also view the original English article)

Final product image — What You'll Be Creating

Avez-vous déjà été excité par l'idée d'un projet web, pour ensuite vous trouver dans la misère au moment de le faire fonctionner et le mettre en ligne sur un serveur web? Avec Parse.js, toute personne qui comprend les bases du HTML, CSS et JavaScript peut facilement créer des sites dynamiques et des applications web qui fonctionnent bien.

Dans ce tutoriel, je vous conduirai à travers tout le processus de création d'un système de blog avec Parse.js, à partir de zéro. Vous utiliserez tous les outils de bootstrapping, mettrez véritablement en pratique le prototypage rapide, la refactorisation et le framework MVC. A la fin de cette série, vous serez capable de créer n'importe quel CMS par vous même.

Bien qu'il essaiera d'être aussi détaillé que possible, ce tutoriel considère que vous avez des connaissances de base en HTML, CSS, JavaScript / Jquery, et aussi sur l'utilisation GitHub. Si vous n'êtes pas familiarisé avec l'un des outils ci-dessus mentionnés, Tut+ regorge de nombreux tutoriels de qualité traitant de ces sujets. N'hésitez pas à les consulter.

Installation de l'environnement de développement

Commencons tout d'abord par mettre en place notre environnement de développement. Vous aurez besoin pour ce faire d'un serveur de test en local, d'un serveur web, d'un serveur de données, et d'un système de contrôle de version. Comme mentionné précédemment, le présent tutoriel ne requiert aucune connaissance à propos du backend. Je vous y conduirai pas à pas. Sentez vous libre de sauter cette partie si vous avez déjà ces outils en place.

Etape 1: Installation de XAMPP

Après avoir essayé diverses solutions, XAMPP demeure le moyen le plus facile que j'ai trouvé pour mettre en place un serveur de test local. Par conséquent, j'utiliserai XAMPP comme serveur de test local dans ce tutoriel.

Commencez donc par télécharger XAMPP si vous ne l'avez pas encore fait, choisissez la version qui correspond à votre système et installez la.

Puisque moi j'utilise un Mac, c'est donc lui que je prendrai en exemple dès maintenant. Si vous avez un système différent, le processus devrait être assez similaire.

Après avoir installé XAMPP, lancez le et démarrez "Apache Web Server".

XAMPP - Manage Servers - Start Apache Web Server

Dès lors, si vous visitez http://localhost/ dans votre navigateur, vous devriez voir cette page affichée par défaut par XAMPP. Ca signifie que tout est ok et fonctionne normalement.

Etape 2: Créer une nouvelle page GitHub

Pour avancer, créeons un nouveau dépôt git sur GitHub. Moi je le nomme blog afin qu'il soit court et sans abiguïté pour moi. Pour que notre dépôt git fonctionne comme un serveur web, nous devons le configurer en tant que Page GitHub.

Premièrement, ajoutez une nouvelle branche, gh-pages.

Ensuite, allez dans les paramètres et configurez gh-pages comme branche par défaut.

Bien. Passons maintenant en ligne de commandes, et clonons cette branche depuis GitHub vers le repertoire local htdocs de notre installation XAMPP.

1	$ cd /Applications/XAMPP/xamppfiles/htdocs
2	$ git clone https://votre-git-HTTPS-clone-URL-here

Naviguez dans le dépôt git que vous venez de cloner, et créez un simple fichier index.html. Ecrivez-y simplement Hello World.

1	$ cd blog
2	$ echo 'hello world' > index.html

Accédez à http://localhost pour être sûr que tout fonctionne bien.

Super. Mettons maintenant notre fichier sur GitHub.

1	$ git add index.html
2	$ git commit -am "Add index.html"
3	$ git push

Patientez quelques instants, puis allez à http://votreusername.github.io/nomdepot et vous constaterez que votre fichier index.html est désormais en ligne.

Etape 3: Créer votre compte sur Parse.com

Il est vraiment simple d'héberger du contenu statique à l'aide des pages GitHub; mais lorsqu'il s'agit du backend, les choses peuvent devenir compliquées avec une page GitHub. Heureusement, nous avons maintenant Parse.js. Nous pouvons utiliser Parse.com comme notre serveur de données et communiquer avec lui via JavaScript. De cette façon, nous avons juste besoin d'héberger les fichiers HTML, CSS et JavaScript sur GitHub.

Allez-y, inscrivez-vous sur Parse.com si ce n'est pas encore fait.

Voilà, vous avez votre serveur de données dans le cloud.

Template HTML Statique

Maintenant, préparons une version statique du système de blog que nous allons créer. Pour vous montrer comment vous pouvez démarrer rapidement, j'utiliserai le template d'exemple de blog de Bootstrap. Encore une fois, si vous êtes familier de Bootstrap, ou si vous avez déjà conçu un site web statique, sentez-vous libre de faire à votre manière. Mais si vous êtes nouveau sur Bootstrap, suivez-moi.

Etape 1: Télécharger Bootstrap

Tout d'abord, commencez par télécharger Bootstrap (dans ce tutoriel, nous utilisons la version 3.2.0), décompressez le, et mettez son contenu dans votre dossier local XAMPP/xamppfiles/htdocs/blog.

Etape 2: Commencez avec le template basique de Bootstrap

Editez maintenant index.html et mettez-y le code du template basique de Bootstrap. Il fournit une structure HTML de base, avec des liens vers bootstrap.min.css, bootstrap.min.js, et jquery.min.js. Commencer avec un template comme celui-ci vous fera économiser beaucoup de temps.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Rafraîchissez votre page en local et rassurez-vous que tout fonctionne.

Etape 3: Copier tout le template du blog d'exemple

Continuons. Ouvrez-maintenant l'exemple de blog fourni par Bootstrap http://getbootstrap.com/examples/blog/.

Sur cette page web, faites un clic droit et cliquez sur "voir la source". Nous souhaitons copier tout le contenu de <body> dans notre fichier index.html et remplacer le texte <h1>Hello, world!</h1> de notre template de base.

Ne copiez surtout pas les balises <script>, puisque nous avons déjà tout le javascript nécessaire.

Vous devez maintenant aller à la page suivante:

Etape 4: Copier le style du blog d'exemple vers index.html

Vous avez sûrement noté que les styles ne sont pas encore corrects. C'est parce que nous avons besoin du fichier blog.css, qui est la feuille de style spécifique au blog et qui surcharge les styles par défaut de Bootstrap.

En utilisant la méthode montrée précédemment, ouvrez le code source de votre page et trouvez la feuille de style http://getbootstrap.com/examples/blog/blog.css.

Copiez le fichier et enregistrez le dans votre dossier local blog/css.

Ajoutez-le dans votre fichier index.html, en-dessous de bootstrap.min.css:

1	<!-- Bootstrap -->
2	<link href="css/bootstrap.min.css" rel="stylesheet">
3	<link href="css/blog.css" rel="stylesheet">

A présent, les styles devraient être corrects. Notre template statique est fin prêt.

Mise en place et connection à la base de données de Parse

Afin que notre blog statique devienne dynamique, nous aurons besoin de configurer sa base de données sur Parse.com.

Etape 1: Créer une nouvelle application

Allez dans Parse.com dashboard, et cliquez sur "Create New App".

Pour l'instant, appelons notre application Blog.

Une fois qu'elle est créée, allez dans "Quickstart Guide - Data - Web - Existing project"

Etape 2: Ajouter Parse.js dans index.html

Suivez les instructions du guide de démarrage rapide (Quickstart Guide), et ajoutez Parse.js à votre fichier index.html, pour commencer. Mais plutôt que de le mettre dans la section <head>, mettez-le juste en dessous de JQuery:

1	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
3	<!-- Parse.js -->
4	<script src="//www.parsecdn.com/js/parse-1.2.19.min.js"></script>

Etape 3: Tester le SDK de Parse

Ensuite, créez un fichier blog.js dans votre dossier blog/js, dans lequel on mettra l'ID de votre application Parse, votre clé JavaScript et un peu de code. Toutes ces informations peuvent être trouvées dans le guide de démarrage rapide:

$(function() {

    Parse.$ = jQuery;

  // Remplacer la ligne ci-dessous avec celle fournie dans le guide de démarrage rapide
	Parse.initialize("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ");

	var TestObject = Parse.Object.extend("TestObject");
	var testObject = new TestObject();
	testObject.save({foo: "bar"}).then(function(object) {
	  alert("yay! it worked");
	});

});

Enregistrez, et ajoutez ce fichier dans index.html en-dessous de bootstrap.min.js.

1	<!-- Include all compiled plugins (below), or include individual files as needed -->
2	<script src="js/bootstrap.min.js"></script>
3	<script src="js/blog.js"></script>

Actualisez encore index.html sur votre serveur local, et vous devriez voir ce message d'erreur:

Cela signifique que vous êtes connecté avec succès à la base de données cloud de votre blog :)

Si vous vérifiez votre "Data Browser" sur Parse.com maintenant, vous verrez l'objet TestObject que vous venez de créer.

Conclusion

Aujourd'hui, nous avons mis en place tous les serveurs dont nous avions besoin: XAMPP comme serveur de test local, GitHub Pages comme notre serveur web, et Parse.com comme notre serveur de base de données. Nous avons également un template de blog statique qui est maintenant connecté à la base de données.

Dans la prochaine session, je vous montrerai comment ajouter des articles de blog depuis le navigateur de données de Parse, les récupérer avec JavaScript et les afficher sur votre blog.

N'hésitez pas à consulter le fichier source si vous êtes bloqué. Et, s'il vous plait, laissez un commentaire si vous avez du mal à suivre.