Nuestras noticias en tu móvil

Prueba nuestra nueva app para Android e IOs Podras ver todas las noticias, eventos y todas nuestras actualizaciones
  

Suscribete en nuestro Newsletter

Regístrate en nuestro Newsletter para estar al tanto de las noticias, talleres y podcast que tendremos próximamente
Suscríbete aqui

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...