Как создать простое веб-приложение с использованием AngularJS и Parse в качестве серверной части менее чем за день
Без особой причины я хотел изучать разработку веб-приложений. Существует множество фреймворков, упрощающих разработку веб-приложений. Но я решил пойти к тому, что сделал король Интернета, Google. Я поделюсь, как я сделал этот дурацкий генератор кликбейтных заголовков за несколько часов, используя AngularJS.
Несколько замечаний, прежде чем я начну: я использую Mac с Yosemite. Для текстового редактора я использую Atom. Исходный код генератора кликбейтов находится на Github. На самом деле само веб-приложение размещено на Github, потому что нет необходимости в веб-сервере. Последние заголовки хранятся в Парсе.
Теперь поговорим о приложении. Приложение предоставит пользователю два текстовых поля: текстовое поле кто и текстовое поле что делает. После заполнения обоих полей приложение автоматически покажет сгенерированный заголовок. В приложении также есть кнопка «Создать», которая будет случайным образом выбирать преувеличенные выражения для создания кликбейтного заголовка. Пользователь также может отправить заголовок, и он будет показан в разделе недавно созданных заголовков. Довольно просто.
При разработке приложения для iOS я могу просто открыть Xcode, создать новый проект и, бум, Xcode предоставит все файлы, необходимые для быстрого начала работы. Для разработки веб-приложений есть Йомен. Если вы проверите веб-сайт, вы можете легко установить его с помощью npm.
npm install -g yo
После установки Yeoman устанавливаем Угловой генератор.
npm install -g grunt-cli bower yo generator-karma generator-angular
Теперь создайте каталог для проекта. Затем внутри каталога создайте новое угловое приложение, используя yoman:
yo angular clickbait
Бум. Yeoman создаст все необходимые файлы. Как только это будет сделано, вы можете просмотреть приложение, запустив grunt, средство запуска задач.
grunt serve
Аргумент serve открывает ваше приложение в браузере и перезагружает его при обнаружении изменений.
Йоман сгенерировал для вас несколько контроллеров, маршрутов и представлений. Но я этого не знал и в итоге создал новый маршрут с именем home, используя
yo angular:route home
Вы можете использовать сгенерированный маршрут или просто создать новый. Когда вы запустите приведенную выше команду, она создаст контроллер, представление и настроит маршрут в app/scripts/app.js.
Код маршрута в app.js довольно прост для понимания. Открытие веб-приложения приведет к перенаправлению на '/', который загрузит views/home.html и HomeCtrl. Если вы посмотрите на app/index.html, вы увидите
<div class=”container”> <div ng-view=””></div> </div>
Angular отобразит home.html в div с директивой ng-view.
Давайте шаг за шагом рассмотрим файл views/home.html.
<p>Who? <input ng-model=”who” placeholder=”A man, A woman, etc”></p> <p>Doing what? <input ng-model=”doing” placeholder=”sitting on the beach”></p> <p><span ng-bind=”result()” class=”result”></span></p>
Первая строка показывает Кто? с текстовым полем. Мы используем директиву ng-model='who' для привязки значения текстового поля к переменной 'who', к которой мы будем обращаться в контроллере Home. То же самое и с текстовым полем Doing. Затем мы показываем сгенерированный заголовок в теге span. Мы связываем тег span с функцией result(), которая будет доступна в Home Controller с помощью директивы ng-bind='result()'.
В файле controllers/home.js для домашнего контроллера я добавил
$scope.result = function() {
if (!$scope.who || !$scope.doing) {
$scope.buttonDisplay = false;
return ‘’;
}
$scope.buttonDisplay = true;
return $scope.who+’ ‘+$scope.doing+’. ‘+$scope.bait;
};
Это функция result(), которая возвращает сгенерированный заголовок. Если кто и oing пусты, мы возвращаем пустую строку. Когда пользователь вводит что-то в текстовом поле who и doing, Angular автоматически обновит значение переменных who и doing, что в результате автоматически обновит возвращаемое значение функции results(). . Поскольку мы связываем содержимое тега span с функцией result(), сгенерированный заголовок появится автоматически. Довольно круто.
Та же концепция применима к видимости кнопок. Для динамического изменения видимости элементов в Angular предусмотрена директива ng-show. Таким образом, просто назначив переменную этой директиве, мы можем показать или скрыть элемент, назначив true или false в контроллере. В этом приложении я использовал переменную buttonDisplay для управления видимостью.
Далее нам нужно разрешить приложению общаться с сервисом Parse. Официальной поддержки Angular от Parse нет, но есть патч с открытым исходным кодом для Parse SDK для изначальной работы с AngularJS. Но поскольку все, что я хотел сделать, это просто получить последние заголовки и опубликовать заголовок, я решил, что могу просто подключиться к Parse с помощью REST API.
Вначале я использовал службу Angular $http для отправки запросов POST и GET в Parse внутри домашнего контроллера.
// to fetch
var req = {
method: 'GET',
url: 'https://api.parse.com/1/classes/Pool?order=-createdAt&limit=100',
headers: {
'X-Parse-Application-Id': 'parse-app-id',
'X-Parse-REST-API-Key': 'parse-api-key',
'Content-Type': 'application/json'
},
};
$http(req).success(function (data) {
var results = data.results;
$scope.titles = results;
if ($scope.titles.length > 0) {
$scope.poolDisplay = true;
}
}).error(function () {
});
// to submit title
var req = {
method: 'POST',
url: 'https://api.parse.com/1/classes/Pool',
headers: {
'X-Parse-Application-Id': 'parse-app-id',
'X-Parse-REST-API-Key': 'parse-api-key',
'Content-Type': 'application/json'
},
data: {
'title': title
}
};
$http(req).success(function () {
$scope.submitDisabled = false;
$scope.reloadPool();
}).error(function () {
$scope.submitDisabled = false;
});
Но есть лучший способ избежать повторения. Мы можем создать собственный сервис Angular, который будет служить клиентом для Parse.
yo angular:factory Title
Это создаст файл services/title.js, в котором мы сможем реализовать наш клиент RESTful. Я использовал сервис ngResource для взаимодействия с Parse.
// services/title.js
angular.module(‘RestService’, [‘ngResource’])
.factory(‘Title’, [‘$resource’, function ($resource) {
var clickbaitAppHeaders = {
‘X-Parse-Application-Id’: ‘parse-app-id’,
‘X-Parse-REST-API-Key’: ‘parse-api-key’,
‘Content-Type’: ‘application/json’
};
return $resource(‘https://api.parse.com/1/classes/Pool', {}, {
get: {
method: ‘GET’,
params: {
‘order’: ‘-createdAt’,
‘limit’: 100
},
headers: clickbaitAppHeaders
},
post: {
method: ‘POST’,
params: {
title: ‘’
},
headers: clickbaitAppHeaders
}
});
}]);
Теперь, когда у нас есть служба под названием Title, мы можем использовать ее в нашем контроллере.
// scripts/controllers/home.js
angular.module(‘clickbaitApp’)
.controller(‘HomeCtrl’, [‘$scope’, ‘$http’, ‘Title’, function ($scope, $http, Title) {
...
Title.get({}, function (res) {
$scope.titles = res.results;
if ($scope.titles.length > 0) {
$scope.poolDisplay = true;
}
});
Мы получаем заголовки из Parse и присваиваем их переменной 'titles'. Все, что нам нужно для их отображения, — это привязать некоторые элементы в представлении к этой переменной. Для отображения нескольких элементов в Angular есть директива ng-repeat.
// views/home.html
<div ng-repeat=”title in titles”>
<span am-time-ago=”title.createdAt” class=”createdAt”></span> {{title.title}} <a href=”https://twitter.com/intent/tweet?text={{textToTweetForTitle(title.title)}}" target=”_blank”>Tweet this</a>
</div>
В основном это означает, что для каждого элемента в переменной titles повторяются элементы внутри тега div. Переменная titles — это массив, содержащий объекты, полученные из Parse. Итак, чтобы отобразить заголовок каждого из объектов, нам нужно получить свойство title этого объекта.
{{title.title}}
И это все. Вы можете изучить код в Github или просмотреть Учебник по AngularJS. Существует несколько способов развернуть веб-приложение Yeoman в рабочей среде. Я просто использовал поддерево git для развертывания на страницах github.
grunt build git subtree push --prefix dist origin gh-pages
Это было довольно весело. Самое приятное то, что приложение может быть онлайн и доступно для людей, чтобы попробовать его немедленно. Нет необходимости ждать неделю, чтобы выпустить приложение.
Что ж, вернемся к созданию приложений для iOS. Вы проверили мои приложения?
