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

Instalar la aceleración de hardware para la emulación de Android (AVD) bajo Linux con KVM

Introducción

AndroidA continuación se describe el procedimiento para instalar bajo Ubuntu Linux la aceleración por hardware de las máquinas virtuales de Android (AVD) para correr imágenes del sistema operativo basadas en x86.

Requerimientos

  1. Se recomienda la última versión de SDK Tools (Revision 17 mínimo) y
    un SDK Platform de Android 4.0.3, Revision 3 o superior.
  2. La imágen de la AVD debe ser basada en x86 y ser de Android 2.3.3 (API nivel 10) o superior.
  3. Debe contarse con el soporte por parte de la CPU de la tecnología Intel Virtualization Technology (VT, VT-x, vmx) o AMD Virtualization (AMD-V, SVM) -sólo para Linux-.
  4. La máquina virtual acelerada debe correrse directamente desde el hardware físico, no puede ejecutarse desde otra máquina virtual.
  5. No es posible ejecutar al mismo tiempo otra aplicación que utilice diferente tipo de virtualización junto con el AVD acelerado.

Instalar KVM

El primer paso consiste en instalar KVM en la máquina Linux.  Para mayor información consultar este artículo complementario.

$ sudo apt-get install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils ia32-libs-multiarch

Adicionalmente, los usuarios que vayan a ejecutar las máquinas virtuales deberán pertenecer al grupo libvirtd (a partir de Ubuntu 16.10 es renombrado a libvirt).

$ usermod -a -G libvirtd $USER

Comúnmente es prudente cerrar la sesión del usuario y volverla a iniciar para garantizar que la adición del usuario activo al grupo ha será tomada en cuenta.

Configurar la máquina virtual (AVD)

Para configura la aceleración de gráficos, verifique que la opción Emulated Performance: Graphics se encuentre configurada como auto o el modo que considere correspondiente.

Verificar el uso de KVM

Si se desea verificar si la máquina virtual AVD en ejecución está o no utilizando la aceleración de KVM, es posible verificar el estado de /dev/kvm de la sigiente manera.

$ lsof -n | grep /dev/kvm

Recursos

  1. Configure Hardware Acceleration for the Android Emulator
    https://developer.android.com/studio/run/emulator-acceleration.html

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.

ROMs Android 5.1.1 (Lollipop) para Moto G LTE XT1040 (Peregrine)

ROMs para Samsung Galaxy Tab 4 7″ WiFi (SM-T230)

Recoveries