{"id":289,"date":"2016-08-02T15:21:36","date_gmt":"2016-08-02T15:21:36","guid":{"rendered":"http:\/\/apuntescreativos.890m.com\/?page_id=289"},"modified":"2019-02-17T20:59:14","modified_gmt":"2019-02-17T20:59:14","slug":"ionic-v-2","status":"publish","type":"page","link":"https:\/\/tunjasoporte.890m.com\/index.php\/ionic-v-2\/","title":{"rendered":"Ionic v.2"},"content":{"rendered":"<p>Las funcionalidades de Ionic son similares a las de phonegap, sin embargo, se prometen ventajas adicionales.<\/p>\n<p>para la instalaci\u00f3n se recomiendan seguir los siguientes pasos (la guia de instalacion se encuentra en <a title=\"http:\/\/ionicframework.com\/docs\/v2\/getting-started\/installation\/\" href=\"http:\/\/ionicframework.com\/docs\/v2\/getting-started\/installation\/\">http:\/\/ionicframework.com\/docs\/v2\/getting-started\/installation\/<\/a>):<\/p>\n<p>Primero se actualiza la version de Node JS<\/p>\n<pre><span class=\"token function\">sudo<\/span> <span class=\"token function\">npm<\/span> cache clean -f \r\n<span class=\"token function\">sudo<\/span> <span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> -g n \r\n<span class=\"token function\">sudo<\/span> n stable<\/pre>\n<p>luego se instala el Ionic en su versi\u00f3n 2<\/p>\n<pre><span class=\"gp\">$ <\/span>npm install -g ionic@beta<\/pre>\n<p>una vez instalado podremos conocer la versi\u00f3n mediante el comando,<\/p>\n<pre>ionic -v<\/pre>\n<p>para crear un proyecto en blanco se emplea el siguiente comando,<\/p>\n<pre>ionic start nameapp blank --v2 --ts<\/pre>\n<p>para tener una visualizaci\u00f3n del \u00a0proyecto se puede usar,<\/p>\n<pre>ionic serve -l<\/pre>\n<p>para agregar una plataforma primero es necesario instalar cordova.<\/p>\n<pre><span class=\"gp\">$ <\/span>npm install -g cordova<\/pre>\n<p>para agregar la plataforma, dentro de la carpeta del proyecto se ingresa,<\/p>\n<pre><span class=\"gp\">$ <\/span>ionic cordova platform add android o $ionic platform add android<\/pre>\n<p>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,<\/p>\n<pre>$ ionic g page namepage\r\n<\/pre>\n<p>fuente:\u00a0<a title=\"https:\/\/www.youtube.com\/watch?v=6RLv5ovnTsc\" href=\"https:\/\/www.youtube.com\/watch?v=6RLv5ovnTsc\">https:\/\/www.youtube.com\/watch?v=6RLv5ovnTsc<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>para compilar<\/p>\n<pre>sudo ionic cordova prepare android\r\nsudo ionic cordova build android\r\n\r\nionic cordova build --release android<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre><\/pre>\n<p>Para\u00a0 versiones como ionic 3 es posible que no funcione. Intente correr el siguiente comando.<\/p>\n<pre>npm update node-sass<\/pre>\n<p>&nbsp;<\/p>\n<p>Para crear una p\u00e1gina por consola, ubicarse en el directorio del proyecto y desde la consola ingrese (login es el nombre de la p\u00e1gina):<\/p>\n<pre>ionic g page login<\/pre>\n<p>fuente\u00a0<a href=\"https:\/\/guiadev.com\/manual-de-ionic-framework-parte-04\/\">https:\/\/guiadev.com\/manual-de-ionic-framework-parte-04\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Para establecer conexion con fuentes http<\/p>\n<pre><code class=\"nohighlight\">$ ionic cordova plugin add cordova-plugin-advanced-http<\/code> <code class=\"nohighlight\">\r\nnpm install --save @ionic-native\/http<\/code><\/pre>\n<p class=\" language-shell\">Para crear un proveedor de servicios<\/p>\n<pre class=\" language-shell\">$ ionic g provider user-service<\/pre>\n<p>Para almacenamiento local<\/p>\n<pre>$ sudo ionic cordova plugin add cordova-sqlite-storage\r\n$ sudo npm install --save @ionic\/storage<\/pre>\n<p>&nbsp;<\/p>\n<p>Para la compilaci\u00f3n es necesario instalar gradle. Primero se verifica la versi\u00f3n de java instalada<\/p>\n<pre class=\"highlight\">$ java -version\r\njava version \"1.8.0_121\"\r\n\r\n<\/pre>\n<p>Despu\u00e9s se instala sdkman<\/p>\n<pre>$ curl -s \"https:\/\/get.sdkman.io\" | bash\r\n$ source \"$HOME\/.sdkman\/bin\/sdkman-init.sh\"\r\n$ sdk version\r\n\r\n<\/pre>\n<p>Se instala el gradle seg\u00fan la versi\u00f3n deseada y listo!<\/p>\n<pre>$ sdk install gradle 4.10.2<\/pre>\n<p>Fuentes: <a href=\"https:\/\/gradle.org\/install\/\">https:\/\/gradle.org\/install\/ <\/a>\u00a0y\u00a0<a href=\"https:\/\/sdkman.io\/install\">https:\/\/sdkman.io\/install<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Plugins para visualizaci\u00f3n de archivos pdf<\/p>\n<pre>sudo ionic cordova plugin add cordova-plugin-file-transfer\r\n\r\nsudo ionic cordova plugin add cordova-plugin-file\r\n\r\nsudo ionic cordova plugin add cordova-plugin-document-viewer\r\n\r\nsudo npm install --save @ionic-native\/file @ionic-native\/document-viewer @ionic-native\/file-transfer\r\n\r\n\r\n<\/pre>\n<p>Fuente: <a href=\"https:\/\/www.youtube.com\/watch?v=kM4cCQn8Bz4\">https:\/\/www.youtube.com\/watch?v=kM4cCQn8Bz4<\/a><\/p>\n<p>otro modo de emplear visualizar el pdf<\/p>\n<pre><code class=\"nohighlight\">$ ionic cordova plugin add cordova-plugin-inappbrowser\r\n$ npm install --save @ionic-native\/in-app-browser<\/code><\/pre>\n<p>Fuente:\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=ybe_NgQv0hk\">https:\/\/www.youtube.com\/watch?v=ybe_NgQv0hk<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>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\u00a0 platforms\/android modificar de la siguiente forma:<\/p>\n<div>\n<pre>buildscript {\r\nrepositories {\r\nmaven { url \"https:\/\/mvnrepository.com\/artifact\/\" }\r\nmaven { url \"https:\/\/maven.google.com\" }\r\njcenter()\r\n}\r\n\r\ndependencies {\r\n\/\/compile(group: 'com.google.android.gms', name:'play-services-tasks-license', version: '11.8.0')\r\n\/\/ NOTE: Do not place your application dependencies here; they belong\r\n\/\/ in the individual module build.gradle files\r\nclasspath 'com.android.tools.build:gradle:3.0.0'\r\nclasspath 'com.google.android.gms:play-services-tasks-license:11.8.0'\r\n}\r\n}\r\n\r\nallprojects {\r\nrepositories {\r\nmaven { url \"https:\/\/maven.google.com\" }\r\njcenter()\r\n}\r\n\r\n\/\/This replaces project.properties w.r.t. build settings\r\nproject.ext {\r\ndefaultBuildToolsVersion=\"25.0.2\" \/\/String\r\ndefaultMinSdkVersion=19 \/\/Integer - Minimum requirement is Android 4.4\r\ndefaultTargetSdkVersion=26 \/\/Integer - We ALWAYS target the latest by default\r\ndefaultCompileSdkVersion=26 \/\/Integer - We ALWAYS compile with the latest by default\r\n}\r\n}\r\ntask clean(type: Delete) {\r\ndelete rootProject.buildDir\r\n}<\/pre>\n<\/div>\n<p>En el archivo build.gradle ubicado en el directorio de proyecto\u00a0 platforms\/android\/app modificar de la siguiente forma:<\/p>\n<div>\n<p>apply plugin: &#8216;com.android.application&#8217; buildscript { repositories { maven { url \u00abhttps:\/\/mvnrepository.com\/artifact\/\u00bb } maven { url \u00abhttps:\/\/maven.google.com\u00bb } mavenCentral() jcenter() } dependencies { classpath &#8216;com.google.android.gms:play-services-tasks-license:11.8.0&#8217; \/\/classpath &#8216;com.google.android.gms:play-services-tasks:11.8.0&#8217; \/\/classpath &#8216;com.google.firebase:firebase-iid:11.8.0&#8217; \/\/classpath &#8216;com.google.firebase:firebase-common:11.8.0&#8217; \/\/classpath &#8216;com.google.firebase:firebase-core:11.8.0&#8217; \/\/classpath &#8216;com.google.firebase:firebase-ads:11.8.0&#8217; classpath &#8216;com.android.tools.build:gradle:3.0.0&#8217; } } \/\/ Allow plugins to declare Maven dependencies via build-extras.gradle. allprojects { repositories { mavenCentral(); jcenter() } } task wrapper(type: Wrapper) { gradleVersion = &#8216;4.1.0&#8217; }<\/p>\n<p>para solucionar el problema de nombres de facebook<\/p>\n<p>adicionar\u00a0 en el directorio\u00a0 \/platforms\/android\/app\/src\/main\/res\/values\/strings.xml<\/p>\n<pre><code>&lt;string name=\"fb_app_id\"&gt;59523234234&lt;\/string&gt;\r\n&lt;string name=\"fb_app_name\"&gt;medesvaro.com&lt;\/string&gt;\r\n<\/code><\/pre>\n<\/div>\n<p>para actualizar paquetes ejemplo<\/p>\n<pre>sudo npm install node-sass\r\n\r\n<\/pre>\n<h2>Compilar la aplicaci\u00f3n directamente sobre el dispositivo conectado por usb<\/h2>\n<p>Que cosa m\u00e1s complicada de hacer. que pasos segu\u00ed<\/p>\n<p>primero se identifican los dispositivos usb conectados al pc<\/p>\n<pre><strong>lsusb<\/strong><\/pre>\n<p>luego hay que instalar el paquete adb, esto permitira reconocer los dispositivos android<\/p>\n<pre><strong>sudo apt-get\u00a0install android-tools-adb android-tools-fastboot<\/strong><\/pre>\n<p>se puede ver la versi\u00f3n instalada mediante el comando<\/p>\n<pre><strong>adb version<\/strong><\/pre>\n<p>para ver los dispositivos adnroid conectados conectados\u00a0 se usa<\/p>\n<pre><strong>adb devices<\/strong><\/pre>\n<p>&nbsp;<\/p>\n<p>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\u00f3n n\u00famero de compilaci\u00f3n para que se habilite el modo de compilaci\u00f3n. se habilitar\u00e1 en los ajustes del tel\u00e9fono el modo desarrollador donde se tendr\u00e1 que habilitar la opci\u00f3n de depuraci\u00f3n por usb. listo por este lado!<\/p>\n<p>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:<\/p>\n<pre><strong>sudo apt-get install libmtp-common mtp-tools libmtp-dev libmtp-runtime libmtp9<\/strong>\r\n\r\n<strong>sudo apt-get dist-upgrade sudo nano \/etc\/fuse.conf<\/strong>\r\n\r\n<strong>se borra el #de la ultima linea<\/strong>\r\n\r\n<strong>lsusb<\/strong>\r\n\r\n<strong> sudo nano \/lib\/udev\/rules.d\/69-mtp.rules <\/strong>\r\n\r\n<strong># Device ATTR{idVendor}==\"XXXX\", ATTR{idProduct}==\"YYYY\", SYMLINK+=\"libmtp-%k\", ENV{ID_MTP_DEVICE}=\"1\", ENV{ID_MEDIA_PLAYER}=\"1\" <\/strong>\r\n\r\n<strong>sudo nano \/etc\/udev\/rules.d\/51-android.rules<\/strong>\r\n\r\n<strong> ATTR{idVendor}==\"XXXX\", ATTR{idProduct}==\"YYYY\", MODE=\u201d0666\" <\/strong>\r\n\r\n<strong>sudo service udev restart <\/strong>\r\n\r\n<strong>sudo reboot<\/strong><\/pre>\n<p>Fuente :\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=IqVXbaL-kQg\">https:\/\/www.youtube.com\/watch?v=IqVXbaL-kQg<\/a><\/p>\n<p>Esto deber\u00eda funcionar. Ahora se ejecuta el proyecto desde la carpeta del proyecto ionic siempre como usuario root.<\/p>\n<pre><strong>sudo ionic cordova run android --device -lc<\/strong><\/pre>\n<p>Es necesario que no haya una instalaci\u00f3n de la previa de la app para que no haya problema.<\/p>\n<p>&nbsp;<\/p>\n<h4>VERSIONES DE RXJS<\/h4>\n<p>Me sucedi\u00f3 un problema en el sentido que firebase database 2 no generaba las consultas de suscripci\u00f3n. fue necesario correr las siguientes actualizaciones<\/p>\n<pre>npm install firebase angularfire2 --save\r\n\r\nnpm install rxjs@6 rxjs-compat@6 --save\r\n\r\nnpm install typescripth (actualizo a la version \"typescript\": \"^2.9.2\")<\/pre>\n<p>&nbsp;<\/p>\n<p>Con ello funcion\u00f3. las versiones de los paquetes de las versiones de los m\u00f3dulos instalados se pueden consultar en el archivo \u00abpackage.json\u00bb<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2>For Bucle<\/h2>\n<div>\n<pre>this.solCercanos = &lt;Peticion[]&gt;data;\r\n\r\nfor(leti:number=0;i&lt;this.solCercanos.length;i++){\r\n letpeti:Peticion;\r\n peti=&lt;Peticion&gt;this.solCercanos[i];\r\n if(peti.estado=='Finalizado'){\r\n }\r\n}\r\n\r\n<\/pre>\n<div>\n<h2>Consulta con condici\u00f3n<\/h2>\n<pre>this._chatSubscription = this.db.list('\/conductores\/'+this.usuarioLocal.id+'\/peticiones\/',data=&gt;(data.orderByChild('estado').equalTo('Finalizado'))).valueChanges();\r\nthis._chatSubscription.subscribe(data =&gt; {\r\n   this.solCercanos = &lt;Peticion[]&gt;data;\r\n});<\/pre>\n<div><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Las funcionalidades de Ionic son similares a las de phonegap, sin embargo, se prometen ventajas adicionales. para la instalaci\u00f3n 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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-289","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/pages\/289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/comments?post=289"}],"version-history":[{"count":22,"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/pages\/289\/revisions"}],"predecessor-version":[{"id":473,"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/pages\/289\/revisions\/473"}],"wp:attachment":[{"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/media?parent=289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}