Минулого разу ми встановити локальний сервер (XAMPP), веб-сервер (GitHub Pages) і сервер БД (Parse.com). Також, ми маємо HTML сторінки блогу і вбудований базовий Parse.js код для підключення до бази даних. У цьому уроці, ми навчимося створювати, отримувати і рендерити ваш перший об'єкт.

Поняття класу і екземпляру

Перш ніж ми заглибимося в код, щоб зробити все заплановане, потрібно переконатися, що ви знайомі з класами та екземплярами класу. Знову ж таки, не соромтеся пропустити цю частину, якщо ви знайомі з цими поняттями.

Згідно Вікіпедії:

Клас — це спеціальна конструкція об'єктно-орієнованої мови програмування, що використовується для групування пов'язаних змінних та функцій. При цьому згідно з термінологією ООП глобальні змінні класу (члени-змінні) називаються полями даних (також властивостями або атрибутами), а члени-функції називають методами класу. Створений та ініціалізований екземпляр класу називають об'єктом класу. На основі одного класу, можна створити безліч об'єктів, що відрізнятимуться один від одного своїм станом (значеннями полів).

Якщо ці визначення є занадто абстрактними для вас, давайте розглянемо їх у контексті блогу.

Клас Блогу

Подумайте про загальні компоненти всіх блогів. Назва, автор, сторінка, зміст, час створення запису та ін. Ці загальні атрибути будуть утворювати загальний шаблон для всіх блогів, клас блогу:

Екземпляр Блогу

Коли ми маємо клас блогу, кожен конкретний блог, що підходить під цей шаблон буде екземпляром його класу:

Щоб розуміти, коли ми маємо на увазі клас Blog, а коли - конкретний блог, ми завжди вказуємо клас з великої букви. "Блог" для класу блог і "блог" для екземпляру блогу. Це правило поширюється як на цей урок, так і на JavaScript код, що ви будете писати потім.

Також, ви помітите, що на Parse.com ви будете бачити слово "об'єкт" доволі часто. У цьому контексті ми будемо використовувати правила капіталізації і використовувати слово "об'єкт" для екземпляру і "Об'єкт" для класу. Незабаром ви звикнете до цього.

Таблиця Блогу

Клас визначає всі атрибути його екземплярів. Всі екземпляри цього класу легко зберігати в одній зведеній таблиці: кожен атрибут повинен бути стовпцем, а кожен екземпляр - рядком:

І саме так ми збираємося зберігати дані на Parse.com

Створення класу Блог

Тепер давайте підемо далі і створимо блог на Parse.com.

Крок 1: Додати клас Блог

По-перше, зайдіть на Parse.com, знайдіть ваш проект і зайдіть в "Core" - "Data" (раніше Data Browser). Потім натисніть кнопку "Add Class".

Як ви можете бачити на скріншоті, необхідно створити спеціальний клас для ваших блогів. Назвемо його Blog. Завжди намагайтесь, щоб імена ваших класів відображали своє призначення.

І як ви можете бачити, тепер у нас є порожній клас на Parse.com:

Кожен користувальницький клас буде мати чотири системних атрибути:

objectId - унікальний ідентифікатор, автоматично згенерований Parse, коли створюється новий об'єкт. Таким чином, програма завжди знає, який об'єкт ви маєте на увазі. (Як ви можете бачити, тут об'єкт означає екземпляр).

createdAt - часова мітка, автоматично згенерована Parse при першому створенні об'єкта.

updatedAt - часова мітка, яка автоматично створюється і оновлюється Parse при кожному оновленні об'єкта.

ACL - об'єкт-рівень списку контролю доступу, який визначає, хто може читати і записувати в об'єкт. Якщо не визначено, то використовується клас-рівень контролю доступу за замовчуванням. Про нього ми поговоримо в наступного разу. Ви можете залишити його порожнім зараз.

Крок 2: Додавання стовпців в класу блогу

Давайте рухатися далі. Створимо стовпці для атрибутів, який визначають блог. Для простоти, створимо лише два: заголовок і зміст.

Натисніть на кнопку "+ Col", щоб створити новий стовпець. Встановіть тип "рядок" і вкажіть його назву - заголовок.

Повторіть той же процес,створіть колонку для змісту, тип "рядок".

Крок 3: Додавання деяких блогів

Час додати деякі блоги! Натисніть на "+ Row" кнопку і двічі клацніть на клітинки назви і вмісту, щоб додати деякі матеріали:

Зверніть увагу, що ви також можете помістити HTML-синтаксис у стовпець вмісту. Насправді, всі стовпці-рядки можуть правильно зберігати HTML. Однак, пам'ятайте, що не потрібно перебільшувати з його використанням. В даному випадку, стовпець "title", ймовірно, не повинен містити HTML.

Як я згадував раніше, Parse.com дозволяє вам керувати вашою базою даних, використовуючи лише адмін-панель, якщо ви не хочете писати власну. І як тільки ви навчитеся візуалізувати дані на вашому сайті, ви зможете легко створити динамічний блог або ваше власне портфоліо. У наступній частини я покажу вам, як це зробити.

Вилучення даних Блогу

Поверніться до вашого файлу blog.js. Прийшов час скористатись тестовим кодом і отримати дані з блогу на Parse.com на ваш сайт!

По-перше, додайте JavaScript клас з класу Blog на Parse.com:

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

Думаючи про головну сторінку блогу, ви, напевно, хочете відразу отримати список блогів. Перелік об'єктів одного класу називається колекцією. Давайте це визначимо:

var Blogs = Parse.Collection.extend({
    model: Blog
});

Зверніть увагу, що Blog і Blogs є класами. Вони є абстрактними шаблонами для блогів і колекцій блогів. Ви можете мати різні конкретні блоги і колекції блогів. Це їх екземпляри.

Отже, тепер для того, щоб мати реальну сукупність усіх блогів доданих на Parse.com, необхідно створити новий екземпляр колекції Blogs (зверніть увагу, що перша буква не повинна бути капіталізованою):

var blogs = new Blogs();

Якщо нічого не вказати і просто виконати запит на отримання нової колекції з даними, він буде за замовчуванням отримувати всі рядки у таблиці Blog.

Давайте отримаємо дані і виведемо інформацію в консоль:

blogs.fetch({
    success: function(blogs) {
        console.log(blogs);
    },
    error: function(blogs, error) {
        console.log(error);
    }
});

Завантажте сайт на локальному сервері ще раз, і перевірте вашу консоль в інструментах для розробників, ви повинні бачити наступне:

Ви отримали дані!

Відображення даних на сторінці

Перш ніж рендерити дані блогу на сторінці, нам необхідно підготувати HTML шаблон.

Крок 1: Очищення HTML

Очистити все всередині .blog-main і додайте простий контейнер:

<div class="col-sm-8 blog-main">
    <div class="main-container"></div>
</div>

Потім, якщо ви подивитеся на оригінал шаблону блогу, ви побачите HTML-код, структуру посту можна спростити так:

<div class="blog-post">
    <h2 class="blog-post-title"><a href="#">A title</a></h2>
    <p class="blog-post-meta">At time by an author</p>
    <div>Some content</div>
</div>

Все, що ми хочемо, це замінити текст-заповнювач на дані кожного блогу на Parse.com.

Крок 2: Підготовка Шаблону Блогу

Щоб зробити це, ми спочатку повинні змінити HTML-шаблон, який бере дані об'єкта і змінює їх на рядок HTML.

Ми хочемо, щоб шаблон приймав масив блогів:

[{
    title: 'Hello World',
    content: 'The first blog post!'
}, {
    title: 'Second Blog',
    content: '<p>You can put HTML in content, too.</p>'
}, ...]

І рендерив його як цей HTML:

<div class="blog-post">
    <h2 class="blog-post-title"><a href="#">Hello World</a></h2>
    <p class="blog-post-meta">At time by an author</p>
    <div>The first blog post!</div>
</div>
<div class="blog-post">
    <h2 class="blog-post-title"><a href="#">Second Blog</a></h2>
    <p class="blog-post-meta">At time by an author</p>
    <div><p>You can put HTML in content, too.</p></div>
</div>

Я покажу вам, як використовувати handlebars.js для цього, але ви також можете використовувати underscore.js, mustache, або інші шаблони, яким ви віддаєте перевагу.

Для того, щоб використовувати handlebars.js давайте спочатку додамо його в index.html під parse.js:

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>

Тепер, давайте візьмемо чистий HTML одного блогу і помістимо його в спеціальний тег <script>. Давайте також дамо йому id #blogs-tpl. Таким чином, handlebars буде знати, що це шаблон, а ви матиме можливість звернутися до нього:

<script id="blogs-tpl" type="text/x-handlebars-template">
    <div class="blog-post">
        <h2 class="blog-post-title"><a href="#">A title</a></h2>
        <p class="blog-post-meta">At time by an author</p>
        <div>Some content</div>
    </div>
</script>

Далі, щоб дати зрозуміти handlebars куди підставити назву і зміст, необхідно змінити "title" на {{title}} і "Some content" на {{{content}}}. Handlebars.js визначає вміст у межах "{{}}" в якості змінних.

<script id="blogs-tpl" type="text/x-handlebars-template">
    <div class="blog-post">
        <h2 class="blog-post-title"><a href="#">{{title}}</a></h2>
        <p class="blog-post-meta">At time by an author</p>
        <div>{{{content}}}</div>
    </div>
</script>

Зверніть увагу, що для контенту, ми використовуємо {{{}}} замість {{}}.

Остаточні зміни, які необхідно внести в #blogs-tpl - це обгорнути шаблон блогу в {{#each blog}} {{/each}}:

<script id="blogs-tpl" type="text/x-handlebars-template">
    {{#each blog}}
    <div class="blog-post">
        <h2 class="blog-post-title"><a href="#">{{title}}</a></h2>
        <p class="blog-post-meta">At time by an author</p>
        <div>{{{content}}}</div>
    </div>
    {{/each}}
</script>

Крок 3: Рендер (візуалізація) Блогів

Тепер, коли у нас у нас є шаблон, давайте повернемося до blog.js і відобразимо блоги, на сторінці.

Щоб зробити це, ми будемо створювати view блогу колекції. Екземпляр view для колекції блогів створює HTML-код і обробляє всі його події. Клас View - це абстрактний шаблон цього екземпляра.

Все це може виглядати заплутано, щоб було б зрозуміліше, давайте напишемо код. Напишемо клас BlogsView:

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

Подібно тому, як ми отримували клас Blog з Parse.Object і клас Blogs з Parse.Collection, ви можете отримати новий клас View з Parse.View, він має всі визначені значення та функції Parse.

Тут, змінна template отримує шаблон, який ми підготували раніше. Потім, функція render() отримує дані в this.collection, перетворює їх у формат JSON, відображає їх з допомогою шаблону handlebars і передає this.$el.

Далі, давайте змінимо success зворотнього виклику blogs.fetch (), щоб створити новий екземпляр BlogsView. Відобразимо новий екземпляр і додамо його в $('.main-container') на сторінку.

success: function(blogs) {
    var blogsView = new BlogsView({ collection: blogs });
    blogsView.render();
    $('.main-container').html(blogsView.el);
}

Зверніть увагу, коли ви створюєте новий екземпляр BlogsView, ви передаєте в blogs, дані блогів, які ви отримуєте від сервера Parse, значення this.collection для функції render (). І коли ви передаєте HTML в $('.main-container'), ви використовуєте значення blogsView.el , яке було контентом .$el, створеним за допомогою функції render (). (Тут blogsView.$el = $(blogsView.el)). Ось як клас View і його екземпляр працюють.

Тепер давайте оновимо сторінку: http://localhost/blog/

Все працює! Тепер ви можете завантажити все це на GitHub і працювати з динамічним вмістом сайту! Якщо ви витратите деякий час та зміните шаблон блогу і змінити код, ви з легкістю зможете створити портфоліо або інший веб-сайт.

Висновок

Сьогодні, ви створили свій перший клас Parse.com. Також ви дізналися, як додавати контент у цей клас на Parse.com і як відобразити його на вашому сайті. Так, ви зустріли багато нових понять, але я впевнений, що ви зможете розібратися з ними дуже скоро.

В наступний раз, ми почнемо створювати admin-сторінку для системи блогу. Ви створите свій другий клас - клас User. Ви також дізнаєтеся, як обробляти авторизацію користувача, і створите два нових View: login view і welcome view. Так що слідкуйте за оновленнями, далі ще більше цікавого та корисного!