En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:
Indice Tutorial Ionic >>
- Tutorial de Ionic - Construye Apps móviles multiplataforma con ionic desde cero
- Tutorial de Ionic - Instalar ionic y las herramientas necesarias para el desarrollo
- Tutorial de Ionic - Hola Mundo en Ionic
- Tutorial de Ionic - Estructura de un proyecto Ionic
- Tutorial de Ionic - Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 1 - Navegación por Tabs
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 2: Mostrando el mapa.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 3: Añadiendo FAB, marcador y ventana modal.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 4 - Mostrando la dirección a partir de las coordenadas y sacando foto con la cámara.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 5 - Guardando nuestros sitios en una base de datos local
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 6 - Mostrar detalles del sitio guardado y abrir navegador gps para llegar a el.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 7 - Modificar nuestros sitios.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 8 - Eliminar un sitio desde el listado deslizando el item con "ItemSliding".
- Tutorial de Ionic - Peticiones http - API REST
- Tutorial de Ionic - Firebase - parte 1: Autenticación con correo y contraseña
- Tutorial de Ionic - Firebase - parte 2: Database - Guardar nuestros sitios en la nube.
- Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS
- Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.
- Firmar el apk para subirlo a Google Play
- Mostrar un mapa offline en Ionic con Leaflet
- Directiva para mostrar y ocultar menú al hacer scroll en Ionic
- Como crear una app multi idioma con Ionic
- Como crear componentes personalizados con Ionic
Hola a todos,
Como el título del post indica hoy vamos a ver cómo generar un archivo .apk firmado para poder subirlo a google play.
Este es el último paso que debemos dar una vez tenemos desarrollada y lista nuestra aplicación para poder subirla a la tienda de aplicaciones de Google.
Android exige que todos los APK se firmen digitalmente con un certificado para poder instalarse.
Cuando firmas un APK se adjunta a este el certificado de clave pública que asocia el APK contigo y con tu clave privada correspondiente. Esto es necesario para poder lanzar cualquier actualización de la app asegurándose que provenga del autor original, por eso es importantísimo que guardemos el archivo keystore generado a buen recaudo para poder lanzar futuras actualizaciones ya que todas las aplicaciones deben usar el mismo certificado durante su vida útil.
Un keystore es un campo binario que contiene una o más claves privadas.
Si desarrollas una app nativa puedes generar el keystore firmar el apk desde Android studio, nosotros vamos a ver como firmar una aplicación generada desde ionic o apache cordova desde consola.
Para poder firmar el apk desde consola debemos seguir una serie de pasos que vamos a ver a continuación:
Lo primero que necesitamos es generar el keystore:
Si por ejemplo nuestra app se llama miapp para generar un keystore abrimos una terminal, nos situamos en la carpeta de nuestro proyecto y escribimos el siguiente comando:
keytool -genkey -v -keystore miapp.keystore -alias miapp -keyalg RSA -keysize 2048 -validity 10000
miapp.keystore es el archivo que se va a generar, el alias es un nombre de identificación para tu clave, en este caso le hemos llamado miapp.
Con keysize le indicamos que el tamaño de la clave sea de 2048 bits, es recomendavle dejarlo en este valor.
Por último con -validity fijamos el período de validez de tu clave en años, creo que con 10000 años será suficiente ;-P.
Al ejecutar el comando nos pide que introduzcamos una serie de datos:
Introduzca la contraseña del almacén de claves: Volver a escribir la contraseña nueva: ¿Cuáles son su nombre y su apellido? ¿Cuál es el nombre de su unidad de organización? ¿Cuál es el nombre de su organización? ¿Cuál es el nombre de su ciudad o localidad? ¿Cuál es el nombre de su estado o provincia? ¿Cuál es el código de país de dos letras de la unidad?
Te pide dos veces la contraseña, es importante que recuerdes la contraseña que has introducido ya que la necesitarás después.
Al final te muestra los datos que has introducido y te pide confirmación, le decimos que si:
¿Es correcto CN=Eduardo, OU=Revilla, O=revigames, L=Abadiño, ST=Bizkaia, C=ES? [no]: Si
Lo que os sale debe ser algo parecido a la siguiente imagen:
Bien, con esto ya hemos generado un archivo llamado miapp.keystore en la raiz de nuestro proyecto.
Ahora vamos a crear un nuevo archivo en la raiz del proyecto llamado build.json, lo creamos con nuestro editor de código y dentro escribimos el siguiente código:
{ "android": { "debug": { "keystore": "miapp.keystore", "storePassword": "XXXXX", "alias": miapp", "password" : "XXXX", "keystoreType": "" }, "release": { "keystore": "miapp.keystore", "storePassword": "XXXX", "alias": "miapp", "password" : "XXXX", "keystoreType": "" } } }
El primero es para la versión de debug y “release” es para la versión final que vas a subir a la play store.
En el campo keystore debes poner la ruta del archivo .keystore que acabamos de generar, si lo has generado en la raíz solo debes de poner el nombre del archivo, en este caso miapp.keystore.
En alias ponemos el alias que hemos puesto al crear el archivo
Después en storePassword debe poner la contraseña del almacén de claves que indicaste al crear el archivo.
En password debemos poner la contraseña.
Guardamos el archivo y ya solo nos queda generar el apk firmado con el siguiente comando:
ionic cordova build android --release
Si no ha detectado errores y se ha compilado bien podrás encontrar el apk firmado que debes subir a play store en la siguiente ruta dentro de tu aplicación:
/platforms/android/build/outputs/apk/android-release.apk
Eso es todo por hoy, espero que os haya sido de utilidad y ver vuestras apps triunfando en la play store pronto ;-).
Aprovecho para deciros que si has creado alguna app con ionic y la tienes en la play store puedes compartirlo en los comentarios, así servirá como inspiración para que otras personas puedan ver lo que se puede crear con ionic y al mismo tiempo seguro que ganáis alguna descarga extra que siempre viene bien 😉
Si necesitas desarrollar una aplicación móvil no dudes en solicitarme un presupuesto sin compromiso:
Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts :-),También puedes seguirme en Twitter en @revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.
Buenas tardes Eduardo,se que no tiene nada que ver con el post pero esto desesperado.
mira tengo un detalle quiero jalar datos de una tabla en firebase y al momento de igualar el valor que me arroja pero muestra el siguiente error “cannon set property ‘menu’ of null” este es el codigo que utilizo
this.ofDB.database.ref(“Productos”).orderByChild(“Local”).equalTo(this.local).on(“child_added”, function(snapshot){
console.log(snapshot.val());
this.menu=snapshot.val();
});
Hola Gamster12, Utiliza una función flecha en lugar de una función común.
Las funciones flecha las expliqué en este post: http://reviblog.net/2017/03/07/tutorial-de-ionic-2-crear-una-aplicacion-para-guardar-nuestros-sitios-geolocalizados-parte-2-mostrando-el-mapa/
Y permiten utilizar this en el contexto actual.
Es decir, en lugar de:
this.ofDB.database.ref(“Productos”).orderByChild(“Local”).equalTo(this.local).on(“child_added”, function(snapshot){
console.log(snapshot.val());
this.menu=snapshot.val();
});
utiliza esto:
this.ofDB.database.ref(“Productos”).orderByChild(“Local”).equalTo(this.local).on(“child_added”, (snapshot)=>{
console.log(snapshot.val());
this.menu=snapshot.val();
});
Espero que te funcione.
Un saludo
En parte si funciono, pero solo pe mostro un valor, cambie el tipo de variable,
declare la variable de esta forma menu:any={};
pero me arrojo el siguiente error “cannon read property ‘Nombre’ of undefined”
nota:quiero que muestre tantos valores como tengan el mismo valor que la variable local,
gracias por contestar
Saludos
hola Eduardo:
ya lo resolví, muchas gracias me ayudo bastante coloque un splice para agregar el valor de mi variable menú a otra variable y así logre que mostrara todos los datos,
te lo agradezco mucho
saludos
Hola, primero que todo muchas gracias por estos tutoriales tan detallados, he estado siguiéndolos y para la aplicación de guardar sitios he intentado agregar una función de buscar () pero no sé que debe ir en el .ts
posdata. también compré el libro 🙂
Hola Alejandra,
Antes de nada muchas gracias por el apoyo y por comprar el Libro :).
Puedes poner un buscador en el listado añadiendo esto a listado.html en ion-header justo despues de cerrar ion-navbar:
<ion-searchbar (ionInput)=”buscar($event)”
placeholder=”Buscar”></ion-searchbar>
Y después en listado.ts primero defines otra variable de clase que se llame
sitiosInitial y cuando obtienes los sitios bien desde la base de datos local o desde firebase la igualas a this.sitios es decir this.sitiosInitial = this.sitios;
y después añade esta función que se ejecutara cada vez que escribas en el buscador:
buscar(ev) {
let q : any;
// reseteamos los sitios para que inicialmente contengan toda la lista
this.sitios = this.sitiosInitial;
// guardamos en q lo que hemos escrito en searchbar
q = ev.target.value || ev || ”;
// si esta vacío no filtramos
if (q!=” && q.trim() == ”) {
return;
}
// con la función filter obtenemos en this.sitios solo aquellos que coincidan con la búsqueda
this.sitios = this.sitios.filter((v) => {
if (v.description.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
})
}
En este ejemplo filtramos por el campo description, pero puedes cambiar el if para filtrar por otros campos
Espero que se sea de utilidad.
Un saludo
Hola Eduardo,
¡Excelente post!. Hace meses que sigo este blog y la verdad me ha ayudado mucho en el aprendizaje de Ionic, y a realizar mi primera app. La casualidad de que justo cuando termino de desarrollar la versión de android posteas esta entrada que me ha resuelto todas las dudas 🙂
Así que te tomo la palabra y dejo el enlace de la aplicación LanzaroteDigital, la cual se trata de una app de noticias de Lanzarote.
https://play.google.com/store/apps/details?id=com.lanzarotedigital&hl=es
También aprovecho para abrir un debate, sobre las progressive web apps (PWA) ¿Crees que Ionic es una buena herramienta para ello? Así el código de esta app, podría sustituir por ejemplo a la del actual página de http://www.lanzarotedigital.com ?
¡Espero que les guste! Y muchas gracias de nuevo.
Hola writ3r:
¡Enhorabuena por la app!, si duda es un excelente ejemplo de lo que se puede conseguir con con ionic. La app es muy completa y funciona muy bien, es una gran App si quieres estar al día de lo que sucede en Lanzarote.
Si alguien vive en la zona o tiene pensado viajar a Canarias sin duda es una app imprescindible.
En cuanto a las progressive web apps creo que aún están en una fase temprana pero no cabe duda que es una tendencia creciente y cada vez veremos más.
Son muy interesantes las ventajas que ofrece, ionic puede ser una opción muy valida para desarrollar progressive web apps, aunque reconozco que todavía no he utilizado ionic para desarrollar ninguna PWA he leído algo de información al respecto.
En el momento que haga alguna prueba con ionic para desarrollar alguna PWA lo compartiré en el blog.
Si algún lector tiene ya experiencia desarrollando PWA con ionic sería interesante que dejase un comentario con su opinión.
Un saludo
hola eduardo.
se que para generar una apk se necesita el sdk, y para el ios necesito tener una mac y el xcode, pero no se que necesito para poder instalar mi aplicacion en un dispositivo movil con sistema operativo windows phone
espero puedas ayudarme, saludos y que tengas buen dia
Hola, Eduardo, antes de nada muchas gracias por el post, gracias a el he podido firmar y subir mi app creada con ionic a play store de Google.
Por otro lado, tal y como aconsejas aquí tenéis el enlace del google paly a mi app.
AlchemyVapp
https://play.google.com/store/apps/details?id=pnpk.alchemy.vapp
Yo he creado una aplicación para hacer los cálculos de las cantidades de líquidos que harían falta para hacer las recetas de vapeo, esto es, para la gente que vapea y se mezcla sus propios líquidos.
Me idea es ir mejorándola para poder compartir recetas he incluso hacer votaciones de las que cada uno sube, etc…
Empecé a hacerla sólo para ver hasta donde se podía llegar con córdova, y acabé pasándome a ionic, porque vi que me prestaba mucho trabajo ya hecho…
Hola Panapunk, enhorabuena por la App, espero que tengas mucho éxito.
Un saludo.