Перспективы использования Django

Цель лекции: Рассмотреть инструмент для организации полнотекстового поиска ElasticSearch; ознакомиться с AngularJS; рассмотреть простейший пример использования AngularJS в проекте Django; создать пример индекса для полнотекстового поиска.

Ключевые термины: Django, REST, ElasticSearch, AngularJS, поиск, индекс, веб, тег, модель, данные, html, запрос, конфигурация, сервер, API

Веб - разработка эволюционировала со временем, и пользователи потребляют информацию на таком большом количестве устройств. Веб изначально был адаптирован для устройств с большим экраном, но последние тенденции показывают, что потребление устройств с небольшим размером экрана которые можно держать в руке, увеличивается. Таким образом, растет необходимость предоставлять Веб для устройств с маленьким экраном, но эти устройства очень чувствительны в плане энергии. Таким образом существует необходимость отделить оболочку программы от внутреннего интерфейса в Django.

Однo из таких наиболее широко используемых решений заключается в использовании внутреннего интерфейса Django с помощью API, позволяющем в оболочке программы использовать его с Django. Использование AngularJS для такой ситуации является наиболее оптимальным.

REST стал будущим веб разработки и REST API - больше чем целая часть современного Веб. С увеличением фрагментации среди устройств, появляется необходимость единой минимальной конечной точки, которая не выполняет никакой операции представления. Для экземпляра, получение информации или связь может быть настолько быстрой, насколько это возможно, и может быть также масштабирована, и представление или бизнес-логика для этого остается за современными браузерами, использующими для этого фреймворк оболочки программы.

AngularJS встречает Django

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

С момента рождения AngularJS в 2009 году он развивается очень быстро и широко признан как основной рабочий фреймворк оболочки программы. В настоящее время он поддерживается Google.

AngularJS имеет очень интересную историю рождения. Он получил свое большое внимание, когда один из создателей Angular создал заново веб-приложение за 3 недели, которое изначально собрался разработать за 6 месяцев, уменьшив количество строк кода от 17000 до 1000.

Многие возможности AngularJS стоят над обычными фреймворками для веб-разработки. Среди них, несколько уникальных и инновационных возможностей, вроде двухсторонней привязки, внедрения зависимостей, легкого тестирования кода и расширение диалекта HTML с помощью директив.

На стороне сервера мы можем использовать Django REST framework или Tastypie для остальных конечных точек. Затем мы можем использовать AngularJS, который сконцентрирован на модели MVC, чтобы поощрять создание легко поддерживаемых модулей.

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

AngularJS является одним из решений ,когда требуется лучший способ асинхронной веб-разработки Django.

В следующем примере мы будем использовать AngularJS для создания одной страницы, которая использует API твитов, который мы уже создали.

Мы будем использовать AngulaJS, чтобы представить список всех твитов, но прежде, нам нужно познакомиться с ключевыми терминами AngularJS:

• Директивы: Для этого HTML-файл расширяется настраиваемыми атрибутами и элементами. AngularJS расширяет HTML с помощью ng-directives. Директива ng-app используется для определения приложения AngularJS. Директива ng-model привязывает значение элементов управления HTML (область ввода, флажок, радиокнопка, выбор и текстовая область) к приложе-нию. Директива data.ng-bind привязывает данные приложения к html-представлению.
• Модель: Это данные, отображаемые пользователю в представ-лении, с которым взаимодействует пользователь.
• Область применения: Это контекст, где хранится модель, так что контролеры, директивы и выражения могут получать дос-туп к нему.
• Контроллер: Это основная бизнес логика за представлением.

Когда мы проектируем веб-приложение на основе API, существует высокая вероятность того, что оба (внутренний интерфейс API и оболочка веб-приложения) из них находятся на разных серверах. Таким образом воз-никает необходимость настроить Django для совместного использование ресурсов между разными источниками (Cross-origin resource sharing, CORS).

Из определения, объясняемого в Википедии:

Cross-origin resource sharing (CORS, "совместное использование ресурсов между разными источниками") — технология современных браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена

Нам нужно изменить наше Django API, чтобы разрешить запросы от других серверов .Теперь мы обновим файл api.py приложения tweets, чтобы разрешить the requests для межсайтового запроса сервера:

class CORSResource(object):
    """
    Adds CORS headers to resources that subclass this.
    """
    def create_response(self, *args, **kwargs):
        response = super(CORSResource, self).create_response(*args, **kwargs)
        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Allow-Headers'] = 'Content-Type'
        return response

    def method_check(self, request, allowed=None):
        if allowed is None:
            allowed = []
        request_method = request.method.lower()
        allows = ','.join(map(unicode.upper, allowed))

        if request_method == 'options':
            response = HttpResponse(allows)
            response['Access-Control-Allow-Origin'] = '*'
            response['Access-Control-Allow-Headers'] = 'Content-Type'
            response['Allow'] = allows
            raise ImmediateHttpResponse(response=response)

        if not request_method in allowed:
            response = http.HttpMethodNotAllowed(allows)
            response['Allow'] = allows
            raise ImmediateHttpResponse(response=response)
        return request_method

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

Давайте обновим класс Tweet в соответствие со следуюшим:

class TweetResource(CORSResource, ModelResource):
    class Meta:
        queryset = Tweet.objects.all ()
        resource_name = 'tweet'

Теперь ресурс tweet готов для доступа из разных доменов.

Ниже приведен простой пример AngularJS:

Создайте html-файл под названием app.html (так как этот файл независим от нашего существующего проекта Django, мы можем создать его вне папки проекта) со следующим содержимым. Сейчас эта страница использует AngularJS с локального диска, вы можете также импортировать страницу из CDN:

<html ng-app = "tweets" >
<head>
<title>Tweets App</title>
"script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="tweetController">
<table>
<tr ng-repeat="tweet in tweets">
<td>{{ tweet.country }}</td>
<td>{{ tweet.text }}</td>
</tr >
</table>
</div>
<script src="app.js"></script>
</body>
</html>

В следующем коде, директива ng-controller срабатывает во время отображения, который обрабатывает любую бизнес-логику и внедряет вычисляемые модели внутрь области. Тег <div ng-controller="tweetController"> - один из примеров, где параметр tweetController обрабатывается перед отображением div.

Полностью наша бизнес-логика описывается на Javascript в файле app.js:

var app = angular.module('tweets',	[]);
app.controller("tweetController", function($scope,$http) {
$http({ headers: {'Content-Type':	'application/json;
charset=utf-8'}, method:	'GET',
url: "http://127.0.0.1:8000/api/vl/tweet/?format=json"
})
.success(function (data) {
$scope.tweets = data.objects;
})
}>;

Этот файл app.js делает запрос к конечному API твитов и внедряет объект tweet в область, которая отображается AngularJS в представлении (app.html) с директивой цикла ng-repeat:

<tr ng-repeat="tweet in tweets"></tr>
<td>{{tweet.country}}</td>
<td>{{tweet.text}}</td>
</tr>

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