Loading...

Ejemplo: Integrando Retrofit y Construyendo ViewModel

Course video 10 of 54

En este módulo, aprenderás a consumir un API Rest para generar persistencia en tus aplicaciones móviles consumiendo datos de Instagram, serializando y deserializando datos JSON.

Desarrollo de aplicaciones avanzadas con Android

Université nationale autonome du Mexique

Cours 4 de 5 dans Desarrollo de aplicaciones móviles con Android Spécialisation

En este curso se retoman los temas vistos en cursos anteriores. Se complementan con aspectos prácticos como la forma de implementar mapas en tus proyectos con el API de Google Maps. También, muestra cómo aprovechar el multitask de Android y hacer animaciones en 2D para llevar tus aplicaciones a más dispositivos como weareables, televisiones y autos. Después de este curso, podrás subir tu aplicación a Google Play Store y hacerte visible para el mundo entero.

Visualiser le programme de cours

Enseigné par

Anahi Salgado
Anahi Salgado. Android Certified Application Developer, programadora, capacitadora y conferencista.

Transcription

Ok, pues una vez que you tenemos nuestras peticiones,

con esta herramienta puedo estar probándolas con Postman,

pues ahora vamos a integrar Retrofit a nuestro proyecto, ¿ok?

Como you vimos en vídeos anteriores pues

Retrofit es muy sencillo de integrar, y vamos a buscar

aquí Retrofit Square

para poder traer, recuerda ir al sitio oficial,

y entonces lo que haremos será necesitamos la librería,

primeramente necesitamos integrar Retrofit a nuestro proyecto

y vamos a ver aquí donde dice download, ahí está,

y aquí donde dice download you está el paquetito para Gradle, ¿ok?

Voy a copiarlo y aquí en mi proyecto iré a mi

buildGradle ModuleApp y hasta abajo

en las dependencias vamos a integrar esta librería, ¿ok?

Vamos a integrarla, vamos a darle a sincronizar,

vamos a esperar un momento a que Gradle integre esta librería a nuestro proyecto,

y este es el sitio oficial de Retrofit, ¿ok?

Es importante que lo conozcas puesto que aquí ha de venir

todo lo que necesitas para integrar Retrofit a tu proyecto.

Entonces vas a ver que es muy, muy sencillo hacer esto.

Entonces parece ser que you terminó, you está listo, y bien,

lo que voy a estar trabajando, que you está en la librería es que

ahorita tenemos esta vista,

¿ok?, entonces lo que voy a hacer es que voy a traerme todas

las fotos de contacto de mi usuario,

¿ok?, que es una petición que you teníamos por aquí,

alguna de estas si no, ahorita la generamos, entonces voy a traer todas

las fotos de contacto de mi usuario, ajá, de perritomike,

y las voy a estar mostrando en mi aplicación, ¿ok?

Entonces es básicamente lo que correspondería a esta

pestaña del perfil, pero la voy a estar trabajando aquí

para aprovechar estos layouts que you tengo casi listos ¿ok?

Entonces primeramente pues voy a cambiar un poco

estas tarjetas, me voy a basar en estas tarjetas pero las voy a cambiar un poco,

de hecho vamos a cambiar bastantes cosas de lo que tenemos,

el modelo de datos también va a cambiar, puesto que aquí en Instagram no tengo como

tal un número telefónico, ni tampoco tengo un correo electrónico.

Entonces vamos a cambiar varias cosas aquí.

Entonces esta pantalla lo único que me va a mostrar, voy a utilizar un grid layout

para mi RecyclerView, ahorita estamos manejando un LinearLayoutManager.

Y ahora voy a trabajar un GridLayoutManager para que mi RecyclerView

se vea en forma de grid, como normalmente la aplicación de Instagram ve las fotos.

Y entonces estaré trabajando solamente una foto y en el

centro estaré trabajando en la cantidad de likes que tiene esa foto,

¿ok?, es todo lo que va a manejar mi tarjeta.

Entonces voy a generar un nuevo layout, voy a darle clic derecho

y voy a ponerle cardView_grid_contacto,

¿ok?, esto va a ser para, va a funcionar como si

fuese el perfil del contacto pero lo vamos a mostrar en forma de grid.

Entonces voy a copiar todo lo que está aquí,

recuerda que en este layout lo único que hago es modelar la tarjeta,

cómo quiero que se vea, ajá, y entonces you, you lo copié y lo pegué.

Tengo esto, vamos a empezar a cambiar algunas propiedades, ¿ok?

Primeramente el width de esto en vez de match_parent vamos a decir

que sea wrap_content, ahí está,

wrap_content, y vamos a darle un height,

vamos a darle un height que sea de unos 170dp, si no es

muy grande, así.

170dp, y vamos a dejar esto como está.

Ahora el LinearLayout que tengo por aquí, este también va a ser un wrap_content,

junto con este que está aquí, también va a ser un wrap_content, ¿ok?

Vamos a decir que se haga vertical la foto, la foto sí la voy a ocupar,

lo que you no voy a estar ocupando es el botón, el botón de like,

puesto que esto solamente va a estar mostrando la cantidad de likes que tiene y

voy a conservar el nombre,

voy a conservar este que es el nombre pero va a ser pues,

la cantidad de likes que, ok, lo tengo por aquí, entonces vamos a borrar

todo esto que está aquí adentro, que es el nombre y el teléfono, lo

que está básicamente estos elementos que están aquí en medio los vamos a quitar,

y el botón, la imagen del botón you lo quitamos.

Vamos a quitar este RelativeLayout, you no lo necesito, voy a quitar, sí,

y entonces me queda un LinearLayout padre,

bueno primeramente mi tarjeta card_view, después viene un LinearLayout,

luego tengo mi imagen, que ahorita voy a modificar algunas cosas a esa imagen,

posteriormente necesito un nuevo LinearLayout,

¿ok?, porque

aquí voy a estar trabajando un icono de huesito junto con un TextView,

o sea van a estar juntos la cantidad de likes que va a ser un TextView y a un lado

el huesito que me indique que pues son la cantidad de huesitos que le han asignado.

Entonces este TextView que tengo aquí lo vamos a meter acá, y listo.

Ahora sí you se va viendo mejor, entonces tengo este TextView,

voy a ir a mi, este lo vamos a quitar, voy a ir a mi sitio de iconsheight.com

para descargar un icono que sea de un huesito,

y aquí le voy a decir que sea todas las búsquedas.

[AUDIO EN BLANCO] Y bueno,

aquí you tengo este, lo voy a descargar, ahí está,

y bueno lo vamos a integrar a nuestro proyecto, you lo descargué,

voy a integrarlo a mi proyecto con el plugin que bueno

you les enseñé a instalar

batch drawable import, voy a ponerle en descargas,

este es mi huesito, le voy a decir que esta es la medium dpi

y voy a darle OK y aquí también OK.

Debe estar aquí en drawable, aquí está like bone.

Ajá, like bone.

Bien, entonces vamos a poner aquí un ImageView.

[AUDIO EN BLANCO] Vamos a poner,

vamos a copiar el que you tenemos acá que sea más rápido

y le voy a poner, estoy dentro de mi LinearLayout ¿ok?, al lado de likes.

Entonces este LinearLayout,

en vez de estar vertical vamos a cambiarlo a horizontal.

Ahorita no se alcanza a ver muy bien pero lo que tengo es mi card_view,

un LinearLayout vertical, porque voy a estar acomodando básicamente primero la

imagen y luego debajo el número con su huesito,

y entonces para que el número esté a un lado del huesito puedo utilizar un

LinearLayout, que es lo que está a continuación, después viene mi TextView,

que es el que va a decir los números, y a un lado viene mi ImageView

imgFoto, a este le vamos a poner imgBone, huesito.

Ok, y en width

ahorita you acomodamos, entonces para

que esto se vea mejor, vamos a empezar a ponerle más propiedades al ImageView.

Este width vamos a cambiarlo por un wrap_content, ¿ok?

Y el height vamos a decirle que mida 130dp.

130dp, tenemos el card con wrap_content 170dp,

y la imagen con wrap_content y 130dp, ok.

Luego viene mi LinearLayout, wrap_content, wrap_content,

horizontal, el TextView.

Alt TextView,

vamos a decirle quitarle esto, que esté centrado vertical,

así vamos a quitarle eso y también el texto de plikes.

En vez de que diga likes vamos a ponerle que diga 0 nada más porque

ahora you no va a tener eso, sino que va a tener este huesito.

Bueno, entonces you le pusimos 0,

le pusimos 0, y vamos

a hacer que esto pues se vea, vamos a ponerle aquí el width,

dice match_parent, y vamos a decirle que tenga unos 27dp,

y también de acá 27dp, ahí está, you se ve mejor.

Y este LinearLayout en vez de esta propiedad de center horizontal,

no estaba funcionando como estaba.

Le vamos a poner android: layout_gravity

y va a ser en center horizontal.

Ahora sí están centrados bien, ok.

Vamos a ver por qué todavía esto no se ve

y es porque parece ser que tenemos un padding demasiado grande.

Vamos a modificar este padding en el

LinearLayout que está debajo del card_view, le voy a poner

6dp, quitando esto así, ahí está ahora sí you se ve.

Perfecto.

¿Entonces qué tengo?

Tengo mi card_view,

le puse width wrap_content 170dp, después viene mi LinearLayout,

que es una orientación vertical es para la imagen y para lo que está acá.

Entonces en cuanto a la imagen tiene un width de wrap_content,

un height de 130dp y le puse un icono como de muestra, por default.

Luego tenemos un LinearLayout

que es esto, el que está abrazando tanto al número 0,

como a este rayito que aquí debería ser el huesito, pero ahorita lo cambiamos.

Entonces tiene su orientación, bueno, width wrap_content, height wrap_content,

orientación horizontal, layout_gravity center_horizontal, el TextView.

Tenemos aquí, le pusimos cantidad de likes, le pusimos 0,

y todo lo demás se queda como está, y en el width

pusimos 27 27 para el huesito.

Entonces este va a ser el like_bone, ahí está.

Bien, se tiene que ver así, así es como tiene que quedar nuestra tarjetita.

¿Ok?

listo, está tarjetita es lo vamos a estar manejando en nuestro RecyclerView,

para que en vez de verse así entonces se vea en una cuadrícula de dos columnas.

Perfecto, entonces you tenemos nuestra tarjeta, vamos a llevar esta tarjeta

pues a todos los adaptadores y a todo lo que controla el RecyclerView.

Entonces esto de entrada estaba en un fragment y tenemos

la clase RecyclerViewFragmentPresenter, aquí tiene estos elementos.

En realidad lo que debemos buscar es el adaptador, el ContactoAdaptador que

es el que está manejando el layout del card_view, ¿ok?

ContactoAdaptador, aquí está que hereda de RecyclerViewAdapter, y

en el método onCreateViewHolder aquí está el layout.

Bien, vamos a quitar ese antiguo layout y vamos a poner el que acabamos de hacer,

la tarjetita de cardview_grid_contacto,

¿ok?, cardview_grid_contacto.

Además pues como esta clase se encarga de estar manejando todos los views

del layout, pues tenemos ahora que hacer coincidir los view que teníamos,

que tenemos en nuestro layout con esto que teníamos en el ViewHolder.

Ajá. ¿Tengo un image foto?

Sí, ¿tengo un nombre?

No, you no tengo un nombre.

Lo voy a dejar comentado así.

¿Tengo un teléfono?

No, tampoco.

¿Un botón de like? Tampoco, you no tengo un botón de like y

por lo tanto pues todo lo que está acá abajo you no va a estar, así.

Y por último tengo mi TextView de likes.

Entonces, solamente me quede con dos elementos ahora,

por lo tanto eso también me va a afectar en mi método

onBindViewHolder de la clase superior ContactoAdaptador.

Entonces de la misma forma tengo que quitar o comentar tvNombre,

tvTeléfono, la foto podemos dejarlo con su listener,

el botón lo ponemos aquí, también hay que

comentarlo porque pues el botón you no nos va a ser ahorita de utilidad.

Entonces otro lugar donde nos está afectando es que

recuerdas que lo que tenemos aquí, es que cuando le damos clic a la foto pues pasa

al otro activity y nos muestra el teléfono, el correo electrónico.

Pero bueno, esos datos you no los vamos a estar mostrando.

En su lugar vamos a mostrar una tarjeta, un card,

un card_view que es donde estamos mostrando pues la foto

del perrito o de nuestro contacto de Instagram.

Vamos a estar mostrando la foto y también la cantidad de huesitos que le han dado,

algo así como pues esto mismo pero más grande, ¿ok?, más grande.

Entonces si abro mi detalleContacto,

mi layout de detalle, que es este activity,

si abrimos el detalleContacto, bueno ahora tenemos, tenemos esto, ¿no?

Vamos a generar un nuevo layout para no echar,

no deshacernos de eso completamente.

Y le voy a poner activity_detalle_contacto_foto, ahí está.

Y entonces lo que vamos a ver aquí es como el mismo card_view de acá,

pero ahora más grande.

Entonces podemos reutilizar este card_view_grid_contacto,

vamos a copiar todo el contenido de ese archivo.

Lo voy copiar, lo voy a pegar en mi activity_detalle_contacto_foto,

lo pegamos y listo, ahí está.

Entonces lo que voy a hacer ahí es simplemente hacer pues un poco más grande

la foto, voy a modificar un poco esto.

Entonces esto debe vivir en un

LinearLayout, el LinearLayout que teníamos.

Entonces estas propiedades del card_view puedo llevármelas,

le voy a dar un control X y las voy a pegar aquí.

Y todo el contenido, todo lo que esta acá, el card_view,

lo vamos a meter en ese LinearLayout, ajá, así, ahí está.

Bien.

Entonces aquí tengo que ponerle la orientación de este LinearLayout, le vamos

a decir que esté vertical y además los atributos obligatorios, que es el width.

Vamos a ponerle match,

match_parent

y el height, que también será match,

match_parent, ahí está.

Vamos ponerle un padding.

Podemos utilizar alguna de las variables que you están listas como

activity_vertical_margin, y listo.

Entonces, ahora vamos a hacer más grande esa tarjeta, ¿ok?

Esa tarjeta de width va a medir unos 350dp

y de height unos 380dp.

Así, más o menos de ese tamaño queremos que quede.

Le voy a cambiar el id porque este id no corresponde,

no es el mismo elemento, este va, solamente le voy a agregar el nombre

detalle y todo lo demás lo vamos a dejar igual.

Nada más la fotografía y este elemento lo vamos a alinear correctamente.

Entonces vamos a ver la fotografía, aquí está, este imgFoto,

la fotografía va a medir 320dp

por 320.

Así.

Y para centrarlo lo vamos a poner en el layout android gravity

layout_gravity center_horizontal, you se ve ahora la imagen centrada.

Vamos a ponerle aquí FotoDetalle, el ID, muy bien, ahí está.

Después sigue mi LinearLayout, está muy pequeñito el LinearLayout que tengo aquí,

o sea las letras, entonces en textSize podemos poner unos 30dp.

Y la imagen podría ser de unos 50dp, recuerda que

por buena práctica sería bueno que todas estas medidas estén

en nuestro archivo dimens, y listo, parece que you quedó.

Y bueno ahí vamos a estar viendo la foto de nuestro contacto,

entonces bueno pues también hay que estar modificando todas esas partes.

Vamos al activity detalleContacto, antes vamos al adaptador

que precisamente es el que ejecuta el intent para ir al detalleContacto.

Recuerda que eso es a partir de onClickListener que está asociado

a la foto, entonces aquí

este es el intent a donde va, you no estaremos enviando el nombre,

ahora solamente estaremos enviando dos parámetros, okey.

Estaremos enviando la foto, ¿donde está?

Okey, aquí está, estaremos enviando esta foto y la cantidad de likes.

Que esta foto como observas, como has estado observando en Postman,

pues la foto, las fotos en realidad son URLs, okey,

URLs o direcciones de donde estaremos extrayendo nuestra foto.

Entonces pues estaremos enviando

aquí un parámetro URL

contacto, ahorita vamos a modificar también el modelo.

Y también entonces por acá estaremos mandando la cantidad de likes.

Este you no lo necesito, getEmail, que es mejor comentarlo,

y bueno vamos, ahorita vamos a modificar el modelo,

nuestro objeto contacto para que se parezca más a lo que vamos a manejar.

Okey, bien, entonces del otro lado en el detalle pues you

no tendré ni nombre, ni teléfono, ni email, en su lugar

vamos a colocar un private ImageView

imgFotoDetalle, okey.

Recuerda que este detalleContacto es quien controla

este donde estaremos viendo la foto y todos los datos pues en grande, okey.

Después private TextView

tvLikesDetalle, okey.

Vamos a ver si este tiene el identificador si se lo cambiamos, no,

no le cambiamos el identificador, entonces vamos a ponerle este, tvLikesDetalle.

Bien, detalle.

Por lo tanto, acá abajo pues todo esto va a ser diferente.

Esto sí lo vamos a quitar y a poner tvLikesDetalle,

okey, y entonces aquí en vez de estar

guardando el nombre voy a ponerle URL y

aquí likes, aquí getExtra URL likes.

Vamos a poner like,

recuerda que estas son las llaves con las cuales envié

los parámetros y entonces por lo tanto tengo que tener lo mismo,

okey, lo mismo con lo cual estoy mandando aquí, si aquí le puse URL,

entonces aquí también tiene que ser URL y aquí le puse like,

entonces aquí adentro también tiene que ser like, en singular.

Vamos a ponerle aquí el tvDetalle los likes,

pero como los likes los estamos manejando en un número entero, pues probablemente,

bueno, esto seguramente pues nos mandará

un error en tiempo de ejecución y entonces será mejor que lo pongamos aquí.

Likes, okey.

Bien, todavía no he colocado la foto dado que la foto pues, eso lo vamos

a dejar al último, okey, vamos a dejar al último cómo estar manejando las imágenes.

Entonces voy a comentar esto,

todos estos dos métodos que tenía de mandar un email,

mandar un email y ejecutar una llamada que eran los que mostraban mis tipos

de intent, esos por el momento you no me van a estar funcionando, y bien,

entonces solo dejo la imagen aquí pendiente.

Vamos ahora a modificar el modelo.

Okey, el modelo se va a comportar diferente, okey.

Voy a ir a mi POJO contacto, y yo tenía un ID.

Tenía un ID en número entero, si analizamos un poquito

la data como viene aquí, aquí podemos ver nuestros campos cuando son

enteros o cuando son strings, cuando son cadenas.

Este se ve que es una cadena porque bueno está encerrada entre comillas.

Y esto se ve que es un número entero porque bueno, no tiene comillas, ¿no?

Por eso sabemos que es un número entero.

Entonces por lo tanto, el ID es un tipo de dato de cadena.

Vamos a manejar ese ID como debe de ser.

Voy a cambiar la opción de string, posteriormente puedo tener

el nombre que el nombre lo voy a manejar como el full name.

Entonces voy a ponerle aquí full

Nombre, o podemos ponerlo en español nombre completo.

El teléfono you no lo voy a tener ni el email, la foto,

la foto será una URL y como observamos aquí, pues las URLs

vienen en una cadena y entonces esto será un string, aquí le vamos a poner URLfoto.

Y por último la cantidad de likes, la cantidad de likes

es un, vamos a verlo en alguno que nos muestre

todas las fotos, y aquí está por ejemplo este,

nos está mostrando una foto,

aquí está y esta foto, bueno viene en diferentes resoluciones.

Eso lo vamos a platicar después,

pero la cantidad de likes es un número entero, okey, es un número entero.

Entonces esto también lo vamos a manejar así.

Bien, pues vamos a continuar modificando nuestro modelo,

la foto you

no se llama así, vamos a ponerle aquí URLfoto

string, me falta el nombreCompleto,

ponemos todos los datos como van, el teléfono y el email you no,

y tengo estos 4, el ID no lo pongo en el constructor.

Entonces voy a borrar todos los getters y setters

para que esto sea más fácil y los voy a volver a generar.

Voy a dar un command n o control n, y entonces selecciono todos y listo.

Ahora sí you se generaron los getters y setters de la nueva data,

de la nueva data como estamos trabajando.

Bien, entonces you hemos modelado,

you tenemos nuestro modelo, integramos únicamente,

hemos integrado la librería de Retrofit, okey, aquí está.

Hemos hecho nuestro layout de un grid, hemos hecho

un layout de el detalle, cuando alguien le de clic a ese detalle okey,

aquí tengo el grid y cuando alguien le de clic a esa foto, pues se debe ver así.

Entonces you también lo integramos a nuestro detalleContacto, y aquí está.

Nos faltaba manejar el adaptador, exactamente esto,

estas partes de nuestra,

los nuevos getters y setters de la data que modificamos.

Aquí está getURLFoto,

y okey, esta es la imagen, por lo pronto

la voy a dejar comentada porque la imagen igualmente como es una URL

vamos a estar utilizando otra herramienta para poner las URLs en un ImageView.

Y entonces aquí este toast you no quiero mostrarlo.

Puedes ir limpiando esto como tú quieras, si yo considero

solamente dejarlo comentado pero puedes irlo borrando si es que you lo quieres.

Entonces vamos a poner para la URL getURLFoto que es la que vamos a estar

enviando del parámetro, para el like getLikes, okey.

Eso es todo.

Muy bien, entonces vamos a nuestro siguiente video para ver cómo implementar

una vez que you tenemos todo el modelo listo, cómo implementar nuestra

librería de Retrofit.

À propos de Coursera

Cours, Spécialisations et Diplômes en ligne enseignés par des enseignants du plus haut niveau provenant des meilleurs universités et établissements d'enseignement du monde.

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play