Los programadores y la seguridad informática

En esta ocasión quiero compartir con ustedes una pequeña experiencia que me sucedió en uno de los muchos grupos de programadores a los que pertenezco en la red social Facebook, esta anécdota me hizo reflexionar acerca del nivel de cultura de seguridad informática que tenemos en México y al final me hizo terminar escribiendo este post a manera de auto crítica constructiva para la misma comunidad de desarrolladores.

Son muchos y muy variados los grupos de programación que uno encuentra Facebook: desarrolladores web, desarrolladores iOS / Android, desarrolladores C#, desarrolladores de videojuegos y todo lo que uno se imagine; esta funcionalidad de Facebook (los grupos) ha pasado a sustituir los antiguos foros de discusión (como smf o phpbb) para la generación millennial ya que de alguna forma es mucho mas cómodo tener todo integrado en la misma plataforma social, pero ese no es el tema de discusión aquí.

La Anécdota

Lo que verdaderamente me llamo la atención fue hace unos días cuando un miembro del grupo hizo una consulta acerca de cómo podía realizar una validación de correo electrónico en un sistema que estaba desarrollando, no me llamo la atención la duda, pues todos los días hay gente que pregunta y mucha otra que le responde, lo que me llamo la atención fue la respuesta que le dio una persona del grupo y sobre todo la convicción con la que escribió la misma.

La imagen esta censurada por que la idea no es quemar a nadie sino más bien sacar algo bueno de todo esto.

La imagen esta censurada por que la idea no es quemar a nadie sino más bien sacar algo bueno de todo esto.

En cuanto termine de leer su respuesta no pude esperar para unirme a su conversación y explicarle por qué su solución era incorrecta desde el punto de vista de seguridad, lo bueno fue que no lo tomo mal y se interesó bastante en el tema.

La solución del comentario de Facebook va más o menos así

mail_fail

¿Pueden ver dónde está el problema de su solución?

La solución iba bien hasta el momento en donde decide regresar el token aleatorio al navegador del usuario y realizar ahí la validación. Explicando un poco más acerca de por qué este esquema de solución era malo le mostré un escenario en donde un atacante podría crear miles de cuentas saltando su sistema de verificación.

Haciendo un pequeño ejercicio de reflexión le propuse lo siguiente:

Partimos de la siguiente premisa: el objetivo del sistema de activación por correo es validar una identidad (así como detener posibles ataques automatizados que te creen cuentas falsas y te llenen la base de datos de usuarios ficticios), para lograr esto se utiliza el concepto de “secreto”, un secreto es un token que debe ser compartido solamente con el usuario mediante el método que él especifico (el correo electrónico), enviando ese token al correo que se supone tiene acceso y es el único medio en el que pueda recibir ese secreto nos aseguramos que la cuenta que el usuario especifico existe y es válida, por lo tanto su identidad ha sido avalada por un proveedor de correo.

Ahora, en el escenario que nos plantean de realizar toda la validación del lado del cliente el problema es que realmente no estas validando nada, si el servidor le está regresando al navegador mediante Ajax el token que se supone el usuario debe escribir ¿Cuál es el punto pedirle revisar su correo? Fácilmente se podría crear un bot que registrara cuentas y las activara de forma masiva, es por eso que no es una buena solución.

source-code-583537_1280

La solución óptima seria (o al menos como se usa en la industria de software hoy en día):

Al momento de crear el usuario en la base de datos debemos manejar un campo para representar el estado actual de su cuenta (activada o desactivada), y cuando el usuario reciba el token por correo este lo introduce en un formulario y es enviado para su comparación del lado del servidor (el token generado también debimos haberlo almacenado de alguna forma en el servidor) y dependiendo de si es válido o no activamos su cuenta.

Lo que me interesaba al final es dejarles en claro que todo el código y los datos (por ejemplo funciones de validación en JavaScript) que enviemos al navegador pueden ser modificados por el usuario, y por lo tanto jamás debemos confiar en esa información.

Bueno aquí termina la anécdota, satisfecho de saber que al menos ese programador siguiendo mis recomendaciones seria capas de lanzar ese componente de forma segura a producción me puse a pensar en todos los demás desarrolladores que tienen dudas pero por X o Y motivo no preguntan y siguen produciendo mas y mas código vulnerable que al final contribuye a llenar las bases de datos sobre hackeos de sitios como https://haveibeenpwned.com o http://www.zone-h.org/

Mi opinión

Como muchos sabrán, actualmente soy consultor de seguridad informática, sin embargo tengo una formación de desarrollador de software, antes de dedicarme a la seguridad y durante la universidad cree muchísimas plataformas web y aplicaciones móviles (y lo sigo haciendo de vez en cuando como FreeLancer xd), estoy convencido de que al realizar una prueba de penetración en algún sistema o aplicación, en el 95% de los casos los hackeos se hubieran evitado si el software hubiera sido diseñado con la seguridad en mente.

Desarrollar software seguro no es una tarea sencilla, nadie nunca lo dijo, pero las empresas de desarrollo y pequeñas agencias tienen la manera de mitigar este problema.

Capacitación del personal

En mi opinión por cada equipo de desarrolladores debería de haber por lo menos una persona con nociones básicas de seguridad, “Nociones básicas” es un término muy relativo, es por eso que las empresas (lideres técnicos, Project managers, IT managers, etc.) deberían voltear a ver estándares y buenas prácticas de seguridad en el desarrollo de software y no solo eso, integrarlas en su ciclo de desarrollo.

Hay un documento que me gusta recomendar bastante.

OWASP Top 10: los diez riesgos más críticos en aplicaciones web

Este documento explica las diez vulnerabilidades más populares en las aplicaciones web hoy en día, así como su riesgo, impacto y mitigación.

owasp

Ya sea que trabajes para una empresa o seas un desarrollador FreeLancer, te aseguro que si desarrollas tu software tomando como referencia los 10 puntos de OWASP tu aplicación sera lo suficientemente robusta para que no venga cualquier lammer / hackerucho de tercera y vulnere tu sistema usando sus herramientas automatizadas.

Como decía mas arriba, producir software seguro es compromiso de todos, las metodologías de desarrollo ágil como SCRUM son buenas y funcionan, pero muchas veces el personal que las lleva acabo deja de lado el tiempo requerido para hacer un buen diseño de software (con la seguridad en mente, programación defensiva, etc.) o lo minimiza

Aunque lo ideal sería tener un departamento de seguridad que apoyara al departamento de desarrollo durante todo el ciclo de vida del proyecto.

Después de todo, ¿cuánto te cuesta contratar un arquitecto de seguridad? ¿Cuánto te costaría recuperarte de un hackeo (hablando de información, dinero y prestigio de la empresa)?

Si te gusto comparte ...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Tutorial Material Design en Android #5

Crear un RecyclerView para Android

Hola lectores, ha pasado un tiempo desde que publique la última entrega del tutorial de Material Design en Android en donde aprendimos a crear un Navigation Drawer, continuamos con los tutoriales y en esta ocasión les enseñare a crear un RecyclerView.

Pero antes, ¿Que es un RecyclerView?, seguramente muchos lo abran visto ya en acción, este tipo de componente es cada vez más y más popular y ha venido remplazando a las antiguas ListViews, se trata de un componente que nos permite crear listas de contenedores que a su vez pueden tener dentro otros componentes (TextView, EditText, ImageView, etc.). El RecyclerView tiene la particularidad de haber sido diseñado con la eficiencia en mente, como su nombre lo indica los objetos que son visible en la pantalla son los que se dibujan en pantalla y una vez que desaparecen (el usuario hace scroll) estos remplazan su contenido (se reciclan) para mostrar otro tipo de información.

Imaginemos una lista de 100 contactos, en la pantalla de nuestro teléfono solo podemos renderizar 5 contactos a la vez, en lugar de renderizar los 100 desde un inicio solo vamos remplazando la información en las filas de nuestro RecyclerView conforme lo vamos necesitando, cabe decir que este es un proceso automático.

list_mail

Pero el RecyclerView es mucho más que eso, a diferencia de su predecesor con este nuevo componente podemos crear listas con diferentes tipos de layouts

20150415193645985

images

EAF-MD3

Retomamos nuestro proyecto, como les comentaba en la publicación pasada he subido el código realizado hasta el momento en el siguiente repositorio https://github.com/Alevsk/Material-design-en-Android.

Lo primero que vamos a hacer sera agregar la dependencia a nuestro proyecto en el archivo de gradle, abrimos el archivo build.gradle que se encuentra en MaterialdesignApp (proyecto)> app > build.gradle y en la parte de abajo en el apartado de dependencias agregaremos
compile ‘com.android.support:recyclerview-v7:+’ quedando de la siguiente forma

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
}

Sincronizamos gradle para descargar las dependencias (o también podemos dar re build al proyecto) y una vez tenemos la dependencia vamos a comenzar a utilizar el componente, vamos a nuestro archivo fragment_navigation_drawer.xml (aquí vamos a crear el menú), si no recuerdan donde está el archivo se encuentra en MaterialdesignApp > app > src > main > res > layout > fragment_navigation_drawer.xml

Por el momento tenemos esto, un simple texto ¿bastante simple cierto?

Capture

drawer_navigation

Al final de nuestro tutorial vamos aprender a crear algo como esto :), pues manos a la obra, o mejor dicho al codigo XD

16170261501_9b7ce86ca7_b

En nuestro archivo XML (fragment_navigation_drawer.xml) vamos a crear nuestro RecyclerView con el siguiente código, si se fijan elimine el TextView que teníamos porque ya no lo necesitamos.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grayPanel"
    tools:context="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/drawerList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v7.widget.RecyclerView>

</RelativeLayout>

Una vez añadido el componente en nuestra vista xml vamos a nuestro controller NavigationDrawerFragment.java (MaterialdesignApp > app > src > main > java > com.alevsk.materialdesignapp > fragments > NavigationDrawerFragment.java) y definimos una nueva variable tipo RecyclerView como propiedad de la clase

public class NavigationDrawerFragment extends Fragment {

    private RecyclerView mRecyclerView;
    private ActionBarDrawerToggle mDrawerToggle;
    private DrawerLayout mDrawerLayout;
    private Toolbar mToolbar;
    ....
    ..

Una vez creado nuestro RecyclerView vamos a agregar la referencia hacia su objeto xml, para eso en el método onCreateView, vamos a modificar un poco el código, actualmente tenemos algo como esto

Capture

Lo remplazamos por esto, sencillo, a estas alturas del tutorial ya deberían saber que estamos obteniendo el elemento mediante el id (layout.findViewById(R.id.drawerList)) que definimos, estamos haciendo un cast (RecyclerView) y lo estamos asignando a la variable mRecyclerView, por ultimo retornamos el layout (View) que es con el que trabajara la aplicacion.

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View layout = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
        mRecyclerView = (RecyclerView) layout.findViewById(R.id.drawerList);
        return layout;
    }

Pero no tan rápido, antes de correr nuestra aplicación nos falta crear un par de componentes más, un Adapter (un manejador lógico para los elementos de nuestra lista), ViewHolders y un modelo (representación de un elemento en la lista)

Pero antes, para tener todo más organizado, vamos a crear dos nuevos Package en nuestro proyecto, uno llamado adapters y otro models

Capture

Vamos a comenzar a pensar en MVC (Model View Controller), si bien no existe un estándar totalmente definido para utilizar MVC en Android podemos tomar el concepto y definir lo siguiente:

  • Model: Qué vamos a renderizar en la aplicación (objetos principales utilizados en los controladores)
  • View: Como lo vamos a renderizar (xml)
  • Controller: Eventos del ciclo de vida de las pantallas, manejar las entradas de usuario, definición de componentes de Android como el RecyclerView, etc.

Creando un Modelo en Android

Teniendo lo anterior como premisa al momento de definir nuestro menú lo que necesitamos es una imagen que sirva como icono y un texto que sirva como título, procedemos a crear nuestra clase Menu.java en el Package models que definimos previamente

Quicktip: en nuestra clase primero definimos las propiedades de nuestro objeto (int icon, String title) y después para generar nuestros gets y sets usamos el shortcut “alt + insert” lo que desplegara un menú en donde elegimos getters and settters y marcamos todas las propiedades (variables) de nuestra clase.

Capture

public class Menu {
    private int icon;
    private String title;

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }
}

Creando un Adapter personalizado para el RecyclerView

Ahora en el Package adapters creamos una clase llamada MenuAdapter que extenderá o heredara sus metodos de RecyclerView.Adapter, el código inicialmente queda así.

package com.alevsk.materialdesignapp.adapters;

import android.support.v7.widget.RecyclerView;
import android.view.ViewGroup;

/**
 * Created by Alevskey on 23/01/2016.
 */
public class MenuAdapter extends RecyclerView.Adapter {
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }
}

Creando un ViewHolder personalizado

Ademas de eso también vamos a crear un ViewHolder, podemos definir la clase como una subclase de nuestro MenuAdapter, como siempre aquí tienen más documentación respecto a lo que vamos a utilizar http://developer.android.com/reference/android/support/v7/widget/RecyclerView.ViewHolder.html

Quedando el codigo final de la siguiente forma

Capture

Continuamos, Si leyeron la documentación acerca del comportamiento de los Adapter sabrán que por default manejan el tipo de objeto ViewHolder, pero nosotros acabamos de definir uno llamado MenuViewHolder que será el encargado de “contener” elementos como TextView, ImageView y todo lo que necesitemos para personalizar nuestro elemento de menú, sabiendo eso necesitamos realizar algunos cambios en nuestra clase, para empezar en la definición de nuestra clase vamos a definir (valga la redundancia) explícitamente que queremos utilizar MenuViewHolder

public class MenuAdapter extends RecyclerView.Adapter<MenuAdapter.MenuViewHolder> {
...
..
.

Ahora tenemos un montón de errores en la clase y esto es porque tenemos que modificar el tipo de objeto que retorna la función onCreateViewHolder de RecyclerView.ViewHolder a MenuViewHolder, también deberemos definir otra función llamada OnBindViewHolder, una vez realizados los cambios tenemos lo siguiente.

public class MenuAdapter extends RecyclerView.Adapter<MenuAdapter.MenuViewHolder> {
    @Override
    public MenuViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(MenuViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }

    class MenuViewHolder extends RecyclerView.ViewHolder {

        public MenuViewHolder(View itemView) {
            super(itemView);
        }
    }
}

Ahora vamos a crear la vista xml de nuestro item de Menu, en la carpeta layout creamos un archivo llamado viewholder_menu.xml que contendrá dos cosas, un ImageView y un TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/listIcon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:padding="8dp"
        android:layout_gravity="center_vertical"
        android:src="@drawable/dummy" />

    <TextView
        android:id="@+id/listText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:layout_gravity="center_vertical"
        android:text="@string/dummy_text" />

</LinearLayout>

La imagen @drawable/dummy es una imagen de ejemplo que yo utilice, ustedes pueden usar la que más les guste.

Regresamos a nuestro MenuAdapter.java y vamos a comenzar a utilizar los métodos que creamos anteriormente, primero vamos a crear un constructor para nuestro adapter, el cual recibirá un Context que nos servirá para hacer el binding de los elementos xml en nuestro ViewHolder, y una lista (de objetos Menu) que será la información con la cual llenaremos el RecyclerView después de eso vamos a realizar ese binding en el método onCreateView, tambien modificamos la función getItemCount para retornar el tamaño actual de la lista.

    private LayoutInflater mInflater;
    private List<Menu> data = Collections.emptyList();

    public MenuAdapter(Context context, List<Menu> data) {
        mInflater = LayoutInflater.from(context);
        this.data = data;
    }

    @Override
    public MenuViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.viewholder_menu, parent, false);
        MenuViewHolder holder = new MenuViewHolder(view);
        return holder;
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

Ahora en la subclase MenuViewHolder vamos a definir el ImageView y TextView

    class MenuViewHolder extends RecyclerView.ViewHolder {
        ImageView icon;
        TextView title;
        public MenuViewHolder(View itemView) {
            super(itemView);
            title = (TextView) itemView.findViewById(R.id.listText);
            icon = (ImageView) itemView.findViewById(R.id.listIcon);
        }
    }

Ahora en el método onBindViewHolder es donde se realiza la acción de asignar los valores a las variables del MenuHolder (imágenes, textos, etc).

    public void onBindViewHolder(MenuViewHolder holder, int position) {
        holder.title.setText(data.get(position).getTitle());
        holder.icon.setImageResource(data.get(position).getIcon());
    }

Lo que hace nuestro método es recibir un holder, y una posición int, entonces con esa información de nuestra Lista de objetos Menu extraemos el titulo y el id de recurso de imagen que contiene el objeto Menu en la posición indicada de la lista, por ultimo hacemos set de esa información al TextView e ImageView del holder.

Venga ya falta poco, casi terminamos!!!

Me di cuenta que aún no hemos definido el tema de la app, lo he estado pensando y me gustaría enfocarla a un pequeño catálogo de anime que consuma la api opensource de hummingbird, desarrollando un catálogo les poder enseñar a utilizar muchos más componentes que el ecosistema de Android nos ofrece, así como a consumir Apis e interactuar con las mismas, algo muy común en la industria de desarrollo de aplicaciones hoy en día.

Teniendo claro lo anterior las opciones de nuestro menú serán:

  • Buscar (buscador de anime)
  • Lo que estoy viendo (anime que el usuario ve actualmente)
  • Para más tarde (anime que el usuario tiene en la categoría de plan-to-watch)
  • Completado (series que el usuario ha terminado de ver)
  • Mi cuenta (información del usuario y anime favorito)

De ahí hay 3 opciones que solo pueden ser utilizados una vez el usuario haya sido autenticado en nuestra aplicación, pero eso lo dejaremos para más tarde, por ahora nos centraremos en desarrollar el menú.

Primero vamos a nuestro archivo strings.xml que se encuentra en MaterialdesignApp > app > src > main > res > values > strings.xml y ahi vamos a crear una lista de items que contendrá los elementos del menú

    <string-array name="menu_list">
        <item>Buscar</item>
        <item>Lo que estoy viendo</item>
        <item>Para mas tarde</item>
        <item>Mi cuenta</item>
    </string-array>

Buscamos en Internet algún set de iconos gratuitos y los incluimos a los recursos de nuestro proyecto en la carpeta res > drawable pues los necesitamos para el menu

    <array name="menu_icons">
        <item>@drawable/ic_search</item>
        <item>@drawable/ic_eye</item>
        <item>@drawable/ic_ticket</item>
        <item>@drawable/ic_account</item>
    </array>

Cargando los datos al RecyclerView

En nuestro archivo NavigationDrawerFragment.java vamos a crear una nueva función llamada getData(), esta función será la encargada de leer la información estática que definimos en nuestro archivo strings.xml

    public List<Menu> getData() {
        List<Menu> menu = new ArrayList<Menu>();
        TypedArray icons = getResources().obtainTypedArray(R.array.menu_icons);
        String[] labels = getResources().getStringArray(R.array.menu_list);

        for(int i = 0; i < labels.length; i++) {
            Menu item = new Menu();
            item.setTitle(labels[i]);
            item.setIcon(icons.getResourceId(i,-1));
            menu.add(item);
        }

        return menu;
    }

Lo que estamos haciendo en nuestra función es leer los títulos e imágenes (ids de recurso) y con ello estamos instanciando objetos Menu que a su vez agregamos a una lista que será devuelta por el método.

Finalmente en nuestra función onCreateView vamos a crear una nueva instancia de nuestro Adapter personalizado y se lo vamos a pasar al RecyclerView, también definiremos un objeto llamado LayoutManager para nuestro RecyclerView (asegúrate de definir el Adapter como una propiedad de tu clase)

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View layout = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
        mRecyclerView = (RecyclerView) layout.findViewById(R.id.drawerList);
        mAdapter = new MenuAdapter(getActivity(),getData());
        mRecyclerView.setAdapter(mAdapter);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));

        return layout;
    }

Corremos la aplicación en nuestro emulador o teléfono físico, abrimos el NavigationDrawer y vemos nuestro menú 🙂

recyclerview

Eso es todo por ahora lectores, en el siguiente tutorial aprenderemos a aplicar color a los iconos utilizando filtros y a definir las acciones una vez que el usuario da Tap en un elemento del menú. Recuerden que el código de lo trabajado durante este tutorial lo pueden encontrar en el repositorio https://github.com/Alevsk/Material-design-en-Android
salu2

Si te gusto comparte ...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Mi experiencia durante MoreliaHacks 2015

Hola de nuevo lectores 🙂 como les comentaba en una publicación anterior, en noviembre estuve participando en el I/O Hack 2015 con un proyecto de agricultura y drones, me divertí bastante y aprendí muchas cosas nuevas, después de todo fue mi primer hackaton. Asistí al evento por varias razones, la primera es porque me gustan los retos, solucionar problemas de la vida real y creo que eventos de este tipo son los ideales, la segunda razon, y de lo que se trata este post, es que a mediados de octubre de este año me junte con un grupo de personas en Morelia para discutir una estrategia en la que pudieramos impulsar proyectos de datos y gobierno abierto en la ciudad, estuvimos investigando bastante, viendo que es lo que se hacía en otros lugares y al final decidimos que lo más adecuado era organizar un hackaton, debido a eso me fui al I/O Hack para aprender lo más que pudiera en cuanto a temas de logística, organización, programación del evento y todo eso 🙂

Planeando el evento

Como decía, todo comenzó con una plática en starbucks, juntas y más juntas donde definíamos una planeación, nuestro objetivo era impulsar el gobierno abierto en la ciudad y para hacerlo antes teníamos que demostrar el poder de las fuentes públicas de información (las redes sociales), en pocas palabras diseñamos un plan en donde pudiéramos obtener suficiente información para responder a preguntas como ¿Qué es lo que se está diciendo de Morelia?, ¿Cuáles son los principales problemas de la ciudad?, etc. todo por medio de la opinión publica de los ciudadanos.

Organizando el evento

Conforme el los días pasaban la fecha del evento se acercaba, y teníamos que tener listo cada detalle del evento, ahora, yo como mentor tecnológico me encargaba de las cosas técnicas: sitio web, registro de participantes, envió de correos y todas esas cuestiones, pero después entendí que un evento de esta magnitud requiere mucho más que eso, se tienen que conseguir todos los patrocinadores, la difusión del evento, protocolos (no protocolos de red xd sino mas bien sociales) de inauguración, comida, ruedas de prensa y muchísimas cosas más en donde no soy experto pero que gracias a que estaba involucrado en la organización pude ver muy de cerca, además los otros miembros organizadores sabían hacer bastante bien su trabajo 🙂

Bonus: durante este proceso tuve la oportunidad de dar varias entrevistas y aparecer en televisión XD.

12303938_10206490936287026_6276593269870553135_o

hack

Se realizó la convocatoria y de todos los aspirantes se eligió a los 40 mejores programadores, me di a la tarea de evaluar sus aptitudes no solo revisando su cv, investigue si habían hecho alguna aportación a proyectos de software libre, si tenían cosas interesantes en github, si pertenecían a alguna comunidad en línea, algún blog personal y cosas de ese estilo, yo estaba buscando ese espíritu hacker y no tanto expertis en un tema específico, me interesaban personas que si tenían un problema iban a buscar la manera de solucionarlo a como dé lugar, gente que estuviera dispuesta a aprender nuevas cosas y a enseñar lo que saben y me dio mucho gusto encontrar a varias personas con esas cualidades.

Primer día del evento

Llego el gran día, viernes 11 de diciembre, se presentó oficialmente el proyecto a la comunidad tecnológica, a los medios y al gobierno de la ciudad, se realizó otra pequeña rueda de prensa y se contestaron varias dudas de los participantes, durante la organización conocí a dos personas increíbles especializadas en manejo de datos abiertos de una empresa llamada Fractal, ellos dieron una plática en donde explicaban todo acerca del gobierno abierto.

12347767_448143095393425_6599439726446076015_n

Al final del primer día cerramos con una sesión de neworking en donde todos los participantes y los mentores interactuaron, aprovechamos para presentarnos, conocernos, hablar acerca de que es lo que hacía cada quien y prepararnos para el día siguiente.

Segundo día del evento

Durante el segundo día yo hable un poco acerca de tecnologías que nos podían ayudar a recopilar información de fuentes públicas, apis de redes sociales (facebook, twitter, youtube, etc) y algunas herramientas que ya existen en el mercado como socialsensor, después organizamos a los participantes mediante grupos que se encargarían de hacer distintas tareas como:

  • Extracción de datos de redes sociales
  • Visualización de datos
  • Crawling de sitios web
  • Datos abiertos
  • Procesamiento de lenguaje natural
  • Prevención del crimen
  • Movilidad

Y así comenzó el hackaton, durante 8 hrs seguidas los programadores trabajaron arduamente para lograr los objetivos asignados, fueron 8 hrs en donde estuve conociendo más de cerca a los participantes, resolviendo sus dudas y también aprendiendo acerca de las tecnologías que estaban usando y su experiencia con ellas 🙂

12359902_10206558445974726_8280400728719171982_n

12341556_448442548696813_6272023644551489969_n

12376532_448442682030133_4535409909592327811_n

Al final del evento cada equipo presento los avances que habían logrado, las herramientas que crearon y las soluciones que planearon, el equipo de visualización se encargó de crear un pequeño sitio web en donde se centralizaron todas las apis desarrolladas durante el evento http://api.moreliahacks.org/, muchas de estas apis continúan siendo desarrolladas por sus creadores.

Comentarios personales

Para concluir la publicación me gustaría terminar con algunos comentarios personales, ser parte de la organización de este evento sin duda me dejo bastantes cosas, yo por lo general siempre me he encargado del aspecto técnico de las cosas, tech guy, la persona que está detrás de la creación de plataformas y aplicaciones, siempre estuve cómodo y conforme con eso, sin embargo cuando te empiezas a involucrar en otros aspectos fuera de tu área, cosas tan básicas como ver qué tipo de comida tendrán los participantes, el color de las playeras que recibirán, la decoración del evento y después tener la oportunidad de tomar el micrófono para expresar tus ideas y tus pensamientos a las personas, eso es algo que de alguna forma te cambia y te hace crecer como persona, pienso yo.

Contribuir con la creación de una comunidad de hackers cívicos en mi ciudad y la organización del primer hackaton de la ciudad es una experiencia que nunca antes había tenido, como mencionaba al inicio de mi post ya había tenido la oportunidad de participar en un hackaton y esta vez me toco estar del otro lado, ser el mentor :).

Como en todos los eventos, y más por ser el primero, hay muchísimas oportunidades de mejora, personas con las que te encontraras que no comparten tus mismas opiniones e ideales pero con las que al final debes lidiar y convencer del por qué haces las cosas que haces, de lo que si estoy seguro es que la colaboración entre las personas es el futuro y al final es algo que nos beneficia a todos como sociedad.

Saludos.

Si te gusto comparte ...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Mi experiencia durante el I/O Hack 2015

Hola lectores, tengo varios post acumulados que me gustaría publicar antes de que termine el año, varios son nuevos tutoriales de desarrollo, avances en mi investigación sobre la seguridad en SmartTvs y eventos de tecnología a los que he asistido estos últimos meses.

El 13 y 14 de noviembre se llevó acabo el I/O Hack 2015 en el Tecnológico de Monterrey campus Santa fe y tuve la fortuna de ser uno de los 40 seleccionados para asistir al hackaton. Era la primera vez que asistía a un evento de este tipo, ya sabía de la existencia de los hackatones y sabia más o menos bien de que se trataba pero nunca había tenido la oportunidad de participar en uno.

Pues llegue el viernes 13 (nunca he creído en la mala suerte hehe) al evento sin conocer a nadie, los organizadores y todo el staff eran bastante amable y procuraban que uno se sintiera cómodo en todo momento, ya una vez dentro de las instalaciones se respiraba un aire muy parecido al de un evento en campus party, pequeños grupos hablando sobre tecnología, personas presentándose y hablando un poco acerca de lo que hacen, un par de impresoras 3D en el centro haciendo modelos, etc. rápidamente me integre a uno de los grupos, me presente y comenzamos a platicar acerca de que les parecía el evento, en que programaban, que frameworks manejaban, hardware y demás cosas en lo que empezaba oficialmente el evento.

El hackaton tenía como temática el Internet de las cosas y había 3 categorías principales en las que se podía participar, estas eran:

  • Agricultura
  • Logistica
  • Retail (soluciones para pymes)

Por cada una de ellas se nos dio una plática y se nos hablo acerca de problemáticas muy puntuales a las que se enfrentan hoy en día, en lo personal me gusto bastante la charla sobre agricultura ya que representa una industria millonaria en México, y uno pensaría que agricultura y tecnología no tienen nada en común pero la verdad es que muchos de sus problemas si se pueden resolver usando tecnología.

Para no extenderme demasiado solo diré que al inicio del evento conocí dos personas bastante interesantes, quienes ademas de tener solidas habilidades en programación eran bastante buenos en las cuestiones de algoritmos, complejidad computacional y específicamente tratamiento de imágenes, Fernando Hernandez y Marco Antonio Cruz, al final participamos en la categoría de agricultura desarrollando una solución de reconocimiento de imágenes tomadas mediante fotografía aérea con drones, la idea era detectar cuando una plantación de caña de azúcar comenzara a secarse (analizábamos los niveles de amarillo en las puntas de la planta desde arriba) y con eso alimentábamos una red neuronal para determinar si se estaba echando a perder el producto, desarrollamos nuestro prototipo, hicimos las pruebas y lo presentamos a los jueces obteniendo el tercer lugar del Hackaton 🙂

Bueno hasta aquí mi resumen sobre el evento, lo que más me gusto y con lo que me quede fueron las experiencias que viví, toda la gente que conocí, las tecnologías que aprendí y sobre todo los buenos amigos que hice, ahora, mi intención con este post además de contarles un poco lo que viví es invitarlos a participar en un evento de este tipo siempre que puedan, así que les dejo los pros y contras de un Hackaton.

Pros de asistir a un Hackaton

  • Conoces gente muy interesante (TI, Makers, hackers, etc)
  • Te expones a nuevas tecnologías
  • Aprendes lo que sabes y te enseñan nuevas cosas
  • Haces amigos
  • Resuelves retos y problemas interesantes

Contras de asistir a un Hackaton

  • Si el evento no ofrece viáticos a sus participantes pues es un gasto
  • Si no te gusta desvelarte frente a una computadora eso es un problema
  • Si eres celoso al compartir tus ideas eso es un problema

Les dejo algunas fotos del evento:

CTxZiYVUEAEj3x0

CTytigUUAAAoUmn

CTvbH3WUwAEVMuy

CTu0T0rUYAA0sXc

12243283_10206406595418557_2330651871028124945_n

Si te gusto comparte ...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Tutorial Material Design en Android #4

Crear un Navigation Drawer para Android

Después de una pequeña pausa retomamos la serie de tutoriales de Material Design en Android, en el tutorial anterior aprendimos como agregar iconos (actions) a nuestra Toolbar, así que lo que sigue ahora es aprender cómo implementar el Navigation Drawer.

El Navigation Drawer en Android es un panel que podemos utilizar en nuestra app y que por lo general contiene un menú para movernos o “navegar” por las distintas secciones en la aplicación, la principal ventaja es que puede permanecer oculta la mayor parte del tiempo y desplegarse solo cuando el usuario lo necesite, de esa manera “economizamos” el espacio en la pantalla del teléfono, como en los tutoriales anteriores, si quieren aprender un poco más sobre la teoría siempre pueden consultar la documentación oficial de google Navigation Drawer

patterns_navdrawer_settings1

También vale la pena mencionar que hay básicamente 3 estilos de Navigation Drawer:

  • Navigation Drawer por debajo de la Toolbar oscurenciendola
  • Navigation Drawer por debajo de la Toolbar sin oscurecerla
  • Navigation Drawer por encima de la Toolbar

El estilo que queramos lograr dependerá de cómo escribamos el xml en nuestras views, y un poco de Java también

playstore_styledrawer_bellowdrawer_over_toolbar

Pues manos a la obra, o mejor dicho al código, vamos a nuestro archivo activity_main.xml y deberíamos de tener algo así.

activity_main

Vamos a modificar un poco nuestro código xml y agregaremos un par de elementos llamados DrawerLayout, FrameLayout y NavigationDrawer, viendo la siguiente imagen quedara más claro lo que vamos a hacer en nuestra activity.

drawer_layout_demon

Vamos a crear un elemento android.support.v4.widget.DrawerLayout y vamos a meter todo nuestro código existente dentro de esa etiqueta.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.alevsk.materialdesignapp.MainActivity">

        <include
            android:id="@+id/app_bar"
            layout="@layout/app_bar" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/app_bar"
            android:text="@string/hello_world" />

    </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

Lo siguiente es crear un Fragment y lo que hago normalmente para tener mi código más organizado es crear un nuevo Package en el proyecto llamado fragments y ahí empiezo a crearlos, para eso en su com.alevsk.materialdesignapp > botón secundario > new > Package y le ponen el nombre que deseen, yo le puse fragments para que sea descriptivo, después de eso procedemos a crear la nueva clase como se muestra en la siguiente imagen.

fragments

Nos aparecerá el siguiente cuadro de dialogo donde tendremos que elegir el nombre del nuevo menú NavigationDrawer (fragmento), le ponemos NavigationDrawerFragment o como ustedes quieran pero que sea descriptivo hacia el hecho de que será el menú de nuestra aplicación, asegúrense de marcar la opción de crear el layout xml y podemos desmarcar las dos opciones de abajo, el código que nos genere Android studio será más limpio y nosotros implementaremos los métodos que necesitamos desde 0, para terminar damos clic en el botón de Finish.

navigationdrawerfragment

Android Studio nos habrá generado dos archivos, NavigationDrawerFragment.java y fragment_navigation_drawer.xml

1

2

En nuestro fragment_navigation_drawer.xml vamos a modificar el elemento principal de Fragment a RelativeLayout quedando el código de la siguiente manera

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</RelativeLayout>

Hicimos este cambio ya que más adelante necesitaremos agregar elementos extras como un RecyclerView, a continuación vamos al archivo activity_main.xml y vamos a agregar nuestro NavigationDrawer usando un elemento fragment de la siguiente forma.

    <fragment
        android:id="@+id/fragment_navigation_drawer"
        android:name="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer"
        tools:layout="@layout/fragment_navigation_drawer" />

El codigo final del activity_main.xml es el siguiente:
3

Lo que sigue es crear un objeto NavigationDrawer en nuestro MainActivity.java

NavigationDrawerFragment drawerFragment = (NavigationDrawerFragment) getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);

Si por alguna razón les da un error de compatibilidad asegúrense que en NavigationDrawerFragment.java en la sección de import (hasta arriba) el Fragment que esté utilizando sea android.support.v4.app.Fragment

Ya que estamos en este archivo vamos a crear de una vez un método llamado setUp que va a servir para inicializar los componentes de nuestro NavigationDrawer, también vamos a utilizar un nuevo objeto llamado ActionBarDrawerToogle cuya finalidad es la de manejar nuestro DrawerLayout y Toolbar de una manera más eficiente, así como encargarse de manejar el evento de abrir y cerrar el panel de navegación.

    public void setUp(DrawerLayout drawerLayout, Toolbar toolbar) {
        mDrawerLayout = drawerLayout;
        mToolbar = toolbar;
        mDrawerToggle = new ActionBarDrawerToggle(getActivity(),drawerLayout,toolbar, R.string.open, R.string.close) {
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

Tip: R.string.open y R.string.close son necesarios para el constructor del ActionBarDrawerToggle ya que son los textos que aparecen al abrir y cerrar el panel, pueden definir esas cadenas en su archivo strings.xml que se encuentra en res/values

<string name="open">Abierto</string>
<string name="close">cerrado</string>

De nuevo, aquí mucho cuidado, asegúrense de que el Toolbar que estén importando sea android.support.v7.widget.Toolbar para efectos de compatibilidad, ya que si utilizan la clase por defecto les va a dar errores en los demás archivos.

Lo que acabamos de hacer en nuestro código es definir un nuevo ActionBarDrawerToggle, vinculamos el DrawerLayout y Toolbar que estamos recibiendo desde nuestro MainActivity y preparamos el listener (manejador de eventos) para cuando el usuario abra y cierre el panel de navegación.

En el MainActivity.java después de instanciar nuestro NavigationDrawer mandamos llamar el método

public class MainActivity extends ActionBarActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.app_bar);
        setSupportActionBar(toolbar);

        NavigationDrawerFragment drawerFragment = (NavigationDrawerFragment) getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp((DrawerLayout)findViewById(R.id.drawer_layout),toolbar);
    }

La clase NavigationDrawerFragment quedo de la siguiente manera
NavigationDrawerFragment

En este punto, si corremos nuestra aplicación y deslizamos haciendo tap desde la izquierda podemos observar como la pantalla comienza a oscurecerse, si ponemos un poco más de atención podemos ver el texto de nuestro fragment encima de la app”Hello Blank Fragment“, ha funcionado! ahora solo nos queda poner un poco de estilo para hacer a aplicación más agradable a la vista.

navigation_drawer_feo

En nuestro archivo colors.xml (se encuentra en app/res/values/colors.xml) podemos definir nuevos colores, por ejemplo yo he definido uno nuevo llamado graypanel

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primaryColor">#E91E63</color>
    <color name="primaryColorDark">#C2185B</color>
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="grayPanel">#EEEEEE</color>
    <color name="lightGray">#d6d6d6</color>
    <color name="colorAccent">#8BC34A</color>
</resources>

Y despues en nuestro fragment_navigation_drawer.xml definimos el color de fondo a nuestro RelativeLayout con android:background=”@color/grayPanel”

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grayPanel"
    tools:context="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</RelativeLayout>

navigation_drawer_color

¿Un poco mejor cierto? pero todavía le falta bastante, por ejemplo no resulta obvio para el usuario saber que la aplicación tiene un menú lateral, lo que vamos a hacer es agregar el clásico icono de menú de lado izquierdo, para eso utilizaremos un método llamado syncState de nuestro objeto DrawerToggle.

Nos vamos a nuestro archivo NavigationDrawerFragment.java y agregamos el siguiente código después de haber hecho el mDrawerLayout.setDrawerListener(mDrawerToggle);

        mDrawerLayout.post(new Runnable() {
            @Override
            public void run() {
                mDrawerToggle.syncState();
            }
        });

Corremos la app de nuevo y automáticamente nos aparecerá un icono de menú.

menu_icon

Una vez abierto el menú de navegación rara notaran que si hacemos tap donde se supone que esta el botón de menú el panel se cierra, es bastante raro pues la aplicación no está respetando las “capas”, podemos corregir ese comportamiento bajando un poco el NavigationDrawer.

Modificamos un poco nuestro archivo main_activity.xml, si se fijan bien ahora nuestro DrawerLayout esta debajo de nuestra app_bar, ambos elementos estan al mismo nivel y rodeados por un LinearLayout con orientación vertical.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@color/lightGray"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/hello_blank_fragment" />
        </RelativeLayout>

        <fragment
            android:id="@+id/fragment_navigation_drawer"
            android:name="com.alevsk.materialdesignapp.fragments.NavigationDrawerFragment"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:layout="@layout/fragment_navigation_drawer"
            tools:layout="@layout/fragment_navigation_drawer" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

drawer_navigation

Y eso es todo por ahora, así es como se programa un NavigationDrawer desde 0 :), en el siguiente tutorial implementaremos las opciones en nuestro menú de navegación, para eso aprenderemos a utilizar los RecyclerViews.

He montado un repositorio en Github con el código de la aplicación que vamos desarrollando durante los tutoriales, si tienen alguna duda pueden consultarlo directamente de ahí o preguntarme en los comentarios https://github.com/Alevsk/Material-design-en-Android

salu2

Si te gusto comparte ...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn