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.
Ejemplo: Integrando Retrofit y Construyendo ViewModel
Loading...
En provenance du cours de Universidad Nacional Autónoma de México
Desarrollo de aplicaciones avanzadas con Android
71 notes
Universidad Nacional Autónoma de México
71 notes
Cours 4 sur 5 dans Specialization Desarrollo de aplicaciones móviles con Android
À partir de la leçon
Web Services
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.
Rencontrer les enseignants
Anahi SalgadoAnahi Salgado. Android Certified Application Developer, programadora, capacitadora y conferencista.
Universidad Nacional Autónoma de México
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.
Explorer notre catalogue
Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.
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.
© 2018 Coursera Inc. Tous droits réservés.
