Cómo crear una app android de mi web en 5 minutos y gratis

Aprende a crear una app para android de tu web super rápido, fácil, bonita y encima gratis.

¿Cómo se te ha quedado el cuerpo? Con esta entrada casi que me puedo ir ya, porque con “La caló” que nos está cayendo casi que ni apetece escribir, pero bueno, ya que has llegado hasta aquí, te voy a contar mi secreto, la web que utilizo yo para preparar una app nativa de android basada en tu web, que la harás en 5 minutos y encima te va a lucir que ni te lo imaginas, y sin rascarte el bolsillo, que eso siempre se agradece.

Cómo dice el anuncio de esos grandes almacenes tan famosos que quieren dejar de ser Europeos con eso del Brexit…..

♪ ♫ Tampoco pido tanto, sólo un poco de todo… ♫ ♪

(Me ha enganchado la cancioncilla de marras).

Bueno, pues a lo que vamos, no pido tanto pero sí un poco de todo así que te voy a dar un poco de mi web favorita para crear la app de android de tu web, blog tienda online o lo que quieras.

Crear app android de mi web

La herramienta que utilizo yo para crear la app es appyet.

Para hacer tu app android lo que tienes que hacer es entrar en app.yet y registrarte.

Ya ves que es muy sencillo, pones tu email, contraseña, nombre y apellido y “Sign Up” Alé, una cosa menos!

Una vez logueado te llevará a un panel de administración para empezar a crear tu app, cuando estés dentro pulsa arriba a la derecha en la pestaña que está en azul “Create App”

Una vez en esa pantalla poner el nombre de tu aplicación “Gastre” , el nombre del paquete “es.gastre” bueno, eso te lo suele poner automático aunque tu lo puedes modificar y luego escoges la plantilla si has creado antes alguna app (pon blank Template) y dale a “Create App”.

¿Has visto qué fácil? Ya tienes tu primera app android creada!

Configurar aspecto de la app de android para tu web

Ahora que ya tienes tu app para android creada, vamos a configurar esa app y darle un toque muy profesional para que luzca con tu flamante blog.

Entra en los detalles de la app y verás varias pestañas, dale a “General” y lo configuras a tu gusto.

Lo que tienes que modificar aquí básicamente es lo siguiente:

1. Aplication Icon: Lo primero es cambiar el icono de la aplicación (es el que va a mostrar como icono en los smartphone). Le das a “Change icon” y pones un icono de 192x192 (Curratelo porque es la imagen de tu marca)
2. Notification Icon: Es el icono de las notificaciones, cada vez que publiques una entrada aparecerá este icono en la barra de los android (como pasa con whatsapp, twitter, telegram, etc….) así que pon algo bien relacionado. Aquí lo mismo, le das a “Change icon” y pon un icono de 48x40
3. Header Image: Esto es la cabecera de la app para darle un toque más personal (en el ejemplo no la he cambiado pero es muy simple) le tienes que dar igual que antes a “Change icon” y pon una imagen lo más guapa y representativa que puedas de 512 x 288.

Guardas los cambios en “Save Changes” y listo, ya tienes configurado el aspecto de tu app de android.

Configurar Módulos de tu aplicación de android

Perfecto, vamos a seguir , ahora vas a crear los módulos de tu app, es lo que va a aparecer como “menú” de la misma.

Le das a la pestaña de arriba “Modules” y a configurar nuevamente (Este es el proceso más delicado, pero tranqui, todo se puede modificar siempre en un futuro).

Al crear la plantilla “Blank” verás que te aparece ya un menú preparado, ahora lo vamos a personalizar a nuestro gusto.

Los cuatro primeros, “FeedQuery” son cuatro menús que vienen preparados para mostrar las siguientes noticias:

1. Últimas 24 horas
2. Todas las que no se han leído
3. Las marcadas como favoritas
4. Todos los podcasts

Si las quieres dejar en la app lo dejas como está, no hay que tocar nada, si no quieres que aparezca ninguna o quieres quitar alguna en especial le das a la derecha a “Details” y desmarca en la nueva pantalla que has entrado abajo del todo “Enabled” y le das a “Save Changes”, luego una vez guardado, arriba a la derecha pulsa en “Back Modules” para volver a los “módulos”.

Lo de GroupDivider lo que hace es poner una raya para separar los grupos en el menú de la app, la verdad que a mi me gusta, lo puedes dejar, o quitar des-habilitar igual que has hecho antes, eso te lo dejo a tu elección, a mi me gusta como está!

Pasamos a los ajustes debajo de GroupDivider2, te explico que son esas pestañas:

1. Downloads: esa la des-habilito siempre porque no consigo saber muy bien para que sirve, por lo que tengo entendido es para ver las imágenes que suele haber en las noticias, pero núnca me ha parecido interesante así que fuera!
2. Sync: Para sincronizar las noticias.
3. Themes: Para poder elegir entre el tema claro o el oscuro.
4. Settings: Las herramientas (Esta opción es imprescindible para que la persona que haya instalado la aplicación en su móvil pueda elegir si recibir notificaciones, y demás ajustes que te mostraré luego).
   

   
5. Explore: A esta opción se le pueden dar varias funciones:
1. por un lado se puede ajustar para que el que instale la app pueda buscar noticias o podcast de otras webs mediante un buscador.
2. o simplemente la opción de que le muestre determinadas noticias. (por ejemplo, si creas los siguientes menús “Seo, growth hacking y marketing online” y lo habilitas, el usuario si quiere puede hacer que sólo le muestre las noticias de Seo, o de lo que él quiera). Eso te enseño luego donde habilitarlo cuando crees tu primer módulo.

Las opciones de Placeholder Están totalmente ligadas con la de Explore, se utilizan para poder encontrar Feeds, foros o Podcasts de alguna “categoría” o web en caso de permitir buscar feeds o foros en las opciones de Explore.

En principio no hace falta tocar esa opción para nada, yo lo dejo en “enabled” y no influye para nada.

Cómo crear un módulo para mi app android.

Vamos empezar con lo importante, nuestros módulos personales, es decir, vamos a configurar el menú de nuestra app.

Para el ejemplo yo voy a poner primero el menú “Inicio”.

Entra en la pestaña “Modules” y vete abajo del todo a la siguiente pantalla:

Ahora pulsa sobre lo que quieras integrar, como ves esto funciona en su mayoría con agregadores “RSS” es decir, pones la url feed que quieras y te muestra su contenido, gran idea.

Si sabes el feed o (RSS/Atom) con que escojas la primera opción te va perfecto, si no estás seguro/a de cuál es, puedes escoger según tu plataforma (Blogger, Flickr, Pinterest, Tumblr o Wordpress) y el te va a poner el feed automáticamente a partir de la url que le pongas.

En mi ejemplo voy a poner el botón “Inicio” de mi web, para ello pongo mi url en la siguiente pantalla.

En “Menu Name” le pones el nombre de tu menú, en este caso “Inicio” y en “Menu Order” la posición, fijate que siempre son números pares, 0 es el primero, luego 2, 4, etc…. por eso no te preocupes porque luego los ubicas más fácil con las flechas que aparecen en la pestaña modules.

Ahora le das a Save y vas a la siguiente pantalla para configurar el feed.

Ya ves que me ha puesto automáticamente la url del feed a raíz de la url de mi web que le puse en RSS/Atom Feed Url.

En este apartado podemos configurar lo siguiente:

               

• RSS/Atom Feed Url: La url de nuestro feed o RSS/Atom
• Article Number Limit: Límite de número de artículos (Cuando el número de artículos exceda el límite, se eliminarán de forma automática los artículos leídos o no leídos más antiguos).
• DisQus Comment: Habilitar comentarios Disqus (os he hablado de porque considero que disqus es el mejor sistema de comentarios para una web?)
• DisQus Short Name: El nombre de tu cuenta de disqus en caso de que quieras habilitarlos.
• View Image on Touch: Abrir la imagen en la aplicación de visor de imágenes al pulsar sobre la imagen.
• Minimum Image Width: Anchura mínima de la imagen.
• Minimum Image Height: Altura mínima de la imagen.
• Text RTL: Sólo habilitar esta opción cuando el Feed es árabe o hebreo (No marcar).
• Show View Website: Habilita al final del artículo un botón para ver el artículo en la web, lo que hace es abrir el artículo en la web, considero que hay que marcarlo porque los feed en la mayoría de los casos son un resumen.
• Open in Default Browser: Marcando esta opción abre el artículo en el navegador que tengas en tu móvil, si no lo marcas lo abre dentro de la app.
• Show Translate: Muestra un menú para traducir la web a cualquier idioma.
• Show Copy Link: Muestra un menú para copiar el link del artículo.
• Show Share: Muestra un menú para compartir el artículo.
• Show Publisher: Muestra el nombre del editor de lista del feed y en la pantalla del artículo.
• Allow Delete: Permite a los usuarios eliminar los artículos (no de tu web, sino de su app cuando los han leído o no les interesa).
• Encoding: Siempre selecciona Auto Detect a no ser que la codificación sea incorrecta o si aparecen caracteres extraños.
• Extra HTML Header: CSS / JavaScript adicional para anexar a la etiqueta de encabezado HTML. (yo eso no lo toco).
• Include JQuery: Sólo activar esta casilla de verificación cuando por encima del encabezado HTML contiene la sintaxis de jQuery.

Ya ves que es bastante sencillo, simplemente marca o desmarca según tu gusto y también puedes hacer ensayo - error a ver que configuración te gusta más.

Una vez puesta tu configuración, le das a “Save” y te lo guarda.

Ahora te lleva a esta pantalla:

Como ves te muestra tu feed y te sale la opción de “Update / Delete” por si quieres modificarlo o eliminarlo y abajo “Add New Feed” es para que añadas otro feed, pero a este mismo menú.

Eso es por si quieres unificar varios feed en un sólo menú (realmente lo veo más útil si quiero crear una app para seguir diferentes feed, pero para nuestra propia web solo agrego un feed por menú) así que le damos arriba a la derecha a General y vamos a configurar el menú.

En este apartado podemos configurar lo siguiente:

• Name: El nombre del menú   
• Menu Icon: El icono del menú, tienes dos formas de cambiarlo, escoge entre unos cuantos iconos predeterminados por appyet dándole a “icon picker”

o pulsa sobre Icon Upload y sube tu propio icono (Mucho mas pro pero también más curro, tienes que preparar un icono de 72 x 72, si puedes esta opción es mi favorita).

• Mask and Tint Icon: El icono será enmascarado y teñido con la configuración del color del texto en el tema.
• Default Layout: Esto es para configurar cómo se van a mostrar los artículos en la app (list, grid, tile, card list, card magazine) Escoge el que más te gusta, aunque luego el usuario lo puede modificar si habilitas las opciones.
• Order: El orden del menú en la app.
• State: Es el estado del módulo.
• Added: El módulo está activo y se muestra en menú de la izquierda
• Added and Hidden: El módulo está activo y escondido del menú de la izquierda
• Removed: El módulo está inactivo (no forma parte de la sincronización) y se retira del menú de la izquierda
• Explore: Si marcas explore habilitas lo que comenté antes, para que el usuario de la app pueda seguir determinados menús. Si el módulo de aplicación inicial de Explore está habilitado, los usuarios de la app podrán añadir / quitar módulos utilizando el apartado “Explorar”
• Enabled: Para mostrar o no el apartado, si se desactiva desaparece del menú.

Una vez puesto a nuestro gusto le das a “Save Changes” y ya tienes tu primer módulo preparado. Ahora le das arriba a la derecha a “Back Modules” y volverás a los módulos para seguir creando la app android de tu web.

Te he enseñado a crear un módulo Feed, si quieres poner un “podcast” también puedes, pones el feed del podcast y lo agregas como has vista arriba, he puesto el ejemplo del podcast de “Oscar Feito” en mi app para que veas como luce!

Ahora vamos a ver como crear un módulo Web

A la hora de crear un módulo web, tenemos dos opciones:

• Web Content: Aquí pones el contenido dentro de un editor de textos, es como una entrada o página de “wordpres”, “blogger”, etc… en dónde puedes poner fotos, textos con cursiva, negrita, etc.. enlaces. Una vez terminada queda totalmente integrada en la app de forma nativa.

• Web link: si escoges web link lo que haces es poner un enlace de tu web y te muestra esa url en ese menú, muy cómodo si quieres crear unos menús de “quienes somos”, “acerca de”, etc…

En mi ejemplo he puesto las dos opciones en el menú “sobre mi web” para que veas las diferencias, yo me quedo con la nativa, pero está bien tener una alternativa (Toma pareado), espera, que esto lo enmarco…..

Yo me quedo con la nativa, pero está bien tener una alternativa - by @_gastre

Luego como ves, puedes poner el “FeedQuery” que es lo que te he comentado antes de “post sin leer”, “favoritos”, “ultimas 24 horas”, etc… en principio eso lo dejo como está

También puedes crear un menú de twitter, que mostrará los últimos twetts, de tapatalk, para integrar un foro en la app, o de MapBox (eso es para crear mapas, en principio no me interesa, pero si a ti sí (que redundante) puedes diseñar tu propio mapa y adjuntarlo a tu app.

Para una empresa puede ser interesante para mostrar como llegar a la empresa, etc…

Bueno, pues creo que con lo que te he contado tienes de sobra para montar la aplicación android de tu web en 5 minutos, ahora a seguir configurando.

Ajustes de la aplicación android para mi web

En la pestaña “Settings” de la web tenemos unas cuantas opciones para seguir configurando la app, son las siguientes:

• Display Language:  Aquí configuras el idioma por defecto para la app, si lo dejas en Auto pilla depende donde se instale (es lo mejor).
• Show Display Language: Mostrar / Ocultar idioma de la pantalla de configuración del módulo. Cuando se muestra el idioma de la pantalla, el usuario final puede elegir su  propio idioma de interfaz de usuario.
• Splash Screen: Es para poner una especie de landing cada vez que se entre en la app.
• Splash BgColor: Aquí se pone el color de fondo
• Splash Time: Se le dice cuanto tiempo tiene que aparecer en segundos.
• Splash Image: Se escoge la imagen que aparecerá de 150 x 150 px
• Default Theme: aquí eliges el tema por defecto.
• Sync Interval: Indicas el intervalo de tiempo de actualizar los feed de la app cuando se instala (no es recomendable poner un valor muy bajo).
• Sync on startup: Sincronizar automáticamente cada vez que el usuario abra la aplicación.
• Article WiFi Only: Sincronizar los artículos sólo cuando el Wi-Fi esté conectado
• Image WiFi Only: Sincronizar las imágenes sólo cuando el Wi-Fi esté conectado
• Download WiFi Only: Descargar archivos sólo cuando el Wi-Fi esté conectado
• Show Notification: Mostrar una notificación cada vez que salga un nuevo artículo (esto es de lo mejor, notificaciones push for ever). A no ser que crees 5 artículos diarios claro.
• New article open Module: Aquí le dices con que “Menú” o “Sección” quieres que se abra la app.
• Keep Starred Unread: Esto es para ordenar que los artículos salgan siempre como no leídos.
• Auto cleanup read: Esto es para limpiar automáticamente los artículos leídos en función de los días que indiques.
• Auto cleanup unread: Lo mismo que arriba pero para los artículos que no han sido leídos.
• Feedback Email: Aquí pon tu email y aparecerá una sección de “Feedback” para que los usuarios de la app puedan contactar contigo, si se deja en blanco no aparece nada.
• Help Link: Aquí puedes poner una url de tu web de ayuda, si la dejas en blanco no muestra nada.
• Google Analytics: Para poner tu número de analitics y hacer un seguimiento.

Una vez configurado le das a “Save Changes” y ya casi lo tienes.

Crear un Tema personalizado para nuestra app android

Ya tenemos los módulos y los ajustes, ahora vamos a ver los temas, por defecto viene uno claro y otro oscuro, pero podemos crear nuestro tema personalizado.

Si le damos a “New Theme” aparecerá una pantalla donde poner el nombre a nuestro theme y poder configurar todos los colores a nuestro gusto.

Es muy sencillo, simplemente vete probando hasta que des con tu estilo!

¿Se puede monetizar la app?

Pues claro que se puede, pero quédate con una cosa, si tienes la versión “PRO” toda la pasta que ganes será para ti, sino te toca compartir el 25% con appyet.

Puedes escoger varias formas de monetización, Google Admob, Facebook audience network, Flurry y Mopub, si quieres eliminar la publicidad tienes que ser pro, pero si no habilitas ningún tipo de publicidad en principio no muestra nada.

Esto ya depende de cuanta pasta crees que puedes sacar con “admob” la tarifa anual es bastante económica así que si tienes muchas visitas puede merecer la pena.

Ten cuidado con la publicidad si pones “módulos” web y en la web también tienes anuncios de adsense, recuerda que sólo se pueden mostrar 3 banners!

Cómo puedes ver ser pro son 49$ al año, para ello, tienes que ir a la pestaña “Pro” y efectuar el pago, se puede por paypal.

Publicar nuestra aplicación android.

Ahora si que si, ya la tenemos! viene lo más fácil.

Vas a la pestaña “Build” y en la siguiente pantalla pulsa en “Submit to build”

Y voilá! Nuestros amigos de App.Yet te mandarán un email con un zip, en el cuál se encuentra la .apk que hayas creado.

Recuerda que para android la extensión .apk es lo que para windows un .exe.

Es decir, es el ejecutable de la app, una vez que lo tengas lo puedes compartir a tutiplen, o subirlo al play store (pero eso es otro tema).

Este es el email que te mandan, ten cuidado porque es muy posible que te llegue a la carpeta SPAM.

Bueno, espero que te haya gustado este tutorial.

Mira yo que defiendo los artículos cortos para no aburrir al personal (mira de lo que te hablo en cuál es el tamaño perfecto para los artículos de tu blog) pero en este caso con más de 3000 palabra me parece hasta corto, cuando hay que largar largo como el que más!!!

Sin más, te dejo con un enlace de la .apk de gastre que he creado para el ejemplo, puedes instalarla y borrarla acto seguido, ya que es una prueba y no tengo intención de subirla al play store de momento, pero sí de crear una perfecta para que te la descargues cuando quieras.

Y recuerda, yo paso de eso de que comentes y compartas pero si que te digo que si tienes alguna duda y/o sugerencia, soy un ayudador nato! me tienes para lo que quieras (de este tema ehhh, que nos conocemos y no hago de chico florero ;)

Descargar app de pruebas de gastre

Ahhh por cierto, mira que bonico que luce mi app en mi xiaomi!!