Mis primeros pasitos con React Native

Introducción

Aparentemente la manera mas simple de empezar a estudiar React Native es utilizando la aplicación create-react-native.  A continuación se explican los pasos necesarios para explorar una primera aplicación estilo hola mundo.

Es de aclarar que actualmente estoy utilizando ArchLinux así que la instalación de los paquetes variará dependiendo de que distribución se utilice finalmente.

Instalación del software

Se requiere de la instalación de NodeJS con NPM, la aplicación create-react-native y watchman.

$ sudo pacman -S nodejs npm

$ sudo npm install -g create-react-native-app

$ sudo npm -g install watchman

Acerca de NPM versión 5

La versión 5.x de NPM no es soportada actualmente, al parecer aún contiene algunos bugs que la hacen incompatible con React Native por ahora.  Desafortunadamente dicha versión es la disponible el repositorio de ArchLinux por lo que fue necesario hacer un downgrade d de la misma.  Para hacer esto se siguieron los pasos mostrados a continuación.

Se identificaron las versiones disponibles de la versión 4.x de NPM.

$ npm view npm time
 
{ modified: '2017-10-13T18:58:10.523Z',
  created: '2013-07-12T18:32:48.902Z',
....
 '4.4.4': '2017-03-16T23:58:25.697Z',
 '4.5.0': '2017-03-24T23:41:03.141Z',
 '4.6.0': '2017-04-22T01:14:41.527Z',
 '4.6.1': '2017-04-22T02:22:52.453Z',
...
 '5.4.1': '2017-09-06T22:46:36.708Z',
 '5.4.2': '2017-09-15T00:49:48.269Z',
 '5.5.0': '2017-10-04T09:34:11.789Z',
 '5.5.1': '2017-10-04T16:49:45.575Z' }

Se decidió instalar la versión 4.6.1 para esta ocasión.

$ sudo npm -g install npm@4.6.1

Creación y ejecución de un proyecto

Para crear un nuevo proyecto: HelloWorld en este caso, se deberá ejecutar el siguiente comando.

$ create-react-native-app HelloWorld

Para probar la aplicación es necesario ubicarse en el directorio de trabajo e iniciar el servidor de desarrollo.

$ cd HelloWorld
$ npm start

Una vez hecho esto, aparecerá en la consola un código QR para ser escaneado con la aplicación móvil que conectará al teléfono o tableta con el servidor de desarrollo y le permitirá probar la aplicación publicada.  Para que esto sea posible, tanto el móvil como el equipo de desarrollo deberán estar ubicados en la misma red.

Para personalizar el código de la aplicación, se deberá modificar el archivo App.js del proyecto.

Otras opciones de ejecución

$ npm start Inicia el servidor de desarrollo para ser conectado con la aplicación de Expo mediante el código QR.
$ npm run ios Inicia el servidor de desarrollo y carga la aplicación en un emulador de iOS.  Esta opción requiere de un Mac y XCode.
$ npm run android Inicia el servidor de desarrollo y carga la aplicación en un dispositivo Android conectado al equipo o en un emulador disponible.  Requiere de las Android build tools.
$ npm test Inicia la ejecución de las pruebas de software.
$ npm run eject Remueve esta herramienta y copia las dependencias de construcción, archivos de configuración y scripts en el directorio de la aplicación.   Esta acción es irreversible.

Instalación de la aplicación móvil

Como complemento al servidor de desarrollo se deberá instalar la aplicación Expo para visualizar en el móvil, en tiempo de ejecución la aplicación que se está desarrollando.

Esta aplicación se llama Expo y puede ser instalada para Android e iOS.  También es posible desarrollar aplicaciones con React Native con la ayuda de este software desde web.

Desventajas

El uso de la aplicación Create React Native parece simplificar el proceso de crear los proyectos en su etapa inicial y de realizar las pruebas de funcionamiento mientras se desarrolla la aplicación, sin embargo no permite que esta contenga código nativo (solamente Javascript) ni que sea compilada directamente a una plataforma nativa como Android o iOS.  Para esto último se deberá remover del proyecto (ver eject) o utilizar la ayuda de la aplicación de exp

Recursos

  1. React Native
    https://facebook.github.io/react-native/
  2. Create React Native App
    https://github.com/react-community/create-react-native-app

Quitar la advertencia de bootloader desbloqueado en un Moto X2 (XT1097)

Introducción

moto-logoSi previamente se ha desbloqueado el bootloader de un teléfono Moto X2 (XT1097) al iniciar el sistema operativo estará apareciendo una advertencia similar a la siguiente.Unlocked bootloader warningLa siguiente guía permite reemplazar esta imagen por la imagen habitual de inicio específicamente en un XT1097.  Esto no significa que se vuelva a bloquear el bootloader.  Seguir estos pasos pueden anular la garantía del teléfono y/o dañarlo de manera irreversible, por este motivo sólo utilice esta guía si sabe lo que hace y bajo su propia responsabilidad.

Preparar el teléfono

Activar el menú de desarrollador.

Settings > About phone > Build number (tap 7 veces)

Activar el modo de depuración por USB.

Settings > Developer options > USB debugging

Conectar el teléfono al PC

Utilice el cable USB para conectar el teléfono al PC.  Desde el teléfono autorice al PC recién conectado para la depuración por USB (Allow USB debugging).

Allow USB debugging

Acceder al bootloader del equipo

$ adb reboot bootloader

Verificar que se tiene acceso al teléfono desde el PC.

$ sudo fastboot devices

XXXXXXXXXX    fastboot

Obtener la imagen del logo de Motorola

Para hacer esto se deberá acceder al siguiente sitio y descargar el archivo logo.zip.

No Warning Message for Unlocked Bootloader

Versión local: logo.zip.

Actualizar el logo del teléfono

$ sudo fastboot flash logo logo.bin

Reiniciar el teléfono

$ sudo fastboot reboot

Recursos

  1. No Warning Message for Unlocked Bootloader
    http://forum.xda-developers.com/moto-x-2014/general/warning-message-unlocked-bootloader-t2871478

Liberar el bootloader de un Moto X2 (XT1097)

Introducción

moto-logoA continuación se realizarán los pasos necesarios para liberar el bootloader de un Moto X2 – 2014 (XT1097) o Victara, lo cual es necesario para posteriormente instalarle un custom recovery y una nueva ROM.

Realizar estos pasos en un teléfono probablemente invalide su garantía y en algunos casos pueda dañarlo de manera irreparable.  Sólo utilice esta guía si sabe lo que hace y bajo su propia responsabilidad.

Instalación de paquetes necesarios en Ubuntu

$ sudo aptitude install android-tools-adb android-tools-fastboot

Preparar el teléfono

Activar el menú de desarrollador.

Settings > About phone > Build number (tap 7 veces)

Activar el modo de depuración por USB.

Settings > Developer options > USB debugging

Activar el desbloqueo de OEM (si esta opción está presente).

Settings > Developer options > OEM unlocking

Conectar el teléfono al PC

Utilice el cable USB para conectar el teléfono al PC.  Desde el teléfono autorice al PC recién conectado para la depuración por USB (Allow USB debugging).

Allow USB debugging

Acceder al bootloader del equipo

$ adb reboot bootloader

Verificar que se tiene acceso al teléfono desde el PC.

$ sudo fastboot devices

XXXXXXXXXX    fastboot

Obtener la información de desbloqueo

$ sudo fastboot oem get_unlock_data

...
(bootloader) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
(bootloader) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
(bootloader) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
(bootloader) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
(bootloader) XXXXXXX
OKAY [  0.043s]
finished. total time: 0.043s

Solicitar el código de desbloqueo

Acceda al sitio web de Motorola Bootloader Unlock.

Paso #1 – revise los riegos de hacer esto.  Presione Next.

Paso #1.5 – regístrese en Motorola utilizando una cuenta de Motorola o una de Google.

Paso #2 – especifique el ID del dispositivo y la información de desbloqueo.  Para hacer esto copie la información obtenida en el paso anterior en una sola linea: sin espacios, o palabras extra como (bootloader) o INFO.  Por facilidad utilice la herramienta Data Scrub Tool disponible en la misma página.

Paso #3 – generar el código de desbloqueo.  Bajo la sección de Can my device be unlocked? seleccione la opción I Agree y presione el botón Request unlock key.

Obtener el código de desbloqueo

Revise el buzón de correo utilizado para identificarse en el paso anterior y obtenga el código de desbloqueo que le fue enviado.

Unlock Code: XXXXXXXXXXXXXXXXXXX

Desbloquear el bootloader del teléfono

Finalmente se procede a desbloquear el bootloader con el código recibido.  Este paso generalmente no se puede revertir y además borra todo el contenido del teléfono.

$ sudo fastboot oem unlock <Unlock Code>

Recursos

  1. Doc: fastboot intro
    https://wiki.cyanogenmod.org/w/Doc:_fastboot_intro
  2. The Easiest Way to Install Android’s ADB and Fastboot Tools on Any OS
    http://lifehacker.com/the-easiest-way-to-install-androids-adb-and-fastboot-to-1586992378

Cambiar la densidad de pantalla de un móvil Android sin requerir acceso a root

Introducción

A mi me gusta cambiar la densidad de pantalla (DPI) de mis dispositivos móviles Android ya que comúnmente la que traen por stock hace que los iconos ocupen mucho espacio en la pantalla y se tenga poco disponible para trabajar.  Al disminuir los DPIs se logra precisamente lo contrario.

Para hacer esto habitualmente se utilizan aplicaciones como Texdroider DPI, sin embargo estas aplicaciones requieren acceso al usuario root así que no se cuenta con este, no es posible ejecutarlas exitosamente.

A continuación se describe el procedimiento que se puede seguir para realizar esta misma tarea de modificar los DPIs de un móvil Android sin tener acceso al usuario root mediante la conexión a un computador.

Requerimientos

Instalación de ADB

$ sudo aptitude install android-tools-adb

Otras plataformas pueden obtener esta herramienta del SDK de Android.

Activar modo depuración USB

Antes de conectar el móvil al puerto USB del computador es necesario activar el modo de depuración de USB.  Para hacer esto es necesario acceder al menú (inicialmente oculto) de herramientas del desarrollador.

Si aún no se ha desbloqueado el menú de herramientas del desarrollador, abrir la aplicación Settings y acceder la sección About phone.  En ella identificar la entrada Build number y presionarla 7 veces.

Nuevamente, en la aplicación Settings ingresar en el -nuevo- menú llamado Developer options.  Una vez en él, activar la opción USB debugging.

Conectar finalmente el dispositivo móvil al puerto USB del computador.

Determinar la densidad actual

$ adb shell dumpsys display | grep mBaseDisplayInfo

    mBaseDisplayInfo=DisplayInfo{"Built-in Screen", uniqueId "local:0", app 1080 x 1920, real 1080 x 1920, largest app 1080 x 1920, smallest app 1080 x 1920, mode 1, defaultMode 1, modes [{id=1, width=1080, height=1920, fps=60.0}], rotation 0, density 480 (422.03 x 424.069) dpi, layerStack 0, appVsyncOff 7500000, presDeadline 12666667, type BUILT_IN, state ON, FLAG_SECURE, FLAG_SUPPORTS_PROTECTED_BUFFERS}

Modificar a la densidad deseada

Comúnmente las densidades varían entre 120 a 640 DPI, en mi caso como se puede observar en el paso anterior, el móvil en stock viene con 480 DPI.  Mi deseo esta vez es modificarlo a 360 DPI.

$ adb shell wm density 360 && adb reboot

Posibles problemas

Es posible que algunas aplicaciones puedan presentar un comportamiento erróneo ante ciertas densidades, especialmente la tienda de aplicaciones Play Store ya que algunas aplicaciones pueden restringir el rango de densidades de pantalla en las que pueden ser instaladas y terminar siendo excluido el móvil.

En este caso, sólo es necesario restaurar la densidad original, instalar la aplicación en particular y se desea volver nuevamente a la densidad deseada.

Instalar Apache Ripple en Ubuntu 14.10

Introducción

A continuación se detallarán los pasos necesarios para instalar el emulador Apache Ripple (verificado con la versión 0.9.24) en Ubuntu 14.10 utilizando el gestor de paquete de NPM.

Requisitos

Instalación

Ubicarse en el directorio de instalación del software de desarrollo.  Por convención utilizo el directorio ~/apps, sin embargo puede utilizar el que se desee.

$ cd ~/apps

Instalar el paquete utilizando NPM.

$ npm install ripple-emulator

Agregar la siguiente ruta al PATH realizando la siguiente modificación en /etc/profile, ~/.bashrc o ~/.bash_profile.

PATH=$PATH:~/apps/node_modules/.bin/

Si la instalación de Phonegap se realizó siguiendo los pasos expuestos anteriormente entonces no necesitará repetir este paso.

Ejecución

Ubicarse en el directorio www/ del proyecto Phonegap.

$ cd ~/workplace/proyecto/www

Ejecutar el emulador.

$ ripple emulate

También es posible ejecutar el emulador directamente especificando la ruta del proyecto en su ejecución.

$ ripple emulate --path ~/workplace/proyecto/www

Una vez ejecutado se abrirá automáticamente Chrome con el URL del emulador.

Recursos

Instalación de Phonegap 3.x en Ubuntu 14.10

Introducción

A continuación se describe la instalación paso a paso de Phonegap 3.x en Ubuntu 12.10 desde línea de comando.  Esta instalación no incluye ningún SDK específico ya que en esta primera etapa la idea no es construir paquetes instalables (como el APK de Android) sino  desarrollar mientras se prueba en un emulador como el Ripple de Apache o la aplicación de desarrollo de Phonegap.

Instalación del software

Instalar NodeJS y su administrador de paquetes

$ sudo aptitude install nodejs nodejs-legacy npm

Crear el directorio de apps si este no existe.  Por orden se recomienda instalar el software de desarrollo bajo la carpeta ~/apps sin embargo se puede utilizar la que se desee.

$ mkdir ~/apps

$ cd ~/apps

Instalar el paquete de Phonegap.

$ npm install phonegap

Instalar el paquete de Ant, necesario para construir y ejecutar las aplicaciones desarrolladas con Phonegap.

$ npm install ant

Agregar las siguientes rutas a la variable PATH ya sea en /etc/profile, ~/.bashrc o ~/.bash_profile.

$ vi ~/.bashrc

PATH=$PATH:/home/jimezam/apps/node_modules/ant/ant/bin:/home/jimezam/apps/node_modules/.bin

Creación de un nuevo proyecto Phonegap

Ubicarse en el directorio de trabajo donde se creará el proyecto.

$ cd ~/workplace

Crear el proyecto de Phonegap a partir de una plantilla vacía utilizando la herramienta phonegap create.  Esta herramienta recibe como minimo dos parámetros: el nombre del directorio del proyecto y el paquete de la aplicación (Android).

$ phonegap create EjemploApp mi.paquete.ejemploapp

Check the presence of the OpenSSL's bug Heartbleed (CVE-2014-0160)

What is it?

The Heartbleed Bug is a serious vulnerability in the popular OpenSSL cryptographic software library. This weakness allows stealing the information protected, under normal conditions, by the SSL/TLS encryption used to secure the Internet. SSL/TLS provides communication security and privacy over the Internet for applications such as web, email, instant messaging (IM) and some virtual private networks (VPNs).

The Heartbleed bug allows anyone on the Internet to read the memory of the systems protected by the vulnerable versions of the OpenSSL software. This compromises the secret keys used to identify the service providers and to encrypt the traffic, the names and passwords of the users and the actual content. This allows attackers to eavesdrop on communications, steal data directly from the services and users and to impersonate services and users.

What leaks in practice?

We have tested some of our own services from attacker’s perspective. We attacked ourselves from outside, without leaving a trace. Without using any privileged information or credentials we were able steal from ourselves the secret keys used for our X.509 certificates, user names and passwords, instant messages, emails and business critical documents and communication.

How to stop the leak?

As long as the vulnerable version of OpenSSL is in use it can be abused. Fixed OpenSSL has been released and now it has to be deployed. Operating system vendors and distribution, appliance vendors, independent software vendors have to adopt the fix and notify their users. Service providers and users have to install the fix as it becomes available for the operating systems, networked appliances and software they use.

How to check if my server (https) or application (linked with OpenSSL library) has it?

For your web server Heartbleed test site and specify the hostname (or IP address) and port of your HTTPS server

For your Android’s mobile apps, install Bluebox Heartbleed Scanner and run it, it will check for any vulnerable apps installed on your phone.

Resources