Foto del autor Osledy Bazo

Primeros pasos con React Native

Se acabaron los días de sentarse en el ordenador. En pleno 2017 la interacción y consumo de contenido se hace comúnmente a través de dispositivos móviles. React Native usa reactjs, un framework de javascript orientado a componentes. Su manejo de estados nos da una excelente plataforma, lo más moderno en tecnologías web para el desarrollo de apps. Con React Native no crearás una "aplicación HTML5" ni una "aplicación híbrida" debido a que usa componentes nativos de Android y iOS.

¡Empecemos!

Te enseñaré una app sencilla, para este ejemplo usaré linux y la compilaré para android. Primero debes instalar nodejs para ejecutar la cli de react native, descarga node en su página oficial https://nodejs.org/es/

Puedes verificar que está instalado tecleando en consola

                node -v

Debería aparecer algo como 'v7.6.0'

Luego de instalar node debes instalar el cli de react a través de npm

                npm install -g react-native-cli

Ahora vamos con el proyecto.

                react-native init MiNuevoProyecto

Esto creará un directorio llamado MiNuevoProyecto e instalará algunas dependencias. Entra a el directorio

                cd MiNuevoProyecto/

Por otro lado necesitarás Java SE Development Kit(JDK), descárgalo en el siguiente link http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html, así mismo sigue los siguientes pasos que son esenciales para desarrollar un entorno para Android

1. Android Studio.


Descarga aquí https://developer.android.com/studio/index.html A la hora de instalar escoge "Custom" y checkea las siguientes opciones:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device



2. SDK

Por defecto se instalará el SDK más actual, pero necesitarás el SDK Android 6.0 (Marshmallow) para trabajar con react native. El mismo lo puedes instalar desde Android studio. En la Pantalla de bienvenida


selecciona "Configurar" > "SDK Manager".


En la pestaña platforms checkea la casilla "Android 6.0 (Marshmallow)" y luego la casilla inferior izquierda "Show Package Details" y asegúrate que esté checkeado lo siguiente:

  • Google APIs
  • Android SDK Platform 23
  • Google APIs Intel x86 Atom_64 System Image


En la pestaña "SDK Tools" checkea la casilla "Show Package Details".
Expande "Android SDK Build-Tools" y selecciona "23.0.1"
Ahora haz click en "Apply" para empezar la descarga


3. Variables de Entorno (ANDROID_HOME):

En linux busca el archivo de configuración de bash “$HOME/.bash_profile” o “$HOME/.bashrc” y agrega las siguientes líneas:

                export ANDROID_HOME=$HOME/Android/Sdk
                export PATH=$PATH:$ANDROID_HOME/tools
                export PATH=$PATH:$ANDROID_HOME/platform-tools

Tipea el siguiente comando para recargar los cambios:

                source $HOME/.bash_profile

Bien, asegúrate de tener los drivers de tu teléfono instalados y activa la opción "Depuración USB", esto permitirá a Android Debug Bridge (ADB) comunicarse con tu dispositivo y hacer las instalaciones correctas al momento de desarrollar. Puedes leer mas sobre AD aquí https://developer.android.com/studio/command-line/adb.html

Para verificar que tu dispositivo está conectado puedes escribir este comando

Nota: tu version de android debe ser mayor o igual a android 4.1

                $ adb devices
                List of devices attached
                * daemon not running. starting it now at tcp:5037 *
                * daemon started successfully *
                479008af21f7905c        device

En este ejemplo el dispositivo “479008af21f7905c” está listo para usarse

Si todo está en orden ejecuta este comando para iniciar nuestra app:

                react-native run-android

Ahora deberías ver el template por defecto que viene en “index.android.js” Este es el código por defecto

                jsx
                /**
                 * Sample React Native App
                 * https://github.com/facebook/react-native
                 * @flow
                 */
                
                import React, { Component } from 'react';
                import {
                  AppRegistry,
                  StyleSheet,
                  Text,
                  View
                } from 'react-native';
                
                export default class MiNuevoProyecto extends Component {
                  render() {
                    return (
                      <View style={styles.container}>
                        <Text style={styles.welcome}>
                          Welcome to React Native!
                        </Text>
                      </View>
                    );
                  }
                }
                const styles = StyleSheet.create({
                  container: {
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#F5FCFF',
                  },
                  welcome: {
                    fontSize: 20,
                    textAlign: 'center',
                    margin: 10,
                  },
                  instructions: {
                    textAlign: 'center',
                    color: '#333333',
                    marginBottom: 5,
                  },
                });
                
                AppRegistry.registerComponent('MiNuevoProyecto', () => MiNuevoProyecto);


Juega un poco con el código!

Hay varias cosas que debes tener en cuenta, como que ReactJs usa jsx para la interfaz gráfica y para los estilos se usan inline styles con “StyleSheet” del paquete react native.

Edita la clase “MiNuevoProjecto”.

                jsx
                export default class MiNuevoProyecto extends Component {
                  constructor() {
                    // Estado por defecto
                    this.state = {
                      name: 'Coders Venezuela!'
                      texto: ''
                    }
                    this.syncText = this.syncText.bind(this);
                  }
                  syncText() {
                    this.setState({
                      name: this.state.texto
                    });
                  }
                  render() {
                    return (
                      <View style={styles.container}>
                        <Text style={styles.welcome}>
                          Hola {this.state.name}
                        </Text>
                        <TextInput
                          style={styles.input}
                          onSelectionChange={this.syncText}
                          onChangeText={t => this.setState({texto: t})}
                          value={this.state.texto}
                        />
                      </View>
                    );
                  }
                }

Lo que acabas de hacer es agregar un estado por defecto a nuestra app. También se añadió un método que va a sincronizar el nuevo input que agregaste con lo que muestra la etiqueta Text que está arriba.

Algunos estilos

                 jsx
                const styles = StyleSheet.create({
                  container: {
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#FFF8DF',
                  },
                  text: {
                    color: '#d45500',
                    fontSize: 20,
                    textAlign: 'center',
                    margin: 10,
                  },
                  input: {
                    color: '#d45500',
                    fontSize: 20,
                    height: 50,
                    width: 200,
                    borderColor: 'yellow',
                    borderWidth: 1
                  }
                });




¡Con esto tendrás lista la app!Si deseas seguir investigando acerca de react native puedes hacerlo en la página oficial https://facebook.github.io/react-native/

Aquí tienes la documentación guía y tutorial https://facebook.github.io/react-native/docs/tutorial.html

Foto del autor Osledy Bazo

Ejemplos del uso del teclado en React-Native para iPhone y Android

Según la documentación de Facebook para el componente de Teclado tenemos disponibles varios eventos para interactuar con el teclado de nuestra aplicación. https://facebook.github.io/react-native/docs/keyboard.html

Comencemos con un ejemplo de app básica donde sólo mostraremos una caja de texto para ingresar texto y un párrafo para indicar el estado del teclado, si está activo o no.

Si te has dado cuenta, al tocar el input puedes escribir cualquier texto, pero luego al tocar la pantalla fuera de la caja de texto, el teclado no se esconde.

Para solucionar esto debemos usar otro componente llamado 'TouchableWithoutFeedback'

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

Te recomiendo leas la documentación sobre este componente ya que debe usarse con cuidado.

Modificaremos nuestro código para incluir el modulo del teclado 'Keyboard' y de 'TouchableWithoutFeedback'. También agregaremos este nuevo componente alrededor de nuestro View principal y usaremos 'onPress={Keyboard.dismiss}' para esconder el teclado una vez tocado la pantalla fuera de la caja de texto.

Para acceder a los estados del teclado tenemos que usarlo en combinacion con un Event Listener que conectará con un evento nativo, puede ser identificado con alguno de estos strings:

  • keyboardWillShow (IOS)
  • keyboardWillHide (IOS)
  • keyboardDidShow (Android)
  • keyboardDidHide (Android)
  • keyboardWillChangeFrame
  • keyboardDidChangeFrame

Modificaremos nuestra app y agregaremos métodos para estar atentos al cambio del teclado.

Usare los strings 'keyboardDidShow' y 'keyboardDidHide' ya que en funcionan tanto en Android como en IOS. ('keyboardWillShow' y 'keyboardWillHide' no tienen representación nativa en Android).

Ademas de agregar los EventListener tenemos que recordar que hay que removerlos, esto para prevenir memory leaks y problemas de rendimiento en nuestra aplicación.

Ahora cambiaremos el estado de nuestro status a un string que indica si el teclado esta activo o inactivo.

En los eventos del keyboard podemos acceder a algunas de sus propiedades como son:

                { 
                  endCoordinates: { 
                  screenY: 442, 
                  screenX: 0, 
                  width: 375, 
                  height: 225 
                },
                  startCoordinates: { 
                  screenY: 451, 
                  screenX: 0, 
                  width: 375, 
                  height: 216 
                },
                  duration: 250 
                }
                

Hay un ultimo problema que es muy común a la hora de trabajar con el teclado en una aplicación y es que a veces el teclado puede tapar parte del contenido de nuestra app:

Para solucionarlo debemos usar el componente 'KeyboardAvoidingView', este componente esta diseñado para ajustar o mover lo que se ve en la pantalla automaticamente para que el teclado no estorbe.

https://facebook.github.io/react-native/docs/keyboardavoidingview.html

Hay tres formas para hacer esto automaticamente y la que uses dependerá de los resultados que quieras mostrar. Presta atención a la propiedad 'keyboardVerticalOffset' que sirve para guardar una distancia entre la vista y el teclado. Para esto tendremos que modificar un poco nuestro código así:

Foto del autor Osledy Bazo

Gaming Analytics with Firebase

In this talk Abe Haskins dives into the advantages of using Firebase Analytics to report user behaviour in your mobile games. He’ll cover how Firebase Analytics increases your ability to create actionable insights for your games which improve player retention and player satisfaction. He’ll also touch on expanding Firebase’s functionality with Google Cloud’s BigQuery and Data Studio.

Foto del autor Osledy Bazo

Desarrollo Venezolano: Pam Panda

¡A pelear! ¡Juega Ya! Vienen los perros a quitar la comida de tu panda y debes defender a toda costa.

Utiliza toda la fuerza del panda para golpear el suelo y que los enemigos vuelen por los aires, para darle fuertes golpes y Puf!! destruirlos antes que caigan y corran a comer toda tu comida.

¡Sin publicidades!

Disfrutaras en tu tiempo libre, prueba y veras! desde los niños, hasta los adultos tendrán máxima diversión! Imágenes divertidas! Personajes únicos!

Comparte con tus amigos, familia, habla de este juego para que todos lo conozcan. Pou! Pam! Clash! Sera lo ultimo que escucharan esos perros ladrones antes darles la lección de sus vidas.

Diversión Garantizada, compite con tus amigos y ve quien tiene el mejor récord.

Visita mis redes sociales y veras todos los juegos gratis que estaré creando para ti, cuéntale a tus familiares y amigos, apoyaras un montón.

PlayStore: https://goo.gl/3EwwXF

Facebook: https://www.facebook.com/groups/GabeGameDesk/

Instagram: https://www.instagram.com/gabegamedesk/

Twitter: https://twitter.com/GabeGameDesk

Foto del autor Osledy Bazo

Podcast Recomendado

Hoy les quiero recomendar un podcast muy detallado y abierto sobre las diferentes tecnologías usadas en player.fm. Tocan temas como experiencia de usuario, como construyen y optimizan su API, soporte y desarrollo de clientes mobile nativos y muchas otras cosas.

Herding Code 195: Michael Mahemoff on PLAYER FM

También les recomiendo leer y seguir su blog donde publican detalles técnicos de su plataforma como este post http://blog.player.fm/design-develop-and-distribute-player-fm-at-google-io-2014/

Foto del autor Adrian

API's fluidos (Ejemplo en Java-Android context)

API's fluidos (Ejemplo en Java-Android context)

Motivación

Somos nuevos desarrollando para Android y los mas normal es que tarde o temprano tengamos que interactuar con un servidor vía http, buscamos en google[1] y veremos algo como esto :

                public static void connect(String url)
                {
                
                    HttpClient httpclient = new DefaultHttpClient();
                
                    // Prepare a request object
                    HttpGet httpget = new HttpGet(url); 
                
                    // Execute the request
                    HttpResponse response;
                    try {
                        response = httpclient.execute(httpget);
                        // Examine the response status
                        Log.i("Praeda",response.getStatusLine().toString());
                
                        // Get hold of the response entity
                        HttpEntity entity = response.getEntity();
                        // If the response does not enclose an entity, there is no need
                        // to worry about connection release
                
                        if (entity != null) {
                
                            // A Simple JSON Response Read
                            InputStream instream = entity.getContent();
                            String result= convertStreamToString(instream);
                            // now you have the string representation of the HTML request
                            instream.close();
                        }
                
                
                    } catch (Exception e) {}
                }
                
                    private static String convertStreamToString(InputStream is) {
                    /*
                     * To convert the InputStream to String we use the BufferedReader.readLine()
                     * method. We iterate until the BufferedReader return null which means
                     * there's no more data to read. Each line will appended to a StringBuilder
                     * and returned as String.
                     */
                    BufferedReader reader = new BufferedReader(new InputStreamReader(is));
                    StringBuilder sb = new StringBuilder();
                
                    String line = null;
                    try {
                        while ((line = reader.readLine()) != null) {
                            sb.append(line + "\n");
                        }
                    } catch (IOException e) {
                        e.printStackTrace();
                    } finally {
                        try {
                            is.close();
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                    return sb.toString();
                

Al ver eso pensamos bueno es Java es de esperarse porque google no uso *inserte lenguaje nuevo aquí* para el desarrollo de aplicaciones, bla , bla. Al final tenemos que ponernos a la tarea de lidiar con eso, decidimos hacer un pequeño api http para integrarlo a nuestra aplicación.

Solución Procedimental

Podemos hacer un método por cada método http que necesitemos y enviarle una lista de parámetros y headers, quedando algo así :

                public class Rest{
                
                        public static get(String url,List<NamePair> params,List<NamePair> headers){
                                // hacer la llamada get
                        }
                
                        public static post(String url,List<NamePair> params,List<NamePair> headers){
                                // hacer la llamada post
                        }
                
                }
                

Bueno no luce tan mal(right), veamos como seria un cliente de eso

                List<NamePair> params = new ArrayList<NamePair>();
                params.add(new BasicNamePair("key1","value1"));
                params.add(new BasicNamePair("key2","value2"));
                
                List<NamePair> headers = new ArrayList<NamePair>();
                headers.add(new BasicNamePair("key1","value1"));
                headers.add(new BasicNamePair("key2","value2"));
                
                String response = Rest.get(URL_BASE,params,headers);
                
                

Bueno peor de lo que se esperaba, que tal si no confundo el orden de los parámetros o si quiero agregar otro parámetro. En definitiva este código es propenso a errores y difícil de extender.

Solución Orientada a Objectos

Pensamos bueno Java es OO que tal si abstraemos la combinación de url, parámetros y headers en un objecto llamado "Request"

                public class Request{
                        private String url;
                        private List<NamePair> params;
                        private List<NamePair> headers;
                
                        public Resquest(String url){
                                this.url = url;
                        }
                
                        public void addParam(String key,String value){
                                params.add(new BasicNamePair(key,value)); 
                        }
                
                        public void addHeader(String key,String value){
                                headers.add(new BasicNamePair(key,value)); 
                        }
                        
                        //otras cosas
                
                }
                
                
                public class Rest{
                        
                        public static String get(Resquest request){
                                // la llamada al get
                        }
                } 
                
                //cliente
                
                Request request = new Request(URL);
                request.addParam("key1","value1");
                request.addParam("key2","value2");
                request.addHeader("key1","value1");
                request.addHeader("key2","value2");
                
                String response = Rest.get(resquest);
                
                
                

Un poco mejor, podemos extenderlo simplemente agregándole mas atributos al objecto request pero todavía no se ve una solución del todo elegante(dentro de lo que Java nos deja).

Solución API Fluido(Fluent Interface)[2]

Un API fluido(o Interfaz Fluida) es un patrón de diseño que consiste en encadenar llamadas a métodos, donde un objecto se modifica y retorna así mismo con un fin definido. En este caso el fin es enviar parámetros opcionales y finalmente enviar el request.
                public class Rest{
                        private String url;
                        private List<NamePair> params;
                        private List<NamePair> headers;
                
                        private Rest(String url){
                        }
                
                        public static Rest client(String url){
                                new Rest(url);
                        }
                
                        public Rest param(String key,String value){
                                this.params.add(new BasicNameValue(key,value));
                                return this;
                        }
                
                        public Rest header(String key,String value){
                                this.headers.add(new BasicNameValue(key,value));
                                return this;
                        }
                
                        public String get(){
                                //hacer la llamada get
                        }
                
                }
                 
                //Cliente
                
                String response = Rest.client(URL)
                                      .param("key1","value1")
                                      .param("key2","value2")
                                      .header("key1","value1")
                                      .header("key2","value2")
                                      .get();
                
                

Mucho mejor, si quisieras extenderlo como por ejemplo depurar(debug) las llamadas o integrarlo a un json parser(eg gson) después de modificar la clase Rest tu cliente podría quedar algo así.

                User user = Rest.client(URL)
                                .param("id","V-111111")
                                .header("Autorization","1234")
                                .debug()
                                .from(Json.class)
                                .to(User.class)
                                .get();
                
                

Fluent Interface se puede aplicar en cualquier lenguaje, de hecho JQuery sigue fuertemente este patrón de diseño. Usado apropiadamente puede simplificar considerablemente la forma de interactuar con tu código.

Foto del autor Rafael Becerra

Instala android en tu pc, con el proyecto Android-x86

Android x86, es un proyecto de software libre, que se encarga de migrar este famoso sistema operativo móvil a la arquitectura x86, esto es, puede ser instalada en cualquier pc como si estuviesemos instalando cualquier distribución Linux, ya que puedes encontrar en la página oficial los archivos .iso de cada versión de android para determinados dispositvos.

Seguir leyendo...