Хранение мобильных позиций в удаленной базе данных, часть 2

Вступление

В предыдущей статье этой серии «Хранение мобильных позиций в удаленной базе данных» мы рассмотрели архитектуру приложения и начали с разработки базы данных, в которой мы будем хранить мобильные позиции.

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

Что такое WAF?

Прежде чем приступить к проектированию и разработке нашего мобильного приложения, мы должны осмотреть некоторые важные части, используемые Wakanda для управления вызовом Ajax на Wakanda Server, который является Wakanda Ajax Framework или WAF.

WAF — это клиентская и серверная среда JavaScript, которая позволяет осуществлять связь с помощью служб REST / JSON или JSON-RPC (которая не используется в этой статье). Архитектура WAF может быть представлена ​​следующим образом:

Серверная часть WAF

Это можно рассматривать как часть, отвечающую за обработку HTTP-вызова к серверу (HTTP Wakanda Server) от клиентской WAF и преобразование их в запросы к базе данных. Это контроллер в архитектуре MVC, который мы видели в предыдущей статье.

Замечания:

WAF на стороне сервера содержит множество других API-интерфейсов JavaScript, которые можно использовать, например API-интерфейс файлов и папок, SystemWorker, SharedWorker, модуль NET и т. Д.

Клиентская часть WAF

Он автоматически загружается веб-браузером и содержит множество API-интерфейсов, разработанных инженерами Wakanda или интегрированных в WAF Wakanda, таких как jQuery, jQueryUI, Raphael и другие. Три части, которые будут использоваться в нашем приложении и которые представлены на изображении выше:

DataProvider

Эта часть напрямую и автоматически связывается с сервером с помощью объекта XMLHttpRequest для отправки запросов Rest / JSON на сервер через HTTP. Он предоставляет прокси-объект для каждого класса данных в хранилище данных на стороне сервера. Объект ds представляет открытую часть хранилища данных, поэтому на стороне клиента мы можем запросить хранилище данных напрямую, используя этот объект. Например:

// get all entities from the Position dataClass
ds.Position.all();

// get the longitude of the position with key equal to 1

ds.Position(1).longitude;

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

Источник данных

Это набор API, который автоматизирует управление данными, представленными в виджетах. Преимущество использования данных на странице с использованием источника данных состоит в том, что данные, представленные в виджете, не зависят от виджетов и имеют собственную систему управления событиями. Поэтому, когда данные модифицируются, происходит событие. Источник данных также дает вам возможность запрашивать коллекцию объектов, представленных в виджетах.

Для получения дополнительной информации об API источника данных см. Этот документ .

Виджеты

Виджеты — это элементы интерфейса Wakanda на основе HTML5, CSS3 и JavaScript. В Wakanda есть три типа виджетов: рабочий стол, планшет и мобильный. Виджеты могут загружать данные непосредственно из объекта источника данных.

Для получения более подробной информации об API виджетов, смотрите этот документ .

 button2.click = function button2_click(event) {

    // Get the current position from the mobile using the geolocation API
    navigator.geolocation.getCurrentPosition(Success, Error);

    function Success(position) {

        // Create a new position datasource entity
        sources.position.addNewElement()

        // Set the entity longitude and latitude
        sources.position.longitude = position.coords.longitude;
        sources.position.latitude = position.coords.latitude;

        // Set the creation Date as the current date
        sources.position.creationDate = new Date();

        // Save the entity in the remote Wakanda server
        sources.position.save({
            onSuccess: function (e) {
                alert("saved");
            },

            onError: function (err) {
                alert(err.message);
            }

        });

    }

    function Error(err) {
        alert(err.message);
    }

};

 navigator.geolocation.getCurrentPosition(Success, Error);

 sources.position.addNewElement();

 // set the longitude and latitude to the datasource

sources.position.longitude = position.coords.longitude;
sources.position.latitude = position.coords.latitude;

sources.position.creationDate = new Date();

 sources.position.save({

    onSuccess: function (e) {
        alert("saved");
    },

    onError: function (err) {
        alert(err.message);
    }

});