{"id":233,"date":"2016-04-15T15:46:45","date_gmt":"2016-04-15T15:46:45","guid":{"rendered":"http:\/\/apuntescreativos.890m.com\/?page_id=233"},"modified":"2023-03-29T22:14:37","modified_gmt":"2023-03-29T22:14:37","slug":"elementos-phonegap","status":"publish","type":"page","link":"https:\/\/tunjasoporte.890m.com\/index.php\/elementos-phonegap\/","title":{"rendered":"Elementos Phonegap"},"content":{"rendered":"<h2>ELEMENTOS PHONEGAP<\/h2>\n<p>por: Wilson Fabian Roa Mart\u00edn<\/p>\n<p>A continuaci\u00f3n se muestran algunos elementos a considerar cuando estamos trabajando con phonegap.<\/p>\n<p>Una app Phonegap \u00a0en realidad es una aplicacion web empaquetada para que pueda ser interpretada por diferentes dispositivos en diferentes plataformas. Partiendo de la base de una aplicaci\u00f3n en blanco se pueden tener en cuenta las siguientes recomendaciones.<\/p>\n<ul>\n<li>Con jquery mobile podemos modificar los contenidos de las paginas html empleando c\u00f3digo javascript, desde all\u00ed podemos invocar servicios web o servlets mediante peticiones ajax. Creo que es la forma en que se puede interactuar\u00a0con una base de datos externa. Se puede trabajar con xml o json.<\/li>\n<li>Podemos asignar la apariencia que queramos a nuestra app empleando el theme roller de jquery mobile\u00a0<a title=\"http:\/\/themeroller.jquerymobile.com\/\" href=\"http:\/\/themeroller.jquerymobile.com\/\">http:\/\/themeroller.jquerymobile.com\/<\/a>, la condici\u00f3n es vincularlo al proyecto en la carpeta \/css\/theme, asi:<\/li>\n<\/ul>\n<pre style=\"padding-left: 60px;\">&lt;link rel=\"stylesheet\" href=\"css\/themes\/audsis.min.css\" \/&gt;\r\n&lt;link rel=\"stylesheet\" href=\"css\/themes\/jquery.mobile.icons.min.css\" \/&gt;<\/pre>\n<ul>\n<li>Para que funcionen tambi\u00e9n los temas tuve que eliminar todo el contenido del index.css, eso si, dejando su respectiva copia de seguridad.<\/li>\n<li>Se deben hacer algunas configuraciones en el config.xml para tener control sobre la aplicaci\u00f3n:<\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\">Se pueden cambiar los siguientes par\u00e1metros:<\/p>\n<pre style=\"padding-left: 60px;\">&lt;name&gt;Audsis&lt;\/name&gt;\r\n&lt;description&gt;\r\nSistema de Administraci\u00f3n de Audiencias\r\n&lt;\/description&gt;\r\n&lt;author email=\"tunjasoporte@gmail.com\" href=\"http:\/\/audsis.no-ip.info\"&gt;\r\nCentro de Servicios Judiciales Para Adolescentes de Tunja\r\n&lt;\/author&gt;<\/pre>\n<pre style=\"padding-left: 60px;\">&lt;preference name=\"fullscreen\" value=\"false\" \/&gt; &lt;!--pantalla completa--&gt;<\/pre>\n<pre style=\"padding-left: 60px;\">&lt;preference name=\"android-minSdkVersion\" value=\"7\" \/&gt;<\/pre>\n<pre style=\"padding-left: 60px;\">&lt;preference name=\"android-targetSdkVersion\" value=\"14\" \/&gt;&lt;!--Esta propiedad indica que version de android emplear\u00e1 la app--&gt;<\/pre>\n<p style=\"padding-left: 60px;\">La selecci\u00f3n de las versiones va de acuerdo a las expuestas por android en el sdk manager. Recordemos que desde ubuntu podemos acceder desde la consola con el simple comando \u00ab<strong>android<\/strong>\u00bb (si se configur\u00f3 previamente).<\/p>\n<p style=\"padding-left: 60px;\">Es posible modificar los iconos, solo hay que editarlos en el directorio correspondiente.<\/p>\n<pre style=\"padding-left: 60px;\">&lt;icon gap:platform=\"android\" gap:qualifier=\"ldpi\" src=\"www\/res\/icon\/android\/36.png\" \/&gt;\r\n&lt;icon gap:platform=\"android\" gap:qualifier=\"mdpi\" src=\"www\/res\/icon\/android\/48.png\" \/&gt;\r\n&lt;icon gap:platform=\"android\" gap:qualifier=\"hdpi\" src=\"www\/res\/icon\/android\/72.png\" \/&gt;\r\n&lt;icon gap:platform=\"android\" gap:qualifier=\"xhdpi\" src=\"www\/res\/icon\/android\/96.png\" \/&gt;\r\n<\/pre>\n<p style=\"padding-left: 60px;\">otras propiedades:<a title=\" http:\/\/docs.build.phonegap.com\/en_US\/configuring_preferences.md.html#Preferences\" href=\"%20http:\/\/docs.build.phonegap.com\/en_US\/configuring_preferences.md.html#Preferences\"> http:\/\/docs.build.phonegap.com\/en_US\/configuring_preferences.md.html#Preferences<\/a><\/p>\n<ul>\n<li>Si queremos compilar nuestra aplicaci\u00f3n desde build.phonegap.com \u00a0debemos comprimir la aplicaci\u00f3n en formato zip, s\u00f3lo hay que tener la precauci\u00f3n de que no se comprima en un subdirectorio. La aplicaciones se puede compilar las veces que se desee y puede ser descargada mediante un c\u00f3digo QR. Se puede omitir en la compresi\u00f3n la carpeta platforms,<\/li>\n<\/ul>\n<h4><\/h4>\n<h4>COMPILAR\u00a0DE FORMA ALTERNATIVA<\/h4>\n<p>En mi caso la compilaci\u00f3n a trav\u00e9s de phonegap build funciona sin problemas, sin embargo, no consigo tener el total control de el versionado y los mensajes de alerta o las fechas, son capturadas en unos di\u00e1logos que no corresponden a lo que program\u00e9.<\/p>\n<p>Para este caso encontr\u00e9 una opci\u00f3n alternativa de compilaci\u00f3n empleando android estudio la cual consta de los siguientes pasos:<\/p>\n<ul>\n<li>Una vez que se ha probado la aplicaci\u00f3n con la app movil de phongap, se hace una copia de seguridad incluyendo la carpeta platforms.<\/li>\n<li>Se importa desde android studio, la carpeta donde tengamos el proyecto (\u00abnext -&gt; next -&gt; next &#8230;.\u00bb).<\/li>\n<li>Se compila el proyecto (menu build\/rebuild proyect).<\/li>\n<li>Desde fuera de android studio, buscamos la carpeta del proyecto y reemplazamos los iconos asi: ldpi=36, mdpi=48, hdpi=72, xhdpi=96; estos iconos se remplazan en la carpeta \/platforms\/android\/res\/ y se coloca el icono que deseamos en la carpeta que corresponda. Ojo! es necesario cambiar el nombre del icono por el de icon.png.<\/li>\n<li>luego se hace una b\u00fasqueda de los iconos y se borra la totalidad de los que no necesitemos.<\/li>\n<li>Volviendo a android studio, dentro de la carpeta res (misma ubicaci\u00f3n de la modificaci\u00f3n de los iconos), modificamos el archivo \/values\/string.xml. En \u00e9l modificaremos el nombre de la aplicaci\u00f3n.<\/li>\n<li>Ahora se modifica el fichero \/xml\/config.xml con las propiedades correctas de nuestra aplicaci\u00f3n (nombre, descripci\u00f3n, etc.).<\/li>\n<li>Los archivos manifest.xml se actualizar\u00e1n autom\u00e1ticamente.<\/li>\n<li>Para cambiar el versionado es necesario modificar el archivo config.xml contenido en la carpeta rest. Se modifica el contenido como el siguiente ejemplo:<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/localhost\/miblog\/wp-content\/uploads\/2016\/04\/Selecci\u00f3n_001-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-300 size-full\" src=\"http:\/\/tunjasoporte.890m.com\/wp-content\/uploads\/2016\/04\/Selecci\u00f3n_001-1.png\" alt=\"Selecci\u00f3n_001\" width=\"770\" height=\"262\" \/><\/a><\/p>\n<ul>\n<li>Se recompila nuevamente.<\/li>\n<li>Se recomienda ejecutar la aplicaci\u00f3n para saber c\u00f3mo qued\u00f3 todo.<\/li>\n<li>Si \u00a0sali\u00f3 bien, copiamos a nuestro celular el archivo \/out\/production\/android.apk. Ojo! es mejor no copiar el fichero a trav\u00e9s de bluetooth porque puede que no funcione.<\/li>\n<li>Si hay una versi\u00f3n anterior instalada en el celular es mejor desinstalarla.<\/li>\n<li>Instalar la app que copiamos a nuestro celu y listo!<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Otros consejos en:\u00a0<a title=\"https:\/\/cordova.apache.org\/docs\/es\/latest\/config_ref\/\" href=\"https:\/\/cordova.apache.org\/docs\/es\/latest\/config_ref\/\">https:\/\/cordova.apache.org\/docs\/es\/latest\/config_ref\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>ELEMENTOS PHONEGAP por: Wilson Fabian Roa Mart\u00edn A continuaci\u00f3n se muestran algunos elementos a considerar cuando estamos trabajando con phonegap. Una app Phonegap \u00a0en realidad es una aplicacion web empaquetada para que pueda ser interpretada por diferentes dispositivos en diferentes plataformas. Partiendo de la base de una aplicaci\u00f3n en blanco se pueden tener en cuenta [&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-233","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/pages\/233","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=233"}],"version-history":[{"count":1,"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/pages\/233\/revisions"}],"predecessor-version":[{"id":644,"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/pages\/233\/revisions\/644"}],"wp:attachment":[{"href":"https:\/\/tunjasoporte.890m.com\/index.php\/wp-json\/wp\/v2\/media?parent=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}