BRATAX APP

versión 1
1 Requerimientos desarrollo
La implementación de soluciones móviles multiplataforma, ha evolucionado tratando de facilitar
el desarrollo para las múltiples plataformas existentes hoy en día, así que es posible implementar
una solución en javascript, y empaquetar para todas las plataformas, sin necesidad de modificar el
código, es necesario tener al menos: un equipo en mac, para empaquetar IOS, y otro en linux o
windows, para empaquetar Androide. Como se había señalado en la documentación inicial,
vamos a utilizar Node JS, Vue, pero ahora todo lo vamos a desarrollar con NativeScript.
Como se aprecia en la imagen, con
NativeScript podemos generar
entornos gráficos de usuario, que
utilicen las librerías nativas de cada
plataforma, permitiendo desarrollar
una sola aplicación, y compilar para
IOS y Androide, inclusive se
encuentran en prueba, windows
mobile, y firefox mobile. Al utilizar
las librerías nativas, el acceso a
recursos del dispositivo es más
transparente, y evita las restricciones
del webview, inclusive el pwa, que está definido en el documento inicial, está más enfocado a
aplicaciones offline, pero BRATAX necesita funcionamiento online un 100%. Con respecto al
lenguaje, como vemos soporta JS y VUE, para el framework de la app, así como se había
planteado en el documento inicial. Pero además trae soporte nativo, para la interfaz gráfica de
usuario, así que no sería necesario el uso de vue, para manejar la interfaz gráfica.
La decisión de utilizar nativescript, es sobre todo para utilizar mejor los recursos del móvil, pero
si lo que se necesita es solo la ubicación, es posible que se requiera únicamente para empaquetar.
Lo anterior quiere decir que posiblemente, si utilizamos únicamente los IDEs de cada
plataforma, no sería necesario de nativescript, esto basados en que lo que requerimos utilizar de
los dispositivos móviles, es solamente ubicación. Por lo tanto, el prototipo inicial, se desarrolla en
estándar, es decir, HTML, CSS, JS, sobre node. Empaquetamos con androide, y un webview.
1.1 I.D.E
El proceso de compilación y empaquetado de la aplicación, sobre diversas plataformas de
distribución, requiere el uso de un entorno grafico para el desarrollo, en nuestro caso, para que
se instalen las dependencias, ya que, en cada plataforma se utiliza uno distinto, por lo tanto se
deben tener instalados al menos 2 IDEs, desde un MAC, se puede compilar para IOs y Androide,
de lo contrario desde otros sistemas operativos, solamente se puede compilar para androide, para
este último, se debe instalar Android Studio, y para IOs, se debe instalar Xcode.
• ANDROIDE: https://developer.android.com/studio
• IOS: https://developer.apple.com/xcode/

1.2 Librerías
Para implementar esta solución móvil basada en geo-posicionamiento, es importante que la
aplicación cliente cumpla con varios requerimientos, respecto a librerías JS, siendo la base para el
buen funcionamiento de esta app.
El manejo de la interfaz gráfica, los soportes para utilizar los mapas, como el geocoder, el sistema
de trazado de rutas, son los requerimientos más importantes. Luego de revisar varias
posibilidades, se ha decidido utilizar posiblementemente ‘leaflet’, y su ecosistema de extensiones,
además que brinda un soporte amplio, para los dispositivos móviles más escasos de recursos, falta
pruebas dentro del entorno nativescript, pero con un simple webView con JS activado, está
funcionando, la otra posibilidad muy interesante, es mapbox-gljs, pero ellos enlazan su desarrollo
más a sus propios requerimientos privados, pero tienen mejor soporte para dispositivos móviles,
y sobre todo, utilizan webGL, los mapas renderizan en 3D.
En este momento, 15-03-2019, se tiene funcionando la base de esta app, en leaflet. Para el caso
específico del entorno de desarrollo de la app, es importante manejar varias versiones de nodeJS,
por asuntos de soporte de algunas librerías, pero vamos a tratar de utilizar siempre la última LTS.

1.2.1 NVM
Para administrar varios entornos de nodeJS, es decir, varias versiones, se utiliza normalmente el
nvm, un script para tal fin:

1.2.1.1 Descargamos e instalamos

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

or Wget:
 wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

Para verificar su funcionamiento:

nvm ls
Instalamos la versión de node que requerimos, por ahora, es la LTS.

nvm install –lts

En nuestro caso debe ser la v10.15.3.

1.2.2 Nativescript
Ya que tenemos el node LTS instalado,
podemos:

npm install -g nativescript

Para que se instale el nativescript, de manera global, esto, dentro del entorno nodejs v10.15.3
Probamos ejecutando:

tns
1.2.2.1 Mqtt-client

https://market.nativescript.org/plugins/nativescript-mqtt

1.2.3 Leaflet
Los paquetes que dan soporte a los requerimientos de BRATAX APP, se pueden instalar desde
npm, y básicamente son:

leaflet, leaflet-control-geocoder, leaflet-routing-machine, leaflet.locatecontrol

Para mayor información:
https://leafletjs.com/reference-1.4.0.html
http://www.liedman.net/leaflet-routing-machine/tutorials/
https://github.com/perliedman/leaflet-control-geocoder
https://github.com/domoritz/leaflet-locatecontrol

1.2.4 Mapbox
El entorno para desarrollar posiblemente sobre las librerías de mapbox está en proceso de
selección.
https://github.com/mapbox/mapbox-gl-native/

1.2.4.1 Add local osrm sever to mapbox gl direction

I am going to use my local osrm server in order to do routing in a map based on mapbox GL. In
mapbox-gl-directions.js there is a server part:

var initialState = {
api: 'https://api.mapbox.com/directions/v5/',
profile: 'driving-traffic',
unit: 'imperial',
proximity: false,
styles: [],
controls: {
inputs: true,
instructions: true
},

I would like to replace api with 'localhost:5000/route/v1/' but it is not working.

OK. There are two lines that should be modified in mapbox-gl-directions.js.
First: change

api: 'https://api.mapbox.com/directions/v5/',

to

api: 'localhost:5000/route/v1/driving/',

Second: change

request.open('GET', api + 'mapbox/' + profile + '/' + query + '.json?' + options.join('&'),

true);

to

request.open('GET', api + query + '?

alternatives=true&steps=true&geometries=polyline&overview=full&annotations=true', true);

• Directions version v3.1.3 do it slightly different in concatenating API and query. Now
they put 'mapbox/' as part of profile name. You do not need to change anything in request
anymore, instead change two lines in initialState: api - replace with 'localhost:5000/route/
v1/', and below it profile - replace with 'driving'. Much cleaner that way. – Sanctus Sep 25
'18 at 17:29