Hola chicos ¿Qué tal?

Bienvenidos a este nuevo curso de Code Que te Pillo, en esta ocasión, vamos a hacer de manera muy sencilla una aplicación parecida a Instagram.

App Instagram 1

Es decir, una aplicación en la que podemos ver las fotos que nosotros mismos subamos, y además, verlas a través del móvil.

Esta aplicación va a poder ser utilizada solo por quien queramos, bien con una contraseña, o un código QR, o al estar inscritos en una lista de correo, de esta manera elegiremos en todo momento quien podrá utilizar nuestro "Instagram".

La apariencia que le vamos a dar es la que podéis ver en la imagen siguiente. Una aplicación en la que cada vez que hacemos "clic", podamos ver una foto con su descripción, fecha, etc.

App instagram 2

Como se puede observar acompañando a la imagen aparecerá tanto la descripción como la fecha, pero podremos añadir muchos más campos.

Si hacemos clic en la foto, se verá como se muestra a continuación.

App instagram foto

Y desde aquí se puede hacer Zoom (como hacemos con las fotos en nuestro móvil).

Además vamos a poder subir una foto de una manera muy sencilla, como decíamos antes.

App instagram subir foto

Para ello haremos clic sobre "añade una imagen".

Subir foto

Y desde aquí ya podemos poner el "Título", "subir la imagen", añadir la descripción, etc.

Como veremos más adelante también podríamos añadir categorías y hacer un montón de cosas.

Pero como hacemos siempre, empezaremos por algo sencillo y poco a poco iremos haciendo aplicaciones más complejas.

En este primer tutorial lo primero que queremos ver es lo fácil que se hace una aplicación con esta herramienta.

Nuestra aplicación se llama Glide.

Glide

Glide tiene una versión gratuita, aunque también tiene una versión de pago (para aquellos que quieran opciones más avanzadas).

Glide Precios

Como veis, hasta 100 filas es absolutamente gratis (ya explicaremos más adelante que significa esto) pero si queremos más funcionalidades, como que se quite la marca de agua de Glide ya se tendría que pasar a una versión de pago.

Pero vamos a poder hacer aplicaciones absolutamente funcionales, muy chulas, a través de la versión gratuita. Y lo que es aún más alucinante, lo vamos a hacer a través de una hoja de cálculo.

Es decir, la aplicación que habéis visto recoge sus datos de la siguiente hoja de cálculo.

Hoja de cálculo

Esto es maravilloso, porque una vez que tengamos hecha nuestra aplicación, tan solo con añadir datos a nuestra hoja de cálculo, estos se irán automáticamente a nuestra aplicación.

La parte más "rara", por llamarla de alguna manera, se encuentra en como se instala, nuestro "Instagram" no se instalará a través dela tienda de aplicaciones de Android o de Apple.

Nuestra aplicación es una WebApp, y para instalarla lo haremos a través de un enlace. Para saber que enlace es, tenemos que hacer clic en el icono de la parte superior izquierda. En la "i"

Información Glide

Cuando hacemos clic como hemos dicho, nos parecerá lo siguiente.

Enlace Glide

Cada aplicación que hagamos nos creará un enlace. En este caso el enlace será "instagramamigos.glideapp.io". Al añadir esta dirección a través del móvil, se instalará sin problema.

Otra forma de instalarla es desde el código QR que aparece también en la parte superior izquierda.

Glide QR

Nosotros vamos a hacerlo en tiempo real con nuestro móvil, y lo vamos a compartir en tiempo real para que lo veáis igual que nosotros.

Glide y movil

Vamos a nuestro móvil, activamos la cámara de fotos y enfocamos sobre el código QR

Glide y Codigo QR mi movil

Como veis, al enfocar el código QR nos parece arriba "Código QR de sitio Web abrir".

En algunos móviles, como es el caso del iPhone, lo abrirá sin necesidad de ningún programa externo, en otros móviles es posible que se necesite algún programa externo, pero en la mayor parte de teléfonos de Android de última generación tampoco hace falta.

Cuando lo abrimos nos aparece una página Web de safari (recordad que en el ejemplo lo estamos haciendo con IOS, en otros sistemas operativos la funcionalidad es similar).

Glide Abriendo QR

Pero no significa que vayamos a ver nuestra aplicación desde safari, si os dais cuenta, nos dice que presionemos el icono formado por un "cuadrado con una flecha hacia arriba" para luego, hacer clic sobre "Agregar a la pantalla de inicio".

Glide agregar a la pantalla de inico

Como decimos, en Android es muy parecido, así que hacemos clic en el símbolo que nos dice, y bajamos hasta que leemos la opción "Añadir a pantalla de inicio".

Glide Añadir pantalla de inicio

Hacemos clic, y nos pregunta como la queremos guardar.

Glide Instagram familia

En este caso lo guardaremos como "Instagram familia". Hacemos clic en "Añadir" y ya la tenemos en nuestro teléfono.

Instragam familia movil

Ahora simplemente haríamos clic en el icono de nuestra aplicación, y ya podríamos acceder.

Glide Instagram familia

En este caso hemos puesto contraseña porque es un Instagram familiar y no queremos que nadie vea las fotos que vamos a añadir.

Glide contraseña

Damos a continuar, y ya tendríamos acceso a nuestra aplicación de Instagram familiar.

Entrando a nuestro Instagram

Como dijimos antes, para añadir una foto nueva teneros que hacer clic sobre "añade una imagen".

Glide añadir una imagen

Una vez hecho, añadiremos los campos que nos solicita. En el título, podemos "muñeco". Y hacemos clic en el botón de subir.

Subir imagen a glide

La imagen la podemos obtener de varias formas, bien haciéndola desde nuestra cámara de fotos, bien obteniéndola de nuestra fototeca, o bien explorando a través de internet. En el caso de este ejemplo haremos una foto con nuestro móvil, para ello, hacemos clic en "hacer foto".

Glide usar foto

Hacemos clic en "usar foto", podríamos poner también una descripción, algo que para el ejemplo no vamos a hacer. Una vez subida la imagen hacemos clic en enviar.

Glide enviar foto

Y aquí nos aparece ahora la foto que acabamos de enviar.

Muñeco Glide

Como decimos, si hacemos clic, podemos hacer Zoom.

zoom imagen Glide

Este es el resultado que vamos a obtener en este curso.

Esperamos que os guste. ¡Así que vamos a ponernos manos a la obra!

Empezamos!

Temario

Introducción
Introducción
04:50
Preparando Hoja de Cálculo
Preparando Hoja de Cálculo
06:04
Primera Versión de la App
Primera Versión de la App
05:37
Crear Vista Detalle
Crear Vista Detalle
06:51
Añadir Imágenes desde el Móvil
Añadir Imágenes desde el Móvil
04:22
Crear Relaciones
Crear Relaciones
11:44
Apps Públicas o Privadas
Apps Públicas o Privadas
04:54
Darse de Alta Gratis en GlideApp