CategoriasDart

Flujo de control en Dart

Flujo de control en Dart

Hola!, en el último mes he estado escribiendo sobre Dart y cómo funcionan las cosas en este lenguaje. Si eres nuevo por acá puedes revisar mis otros post sobre Dart. Dejaré los enlaces acá debajo.

El poder sin control es inútil

En este post, vamos a hablar sobre cómo funciona el Control Flow (Flujo de control) en Dart. Empecemos hablando de que es el flujo de control. En palabras simples es el orden en el cual tu código es ejecutado.

Digamos que tenemos que elegir entre salir a la calle con un paraguas o no. Revisamos nuestra app del clima y si dice que va a llover nos llevamos un paraguas de lo contrario lo podemos dejar en casa.

Si quisiéramos escribir eso en código seria así:

if (isGoingToRainToday()) {
 takeUmbrella() 
} else {
 print ("What a great weather today ?")
}

If statements

Los If ayudan a nuestro código a tomar una decisión y tienen la siguiente sintaxis.

if (condition) {
 doThis()
} else {
 doAnotherThing()
}

Empezamos con la palabra reservada if, luego agregamos una condición dentro del paréntesis. Si esa condición se cumple el código dentro de las primeras llaves se ejecutará. De lo contrario, el código dentro de las llaves del else será ejecutado. La condición al final termina siendo una variable boolean.

Un dato para tener en cuenta es que el else no es siempre necesario, si solo necesitas ejecutar lo que está dentro del if puedes evitarlo.

En caso de que necesites hacer una comparación con mas de dos opciones puedes usar un else if. Veamos como funciona.

var flavor = "Vanilla";
if (flavor == "Vanilla"){
	print("Here's your vanilla ice cream");
} else if( flavor == "Chocolate") {
	print("Here's your chocolate ice cream");
} else {
	print("Since we don't know your favorite flavor, here's a random one");
}

En este ejemplo tenemos un sabor favorito de helado el cual es Vanilla. El If va a revisar si el sabor es vanilla en caso de que lo sea ejecutará el código dentro del if. Si el sabor es igual a chocolate ejecutara lo que
está dentro del else if, en caso de que no cumpla ninguna de las dos condiciones mencionadas ejecutara el código dentro del else.

¿Pero qué ocurre cuando tenemos muchos sabores?

Presentamos el Switch case

Los Switch Case funcionan con variables en vez de funcionar con una condición. El Switch va caso por caso comparando la variable con el valor del case y en caso de que sean iguales el código dentro del case será ejecutado.

Aquí podemos ver un ejemplo.

var flavor = "Vanilla"
switch (flavor) {
	case "Vanilla":
		print("Here's your vanilla ice cream");
	case "Chocolate":
		print("Here's your chocolate ice cream");
	case "Orange":
		print("Here's your orange ice cream");
	default:
		print("Since we don't know your favorite flavor, here's a random one");
}

For

El bucle For es una instrucción común que se puede encontrar en casi todos los lenguajes. Se utiliza para ejecutar un código una limitadacantidad de veces. Su sintaxis en dart es la siguiente:

for (var i = 0; i < list.length; i++){
 print(list[i]);
}

El bucle For puede parecer confuso pero vamos a separarlo en partes. La variable i empieza en el valor 0 y está variable incrementa una por uno hasta que es menor por 1 al tamaño de la lista.

Por cada ciclo que realiza el bucle, el código dentro del for es ejecutado. En nuestro caso imprimirá el elemento i de la lista.

While

El bucle While se ejecuta mientras una condición se cumpla, por ejemplo.

int laps = 0;
while (laps < 5){
	print("Laps $laps");
	laps++;
}

En este ejemplo, el código dentro del while es ejecutado hasta que la variable laps (vueltas) es menor que cinco.

Laps 0
Laps 1
Laps 2
Laps 3
Laps 4

El hermano del While

El hermano del bucle While es el Do While. Este bucle al contrario de su hermano ejecuta el código y luego evalúa la condición. Aquí tenemos un ejemplo.

int countDown = 5;
do {
 print("Time remaining: $countDown");
 countDown--;
} while (countDown != 0);

Este ejemplo imprime la variable countDown mientras sea diferente de cero.

Time remaining: 5
Time remaining: 4
Time remaining: 3
Time remaining: 2
Time remaining: 1

Eso es todo

Si eres nuevo programando, espero que esto te pueda ayudar y si no lo eres, espero que te haya gustado. También estoy creando nuevas CodingSlices sobre Flutter en Instagram, puedes seguirme como @codingpizza y en Twitter como @coding__pizza para ver mas contenido.

En caso de que no lo sepas, estoy escribiendo un eBook sobre un curso básico de Dart necesario para aprender Flutter. Es gratis y puedes registrarte en este link.

Ahora es tu turno

Puedes probar estos conceptos en Entornos de desarrollo (IDE) como Intellij Idea Community, que es gratis e instalar el plugin de Dart, si te gusta Visual Studio Code tambien puedes probar estos conceptos en él y por último si prefieres algo online, puedes utilizar Dartpad.

Post anterior

Si estás interesado en más post como este puedes revisar mis otros artículos sobre Dart.

¿Quieres saber mas sobré Dart?

Si te ha gustado este post y estás interesado en aprender Dart, actualmente estoy escribiendo más artículos como este en un ebook, el cual es un curso básico de Dart que te ayudará a tener un buen conocimiento que luego podrás utilizar para empezar con Flutter ;). Puedes darte de alta en este link ya que el ebook será totalmente gratis.

 

CategoriasDartProgramación

Parámetros en Dart

¡Hola!, en los ultimos post he hablado sobre variables y funciones. Si te los has perdido, te dejo el link a ellos aqui debajo para que puedas echarle un ojo.

Ya hemos hablado un poco sobre ellos.

En el post anterior sobre funciones ya hablamos un poco sobre los parámetros. Hemos visto que funcionaban como ingredientes para hacer funcionar una «Maquina de Helado». Tambien podemos decir que los parámetros son dependencias que una función requiere para poder ejecutar su codigo.

Required parameters (Parámetros requeridos)

Los parámetros requeridos son los mas basicos que una función puede usar, solo hace falta especificar un tipo un nombre y hemos terminado.

Los parámetros requeridos los hemos visto ya en el caso de la función suma.

Integer suma(Integer a,Integer b) {
    return a+b;
}

El entero a y el entero b, son usados dentro de la función y posteriormente la función devuelve el valor de los dos sumados.

Optional parameters / Parámetros opcionales

Los parámetros opcionales no son requeridos por la función al momento de usarla. En ciertos casos podrías necesitar pasarle ese parámetro a la función, como en otros no.

Para hacer un parámetro opcional es necesario colocarlo al final de la firma de la función y entre corchetes. Para dejarlo mas claro veamos el siguiente ejemplo:

void imprimirNombreCompleto(String nombre, String apellido, [String segundoNombre]){
    print("Mi nombre es: $name $secondName $surname");
}

En esta función podemos ver como hemos situado el parámetro opcional despues de los parámetros requeridos, esto se debe a que los parámetros opcionales deben ir siempre despues de los requeridos, de lo contrario no compilará.

Te preguntuntaras, ¿Que ocurré con la variable segundoNombre , si no la hemos pasado a la función?. La variable segundoNombre será nula. Y nosotros no queremos mostrar «John null Wick», ¿Cierto?.

Para evitar esto podemos agregar un valor por defecto que va a ser utilizado en lugar del parámetro opcional cuando este sea nulo.

Para agregar un valor por defecto a un parámetro opcional, todo lo que necesitamos hacer es una asignación. Para entenderlo mejor puedes ver el siguiente ejemplo:

void imprimirNombreCompleto(String nombre, String apellido, [String segundoNombre = ""]){
    print("Mi nombre es: $nombre $segundoNombre $apellido");
}

Ahora el valor será un String vacio y el texto será mostrado correctamente.

Para usar la función con parámetros opcionales que hemos creado previamente hacemos lo siguiente.

imprimirNombreCompleto("John","Wick");
//O
imprimirNombreCompleto("Scarlett","Johansson","Ingrid");

En el caso que quieras utilizar todos los parámetros de la funcion como opcionales puedes encerrarlos entre corchetes como muestra el siguiente ejemplo.

void imprimirNombreCompleto([String nombre, String segundoNombre, String Apellido]){
    print("Mi nombre es: $nombre $segundoNombre $apellido");
} 

Named parameters / Parámetros nombrados

Este tipo de parámetros permite indicarle a la función cual es el parámetro que estas pasando. Para lograr esto tenemos que colocarlo entre llaves.

Ejemplo:

void imprimirParametrosNombrados(String nombre,String apellido,{String segundoNombre = ""}){
    print("$nombre $segundoNombre $apellido")
}

En este ejemplo hemos usado el nombre y el apellido como parámetros requeridos. Y el segundo nombre como parámetro nombrado ademas nos aseguramos de tener un valor por defecto por si no se proporciona ningun valor.

Cuando queremos utilizar una función con parámetros requeridos debemos hacerlo de la siguienta manera:

imprimirParametrosNombrados("Samuel","Jackson",segundoNombre: "Leroy");

En este ejemplo podemos ver que necesitamos indicar el nombre del parámetro dentro de la función y despues de los dos puntos indicamos el valor del parámetro.

En el caso en que necesitemos tener una función con solo parámetros nombrados lo que tenemos que hacer es incluir dentro de las llaves todos los parámetros.

void imprimirParametrosNombrados({String nombre,String apellido,String segundoNombre = ""}){
    print("$nombre $segundoNombre $apellido")
}

Cuando una función tiene unicamente parámetros nombrados no importa el orden en el que los utilicemos.

Por ejemplo:

imprimirParametrosNombrados(nombre: "Scarlett",segundoNombre:"Ingrid",apellido:"Johansson");

¿Genial, no?.

Ahora es tu turno

Puedes probar estos conceptos en Entornos de desarrollo (IDE) como Intellij Idea Community, que es gratis e instalar el plugin de Dart, si te gusta Visual Studio Code tambien puedes probar estos conceptos en él y por último si prefieres algo online, puedes utilizar Dartpad.

Post anterior

Si estás interesado en más post como este puedes revisar mis otros artículos sobre Dart.

¿Quieres saber mas sobré Dart?

Si te ha gustado este post y estás interesado en aprender Dart, actualmente estoy escribiendo más artículos como este en un ebook, el cual es un curso básico de Dart que te ayudará a tener un buen conocimiento que luego podrás utilizar para empezar con Flutter ;). Puedes darte de alta en este link ya que el ebook será totalmente gratis.

CategoriasDart

Funciones en Dart

En esta oportunidad vamos a hablar sobre las funciones,como funcionan en Dark y sus tipos.

?¿Qué es una función?

Una función es un bloque de código que debe ser organizado, realizar una sola tarea y debe estar relacionado a la clase en la que estamos trabajando.¿Por qué digo «debería» ? Porque mucha gente tiende a olvidarse de esto y creeme que te encontrarás muchos de estos casos en tu vida profesional.

Las funciones también deben ser en su mayoriareusables, esto reducirá la cantidad de código que escribes e incrementará la cantidad del mismo. Si ha sido hecho correctamente, claro.

?‍? Anatomía de las funciones

Existen muchos tipos de funciones en Dart, primerovamos a aprender sobre coymo funciona una función y luego vamos a hablar sobre los otros tipos de funciones.

Las funciones son usualmente creadas con la siguiente sintaxis:

Dónde:

void es el tipo que regresa la función, esto significa que cuando una función ejecuta todo el código dentro de ella esta debe regresar un valor de este tipo.

Espera un momento… Nosotros no estamos regresando nada, solo estamos imprimiendo un nombre. Cuando no necesitamos regresar un valor decimos que es del tipo void.

printName es el nombre de la función, un nombre que vamos a necesitar usar después, el mismo debe saber explicar qué hace esta función.

(String name), dentro del paréntesis vamos a especificar el tipo del parámetro que va a recibir la función y el nombre de este parámetro. Los parámetros son variables que están disponibles dentro de la función, hablaremos más sobre ellos en el siguiente capitulo.

Veamos un ejemplo clásico:

Esta función suma dos enteros, le pasamos a la función un primer y un segundo valor y esta nos regresa la suma de los dos. Podemos usarla de la siguiente manera:

En este código creamos una variable llamada resultado la cual almacena el valor que obtenemos de la función sum, cuando usamos print para imprimirla el resultado es 4.

En simples palabras podría decirse que una función funciona como una maquina de helados, puedes agregar los ingredientes (parametros) y debería regresar un delicioso helado. Veamos otro ejemplo:

En este ejemplo más avanzado hemos creado una función llamada IceCreamMachine (Máquina de Helados) la cual regresa un objeto AwesomeIceCream (HeladoIncreible). Este objeto es una instancia de una clase, esto lo hablaremos luego. Pero manten en mente que AwesomeIceCream es un tipo de objeto como lo es un String, un Entero o un Double.

➡️Arrow function (Funciones Flecha)

En Dart existen otro tipos de funciones, veamos las siguientes.

Las Arrow Function llamadas Funciones Flecha en español, son funciones que solo pueden tener una línea de código y te darás cuenta que tendrá en lugar de paréntesis una flecha =>

Este tipo de funciones nos ayuda a mantener nuestras funciones pequeñas e incrementar la legibilidad del código. Vamos a convertir nuestros ejemplos anteriores a arrow functions.

Empecemos con la función sum, en primer lugar necesitamos remover los paréntesis y agregar la flecha, después de la flecha debemos agregar la lógica de nuestra función, ¡y eso es todo! Hemos creado exitosamente nuestra primera arrow function.

Ahora es tu turno, ¿Por qué no intentas convertir por tu cuenta la función iceCreamMachine?

?️‍♀️ Funciones anónimas

Como hemos hablado previamente todas las funciones deben tener un nombre, pero no es el caso de las funciones anonimas. Esta función es llamada en el momento y pasada como parámetro a otras funciones ?. Veamos un ejemplo:

Nota: Lo que hace la función
ForEach es ejecutar el código dentro de ella por cada elemento de la lista. No te preocupes ya que vamos a ver más sobre las collections en otro capitulo.

La función de la que hemos hablado imprime el siguiente resultado:

We have the chocolate flavour
We have the vanilla flavour
We have the orange flavour

¿Qué ha pasado aquí?. La función forEach recibe como parámetro una Function (función), en Dart Function es un tipo también.

Para las funciones anónimas la sintaxis es la siguiente:

parameterName : El nombre del parámetro

Body of the function: El cuerpo de la función, la lógica que queremos que tenga la función.

Si te sientes confundido no te preocupes, intenta verlo de esta forma: Las Anonymous functions son una forma corta de crear una función.

Supongamos que tienes una lista y que quierer recorrer toda la lista para imprimir los objetos que se encuentran dentro de ella, pero quieres tener una función que lo haga. Podríamos hacer algo como esto:

Pero como queremos imprimir nuestros números en otra función, podemos crear la función getPrintElementFunction().

Esta función regresa una función ?. ¿Es un poco raro, no? Luego podríamos utilizarla dentro de nuestra función forEach de la siguiente manera.

Esto podrá compilar e imprimir el mismo resultado de la función que vimos previamente, pero es un poco feo si quieres hacer algo tan simple como imprimir algo ¿No lo crees?

Ahora es tu turno

Puedes probar estos conceptos en Entornos de desarrollo (IDE) como Intellij Idea Community, que es gratis e instalar el plugin de Dart, si te gusta Visual Studio Code tambien puedes probar estos conceptos en él y por último si prefieres algo online, puedes utilizar Dartpad.

Post anterior

Si estás interesado en más post como este puedes revisar mis otros artículos sobre Dart.

¿Quieres saber mas sobré Dart?

Si te ha gustado este post y estás interesado en aprender Dart, actualmente estoy escribiendo más artículos como este en un ebook, el cual es un curso básico de Dart que te ayudará a tener un buen conocimiento que luego podrás utilizar para empezar con Flutter ;). Puedes darte de alta en este link ya que el ebook será totalmente gratis.

 

CategoriasDartProgramación

Variables en Dart

 

¿Qué son las variables?

En este articulo vamos a aprender sobre las variables en Dart, las variables son como cajas pequeñas que tienen una referencia a un valor. Y estas cajas pequeñas pueden tener un nombre para identificarlas facilmente.

¿Cómo podemos crear variables en Dart?

En Dart podemos crear variables de tres formas:

Usando la palabra reservada var

Podemos crear una variable utilizando la palabra reservada var antes del nombre de la variable, y luego del nombre de la variable el valor que le queremos asignar, veamos el siguiente ejemplo:

Nota: la instrucción print(año) imprime el valor de variable. (Se usa año como ejemplo, pero no es un tipo de variable aceptada en Dart)

Esto que acabamos de ver es una inferencia de tipos. La inferencia de tipos es una funcionalidad que tiene el compilador de Dart para poder deducir el tipo de la variable que estamos creando.

Declarando una variable especificando el tipo

También podemos declarar el tipo de la variable como en el ejemplo a continuación:

Usando la palabra reservada dynamic

La palabra reservada dynamic nos permite declarar una variable en la que el tipo puede cambiar en tiempo de ejecución y puede ser definida de la siguiente forma:

Ahora es tu turno

Puedes probar estos conceptos en Entornos de desarrollo (IDE) como Intellij Idea Community, que es gratis e instalar el plugin de Dart, si te gusta Visual Studio Code tambien puedes probar estos conceptos en él y por último si prefieres algo online, puedes utilizar Dartpad.

¿Quieres saber mas sobré Dart?

Si te ha gustado este articulo y estas interesado en aprender Dart, actualmente estoy escribiendo más articulos como este en un ebook, el cual es un curso básico de Dart que te ayudará a tener un buen conocimiento que luego podrás utilizar para empezar con Flutter ;). Puedes darte de alta en este link ya que el ebook será totalmente gratis.

 

CategoriasAndroidProgramación

Como usar el Android Navigation Component

Android Architecture components - Navigation Component

El problema de la navegación

A lo largo de los años los desarrolladores Android han buscado una forma de hacer más fácil la navegación entre los fragments y las activities dentro de las aplicaciones que creaban. Muchos inventaron una cantidad de clases y variantes llamadas Navigation, Base Navigation, Navigation Manager.

Entre cualquier cantidad de ingeniosos nombres que el ser humano se puede inventar, cada uno tenía sus peculiaridades con sus ventajas y sus desventajas, muchas de estas necesitaban que el desarrollador heredara de una clase base o agregara manualmente constantes a una clase para así identificar a donde iría y de a donde vendría, esto solía generar muchos bugs respecto a la navegación de la app.

Por ejemplo, si una App que mostraba el detalle de una compra al ir hacia atrás lo que se espera es que te llevara al paso anterior a ese detalle de compra, es decir a los objetos que habías seleccionado para comprar, y en algunos casos estas famosas clases de navegación fallaban enviando al usuario a la pantalla principal de la aplicación o peor aún a otra pantalla que no tenía nada que ver con este flujo, esto suponía un problema.

Entra en escena el Navigation Component de Android

En el Google I/O de 2018 fue anunciada la creación de este componente para así tener un standard en el cual se basaran las aplicaciones Android, la versión estable de este component fue liberada hace aproximadamente un mes y actualmente existe una versión 1.0 que es compatible con AppCompat y una versión 2.0 que está disponible para Android Jetpack. Si quieres saber qué es Android Jetpack he hablado de él previamente en este articulo.

El uso de este componente está basado en crear un grafo en el cual estén conectados todos los activities y fragments de tu aplicación ademas de las «actions» que permiten cambiar de fragments.

Muéstrame el código

Para empezar a utilizar nuestro Navigation Component en nuestros proyectos es necesario agregar las siguientes dependencias a nuestro build.gradle del modulo app y del proyecto.

Java

build.gradle del proyecto


build.gradle del modulo app

1. Crear el Navigation Graph

Para esto debemos abrir nuestra pestaña de Project en Android Studio y hacer click derecho en la carpeta «res», seleccionar Android Resource File, escribir el nombre del navigation graph que queremos y luego seleccionar Navigation.

2. Agregar el NavHostFragment en el layout de nuestro MainActivity.

Esto nos servirá para hospedar nuestros fragments. Para esto agregamos el siguiente código a nuestro layout.

Luego, hay que abrir nuestro archivo de navegación nav_graph.xml y seleccionar nuestro host fragment.

3. Agregar nuestros fragments al Navigation Graph

Basta hacer click en el icono de la pantalla con un signo + verde, luego hacer click en «Create new destination» desde ahí podremos agregar nuestros Fragments previamente creados o crear nuevos.

4. Conectar nuestros fragments utilizando actions

Para conectarlos basta hacer click en un fragment y «arrastrar» una flecha hacia nuestro segundo fragment. Y ya habríamos creado una acción.

5. Moverse entre fragments

Para movernos entre fragments utilizando el Navigation Component tenemos varias opciones. La principal siempre es obtener el NavigationController, dependiendo del contexto en el que te encuentres puedes realizarlo de una manera distinta.
En nuestro caso cambiaremos a otro fragment cuando se haga click en una imagen. Para esto utilizaremos el método de la clase Navigation FindNavController que acepta como parámetro una View o una Activity, luego utilizamos el método navigate y le pasamos como parámetro el id de nuestro action quedando de esta manera:

Java:

Kotlin:

Pasar objetos de un fragment a otro

Para poder pasar objetos de un fragment solo tenemos que crear nuestro Bundle como se hacía tradicionalmente y agregarlo como parámetro al método .navigate() que vimos antes de esta forma:
Java:

Kotlin:

Para obtener el drawableId en nuestro fragment de detalles lo hacemos de la siguiente manera:

Java:

Kotlin:

Pasar objetos de un fragment a otro usando el plugin de safe-args

El Navigation Component utiliza un plugin de Gradle llamado safe-args que ayuda al momento de pasar objetos de un Fragment A a un Fragment B. Este ayuda a generar clases que se encargan de que los objetos sean type-safe.

Nota: Type-safe significa que el objeto es evaluado en tiempo de compilación y el compilador nos dará un error en caso de que intentemos pasar un tipo que sea erróneo.

Ademas de esto, nos ayuda a quitarnos el problema de estar asignando constantes como claves del bundle para luego usarlas y recuperar así los objetos.

Primero necesitamos ir a nuestro nav_graph.xml y hacer click en el fragment que va a recibir el objeto, en nuestro caso vamos a pasar el id del drawable que vamos a mostrar en nuestro Fragment de detalle. Así que hacemos click en el detailFragment, luego en el símbolo + que se encuentra a la derecha de «Arguments» y creamos nuestro nuevo argumento. Rellenamos los campos y hacemos click en «Add».

Necesitamos crear una instancia del objeto NavDirections, esta la obtenemos desde una clase que fue generada por el plugin de safeArgs. El plugin de safeArgs lo que hace es agregar un sufijo al nombre del fragment, en nuestro caso:
Si tu Fragment se llama MainFragment, esta clase se llamará MainFragmentDirections, luego utilizamos el método que nos provee y como podrás ver tiene como parámetro un entero que es el id del drawable que vamos a pasar al otro Fragment. Luego se llama al método que vimos antes de navigate() pero esta vez le vamos a pasar el NavDirections que hemos creado previamente.

Java:

Kotlin:

Para obtener el drawableId que hemos pasado al fragment de DetailFragment lo hacemos de la siguiente forma:

Java:

Kotlin:

Final

Esto es el uso básico del Navigation Component. También puede ser usado en el caso que quieras con un Drawer o con un Bottom Navigation View, pero eso da para otro artículo ?.
Y con esto hemos terminado. En los próximos artículos hablaré un poco acerca de otros Android Architecture components. Si te ha gustado este artículo compartelo en las redes sociales. No olvides seguirme en mi twitter seguirme en twitter para que seamos amigos ? y sigue tambíen el twitter y el instagram de codingpizza que lo encontrarás al final del sitio.

Aquí puedes encontrar todo el codigo que ha sido utilizado en este articulo.

CategoriasAndroidProgramación

El camino del desarrollador Android #10 – PizzaList

¡Hola! Finalmente hemos llegado a la segunda aplicación de esta serie de tutoriales que estamos realizando para aprender a programar en Android. En este post, vamos a implementar todo lo que hemos ido aprendiendo en los post anteriores y poder crear nuestra primera aplicación que obtiene datos de un servicio y los muestra al usuario. La aplicación en sí lo que hará es mostrar una lista de pizzas y de sus ingredientes, porque todos sabemos que la pizza es vida?.

Las dependencias que utilizaremos para este proyecto serán las siguientes:

-Fragments
-RecyclerView
-Retrofit
-Glide

Resultado final

app-screenshot
Captura de pantalla de la aplicación terminada.

 

Agregando dependencias

Como en todas las aplicaciones que creamos, necesitamos empezar agregando las dependencias a nuestro build.gradle.

Creando nuestra Activity

Vamos a iniciar creando nuestro Activity que va a gestionar nuestro Fragment de lista de pizza. En el último Google I/O, el cual es el evento anual de Google donde hablan acerca del futuro del framework de Android, nuevas tecnologías y todo lo que se viene; los encargados del desarrollo del framework de Android han comentado que la mejor forma de tener una aplicación hoy en día es una Activity con muchos Fragments. Por eso vamos a realizar nuestras aplicaciones de esta manera de ahora en adelante.

Para empezar, crearemos el layout de nuestro Activity y su respectiva clase. Además, para hacer el post un poco más corto agregaremos de una vez la llamada a un Fragment que vamos a crear luego.

Java

Kotlin

Creando nuestro Fragment

Ahora procederemos a crear nuestro Fragment donde mostraremos nuestro RecyclerView con la lista de pizzas. Para empezar, vamos a agregar directamente el RecyclerView a nuestro layout.

Java

Kotlin

Luego procederemos a crear el layout para la fila que mostrará la información de cada pizza.

Creando nuestro POJO

Como ya se ha mencionado en el post anterior (puedes revisarlo haciendo click aquí), para crear un objeto a partir de un JSON es necesario realizar un Plain Old Java Object. Para esto crearemos nuestra clase Pizza, que es muy parecida a la que hicimos anteriormente solo que en esta oportunidad tiene una url donde está almacenada la imagen.

Java

Kotlin

Creando nuestro CustomAdapter y ViewHolder

Ahora crearemos nuestro CustomAdapter el cual extiende de RecyclerView.Adapter y vamos a crear dentro del mismo una clase con un viewHolder. Dentro de este último vamos a asignar la información de cada pizza.

Java

Kotlin

Agregando Glide

Para poder mostrar las imágenes de cada pizza necesitaremos utilizar Glide. Usar Glide es bastante sencillo solo debemos indicarle en cuál View va a buscar la ImageView en la que queremos mostrar la imagen .with(), luego desde dónde va a cargar la imagen con el método .load(), y finalmente, con el método .into() pasamos nuestro ImageView quedando de la siguiente manera:

Java

Kotlin

Obteniendo datos con Retrofit

Antes de crear el RecyclerView vamos a empezar creando la llamada a la API para obtener la información que le vamos a pasar a este. Esta parte también es muy parecida al post anterior con la única diferencia que aquí la parte final de la url es /v2/pizzas/, ya que esta url contiene la listas de pizzas con imágenes.

Java

Kotlin

Rellenando el RecyclerView

Para llenar nuestra lista de pizzas vamos a necesitar crear en nuestro Fragment, un RecyclerView y una instancia de Retrofit. Luego de esto vamos a crear un Service con Retrofit que nos permitirá realizar una llamada a la URL que ya hemos definido previamente y al obtener los datos vamos a asignarlos a nuestro nuevo CustomAdapter.

Java

Kotlin

Con esto ya tendremos nuestra simple aplicación para ver Pizzas y sus ingredientes.

Conclusión

En estos últimos post hemos hablado de cómo realizar llamadas a servicios que ya existen y obtener sus datos para mostrarlo en una aplicación. La mayoría de las aplicaciones necesitan hacer esto.

Próximamente, hablaremos sobre cómo integrar mapas a tus aplicaciones, recibir notificaciones y muchas cosas de las que seguro te querrás enterar.

Síguenos en las redes sociales que puedes encontrar al final de la página y comparte este artículo con tus amigos desarrolladores o con aquellos que estén empezando a programar. 😉

CategoriasAndroidProgramación

El camino del desarrollador Android #9 – Cargar imagenes con Glide v4

¡Hola! Hoy vamos a seguir con la serie de tutoriales de desarrollo Android, estas guías que a cualquier desarrollador le pueden servir para aprender y usar en su trabajo. En esta oportunidad hablaremos de Glide, la cual es una librería que se utiliza para cargar imágenes en nuestras aplicaciones Android.

Agregando Glide a nuestro proyecto

Como la mayoría de las librerías, empezamos agregando lineas a nuestro archivo build.gradle.

Añadimos el permiso de Internet (Opcional)

Si nuestra aplicación va a cargar imágenes desde Internet, vamos a necesitar el permiso correspondiente. En caso de que la aplicación que estés desarrollando no necesite cargar imágenes, puedes obviar este paso.

El permiso de internet se incluye en el AndroidManifest.xml, dentro de la etiqueta de Manifest y fuera de la etiqueta de Application. Quedando de la siguiente manera:

Añadiendo el permiso de escritura y lectura.

Para leer imágenes del usuario de la app vas a necesitar agregar el siguiente permiso, el cual se agrega igual que el anterior.

<uses-permission android:name=»android.permission.READ_EXTERNAL_STORAGE» />

Si quieres utilizar la cache de Glide para almacenar datos en la microSD vas a necesitar el permiso de escritura, si agregas los dos permisos al AndroidManifest quedaría así:

<uses-permission android:name=»android.permission.WRITE_EXTERNAL_STORAGE» />

Puedes usar el de Internet y estos que hemos mencionado anteriormente no son excluyentes, solo debes agregar uno debajo el otro. Con esto hemos terminado de incluir esta librería en nuestro proyecto usando Java, en caso de que uses Kotlin aun te falta algo mas por hacer.

Agregar el Plugin kapt (Solo en caso de Kotlin)

En este caso, no vamos a utilizar la linea de annotationProcessor que tenemos en el primer paso. En su lugar vamos a agregar el Plugin de kapt

En el build.gradle agregamos:

dependencies {
kapt ‘com.github.bumptech.glide:compiler:4.8.0’
}

Y luego tenemos que incluir también el plugin al inicio del build.gradle:

apply plugin: ‘kotlin-kapt’

Quedándonos así:

Creando el layout para mostrar la imagen

Para hacer esto solo tenemos que seguir unos sencillos pasos. Simplemente un botón con un ImageView en el que se cargara la imagen, el cual seria.

Nada que no hayamos visto antes ni que sea muy complicado, una View que es un ImageView y un botón el cual tendremos que tocar para que se cargue la imagen.

Finalmente, utilizamos Glide

Para utilizar Glide vamos a agregar un listener al botón que hemos creado previamente y llamar al método loadImage que crearemos ahora, y luego dentro de este ultimo haremos la llamada a Glide.

Cuando utilizas Glide basta con llamar al método with() y pasarle como parámetro un Context, un Activity o un Fragment. Luego indicamos la URL que vamos a utilizar para cargarla en el imageView y para finalizar utilizamos el método .into para cargarla en el imageView que hemos declarado anteriormente.

Java

Kotlin

La única diferencia que tenemos en Kotlin es el uso de .let.

Recuerda que el repositorio del proyecto lo puedes encontrar Aquí. Para alternar entre el proyecto en Java y en Kotlin basta cambiar de rama ?.

Qué hacer ahora

Glide tiene muchísimo más potencial de lo que hemos hablado hasta ahora, así que si quieres conocer más de sus capacidades puedes leer su documentación haciendo click aquí.

Con esto terminamos este post; si te ha servido no olvides compartirlo con tus amigos programadores ? y recuerda seguirnos en nuestras redes sociales para estar al tanto de todas las publicaciones que hacemos.

CategoriasAndroidProgramación

El Camino del Desarrollador Android #8 – Conectividad con Apis y Retrofit

Nuestras tareas de cada día en la mayoría de las aplicaciones que creamos son las llamadas a servicios,APIs y otras fuentes donde podamos consumir datos para mostrar al usuario en nuestra aplicación. En estos casos existen muchas maneras de realizar estas tareas pero gracias a Retrofit, una librería para la capa de comunicación de nuestra aplicación se nos hace fácil esta tarea.

Integrar Retrofit a tu aplicación es bastante sencillo, solo necesitas seguir los siguientes pasos:

  1. Integrar Retrofit a las dependencias a tu proyecto de Android Studio en el build.gradle.
  2. Crear nuestros POJO (Plain Old Java Object) para la llamada.
  3. Luego necesitas crear una interfaz donde vas a definir todas las llamadas que se van a realizar a una API utilizando sus anotaciones especiales.
  4. Crear una instancia de Retrofit donde indicar la URL de la API.
  5. Crear una implementación de la clase que hemos creado previamente en el paso 2.
  6. Realizar la llamada.
  7. Hacer uso de los datos de la forma que prefieras, por ejemplo mostrarlos en un RecyclerView.

Integrando Retrofit a nuestro proyecto

Para integrar Retrofit lo unico que necesitamos realizar es agregar las siguientes lineas al build.gradle

Creando nuestros POJOS

Aquí es donde viene unas de las mejores funcionalidades que tiene Retrofit, la conversión a nuestros POJOS haciendo uso de la librería de Google, GSON. Podemos convertir un JSON en objetos Java.

En nuestro caso he preparado una API de pizzas a la cual consultaremos y mostraremos su resultado por consola, recuerda que luego podemos utilizar esta información para mostrarla en un RecyclerView.

La URL de nuestra API a la cual llamaremos es: http://private-3cc5a4-codingpizza.apiary-mock.com/pizzas

Con el JSON que nos devuelve nuestra API de pizzas iremos a esta pagina http://www.jsonschema2pojo.org/ , la cual es genial para convertir JSON a clases de Java (En el caso de que estemos creando un proyecto con Kotlin, puedes convertir la clase de Java a Kotlin utilizando la opción de convertir archivo Java a Kotlin en la pestaña de «Code» de Android Studio.

En la siguiente imagen podemos ver como obtener nuestra clase Java, solo basta pegar el JSON y luego hacer click en Preview si queremos ver una vista previa o descargar todo en un zip que contenga las clases que necesitamos.

JsonToPojo

Ahora solo falta pegar estas clases dentro de nuestro proyecto y hemos terminado con este paso.

Creando la interfaz

Luego procedemos a crear una interfaz donde definiremos todas las llamadas que realizaremos y lo haremos de la siguiente manera:

Kotlin

Podemos ver que tenemos varias anotaciones las cuales indican lo siguiente:

@Get: Realiza una llamada Get (Si, es un poco obvio). Pero existen otras anotaciones que podrán conocer en la pagina oficial de Retrofit.

Creando nuestra instancia de Retrofit

Creamos nuestra instancia de Retrofit en nuestra clase usando su Builder e indicamos a la URL que vamos a llamar

Kotlin

Indicandole a Retrofit de que interfaz hablamos

Ahora tenemos que crear un Objeto de PizzaService, con la clase que necesitábamos y para terminar este paso tenemos que crear una Call, especificando que método de la clase PizzaService vamos a utilizar.

Kotlin

Agregar el permiso de Internet

Esto es de vital importancia si no lo agregas no podrás realizar conexiones desde tu aplicación y esta se cerrara.

Realizando las llamadas

Ahora vamos a realizar una simple llamada a un servicio utilizando nuestras clases nuevas de la siguiente manera:

Kotlin

En esta parte, creamos un objeto Call el cual nos traerá un objeto Response el cual verificamos si ha sido exitoso y de ser así obtenemos el Body de la llamada el cual es una lista de objetos de Pizza donde obtendremos toda la información que necesitamos para mostrar en un Log, esta lista podemos utilizarla también en un RecyclerView y mostrar estos datos pero esto lo haremos cuando creemos la aplicación completa. Así que si no quieres perderte cuando creemos la aplicación no olvides seguirnos en nuestras redes sociales y suscribirte a nuestra newsletter.

Ventajas de Retrofit

Retrofit es muy versátil y así como puedes convertir llamadas a JSON puedes convertir a XML,Jackson,Moshi hasta puedes obtener un JSON «Crudo», Llámese «Crudo» a la misma respuesta JSON que puedes obtener realizando una llamada a la API desde otro medio como Postman (¿Conoces Postman No?, de no ser así deberías es una gran aplicación para realizar llamadas a API y ver como funcionan los servicios de la API).

Otra de las grandes ventajas de Retrofit 2 es que te permite modificar el Header (Cabecera) de una llamada, utilizando la anotación @Header. Hay mucha tela que cortar con el Retrofit, por el momento utilizaremos solo las GET. Luego iré actualizando este Post con todas las llamadas posibles que utilicemos en otros post de el Camino del Desarrollador Android.

¿Que hacer ahora?

Empieza probando con diferentes llamadas a servicios que te llamen la atención y practica con ellos, si tienes alguna duda o quieres hacer algo en especifico pero tienes una duda. Puedes comentarlo aquí abajo y no olvides seguirnos en nuestras redes sociales, las cuales encontraras al final de la pagina ademas compartir esto con alguien que necesite aprender a usar Retrofit. Ademas en caso de que necesites el código del proyecto lo puedes ver y descargar de aquí si lo quieres en Java y para Kotlin aquí.

CategoriasAndroid

El camino del desarrollador Android #7 – Fragments

Fragments

¡Hola! En esta oportunidad nos toca hablar de uno de los componentes de Android que mucha gente odia, los Fragments.

Los Fragments podríamos decir que son piezas reutilizables de UI como los Layouts o los Viewgroups. Estos se pueden organizar de forma distinta dependiendo del tamaño de pantalla si así se quiere.

Generalmente, estos Fragments se utilizan en dos formas en específico. Puedes utilizarlos dentro de la misma actividad e intercambiarlos para dar la sensación de que se ha cambiado de actividad o puedes utilizarlos como se utilizan en las tablets el cual es un menú de un lado y el contenido de otro a esto se le llama “MasterFlow” en este post vamos a tratar solo el primer caso.

 

Fragments
Fuente: Android Developers

Todos los Fragments vienen mostrados en una Activity, estos utilizan la Activity como una “Anfitriona” y se alojan ahí. En práctica la actividad es un AirBnB para Fragments en este caso, la Activity gestiona estos Fragments a través del FragmentManager el cual permite agregar, remover y reemplazar los Fragments.

Ahora vamos a crear unos Fragments, pero antes otro poco de teoria

Los Fragments tienen un ciclo de vida distinto a los de las Activities, el cual por si no lo conoces lo puedes leer aquí. Sin embargo, comparten algunos Callbacks o eventos con su actividad «Anfitriona».

El ciclo de vida de los Fragments es el siguiente:

Fragment Lifecycle
Fuente: Android Developers

 

No vamos a hablar mucho de esto, por que considero que en la documentación de Android Developers esta muy bien explicado este ciclo de vida. Si quieres que te lo expliquemos de una manera mas a nuestra forma háznoslo saber en los comentarios ? , solo comentaremos que la vista en el caso de los Fragments no se crean en el onCreate() sino, en el onCreateView().

Ahora, el código.

Para utilizar los Fragments hay que seguir una serie de pasos los cuales son bastantes simples: 

Creando los Fragments

El Primer paso es crear nuestro Layout y nuestro Fragment que extienda de la clase Fragment, en este caso lo que vamos a hacer es crear una Activity en la que se muestre un Fragment para iniciar sesión, en caso de que el usuario no tenga cuenta seleccione la opción de registrarse y mostremos un Fragment con un formulario.

Primero creamos el Layout del Fragment, luego nuestro Fragment que extiende de la clase de Android Fragment.

Así que tenemos los Layouts para Login del Fragment y del Registro respectivamente:

Ahora, para continuar debemos crear nuestras clases Fragments.

Creamos nuestra clase LoginFragment

En la cual, creamos una clase LoginFragment que extiende de la clase Fragment, hacemos un Override del onCreateView() y dentro de este declaramos nuestras Views con nuestros onClickListeners en el caso de los botones.

Como habrán podido notar en el onCreateView() estamos devolviendo un objeto View, esto es por que inflamos la vista del Fragment que luego devolvemos por eso necesitamos usar el view.FindViewById().

También necesitamos crear una interfaz que implementara la MainActivity para que esta actué cuando tengamos que cambiar de Fragment.

Luego, creamos el Fragment de registro que es seguir los mismos pasos que hemos realizado previamente con el Fragment de Login.

Crear el MainActivity

Ahora para que la Activity anfitriona se encargue de ellos, debemos agregar al Layout del Activity un Fragment container y nos quedaría de esta forma:

Posteriormente a esto, creamos una instancia de nuestro Login Fragment y obtenemos una instancia del FragmentManager el cual nos va a ayudar a gestionar nuestros bellos Fragments en la Activity.

No podemos olvidar que debemos implementar la interfaz que hemos creado en el LoginFragment luego de esto debemos implementar el método de esta interfaz, gracias a este método cuando se toque el botón de Registrarse en el LoginFragment podremos decirle al FragmentManager que cambie el Fragment que se esta mostrando.

Así que el resultado de nuestra MainActivity seria este:

Ahora, para Kotlin

Para Kotlin el codigo que debemos utilizar en las clases del LoginFragment,SignInFragment y MainActivity es el siguiente:

Nota: en el post anterior, no utilizamos el findViewById() al contrario, usamos las ventajas de las Kotlin Android Extensions, las cuales nos permitían acceder a los views sin tener que utilizar la función findViewById().

En este caso al ser un fragment no podemos utilizarla, ya que lo que hace Kotlin Extension es llamar al metodo getView().findViewById() pero en este caso aun no hemos devuelto la View donde buscariamos el ID. Para utilizar la Kotlin Android Extension habría que llamarla en el onViewCreated();

Resultado Final

Formulario de inicio de sesión

 

Formulario de Registro

Y por ahora esto es todo, no olvides compartir esto en las redes sociales para demostrarles a todos como vas progresando como desarrollador Android ?, recuerda seguirnos y si algo no te ha quedado claro o tienes alguna sugerencia déjala aquí debajo en los comentarios.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies