Створюємо власний блог з допомогою Parse.js, частина 1
Ви коли-небудь стикалися з ситуацією, коли ви маєте ідею для веб-ресурсу, але не знаєте як її можна реалізувати? З Parse.js кожен, хто осягнув ази HTML, CSS і JavaScript може створити динамічний веб-сайт або web-додаток з легкістю.
У цьому уроці розглянемо весь процес створення блогової системи з Parse.js " з нуля". Використаємо всі bootstrap інструменти, попрактикуємося в швидкому прототипуванні, рефакторингу і роботі з фреймворком MVC. ПРочитавши цю статтю, ви зможете створити будь-який CMS сайт самостійно.
Цей урок не передбачає базові знання HTML, CSS, JavaScript / jQuery і GitHub.
Налаштовуємо середовище розробки
Давайте приступимо до налаштування середовища розробки. Вам знадобиться локальний тестовий сервер, веб-сервер, сервер даних і контроль версій. Як згадувалося раніше, цей підручник не вимагає ніяких попередніх знань про бекенд. Будемо діяти крок за кроком. Ви можете пропустити цю частину, якщо ви вже маєте все вищезазначене.
1)Крок 1: встановлюємо XAMPP
Після використання різних рішень стало зрозуміло, що XAMPP - це найпростіший спосіб установки локального тестового сервера. Тому ми будемо використовувати XAMPP, як локальний тестовий сервер в цьому уроці.
Якщо ви цього ще не зробили, завантажте XAMPP. Виберіть той, який підходить для вашої системи та встановіть його.
Я використовую Mac, для інших операційних систем процес виглядає схожим чином.
Після установки, запустіть XAMPP, і увімкніть "Apache Web Server".
Тепер, якщо ви відвідаєте http://localhost/ у вашому браузері, ви повинні побачити стандартну сторінку XAMPP. Це означає, що він працює!
Крок 2: створіть нову GitHub сторінку
Рухаючись далі, давайте створимо новий git repo на GitHub. Щоб змусити його працювати в якості веб-сервера, ми повинні встановити його в якості GitHub сторінки.
Додамо нову гілку gh-pages.
Потім зайдіть в налаштування, виберіть gh-pages, як гілку за замовчуванням.
Тепер йдемо до командного рядка і клонуємо гілку на GitHub в XAMPP в папку htdocs.
$ cd /Applications/XAMPP/xamppfiles/htdocs
$ git clone https://your-git-HTTPS-clone-URL-here
Перейдіть на Git repo папку, яку ви тільки що клонували і створити простий index.html файл, в який запишіть: " Hello World".
$ cd blog
$ echo 'hello world' > index.html
Перевірте чи працює ваш локалхост.
Давайте перенесемо ваш наробіток на GitHub.
$ git add index.html
$ git commit -am "Add index.html"
$ git push
Перейдіть до http://yourusername.github.io/reponame і зачекайте декілька хвилин ви побачите ваш index.html!
Крок 3: отримайте аккаунт на Parse.com
На GitHub сторінці дуже легко розміщувати статичний контент, але коли справа доходить до backend, це не найкраще рішення. На щастя, ми маємо Parse.js. Ми можемо використовувати Parse.com як наш сервер даних і для взаємодії з JavaScript. Таким чином, нам потрібно лише розмістити HTML, CSS і JavaScript файли на GitHub.
Отримайте аккаунт на Parse.com якщо ви ще не зробили цього.
Тепер у вас є свій сервер даних в хмарі.
Статичний HTML-шаблон з Bootstrap
Тепер давайте створимо статичну версію для блог-системи. Щоб показати вам, як швидко ви можете виконати це через bootstrap, я буду використовувати приклад шаблону блогу від Bootstrap.
Крок 1: Завантаження Bootstrap
По-перше, завантажте Bootstrap (тут ми воикористовуємо версію 3.2.0), розпакуйте його і помістіть його вміст в папку XAMPP/xamppfiles/htdocs/blog.
Крок 2: почніть з базового шаблону Bootstrap
Відредагуйте index.html, щоб отримати базовий шаблон Bootstrap. Він забезпечує базову структуру HTML з посиланнями на bootstrap.min.css, bootstrap.min.js і jquery.min.js. Це дозволить вам заощадити багато часу.
<!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>
Оновіть і переконайтесь, що все працює.
Крок 3: скопіювати приклад шаблону блогу
Тепер, рухаємося по відкритому прикладу блогу від Bootstrap: http://getbootstrap.com/examples/blog/
На веб-сторінці натисніть правою кнопкою миші і виберіть "View Source". Ми хочемо скопіювати весь вміст <body> над нашим index.html і замінити наш <h1>Hello, world!</h1>.
Не копіюйте тег <script> оскільки ми вже маємо всі потрібні нам Javascript-файли.
Ви повинні отримати таку сторінку:
Крок 4: скопіюйте приклад стилю для блогу і додайте його в index.html
Зверніть увагу, що стилі ще не готові. Тому що нам необхідний blog.css, стиль для блогу, побудований на основних стилях bootstrap.
Знаходимо їх тут: http://getbootstrap.com/examples/blog/blog.css
Скопіюйте цей файл і викладіть в gfgre blog/css.
Додайте його в index.html нижче bootstrap.min.css:
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet">
Ми маємо стилі і це значить, що наш статичний шаблон готовий.
Установка і підключення до бази даних Parse
Щоб зробити наш статичний блог динамічним, ми повинні спочатку встановити для нього власну базу даних на Parse.com.
Крок 1. створіть новий додаток
Перейдіть до приладової панелі Parse.com і натисніть кнопку "Create New App".
Як тільки ви це зробили, перейдіть до "Quickstart Guide - Data - Web - Existing project"
Крок 2: додайте Parse.js в index.html
Після Quickstart Guide, додайте Parse.js до вашого index.html. Але замість того, щоб покласти його в <head>, ви можете вказати його під jQuery:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Parse.js -->
<script src="//www.parsecdn.com/js/parse-1.2.19.min.js"></script>
Крок 3: перевірка Parse SDK
Створіть blog.js під ваш блог/js папку з ID вашого додатка і JavaScript ключем. Додайте цей тестовий код. Ви можете також знайти його у вашому Quickstart Guide:
$(function() {
Parse.$ = jQuery;
// Replace this line with the one on your Quickstart Guide Page
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");
});
});
Збережіть його, і додайте посилання на цей файл JavaScript у вашому index.html нижче bootstrap.min.js.
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/blog.js"></script>
Тепер, оновіть index.html на своєму localhost знову, і ви повинні побачити це повідомлення:
Це означає, що тепер ви підключені до вашої бази даних блогу в хмарі!
Якщо ви перевірте папку "Data Browser" на Parse.com, ви побачите TestObject, який ви тільки що створили.
Висновок
Сьогодні ми створили всі потрібні нам сервери: XAMPP, як наш локальний тестовий сервер, GitHub Pages, як наш веб-сервер, і Parse.com, як сервер даних. Ми також налаштували базовий шаблон блогу на місце і підключилися до бази даних.
Джерело
1410 7
GR: 2.822k
Коментарі: