Ionic v.2

Las funcionalidades de Ionic son similares a las de phonegap, sin embargo, se prometen ventajas adicionales.

para la instalación se recomiendan seguir los siguientes pasos (la guia de instalacion se encuentra en http://ionicframework.com/docs/v2/getting-started/installation/):

Primero se actualiza la version de Node JS

sudo npm cache clean -f 
sudo npm install -g n 
sudo n stable

luego se instala el Ionic en su versión 2

$ npm install -g ionic@beta

una vez instalado podremos conocer la versión mediante el comando,

ionic -v

para crear un proyecto en blanco se emplea el siguiente comando,

ionic start nameapp blank --v2 --ts

para tener una visualización del  proyecto se puede usar,

ionic serve -l

para agregar una plataforma primero es necesario instalar cordova.

$ npm install -g cordova

para agregar la plataforma, dentro de la carpeta del proyecto se ingresa,

$ ionic cordova platform add android o $ionic platform add android

todo se trabaja en el directorio app. por cada pagina se generan tres ficheros ej. home html, home scss y home.ts. Para crear una nueva pagina se emplea el comando,

$ ionic g page namepage

fuente: https://www.youtube.com/watch?v=6RLv5ovnTsc

 

para compilar

sudo ionic cordova prepare android
sudo ionic cordova build android

ionic cordova build --release android

 

 


Para  versiones como ionic 3 es posible que no funcione. Intente correr el siguiente comando.

npm update node-sass

 

Para crear una página por consola, ubicarse en el directorio del proyecto y desde la consola ingrese (login es el nombre de la página):

ionic g page login

fuente https://guiadev.com/manual-de-ionic-framework-parte-04/

 

Para establecer conexion con fuentes http

$ ionic cordova plugin add cordova-plugin-advanced-http 
npm install --save @ionic-native/http

Para crear un proveedor de servicios

$ ionic g provider user-service

Para almacenamiento local

$ sudo ionic cordova plugin add cordova-sqlite-storage
$ sudo npm install --save @ionic/storage

 

Para la compilación es necesario instalar gradle. Primero se verifica la versión de java instalada

$ java -version
java version "1.8.0_121"

Después se instala sdkman

$ curl -s "https://get.sdkman.io" | bash
$ source "$HOME/.sdkman/bin/sdkman-init.sh"
$ sdk version

Se instala el gradle según la versión deseada y listo!

$ sdk install gradle 4.10.2

Fuentes: https://gradle.org/install/  y https://sdkman.io/install

 

Plugins para visualización de archivos pdf

sudo ionic cordova plugin add cordova-plugin-file-transfer

sudo ionic cordova plugin add cordova-plugin-file

sudo ionic cordova plugin add cordova-plugin-document-viewer

sudo npm install --save @ionic-native/file @ionic-native/document-viewer @ionic-native/file-transfer


Fuente: https://www.youtube.com/watch?v=kM4cCQn8Bz4

otro modo de emplear visualizar el pdf

$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install --save @ionic-native/in-app-browser

Fuente: https://www.youtube.com/watch?v=ybe_NgQv0hk

 

para poder ejecutar el plugin de geolocalizacion en segundo plano es necesario adicionar algunas librerias a traves de maven. En el archivo build.gradle ubicado en el directorio de proyecto  platforms/android modificar de la siguiente forma:

buildscript {
repositories {
maven { url "https://mvnrepository.com/artifact/" }
maven { url "https://maven.google.com" }
jcenter()
}

dependencies {
//compile(group: 'com.google.android.gms', name:'play-services-tasks-license', version: '11.8.0')
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
classpath 'com.android.tools.build:gradle:3.0.0'
classpath 'com.google.android.gms:play-services-tasks-license:11.8.0'
}
}

allprojects {
repositories {
maven { url "https://maven.google.com" }
jcenter()
}

//This replaces project.properties w.r.t. build settings
project.ext {
defaultBuildToolsVersion="25.0.2" //String
defaultMinSdkVersion=19 //Integer - Minimum requirement is Android 4.4
defaultTargetSdkVersion=26 //Integer - We ALWAYS target the latest by default
defaultCompileSdkVersion=26 //Integer - We ALWAYS compile with the latest by default
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}

En el archivo build.gradle ubicado en el directorio de proyecto  platforms/android/app modificar de la siguiente forma:

apply plugin: ‘com.android.application’ buildscript { repositories { maven { url «https://mvnrepository.com/artifact/» } maven { url «https://maven.google.com» } mavenCentral() jcenter() } dependencies { classpath ‘com.google.android.gms:play-services-tasks-license:11.8.0’ //classpath ‘com.google.android.gms:play-services-tasks:11.8.0’ //classpath ‘com.google.firebase:firebase-iid:11.8.0’ //classpath ‘com.google.firebase:firebase-common:11.8.0’ //classpath ‘com.google.firebase:firebase-core:11.8.0’ //classpath ‘com.google.firebase:firebase-ads:11.8.0’ classpath ‘com.android.tools.build:gradle:3.0.0’ } } // Allow plugins to declare Maven dependencies via build-extras.gradle. allprojects { repositories { mavenCentral(); jcenter() } } task wrapper(type: Wrapper) { gradleVersion = ‘4.1.0’ }

para solucionar el problema de nombres de facebook

adicionar  en el directorio  /platforms/android/app/src/main/res/values/strings.xml

<string name="fb_app_id">59523234234</string>
<string name="fb_app_name">medesvaro.com</string>

para actualizar paquetes ejemplo

sudo npm install node-sass

Compilar la aplicación directamente sobre el dispositivo conectado por usb

Que cosa más complicada de hacer. que pasos seguí

primero se identifican los dispositivos usb conectados al pc

lsusb

luego hay que instalar el paquete adb, esto permitira reconocer los dispositivos android

sudo apt-get install android-tools-adb android-tools-fastboot

se puede ver la versión instalada mediante el comando

adb version

para ver los dispositivos adnroid conectados conectados  se usa

adb devices

 

Lo primero que se debe hacer es habilitar el modo desarrollador en el celu. Para ello se va a los ajustes y se selecciona acerca del dispositivo. se da clic repetidamente sobre la opción número de compilación para que se habilite el modo de compilación. se habilitará en los ajustes del teléfono el modo desarrollador donde se tendrá que habilitar la opción de depuración por usb. listo por este lado!

En caso que no aparezca el dispositivo en nuestro pc en el comando adb devices hay que tratar de agregarlo manualmente. primero se instalan lo siguiente:

sudo apt-get install libmtp-common mtp-tools libmtp-dev libmtp-runtime libmtp9

sudo apt-get dist-upgrade sudo nano /etc/fuse.conf

se borra el #de la ultima linea

lsusb

 sudo nano /lib/udev/rules.d/69-mtp.rules 

# Device ATTR{idVendor}=="XXXX", ATTR{idProduct}=="YYYY", SYMLINK+="libmtp-%k", ENV{ID_MTP_DEVICE}="1", ENV{ID_MEDIA_PLAYER}="1" 

sudo nano /etc/udev/rules.d/51-android.rules

 ATTR{idVendor}=="XXXX", ATTR{idProduct}=="YYYY", MODE=”0666" 

sudo service udev restart 

sudo reboot

Fuente : https://www.youtube.com/watch?v=IqVXbaL-kQg

Esto debería funcionar. Ahora se ejecuta el proyecto desde la carpeta del proyecto ionic siempre como usuario root.

sudo ionic cordova run android --device -lc

Es necesario que no haya una instalación de la previa de la app para que no haya problema.

 

VERSIONES DE RXJS

Me sucedió un problema en el sentido que firebase database 2 no generaba las consultas de suscripción. fue necesario correr las siguientes actualizaciones

npm install firebase angularfire2 --save

npm install rxjs@6 rxjs-compat@6 --save

npm install typescripth (actualizo a la version "typescript": "^2.9.2")

 

Con ello funcionó. las versiones de los paquetes de las versiones de los módulos instalados se pueden consultar en el archivo «package.json»

 

 

For Bucle

this.solCercanos = <Peticion[]>data;

for(leti:number=0;i<this.solCercanos.length;i++){
 letpeti:Peticion;
 peti=<Peticion>this.solCercanos[i];
 if(peti.estado=='Finalizado'){
 }
}

Consulta con condición

this._chatSubscription = this.db.list('/conductores/'+this.usuarioLocal.id+'/peticiones/',data=>(data.orderByChild('estado').equalTo('Finalizado'))).valueChanges();
this._chatSubscription.subscribe(data => {
   this.solCercanos = <Peticion[]>data;
});