Ce que vous allez créer

Avez-vous déjà été enthousiasmé par l’idée d’un projet Web, mais avez-vous trouvé cela misérable de le faire fonctionner et de fonctionner sur un serveur? Avec Parse.js, tous ceux qui comprennent les bases du HTML, du CSS et de JavaScript peuvent créer facilement des sites Web dynamiques et des applications Web fonctionnelles.. 

Dans ce tutoriel, je vais vous guider tout au long du processus de création d'un système de blogging avec Parse.js à partir de zéro. Vous utiliserez tous les outils d'amorçage et vous pratiquerez vraiment l'idée de prototypage rapide, de refactoring et de framework MVC. À la fin de cette série, vous devriez pouvoir créer vous-même un site CMS..

Bien que nous essayions d'être aussi détaillé que possible, ce tutoriel suppose des connaissances de base en HTML, CSS, JavaScript / jQuery et GitHub. Si vous n'êtes pas familier avec les outils mentionnés ci-dessus, vous trouverez de nombreux excellents tutoriels ici sur Tuts +..

Configurer l'environnement de développement

Commençons par configurer notre environnement de développement. Vous aurez besoin d'un serveur de test local, d'un serveur Web, d'un serveur de données et d'un contrôle de version en place. Comme mentionné précédemment, ce tutoriel ne nécessite aucune connaissance préalable du backend. Je vais vous guider étape par étape. Ne hésitez pas à sauter cette partie si vous avez déjà ceux en place.

Étape 1: Installez XAMPP

Après avoir essayé plusieurs solutions différentes, XAMPP reste le moyen le plus simple de configurer un serveur de test local que j'ai trouvé. Par conséquent, j'utiliserai XAMPP comme serveur de test local dans ce tutoriel..

Si ce n'est déjà fait, commencez par télécharger XAMPP ici. Choisissez celui qui convient à votre système et installez-le.

J'utilise Mac ici, donc je vais utiliser cela comme exemple à partir de maintenant. Si vous utilisez un autre système d'exploitation, le processus devrait être assez similaire.

Après l’avoir installé, lancez XAMPP, et démarrez "Serveur Web Apache".

Maintenant, si vous visitez http: // localhost / dans votre navigateur, vous devriez voir cette page XAMPP par défaut. Cela signifie qu'il est opérationnel!

Étape 2: Créer une nouvelle page GitHub

Passons à autre chose, créons un nouveau dépôt Git sur GitHub. je l'appelle Blog juste pour que ce soit court et clair pour moi. Pour que cela fonctionne en tant que serveur Web, nous devons le définir en tant que page GitHub..

Tout d'abord, ajoutez une nouvelle branche, gh-pages.

Ensuite, allez aux paramètres, définissez gh-pages comme branche par défaut.

Génial. Entrons maintenant dans les lignes de commande et clonons cette branche sur GitHub dans XAMPP htdocs dossier.

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

Naviguez dans le dossier Git Repo que vous venez de cloner, créez un index.html fichier, et juste écrire Bonjour le monde en cela.

$ cd blog $ echo 'Bonjour tout le monde'> index.html

Vérifiez votre localhost et assurez-vous qu'il fonctionne.

Génial. Alors passons à GitHub.

$ git add index.html $ git commit -am "Ajouter index.html" $ git push

Allez sur http://votreutilisateur.github.io/reponame, laissez-le quelques minutes et vous verrez votre index.html est maintenant en direct :)

Étape 3: Obtenez votre compte sur Parse.com

Il est très facile d'héberger du contenu statique sur GitHub Page, mais en ce qui concerne le backend, les choses peuvent devenir difficiles avec GitHub Page. Heureusement, nous avons maintenant Parse.js. Nous pouvons utiliser Parse.com comme serveur de données et communiquer avec lui en JavaScript. De cette façon, nous n'avons besoin que d'héberger des fichiers HTML, CSS et JavaScript sur GitHub..

Allez-y et inscrivez-vous sur Parse.com si vous ne l'avez pas déjà fait. 

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

Modèle HTML statique d'amorçage

Préparons maintenant une version statique du système de blog que nous allons créer. Pour vous montrer à quelle vitesse vous pouvez démarrer à travers cela, je vais simplement utiliser l'exemple de modèle de blog de Bootstrap. Encore une fois, si vous êtes déjà assez familier avec Bootstrap ou si vous avez déjà un site Web statique conçu, n'hésitez pas à le faire à votre façon. Si vous êtes nouveau sur Bootstrap, suivez.

Étape 1: Télécharger Bootstrap

Tout d’abord, téléchargez Bootstrap (nous utilisons actuellement la version 3.2.0 ici), décompressez-la et mettez son contenu dans votre ordinateur. XAMPP / xamppfiles / htdocs / blog dossier. 

Étape 2: Commencez avec le modèle de base de Bootstrap

Ensuite, éditez index.html avoir le gabarit de base 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 modèle comme celui-ci vous fera gagner beaucoup de temps.

              
Bonjour le monde!
      

Actualisez et assurez-vous que cela fonctionne.

Étape 3: Copiez le modèle de blog exemple sur

Passons maintenant à un exemple de blog ouvert à partir de Bootstrap: http://getbootstrap.com/examples/blog/

Sur la page Web, faites un clic droit et choisissez "Voir la source". Nous voulons copier tout le contenu de  à notre index.html et remplacer le 

Bonjour le monde!

dans le modèle de base.

Ne pas copier le

Étape 3: test du SDK d'analyse

Passer à autre chose, créer un blog.js sous votre blog / js dossier avec votre ID d’application et votre clé JavaScript, ainsi que du code de test. Ils se trouvent tous dans votre guide de démarrage rapide:

Sûr (Remplissez la fonction) ); var testObject = new TestObject (); testObject.save (foo: "bar"). then (fonction (objet) alert ("yay! ça a marché"););

Enregistrez-le et liez ce fichier JavaScript dans votre index.html, au dessous de bootstrap.min.js.

Maintenant, rafraîchissez index.html sur votre hôte local encore, et vous devriez pouvoir voir ce message d'alerte:

Cela signifie que vous êtes maintenant connecté à votre base de données de blogs dans le cloud :)

Si vous vérifiez votre "Navigateur de données"sur Parse.com maintenant, vous verrez le TestObject que vous venez de créer.

Conclusion

Aujourd'hui, nous avons configuré tous les serveurs dont nous avons besoin: XAMPP en tant que serveur de test local, GitHub Pages en tant que serveur Web et Parse.com en tant que serveur de données. Nous avons également un modèle de blog de base en place, qui est maintenant connecté à la base de données..

Lors de la prochaine session, je vais vous apprendre à ajouter des articles de blog à partir du navigateur de données de Parse, à les récupérer avec JavaScript et à les afficher au début..

Vérifiez le fichier source si vous êtes bloqué. Et s'il vous plaît laissez un commentaire si vous rencontrez des difficultés à suivre.

Code