<
  • Главная
Статьи

Додаток для відстеження авіарейсів на платформі Bluemix

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

Внесіть всі необхідні зміни і передайте їх в 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 Flight Status and Tracking

висновок

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

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

Схожі теми

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

Com/flex/flightstatus/ {protocol} / v2 / {format} / airport / tracks / {Airportcode} / arr?
Com/flex/flightstatus/rest/v2/xml/airport/tracks/" + ac + "/ arr?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью