Начните строить свой блог с помощью Parse.js

17 января 2018

Вы когда-нибудь были в восторге от идеи веб-проекта, но обнаружили, что его жалко заставить его работать и работать на сервере? С Parse.js все, кто понимает основы HTML, CSS и JavaScript, могут легко создавать динамические веб-сайты и рабочие веб-приложения.

В этом уроке я рассмотрю весь процесс создания системы блога с Parse.js с нуля. Вы будете использовать все инструменты самонастройки и действительно будете практиковать идею быстрого прототипирования, рефакторинга и инфраструктуры MVC. К концу этой серии вы сможете создать любой сайт CMS самостоятельно.

Несмотря на то, что, стараясь быть максимально подробным, этот учебник предполагает базовые знания о HTML, CSS, JavaScript jQuery и GitHub. Если вы не знакомы с вышеупомянутыми инструментами, на Tuts + есть много замечательных уроков, которые вы можете проверить.

Настройка среды разработки

Давайте начнем с настройки нашей среды разработки. Вам понадобится локальный сервер тестирования, веб-сервер, сервер данных и контроль версий. Как упоминалось ранее, этот учебник не требует никаких предварительных знаний о бэкэнд. Я проведу вас шаг за шагом. Не стесняйтесь пропустить эту часть, если у вас уже есть те.

Шаг 1: Установите XAMPP

После нескольких разных решений XAMPP по-прежнему является самым простым способом установки локального тестового сервера, который я нашел. Поэтому я буду использовать XAMPP в качестве локального сервера тестирования в этом учебнике.

Если вы еще этого не сделали, начните с загрузки XAMPP здесь. Выберите тот, который подходит вашей системе и установите его.

Я использую Mac здесь, поэтому я буду использовать его в качестве примера с этого момента. Если вы используете другую операционную систему, процесс должен быть очень похож.

После его установки запустите XAMPP и запустите «Apache Web Server».

Теперь, если вы посещаете http: localhost в своем браузере, вы должны увидеть эту страницу XAMPP по умолчанию. Это значит, что он работает!

Шаг 2: создайте новую страницу GitHub

Перейдем к созданию нового git-репо в GitHub. Я называю это блоком, так что это коротко и понятно для меня. Чтобы заставить его работать как веб-сервер, нам нужно установить его как страницу GitHub.

Сначала добавьте новую ветвь, gh-pages.

Затем перейдите к настройкам, установите gh-страницы в качестве ветви по умолчанию.

Большой. Теперь давайте перейдем к командной строке и клонируем эту ветку в GitHub в папку htdocs XAMPP.

$ 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, но когда дело доходит до бэкэнда, все может стать сложным с GitHub Page. К счастью, теперь у нас есть Parse.js. Мы можем использовать Parse.com как наш сервер данных и общаться с ним JavaScript. Таким образом, нам нужно только размещать файлы HTML, CSS и JavaScript в GitHub.

Идите и зарегистрируйтесь на Parse.com, если вы этого еще не сделали.

Теперь у вас есть сервер данных в облаке.

Шаблон статичного шаблона Bootstrap

Теперь давайте подготовим статическую версию системы блога, которую мы собираемся сделать. Чтобы показать вам, как быстро вы можете загрузиться через это, я просто использую шаблон шаблона примера из Bootstrap. Опять же, если вы уже хорошо знакомы с Bootstrap или у вас уже создан статический веб-сайт, не стесняйтесь делать это по-своему. Если вы новичок в Bootstrap, следуйте дальше.

Шаг 1: Загрузите Bootstrap

Сначала загрузите Bootstrap (в настоящее время мы используем версию 3.2.0 здесь), разархивируйте его и поместите его содержимое в папку XAMPP xamppfiles htdocs.

Шаг 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 примеры блога

На веб-странице щелкните правой кнопкой мыши и выберите «Просмотреть источник». Мы хотим скопировать весь контент вна наш index.html и заменить

Hello, world!

в базовом шаблоне.

Не копируйте теги

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

И теперь стили должны быть правильными, и у нас есть готовый статический шаблон.

Установка и подключение к базе данных анализа

Чтобы сделать наш статический блог динамичным, нам нужно сначала настроить его собственную базу данных на Parse.com.

Шаг 1: Создать новое приложение

Перейдите на панель инструментов Parse.com и нажмите «Создать новое приложение».

Назовем это блоком на данный момент.

После того, как он создан, перейдите в «Руководство по быстрому старту - данные - веб - существующий проект»

Шаг 2: добавьте Parse.js в index.html

Следуя руководству быстрого запуска, добавьте Parse.js в свой индекс.html. Но вместо того, чтобы помещать его в, вы можете поставить его чуть ниже 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: Test Parse SDK

Перейдя, создайте blog.js в папке js вашего блога с вашим идентификатором приложения и JavaScript-кодом и некоторым тестовым кодом. Все они можно найти в руководстве по быстрому запуску:

$(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 на своем локальном хосте снова, и вы должны увидеть это предупреждение:

Это означает, что теперь вы подключены к базе данных вашего блога в облаке:)

Если вы проверите свой «Браузер данных» «Теперь на Parse.com вы увидите только что созданный TestObject.

Заключение

Сегодня мы создали все необходимые нам серверы: XAMPP в качестве нашего локального сервера тестирования, GitHub Pages в качестве нашего веб-сервера и Parse.com в качестве нашего сервера данных. У нас также есть базовый шаблон для блога, и теперь он подключен к базе данных.

В следующем сеансе я расскажу вам, как добавлять сообщения в блоге из браузера данных Parse, извлекать его с помощью JavaScript и выводить на передний план.

Проверьте исходный файл, если вы застряли. И, пожалуйста, оставьте комментарий, если вы встретите какие-либо трудности после этого.