Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

DjangoRESTFramework + ExtJS 4 MVC

No description
by

Alex Nemtarev

on 12 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of DjangoRESTFramework + ExtJS 4 MVC

EXT JS 4.2

Что нам надо для задачи

Требования:
1) Привлекательность и удобство интерфейса
2) Простота кода
3) REST из коробки
4) Понятность кода
5) ООП (расширение кода)
6) Готовые решения (OpenSource)
7) Стабильные версии (>1.0)
8) Тестируемость кода
9) Интеграция в CI
10) Документация





1) Многофункциональный MVC
2) Простота кода
3) Понятность кода (четкая структура
проекта)
4) ООП (наследование, mixins)
5) Дешево, но очень сердито
6) Тестируемость кода (Jasmine, Phantom
JS)
7) Отличная документация (dev.sencha.com)



Django
REST - DjangoREST Framework
Простота кода (DRY)
Понятность кода (PEP 8)
ООП (Python)
Бесплатно
Тестируемость кода (UnitTest, Nose, Mock)
Отличная документация (djangorestframework.org)
Структура проекта

Payment
- clients
models
logics
- payments
models
logics
- operations
models
logics
- attestation
models
logics
contrib
rext
media
static
- settings.py
- manage.py
http://django-rest-framework.org/
Связи моделей между собой (Associations)

hasOne - связь один к одному

- добавляются сеттеры и геттеры

User.getPassport() - делается ajax запрос
User.setPassport()

hasMany - связь многие ко многим

- добавляется Store

User.groups()


belongsTo - связь один ко многим

Document.getUser


Единая система по учету и обслуживанию клиентов,
информационных потоков, денежных средств и кадров.
а коротко CRM

Наши фишки:
1) Удобный интерфейс
2) Масшабируемость
3) Быстродействие
4) Работа из любой точки Земли


REST (сокр. англ. Representational State Transfer, «передача состояния представления»[1] или «передача репрезентативного состояния») — стиль построения архитектуры распределенного приложения. Был описан и популяризован в 2000 году Роем Филдингом (Roy Fielding), одним из создателей протокола HTTP. Самой известной системой, построенной в значительной степени по архитектуре REST, является современная Всемирная паутина.

Данные в REST должны передаваться в виде небольшого количества стандартных форматов (например HTML, XML, JSON). Сетевой протокол (как и HTTP) должен поддерживать кэширование, не должен зависеть от сетевого слоя, не должен сохранять информацию о состоянии между парами «запрос-ответ». Утверждается, что такой подход обеспечивает масштабируемость системы и позволяет ей эволюционировать с новыми требованиями.
REST API
MVC
схема использования нескольких шаблонов проектирования, с помощью которых модель данных приложения, пользовательский интерфейс и взаимодействие с пользователем разделены на три отдельных компонента так, что модификация одного из компонентов оказывает минимальное воздействие на остальные.
WebSockets
протокол полнодуплексной связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени.

В настоящее время в W3C осуществляется стандартизация API Web Sockets. Черновой вариант стандарта этого протокола утверждён IETF.
JQuery
AngularJS
SprouteCore
BackboneJS
Prototype
Meteor
EmberJS
Клиентский код
EXT JS 4.2
from django.contrib.auth.models import User, Group
from rest_framework import serializers


class UserSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
model = User
fields = ('url', 'username', 'email', 'groups')


class GroupSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
model = Group
fields = ('url', 'name')
Серверный код
Django REST Framework
Serializer
Класс обеспечивающий представление данных в формате JSON.
- может производить сериализацию и десериализацию данных
Viewset
from django.contrib.auth.models import User, Group
from rest_framework import generics
from rest_framework.decorators import api_view
from rest_framework.reverse import reverse
from rest_framework.response import Response
from quickstart.serializers import UserSerializer, GroupSerializer

@api_view(['GET'])
def api_root(request, format=None):
"""
The entry endpoint of our API.
"""
return Response({
'users': reverse('user-list', request=request),
'groups': reverse('group-list', request=request),
})

class UserList(generics.ListCreateAPIView):
"""
API endpoint that represents a list of users.
"""
model = User
serializer_class = UserSerializer

class UserDetail(generics.RetrieveUpdateDestroyAPIView):
"""
API endpoint that represents a single user.
"""
model = User
serializer_class = UserSerializer

Model
View
Controller
class ClientsFacade(Facade):

url = "clients"
name = ""
config = {
}
columns = []
filters = []

def save_related(self, data):
...
API - REXT
MainRegistryController - базовый контроллер реестров и справочников
OperationCtrl - контроллер операций
ListView - представление (окно просмотра)
SelectView - представление (окно выбора)
FormWindow - окно операции
RGrid - настраиваемый грид (используется в реестрах)
RestProxy - прокси для обмена данными с сервером
GenericGrid - наследник от RGrid используется в формах
SelectField - поле выбора из реестра или справочника
static/api
EXT JS 4.2
/static
/bussiness
/clients
/controller
/view
/model
/employes
/organize
/courses
/finance
/documents
/api
Стуктура проекта
EXT JS 4.2
Клиенты
Платежки
Контроллер
EXT JS 4.2
Clients.controller.RegistryCtrl
Представление
EXT JS 4.2
Спасибо за внимание!
WebDesktop
Рабочий стол

EXT JS 4.2
Python
Строим RESTful веб-приложение
на Python и JavaScript.
Часть первая.

Автор - Немтарев Александр
БЦ МУиСХ
Процесс разработки программного обеспечения
Определение задачи
Но также в добавок к этому есть:

Неудобный оборот информации и документов в 1С и Excel.
Отсутствие планирования и эффективного управления
Процесс разработки программного обеспечения
Первый клёв
Мы дали рекламу и сказали что у нас есть супер-система которая умеет все.
На самом деле ее не существует в природе)
НАШ КЛИЕНТ - небольшая развивающаяся сеть образовательных центров
У них есть:

1) Клиенты
2) Учебные центры
3) Кадры
4) Курсы
5) Аттестации
6) Сертификаты
7) Бухгалтерия
О чудо! Мы можем их спасти
с помощью нашей супер-системы
которая теперь имеет название
Модели
Ext.data.Model
EXT JS 4.2
Модели - Ассоциации
EXT JS 4.2
Изучение новых технологий
Выбор инструментов
CRM - Customer Relation Management
Серверная часть
серверный код можно протестировать не имея клиентской части прямо из браузера, благодаря наличию готового веб-интерфейса Django REST Framework
Facade
класс упрощающий создание нового приложения.
- должен поддерживать возможность сгенерировать структуру проекта на клиенте
- инкапсулирующий логику регистрации urls, создания Viewset, Router и Serializer
CRM - прикладное программное обеспечение для организаций, предназначенное для автоматизации стратегий взаимодействия с заказчиками (клиентами), в частности, для повышения уровня продаж, оптимизации маркетинга и улучшения обслуживания клиентов путём сохранения информации о клиентах и истории взаимоотношений с ними, установления и улучшения бизнес-процедур и последующего анализа результатов.

CRM — модель взаимодействия, полагающая, что центром всей философии бизнеса является клиент, а основными направлениями деятельности являются меры по поддержке эффективного маркетинга, продаж и обслуживания клиентов. Поддержка этих бизнес-целей включает сбор, хранение и анализ информации о потребителях, поставщиках, партнёрах, а также о внутренних процессах компании. Функции для поддержки этих бизнес-целей включают продажи, маркетинг, поддержку потребителей.

Pyramid
Flask
Zope
Django REST Framework
TastyPy
Piston
Javascript Framework
Server-side web framework
TESTable
Router
Класс упрощающий регистрацию url в нашем приложении
Клиентская часть
Кратко:
у нас есть приложения для WebDesktop, приложение состоит из 3-х папок - controller, view, model. Наши блоки из которых состоит приложение используют наследование и расширение базовых компонентов. Базовые компоненты в свою очередь расширяют стандартные компоненты ExtJS такие как окно, грид, комбо-бокс, контроллер. Также используется динамическая загрузка файлов приложения по требованию.
Будем использовать:
абстрактные классы из static/api
создавать контроллер
модель
----------------------
применение RowEditor
работа с моделями
Клиенты
Что нам надо для задачи

- 2 модели в одном приложении
- новый тип контроллера
- сохранение и загрузка форм
- Column Layout
Платежи
Набор классов для разработки
Операции
Будем использовать

- hasMany
- GenericGrid
- Tabs
- FitLayout
Аттестации
Что нового:
- использование полей DateTime, Decimal

связи - belongsTo, hasOne


Class-based View

Пришли на замену функциональным представлениям.

В Django есть базовый набор из стандартных вьюх

ListView, DetailView, CreateView, UpdateView, DeleteView
ListView
class PostList(ListView):

model = Post

def get_queryset(self):
qs = Post.objects.filter(is_delete=False).order_by('-created_at')
if not self.request.user.is_authenticated():
return qs.exclude(is_private=True)
return qs
DetailView
class PostDetail(DetailView):

model = Post

def get(self, request, **kwargs):
return self.render_to_response(self.get_context_data(), **kwargs)
CreateView
class CreateNews(CreateView):
form_class = NewsForm
template_name = 'create_news.html'
succes_url = '/success/'

def form_valid(self, form):
Post.objects.create(**form.cleaned_data)
return redirect(self.get_success_url())
UpdateView
from django.views.generic.edit import DeleteView

class ItemDelete(DeleteView):
model = Item
template_name = 'item_confirm_delete.html'
success_url = '/success/'
DeleteView
url(r'^item/(?P<pk>\d+)/edit/$', ItemUpdate.as_view()),

# Отображение в views.py

from django.views.generic.edit import UpdateView

class ItemUpdate(UpdateView):
form_class = ItemForm
model = Item
template_name = 'create_item.html'
success_url = '/success/'

from rest_framework import routers

user_router = routers.DefaultRouter()
user_router.register(r'users', views.UserViewSet)

urlpatterns = patterns('',
url(r'', include(user_router.urls)),
class MakePay(Operation):

name = "make_pay"
verbose_name = u"Оплата"
operation_model = PayOperation
selection_on = True

@classmethod
def bound_model(cls, instance, data):
bound_instance = super(MakePay, cls).bound_model(instance)
Operation
класс инкапуслирующий бизнес-логику сложнее чем обычно

- работа с несколькими моделями
- вычисление показателей
- изменение статусов
- выполнение в одной транзакции

class GroupList(generics.ListCreateAPIView):
"""
API endpoint that represents a list of groups.
"""
model = Group
serializer_class = GroupSerializer

class GroupDetail(generics.RetrieveUpdateDestroyAPIView):
"""
API endpoint that represents a single group.
"""
model = Group
serializer_class = GroupSerializer
Операции
Аттестации
Субприложения - Ext.application
БИЗНЕС-ЛОГИКА
- наследуется от Ext.controller.Controller
- перехватывает события от представлений
- ведет менеджмент моделей
создание
удаление
редактирование
- наследуется от Ext.window.Window
- генерирует события submit
- предоставляет шаблонные методы для модификации контекста
- здесь мы в методе initComponent создаем элементы формы
- отличный способ начать разрабатывать GUI на ExtJS
- хороший пример создание кастомного компонента на ExtJS
- можно добавлять приложение объявляя классы Ext.ux.desktop.Module

- определяют состав данных в системе
- упрощают логику работы с REST API
- привязаны к формам создания и редактирования
- мы должны объявить состав полей и типы данных
Clients.view.ListView
Clients.view.SelectView
Payments.view.AddView
The End! But...
HTML5
OOP
HTTP
OOP
Ext.define('Attestations.controller.RegistryCtrl', {
extend: 'REXT.MainRegistryController',
views: ['ListView', 'AddView'],
models: ['Attestation', 'Attestant'],
adapterTitle: 'Аттестации',
//настройка отображаемых столбцов в реестре
getViewColumns: function() {
return [
{
header: "id",
dataIndex: "id",
width: 1,
type: 'numberfield',
hidden: true
}, {
header: "Наименование",
dataIndex: "name",
width: 30,
type: 'textfield'
}, {
header: "Дата начала",
dataIndex: "datetime_on",
width: 10,
type: 'datefield'
}, {
header: "Дата окончания",
dataIndex: "datetime_off",
width: 10,
type: 'datefield'
}
]
}
});
Ext.define('Clients.model.Client', {
extend: 'Ext.data.Model',
requires: ['REXT.RestProxy'],
fields: [
{
name: 'id',
type: 'int',
useNull: true
}, {
name: 'fio',
type: 'string'
}, {
name: 'date_of_birth',
type: 'date',
dateFormat: 'Y-m-d' //важное свойство если мы хотим изменить формат по умолчанию
}, {
name: 'inn',
type: 'string'
}
],
associations: [
{type: 'hasMany', name: 'paymans', model: 'Payments.model.Payman'}
],
proxy: {
type: 'xrest',
url: '/clients'
}});
Ext.define('Payments.view.AddView', {
extend: 'REXT.FormWindow',
requires: ['REXT.SelectField', 'REXT.DateTimeField'],
modelForm: true,
itemId: 'pay_add',
statics: {getAttr: function(attr) {
return "pay_add";
}},
initComponent: function() {
this.width = 600;
this.height = 270;
this.callParent(arguments);
this.mainForm = this.down('form');
this.mainForm.frame = false;
this.mainForm.layout = "form";

this.mainForm.items.add(
Ext.create('Ext.panel.Panel', {
layout: 'column',
border: false,
bodyPadding: '4',
defaults: {
anchor: "100%"
},
items: [
{ columnWidth: 1/2,
items: [
{ xtype: 'datefield',
fieldLabel: 'Оплатить до',
name: 'valid',
anchor: '100%',
submitFormat: 'yyyy-mm-dd'
}
]
},
{ columnWidth: 1/2,
xtype: 'textfield',
fieldLabel: 'Сумма',
name: 'summ'
}
]
}));
- класс упрощающий работу с моделями
- агрегрегирует базовые представления
- имеет открытые методы для переопределения действий на каждый тип запроса post, get, put, delete
Сфера услуг
Потенциальный клиент
Сложность разработки
Ограничения существующих технологий
Усложнить себе жизнь один раз - значит сократить время на разработку в 10 раз в будущем
appFolder - clients
controller: Clients.controller.ClientsCtrl
Курсы
appFolder - courses
controller: Cources.controller.RegistryCtrl
Расписание занятий
appFolder - courses
controller: Cources.controller.RegistryCtrl
Сертификаты
JASMINE
GRIDS, TREES, FILTER FEATURE,
CUSTOM COMPONENTS

MODEL VALIDATION, PERMISSIONS

TEASER
Full transcript