Commencez à construire votre blog avec Parse.js Travailler avec des données

La dernière fois, vous avez configuré un serveur local (XAMPP), un serveur Web (page GitHub) et un serveur de base de données (Parse.com). Vous avez également amorcé le code HTML d'une page de blog et incorporé le code de base Parse.js pour créer un lien vers la base de données. Dans cette session, je vais vous apprendre à créer, récupérer et restituer votre premier objet..

Si vous pouvez supporter d'utiliser Parse.com comme panneau d'administration, vous pouvez facilement créer des portefeuilles, des blogs, des pages de destination, etc. après avoir appris cette session..

Le concept de classe et d'instance

Avant de plonger dans la base de code et de le réaliser, laissez-moi m'assurer que vous êtes familiarisé avec les classes et les instances. Encore une fois, n'hésitez pas à sauter cette partie si vous connaissez ces concepts.

Selon Wikipedia:

Une classe est "un modèle de code de programme extensible permettant de créer des objets, fournissant les valeurs initiales pour l'état (variables membres) et les implémentations de comportement (fonctions membres, méthodes);" et "lorsqu'un objet est créé par un constructeur de la classe, l'objet résultant est appelé une instance de la classe. "  

Si ces définitions sont trop abstraites pour vous, plaçons-les dans le contexte d'un blog. 

Un cours de blog

Pensez aux composants communs de tous les blogs. Ils ont probablement chacun un titre, un auteur, une page de contenu, une heure à laquelle ils ont été créés, etc. Ces attributs partagés constitueront un modèle commun à tous les blogs que nous avons, ainsi à la classe Blog:

Une instance de blog

Et quand on a le Blog classe, chaque blog spécifique qui correspond à ce modèle serait une instance de la Blog classe:

Pour aider à identifier quand nous faisons référence à la Blog classe et lorsque nous faisons référence à un blog spécifique, nous mettons toujours en majuscule la première lettre d’une classe. Donc, "Blog" pour la classe de blog et "blog" pour une instance de blog. Cette règle s'applique à la fois à cet article du tutoriel et au code JavaScript que vous allez écrire..

En outre, vous remarquerez que sur Parse.com, vous verriez beaucoup le mot "objet". Dans ce contexte, nous allons utiliser la règle de capitalisation et utiliser les mots "objet" par exemple et "objet" pour classe. Vous allez bientôt vous habituer à ça.

Une table de blog

Puisqu'une classe définit tous les attributs de ses instances, il est facile de stocker toutes les instances d'une classe donnée dans une table: chaque attribut serait une colonne et chaque instance serait une ligne:

Et c'est exactement comment vous allez stocker des données sur Parse.com

Créer une classe de blog

Maintenant allons-y et créons-le sur Parse.com.

Étape 1: Ajouter une classe de blog

Tout d’abord, accédez à votre tableau de bord sur Parse.com, recherchez votre projet et sélectionnez "Core" - "Data" (anciennement Data Browser). Ensuite, cliquez sur "Ajouter une classe".

Comme vous pouvez le voir sur la capture d'écran, vous devez créer une classe personnalisée pour vos blogs. Nommons-le Blog. Vous voulez toujours que les noms de vos classes soient parfaitement clairs et indiquent ce qu'ils stockent.

Et comme vous pouvez le constater, vous avez maintenant une classe personnalisée vide sur Parse.com:

Chaque classe personnalisée aurait quatre attributs système:

• objectId - un identifiant unique généré automatiquement par Parse lors de la création d'un nouvel objet. De cette façon, le programme sait toujours à quel objet vous vous référez. (Comme vous pouvez le constater, objet signifie simplement instance.)
• créé à - un horodatage généré automatiquement par Parse lors de la création d'un objet.
• updatedAt - un horodatage généré automatiquement et mis à jour par Parse chaque fois que vous mettez à jour cet objet.
• ACL - liste de contrôle d'accès au niveau de l'objet qui définit qui peut lire et écrire sur cet objet. S'il n'est pas défini, le contrôle d'accès au niveau de la classe est utilisé par défaut. Nous en discuterons lors des prochaines sessions. Vous pouvez simplement le laisser vide pour l'instant.

Étape 2: Ajouter des colonnes à la classe de blog

Passons maintenant à la création de colonnes pour les attributs qui définissent un blog. Pour que ce soit aussi simple que possible, prenons-en deux: Titre et contenu.

Cliquez sur le bouton "+ Col" pour créer une nouvelle colonne. Définissez le type sur "String" et nommez-le. Titre.

Répétez le même processus et créez un contenu colonne, définissez également le type sur "Chaîne".

Étape 3: Ajouter des blogs

Il est temps d'ajouter des blogs! Clique sur le "+ Rangée"bouton et double-cliquez sur le titre et les cellules de contenu pour ajouter du contenu:

Notez que vous pouvez également définir la syntaxe HTML dans la colonne de contenu. En fait, toutes les colonnes de chaîne peuvent correctement stocker la syntaxe HTML. Cependant, rappelez-vous de ne pas trop l'utiliser. Dans ce cas, la colonne de titre ne devrait probablement pas contenir de syntaxe HTML.

Comme je l'ai déjà mentionné, étant donné que Parse.com vous permet de manipuler votre base de données de cette manière, vous pouvez l'utiliser totalement comme panneau d'administration si vous ne souhaitez pas écrire le vôtre. Et une fois que vous avez appris comment restituer ces données sur votre site Web, vous pouvez facilement créer votre propre blog ou portefeuille dynamique. Passons à la partie suivante, je vais vous montrer comment faire..

Récupérer les données du blog

Retournez à votre blog.js fichier. Il est temps d'extraire le code de test et de transférer les données de blog de Parse.com sur votre site Web.!

Tout d'abord, étendez une classe JavaScript à partir de la classe Blog sur Parse.com:

var Blog = Parse.Object.extend ("Blog");

En pensant à la page d'accueil d'un blog, vous souhaiterez probablement obtenir une liste de blogs à la fois. Cette liste d'objets de la même classe s'appelle une collection par Parse. Définissons également que:

var Blogs = Parse.Collection.extend (modèle: Blog);

Notez que les deux Blog et Les blogs sont des classes. Ce sont les modèles abstraits pour les blogs et les collations de blogs. Vous pouvez avoir différents blogs spécifiques et collections de blogs. Ce sont leurs instances.

Alors maintenant, pour avoir une vraie collection de tous les blogs que vous avez ajoutés sur Parse.com, vous devez créer une nouvelle instance de la collection Blogs (notez que la première lettre ne doit pas être mise en majuscule ici):

var blogs = nouveaux blogs ();

Si nous ne spécifions rien et récupérons simplement cette nouvelle collection avec des données, toutes les lignes du fichier Blog table par défaut.

Allons chercher et connectons-le à la console:

blogs.fetch (succès: fonction (blogs) console.log (blogs);, erreur: fonction (blogs, erreur) console.log (erreur););

Chargez à nouveau le site Web sur votre serveur local et vérifiez votre console dans vos outils de développement. Vous devriez pouvoir voir ceci:

Maintenant vous avez les données!

Afficher les données sur la page

Avant d’afficher les données du blog sur la page, nous devons préparer un modèle HTML pour cela..

Étape 1: nettoyer le code HTML

Tout nettoyer dans .blog-main et remplacez-le par un simple conteneur:

Ensuite, si vous jetez un oeil au modèle de blog original, vous découvrirez que la structure HTML d'un article peut être simplifiée comme ceci:

 
Un titre
 
À la fois par un auteur
 
Du contenu
 

Tout ce que nous voulons, c'est remplacer le texte de ces espaces réservés par les données de chaque blog que nous avons sur Parse.com..

Étape 2: préparer un modèle de blog

Pour ce faire, nous devons d’abord modifier le code HTML en un modèle, qui prend un objet de données et le modifie en chaîne HTML..

Nous voulons que le modèle prenne un tableau de blogs:

[titre: 'Hello World', contenu: 'Le premier article de blog!' , title: 'Second Blog', contenu: '
Vous pouvez aussi mettre du HTML dans le contenu.
',…]

Et le rendre en HTML comme ceci:

 
Bonjour le monde
 
À la fois par un auteur
 
Le premier article de blog!
 
 
 
Deuxième blog
 
À la fois par un auteur
 
Vous pouvez aussi mettre du HTML dans le contenu.
 

Je vais vous montrer comment utiliser handlebars.js pour le faire dans ce tutoriel, mais vous pouvez également utiliser underscore.js, moustache ou tout autre modèle que vous préférez..

Pour utiliser handlebars.js, ajoutons-le d'abord à la index.html sous parse.js:

Ensuite, prenons le code HTML nettoyé d’un seul article de blog et mettons-le dans un

Ensuite, pour que les guidons sachent où placer le titre et la valeur du contenu, vous devez remplacer "A title" par Titre et "Du contenu" pour contenu. Handlebars.js identifie le contenu entre "double stash"  comme variables. 


Notez que pour le contenu, nous utilisons  au lieu de juste . C'est parce que handlebars.js HTML-échappe aux valeurs par défaut. Utilisation du "triple stash"  conserve toute la syntaxe HTML dans le contenu.


Le dernier changement que vous devez apporter à la # blogs-tpl est d'envelopper le modèle de blog dans #each blog / each, il faut donc un tableau d'objets et les afficher un par un:


Étape 3: rendu des blogs

Maintenant que nous avons un modèle, revenons à blog.js et rendre ces blogs sur la page. 

Pour ce faire, vous allez créer une vue pour la collection de blogs. Le concept de vue provient du modèle architectural MVC (modèle-vue-contrôleur), et Parse suit ce modèle. Je ne vais pas plonger dans MVC ici. Sachez simplement qu'une instance de vue pour une collection de blogs génère du code HTML et gère tous ses événements. Et une classe View est le modèle abstrait pour cette instance.

Cela peut être déroutant pour le moment, mais ce serait plus clair au fur et à mesure que nous écrivons le code. Ecrivons un BlogsView classe:

var BlogsView = Parse.View.extend (template: Handlebars.compile ($ ('# blogs-tpl'). html ()), rendu: function () var collection = blog: this.collection.toJSON () ; this. $ el.html (this.template (collection)););

Comme nous avons étendu Blog classe de Parse.Object et Les blogs classe de Parse.Collection, vous pouvez simplement étendre une nouvelle classe View à partir de Parse.View il a donc toutes les valeurs et fonctions prédéfinies de Parse.

Ici le modèle variable obtenir le modèle que nous avons préparé auparavant. Puis le rendre() fonction obtenir les données dans cette.collection, convertissez-le au format JSON, rendez-le avec le modèle de guidon et affectez-le à ceci. $ el.

Ensuite, changeons le Succès rappel de blogs.fetch () pour créer une nouvelle instance de BlogsView, restituer cette nouvelle instance et la placer dans le dossier $ ('. main-container') sur la page.

succès: fonction (blogs) var blogsView = new BlogsView (collection: blogs); blogsView.render (); $ ('. main-container'). html (blogsView.el); 

Notez que lorsque vous créez une nouvelle instance de BlogsView, vous transmettez blogs, les données de blogs que vous obtenez du serveur Parse, cette valeur devient cette.collection pour le rendre() une fonction. Et quand vous mettez le HTML dans $ ('. main-container'), vous utilisez la valeur de blogsView.el, qui était le contenu de ceci. $ el, créé par le rendre() une fonction. (Ici blogsView. $ el = $ (blogsView.el)) C'est comme ça que la classe View et l'instance de vue fonctionnent.


Maintenant, actualisons la page: http: // localhost / blog /

Et ça marche! Maintenant, vous pouvez simplement le pousser sur votre page GitHub et créer un site de contenu dynamique! Si vous prenez le temps de changer le modèle de blog et le code un peu, vous pouvez facilement créer des portefeuilles et d’autres sites Web de contenu..

Conclusion

Aujourd'hui, vous avez créé votre premier cours sur Parse.com. Vous avez également appris à ajouter du contenu dans cette classe sur Parse.com et à le rendre sur votre site Web. Il pourrait y avoir pas mal de nouveaux concepts pour vous, mais je suis sûr que vous les connaîtrez très bientôt.

Lors de la prochaine session, nous commencerons à créer la page d’administration du système de blogs. Vous allez créer votre deuxième classe - la classe User. Vous apprendrez également à gérer la connexion de l'utilisateur et à créer deux nouvelles vues: la vue de connexion et la vue de bienvenue. Alors restez à l'écoute, de nombreuses compétences vous attendent.

Je pense que vous pourriez bien vous amuser avec ce que vous avez appris au cours de cette session. Faites-moi savoir si ce tutoriel vous a aidé à créer quoi que ce soit. Et comme toujours, vérifiez le fichier source si vous êtes bloqué et laissez un commentaire si vous rencontrez des difficultés à la suite.

Code