Повний цикл розробки Ajax-додатків: Частина 1. Налаштування середовища Ajax з використанням сценарію (исходники), Різне, Програмування, статті

Ajax – це частина технології Web 2.0, що привертає в даний час велика увага архітекторів, розробників та менеджерів продуктів з одного боку і користувачів Web-додатків з іншого боку. Методика Ajax-програмування включає в себе знамениту колекцію надійних технологій, таких як XHTML, JavaScript, CSS і XML Http Request (XHR). Популярні методики доступу до сервісів та обміну даними, такі як Representational State Transfer (REST) ​​і JavaScript Object Notation (JSON), також природно підходять технології Ajax. Ця перевірена міць на стороні клієнта може бути скомбінована з такими технологіями з відкритими вихідними кодами як PHP, Python і Ruby, щоб розширити Ajax на розробку додатків середнього рівня. На рівні даних в цю суміш додається база даних з відкритими вихідними кодами MySQL.


Іншим природним доповненням до методик Ajax-програмування відноситься вражаючий масив інструментальних засобів розробки, заснованих на Eclipse і є програмами з відкритими вихідними кодами, які можна вільно завантажити і використовувати. Об’єднані разом, всі вищезгадані технології клієнтського рівня, проміжного рівня та рівня даних надають привабливу, динамічну комбінацію для експериментів і вивчення принципів розробки Web-додатків. Але як впоратися з розробкою та розгортанням Ajax-додатків від початку до кінця? Дана серія статей, що складається з трьох частин, дасть відповідь на це питання і проведе вас за сценарієм повного циклу розробки.


Типове Web-додаток масштабу підприємства має справу з факторами, що приводять до високої трудомісткості його розробки. Вивчаючи основні будівельні блоки обраних речень з відкритими вихідними кодами, ми не будемо враховувати в нашому сценарії такі критичні для корпоративного класу функціональні можливості як захищеність, масштабованість і доступність – ви повинні вивчити їх, використовуючи інші джерела. Всі міркування в даній статті застосовуються лише до конкретного класу Ajax-додатки, описаного в нашому сценарії. Зокрема, в даній серії статей надається докладна інформація про створення бази даних MySQL, проектуванні та розробці логіки проміжного рівня та рівня даних в виконуючою середовищі PHP, а також про створення реального односторінкового клієнтського Ajax-інтерфейсу, що використовує JavaScript. У дану серію статей включені фрагменти вихідного коду і показані всі необхідні дії по розробці та тестуванню Ajax-додатки в Eclipse і подальшого його розгортання в Firefox (клієнтський рівень), Zend PHP (проміжний рівень) і MySQL (рівень бази даних). Таке всеосяжне обговорення, що об’єднує в додатку технології XHTML, CSS, JavaScript, XHR, DOM, REST, SOAP, JSON, XML, PHP, MySQL і Eclipse, продемонструє безліч функціональних можливостей, вбудованих в згадані вище платформи з відкритим вихідним кодом. У двох словах, дана серія статей знайомить з підходом, що призводить до зрозумілого і елегантному дизайну Web-додатки, що надає відмінне розділення рівнів програми.


Введення


Як стверджує заголовок, дана серія статей з трьох частин надає практичну детальну інформацію про деякі ключові можливості повного циклу розробки Ajax-додатки. До таких можливостей відноситься вивчення конкретних технологій, що застосовуються в наступних трьох рівнях програми:



На клієнтському рівні використовуються технології XHTML, CSS, JavaScript і XML Http Request (XHR). З кількох згаданих вище чудесних технологій проміжного рівня з відкритими вихідними кодами в даній серії обраний PHP через його простоти і широкого розповсюдження. На рівні даних використовується база даних MySQL. Крім того, в даній серії статей використовуються такі популярні технології Web-сервісів як REST, SOAP, JSON і XML. Ви будете використовувати всі ці технології в контексті всеосяжного сценарію.


Встановіть та налаштуйте виконуючу середовище і середовище розробки, потрібну для створення Ajax-додатки, виконавши дії, описані в наступних розділах. Потім, замість звичайного застосування Hello World, для різноманітності ви проаналізуєте і зрозумієте не тривіальний сценарій зі сфери банківської діяльності. Цей сценарій пояснить використання всіх згаданих технологічних компонентів в контексті вигаданого банку, його бази даних, заснованого на браузері порталу для клієнтів банку та реального фінансового Web-сервісу сторонньої фірми.


Необхідне програмне забезпечення


До розробки та розгортання банківського сценарію, що складається з трьох рівнів додатків, необхідно зробити вибір наступних складових:



З безлічі доступних пропозицій з відкритим вихідним кодом, що задовольняють потреби на кожному рівні, для використання в даній серії статей обрані наступні:


Web-браузер: Mozilla Firefox 2.0.0.4 або вище. Серед безлічі переваг Firefox можна відзначити зручність використання, захищеність і настроюваність за допомогою сотень підключаються додатків. Ви також будете використовувати Firebug, що підключається модуль отладчика додатків для Firefox.


Сервер бази даних: MySQL 5.0.41 або вище. Він працює в режимі клієнт / сервер і у вбудованому режимі. Написаний повністю на C і C + +. Доступний у двох редакціях: Enterprise server і Community server. Community server є безкоштовним м підходить для банківського сценарію цієї статті.


Web-сервер: Apache Web-сервер 2.2.2 є добре настроюється і розширюваним через модулі сторонніх розробників.


Сервер проміжного рівня: Zend Core 2.0.1 або вище. Цей безкоштовний сервер з відкритими вихідними кодами підтримує PHP 5. Дуже добре підтримується спільнотою. Працює з Web-сервером Apache і підтримує такі бази даних як MySQL, IBM DB2 ® і Oracle. Zend Core for IBM спеціально налаштований на роботу з IBM DB2. На малюнку 1 наведений опис Zend Core.


IDE (Integrated Development Environment) проміжного рівня: Eclipse PDT 0.7 RC3 або вище. PDT – це інтегрована середа PHP Development Tools для платформи Eclipse, куди входять всі компоненти, необхідні для розробки PHP-додатків. У цьому IDE підтримується також PHP-налагодження. Zend, IBM і інші компанії перевели цю середу в область технологій з відкритим вихідним кодом. На момент написання даної статті це був зовсім новий бренд, і він дуже добре (і своєчасно) підійшов для розробки логіки проміжного рівня нашого банківського сценарію.


IDE клієнтського рівня: Aptana Web IDE 0.2.8.14433 або вище. Це безкоштовна, крос-платформна, заснована на JavaScript середу розробки з відкритим вихідним кодом для створення Ajax-додатків. Вона підтримує JavaScript, HTML і CSS. Також є підтримка налагодження JavaScript-сценаріїв і вбудована підтримка декількох інтегрованих Ajax-середовищ. Головним чином заснована на Eclipse.


Виконайте інструкції, наведені в наступних розділах, для встановлення і налаштування цих пакетів з відкритим вихідним кодом, які допоможуть вам виконати повний цикл розробки і розгортання Ajax-додатки. (Примітка: Всі вказівки по установці і настройці в даній статті призначені для операційної системи Microsoft Windows.)


Рисунок 1. Опис Zend Core

Деталі сценарію


Звертайтеся до малюнку 4 в міру роботи з наступними розділами для освоєння деталей сценарію. Даний сценарій висуває на перший план реалізацію декількох звичайних функцій касира банку, реалізованих на Ajax і в PHP-середовищі. В даному розділі аналізуються різні модулі, спільно формують даний сценарій.


База даних банку (MySQL) – Дані


Інформація про клієнтів банку зберігається в таблиці бази даних. Ви створите таблицю в базі даних MySQL. Це компактний за розміром, досить потужний сервер (community edition). Для цілей даної вправи вся інформація про клієнтів відразу заноситься в таблицю бази даних. Після цього збережені дані про клієнтів можуть бути вилучені і оновлені через ODBC-драйвер, що поставляється з Zend Core. Тип доступу до бази даних, тобто читання або запис, буде визначатися в залежності від природи функції касира банку.


Функції логіки банківських операцій (PHP-код) – Модель


Саме час подумати про базову логіці банківських операцій для реалізації функцій касира банку. У даному сценарії ви повинні забезпечити підтримку наступних функцій касира банку:



Оскільки ці чотири функції вимагають доступу до бази даних, створюється PHP-файл для забезпечення необхідних функцій бази даних. Це дозволяє відокремити функції бази даних від іншої логіки проміжного рівня. Реалізуючи базові функції касира банку подібним чином, ви можете спакетірованние результати з бази даних звичайним способом для всіх, хто викликає ці функції. Результати базової банківської логіки поміщаються в асоціативний PHP-масив.


Інтерфейс користувача Bank Portal (Ajax) – Представлення


А тепер зверніть увагу на реалізацію користувальницького інтерфейсу для касирів банку, що ініціюють чотири базові функції. Доступ до логіки базових банківських функцій, укладеної в PHP-код, може здійснюватися з “товстого” або “тонкого” клієнта. У даному сценарії реалізується односторінковий інтерфейс користувача браузера з використанням технології Ajax для касирів банку.


Коли на проміжному рівні використовується PHP, нормальною практикою є формування необхідного XHTML, CSS і JavaScript-коду в PHP-коді. Це означає, що код порталу банку буде передаватися тільки під час завантаження клієнтської програми. Всі елементи призначеного для користувача інтерфейсу будуть кодуватися на XHTML і CSS, а логіка на стороні клієнта – на JavaScript. Всі ці артефакти (XHTML, CSS і JavaScript) разом будуть містити всі елементи призначеного для користувача інтерфейсу, необхідні для порталу банку в даному сценарії. Це означає, що Web-сервер Apache повинен передати в браузер вміст, що відноситься до інтерфейсу клієнта, тільки один раз. Така одноразова передача коду в браузер виконується при відвідуванні касиром банку URL даного додатка. Згодом клієнтське додаток порталу банку контактує з сервером тільки для обміну даними, а не для обміну вмістом уявлення, таким як XHTML, CSS і JavaScript.


Це відрізняється від звичайної практики – парадигми Натисни і Жди, коли браузер контактує з сервером проміжного рівня для завантаження вмісту подання при кожній дії користувача. Однією з видатних функціональних можливостей односторінкових Ajax-додатків є відсутність наступних витягів сторінки з сервера після початкового завантаження вмісту уявлення, що відбувається у час запуску програми. З цього моменту односторінкове клієнтське Ajax-додаток контактує з логікою сервера проміжного рівня тільки для обміну необхідними для програми даними. Це призводить до компактної логіці проміжного рівня, концентрується повністю на бізнес-логікою, а не на генеруванні додаткового навантаження при передачі вмісту подання в браузери. Такий підхід прекрасно відокремлює прикладні рівні, що приводить до зрозумілого і елегантному дизайну Web-додатки.


Модуль логіки банківських операцій (PHP-код) – Контролер


Обговоривши користувальницький інтерфейс браузера, пора подумати про те, як будуть виконуватися по мережі банківські операції, обрані касиром банку. У даному сценарії ви передаєте обрану касиром команду Bank Action разом з необхідними вхідними даними в модуль, написаний на PHP, який виступає як брокер / посередник між браузером і базової банківської логікою, прихованої в PHP-модулі (як було описано в попередньому розділі). PHP-модуль Bank Actions призначений для підтримки активізації сервісних функцій проміжного рівня в REST-стилі. PHP-модуль Bank Actions приймає команду Action касира банку і ініціює виклик функції в PHP-модулі Bank Logic для отримання необхідних результатів. Для доступу до бази даних і надання результатів активізується відповідна банківська логіка. Після повернення управління з модуля Bank Logic модуль Bank Actions передає результати назад в браузер у вигляді даних в форматі JSON. Таким чином, PHP-модуль Bank Actions виступає як диспетчер запитів касира банку для виклику відповідної функції модуля Bank Logic, обробній ці запити.


XML-клієнт Web-сервісу (SOAP-доступ з PHP в. NET) – Помічник


Окрім роботи брокером / посередником PHP-модуль Bank Actions виступає також як PHP SOAP-клієнт Web-сервісів для отримання поточного курсу акцій, що зберігаються в портфелі даного клієнта. Це хороша можливість навчитися генерувати клієнтів Web-сервісів на PHP. У даному сценарії PHP-модуль Bank Actions ініціює виклик (SOAP XML) реального віддаленого Web-сервісу, розміщеного в Інтернеті. Цей Web-сервіс є Web-сервісом, заснованим на технології. NET, що дозволяє вам отримати досвід роботи з функціональними можливостями PHP по взаємодії. Ви також познайомитеся з синтаксичним аналізом XML за допомогою PHP SimpleXML API.


До цього часу ви повинні мати уявлення про загальні метою проектування в даному сценарії. Більш того, цей матеріал повинен забезпечити вас достатньо детальною інформацією для розробки, тестування, інтегрування і розгортання базових модулів банківського сценарію.


Головні завдання сценарію


У другій і третій частинах цієї серії статей ви виконаєте наведені нижче завдання, довівши сценарій до стану, коли буде можна його запустити, продемонструвати роботу і вивчити використовувані технології його розробки в Eclipse IDE і розгортання в Zend Core:



Висновок


Простота і низька вартість є причиною поширення революційної Web-платформи серед мільйонів користувачів по всьому світу. Зокрема, інструментальні засоби з відкритим вихідним кодом Eclipse і Zend Core спільно пропонують величезні можливості для організацій, що розглядають можливість міграції на платформи з відкритим вихідним кодом з пропрієтарних платформ, таких як середу. NET. Для подібного роду користувачів ці пропозиції надають відмінну основу з нульовою вартістю для експериментування, не зачіпаючи існуючу інфраструктуру. Слідкуйте за виходом другої частини даної серії статей, щоб приступити до реальної і цікавою Ajax-PHP-розробці. А поки познайомтеся ближче з можливостями модулів Eclipse PDT, Aptana і виконуючою системою Zend Core.


Ресурси


Отримати продукти та технології



Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*