1. Що потрібно для створення подібного програми
2. Крок 2. Встановлення з'єднання з проектом DevOps за допомогою EGit в Eclipse
3. Крок 3. Управління життєвим циклом додатка за допомогою інструменту командного рядка Cloud Foundry (cf)
4. Крок 4. Перенесення додатка на сервери Bluemix
5. Розробка коду програми для відстеження авіарейсів
6. висновок
7. Ресурси для скачування

Увійдіть в IBM Bluemix ™
Ця хмарна середовище містить безкоштовні служби, інструменти часу виконання і інфраструктуру, які допоможуть вам швидко створити і розгорнути своє наступне мобільне або веб-додаток.

Ця програма для відстеження авіарейсів відображає на карті Google Maps розташування літака на підході до аеропорту в режимі реального часу. Я побудував його, поєднавши сервіси Bluemix із зовнішніми, сторонніми API, включаючи API Flight Status by Airport, API Google Maps і про погоду. Програма відстеження авіарейсів носить в основному розважальний характер, але її ідею і технічну реалізацію можна застосовувати і в бізнес-сценаріях.

Для створення цього додатка необхідні наступні сторонні API:

• сервіс Flex FlightStats API , Що надає доступ до інформації про авіарейси, включаючи положення (широта і довгота), розрахунковий та фактичний час відправлення і прибуття, тип літака, затримку рейсу і швидкість літака;
• сервіс Google Maps Javascript API , Який допомагає створювати спеціальні карти і візуалізувати дані.

запустити програму отримати код

Що потрібно для створення подібного програми

Крок 1. Копіювання додатки

Натисніть кнопку Отримати код і скопіюйте проект в IBM DevOps Services.

1. Клацніть на EDIT CODE (якщо ви ще не ввійшли в систему, введіть облікові дані DevOps Services).
2. Натисніть кнопку FORK в меню, щоб створити новий проект.
3. У відповідь на пропозицію назвіть новий проект і натисніть кнопку SAVE, щоб створити копію коду в своєму проекті і Git-репозиторій.
4. Підключіть Eclipse до Git-сховища і завантажте код на локальний жорсткий диск.

Крок 2. Встановлення з'єднання з проектом DevOps за допомогою EGit в Eclipse

З кодом Git-проекту можна працювати з Eclipse за допомогою плагіна EGit.

1. Встановіть EGit в Eclipse. Див. Опис в документації .
2. Скопіюйте URL-адресу Git .
3. В Eclipse виберіть File> Import.
4. У вікні Import виберіть Git> Projects from Git і натисніть кнопку Next.
5. Виберіть Clone UR і натисніть кнопку Next.
6. Вставте скопійований URL Git в поле URI. У розділі Authentication введіть ID користувача Jazz.net і пароль IBM ID. Натисніть кнопку Next.
7. Виберіть ті гілки, з якими ви хочете працювати, і натисніть кнопку Next.
8. Якщо потрібно, поновіть розділ Local Destination клонованого сховища та натисніть кнопку Next.
9. Натисніть кнопку Finish.

Тепер в Eclipse створений проект. Код програми можна змінити і доповнити новими функціями. Внесіть всі необхідні зміни і передайте їх в Git-репозиторій DevOps:

Тепер можна перенести додаток в Bluemix за допомогою інструменту командного рядка Cloud Foundry (cf) або DevOps Services і конвеєра безперервної доставки IBM. Можна також встановити плагін Bluemix для Eclipse і переносити додатки безпосередньо в Bluemix. Див. Документ Розгортання додатків за допомогою IBM Eclipse Tools для Bluemix . Я користуюся інструментом командного рядка cf.

Крок 3. Управління життєвим циклом додатка за допомогою інструменту командного рядка Cloud Foundry (cf)

Один із способів розгортання веб-додатки в середовищі Bluemix - з інтерфейсу командного рядка. Він дозволяє управляти розгортанням, запускати і зупиняти програми та виконувати багато інших дій.

1. Завантажити та встановити файл Cloud Foundry для 64-розрядної версії Windows з GitHub .
2. Перевірте установку: C: \ Users \ IBM_ADMIN> cf -version cf version 6.3.0-053b818-2014-07-14T21: 30: 59 + 00: 00
3. Для входу в Bluemix використовуйте наступні команди: C: \ Users \ IBM_ADMIN> cf api https://api.ng.bluemix.net Setting api endpoint to https: //api.ng.bluemix.net ... OK API endpoint: https://api.ng.bluemix.net (API version: 2.2.0) Not logged in. Use 'cf login' to log in. C: \ Users \ IBM_ADMIN> cf login API endpoint: https://api.ng.bluemix.net Email> [email protected] Password> Authenticating ... OK
4. Натисніть на файли вибрану програму Bluemix в своїй локальному середовищі. Див. документацію Bluemix .

Крок 4. Перенесення додатка на сервери Bluemix

1. За допомогою команди cf push перенесіть WAR-файл з проекту Eclipse в Bluemix. В даному випадку <application name> - це унікальне ім'я вашого застосування: cf push <application name> -pc: \ <path> \ newflightapp.war
2. Після появи повідомлення про успішну операцію відкрийте панель інструментів Bluemix. Новий додаток можна перевірити, натиснувши на видиму там посилання (http: // <application name> .mybluemix.net /).

Є й інші способи управління і розгортання додатків в Bluemix. Див. Документацію Getting Started with IBM Continuous Delivery Pipeline for Bluemix і Getting started with IBM Bluemix and DevOps Services using Java .

Розробка коду програми для відстеження авіарейсів

Код додатка для відстеження авіарейсів містить клас Java ™, який приймає дані від сервісу Flight Track by Airport через XML-канал. API в режимі реального часу або близькому до нього повертає список авіарейсів на підході до певного аеропорту. Відповідний XML-документ, що повертається сервісом, містить такі дані, як координати польоту, швидкість, тип літака, аеропорт вильоту і аеропорт прибуття. Дані обробляються з використанням DOM-парсера, і частина отриманих даних форматується в документ JSON. Ці дані JSON використовуються в файлі JavaServer Pages (JSP) для створення призначеного для користувача інтерфейсу, який відображає місце розташування літака на карті за допомогою JQuery і API Google Maps.

Ось як це працює. сервіс API Flight Track by Airport надає URL, якому в якості параметрів потрібні значення FlightStats ID і App Key. Це унікальний ідентифікатор і ключ, призначені після реєстрації. До URL додається код аеропорту, зазначеного або вибраного користувачем:

https://api.flightstats.com/flex/flightstatus/ {protocol} / v2 / {format} / airport / tracks / {Airportcode} / arr? appId = <yourId> & appKey = <yourKey> .... / MaxFlights = 10

У файлі flightstat.java, який знаходиться в імпортованому проект в Eclipse, в папці src, є метод flightQ (String ac). Цей метод приймає код аеропорту в якості параметра і додає до форми дійсний URL. Передача через URL параметра maxFlights = 10 обмежує кількість випадкових рейсів у відповіді десятьма:

URL url = new URL ( "https://api.flightstats.com/flex/flightstatus/rest/v2/xml/airport/tracks/" + ac + "/ arr? AppId = <yourId> & appKey = <yourkey> & includeFlightPlan = false & maxPositions = 1 & maxFlights = 10 ");

Відповідь API містить відомості про 10 рейсах, що прибувають в обраний аеропорт. Цей XML-відповідь зчитуються DOM-парсером, і з нього витягуються елементи:

URLConnection conn = url.openConnection (); DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance (); DocumentBuilder builder = factory.newDocumentBuilder (); Document doc = builder.parse (conn.getInputStream ()); NodeList nodes = doc.getElementsByTagName ( "flightTrack"); buffer.append ( "["); for (int i = 0; i <nodes.getLength (); i ++) {Element element = (Element) nodes.item (i);

Елементи з XML-відповіді з'єднуються за допомогою StringBuffer, утворюючи вихідні дані форматі JSON, які повертається методом flightQ (String ac). Наступний фрагмент даних JSON демонструє один рейс:

{ "FlightNumber": "AA10", "lat": 36.0161, "lon": -107.2828, "description": "<b> Flight Number: AA10 </ b> <br/> <b> Departure Airport Code: LAX </ b> <br> <b> Arrival Airport Code: JFK </ b> </ br> <br> Speed: 584 miles / hour </ br> <br> Longitude: -107.2828 Latitude: 36.0161 </ br> "}

В папці WebContent міститься JSP-файл flightTrack.jsp, який створює інтерфейс користувача Google Map з функцією JQuery $ (document) .on. Потім він викликає метод initialize (), який відображає карту Google Map з точкою 40 ° широти і 30 ° довготи в центрі екрану і рівнем збільшення 3. Карта відображається в елементі <div> id "map_canvas".

$ (Document) .on ( "pageinit", "#map_page", function () {initialize ();}); function initialize () {directionsDisplay = new google.maps.DirectionsRenderer (); var mapCenter = new google.maps.LatLng (40.00, -30.00); var myOptions = {zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP, center: mapCenter} map = new google.maps.Map (document.getElementById ( 'map_canvas'), myOptions);

У коді JSP виклик flightQ (String ac) повертає строкові дані JSON, які присвоюються змінної JavaScript. Ці дані зазначають місце розташування кожного рейсу на карті за допомогою API Google Maps. Див. Наступний приклад. (Щоб отримати додаткові відомості відповідної документації і прикладі коду на сайті Google Developers .)

...... flightstat f = new flightstat (); String json = f.flightQ (aircode); ....... var markers = <% = json%>; ....... Var gmarkers = []; for (i = 0; i <markers.length; i ++) {var data = markers [i] var myLatlng = new google.maps.LatLng (data.lat, data.lon); var marker = new google.maps.Marker ({position: myLatlng, map: map, title: data.flightNumber}); (Function (marker, data) {// Attaching a click event to the current marker google.maps.event.addListener (marker, "click", function (e) {infoWindow.setContent (data.description); for (var j = 0; j <gmarkers.length; j ++) {gmarkers [j] .setIcon ( 'http://google.com/mapfiles/ms/micons/red-dot.png');} marker.setIcon ( 'airplane_tourism. png '); infoWindow.open (map, marker);}); gmarkers.push (marker);}) (marker, data); }}

Координати (широта і довгота) кожного літака відзначаються на карті Google Maps. Додається подія click, яке відображає швидкість літака, номер рейсу і аеропорти прибуття і призначення. Наприклад, наступний екран показує відомості про рейс, коли користувач клацнув на значку червоного маркера, що вказує місце свого літака на карті.

На наступному малюнку представлена ​​схема додатки Bluemix Flight Status and Tracking.

висновок

Ця стаття демонструє, як легко створити додаток і розгорнути його в Bluemix за допомогою вбудованих можливостей та інтеграції з зовнішніми API-сервісами для створення унікальної системи взаємодії. Сервіс FlightStats API надає безліч інших послуг, які можна використовувати цікавими способами для створення нових додатків. Аналогічний підхід і технічну реалізацію можна застосовувати і з іншими клієнтськими API для інших цілей.

Ресурси для скачування

Схожі теми

Підпишіть мене на повідомлення до коментарів