Category Archives: Mapa de Aprendizaje

Mis primeros pasos con ionic

5 Jun , 2017,
Jose Nunez
, , , ,
No Comments

Bueno, como nos pasa a todos, un día desperté con esa imperiosa necesidad de crear una app para teléfonos inteligentes; y pues, comenzar no es fácil si tomamos en cuenta que las principales plataformas de desarrollo (IOS y Android) tienen sus costos y complejidades.

(!) Antes de seguir estas instrucciones asegúrese de entender las Condiciones de Uso de nuestro sitio.

Afortunadamente, mis compañeros del centro de innovación habían estado realizando una investigación sobre algo similar, y me hablaron del Ionic Framework, un sistema para desarrollar aplicaciones móviles usando tecnologías web (HTML, CSS, JS/TS, ANGULARJS) etc que luego pueden implementarse tanto en Android como IOS.

Dentro de las bondades de Ionic podemos listar las siguientes:

  1. Manejo de plantillas de proyecto predefinidas
  2. Acceso a características específicas de hardware (bluetooth, gps, camara, etc)
  3. Pre-visualizacion de las apps usando IonicView directamente en los dispositivos móviles tanto para Android como para IOS

Pero bueno, he querido comenzar con el pie derecho, configurando una estación de trabajo LINUX UBUNTU 16.04 así que aquí van algunos lineamientos básicos para comenzar:


#1 – NodeJS

Es necesario instalar nodeJS y npm. Para Ubuntuo 16.04 he encontrado esta guía que me ha parecido muy completa. En ella se discuten diferentes métodos. Yo elegí usar el método de nvm (node version manager) que se puede resumir en los siguientes comandos uno por uno.

Antes de iniciar vaya a https://nodejs.org/en/download/ y determine cual es la versión LTS (en nuestro caso es la 6.11)

cd
sudo apt-get update
sudo apt-get install build-essential libssl-dev
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
Opcionalmente: nvm ls-remote | grep Latest
nvm install  6.11
node -v
npm -v

#2 – Instalación de IONIC

Ahora, de acuerdo con la guía de inicio de IONIC procedemos con el siguiente comando:

npm install -g cordova ionic

Luego de unos minutos (como 15 con mi conexion 3G) y de mucho texto en la consola, podemos usar el comando ionic -v para determinar la versión que hemos instalado.

En este punto es importante crear una cuenta personal en https://apps.ionic.io/signup para poder visualizar las aplicaciones con Ionic View. Una vez creada la cuenta podemos usar el siguiente comando para que nuestra instalación de ionic quede conectada a nuestra cuenta.

ionic login

#3 Creación de un nuevo proyecto

(!) Antes de crear un nuevo proyecto, es importante asegurarse que su GIT local esté instalado y configurado.

Al momento de escribir este artículo, la guía de inicio hace mención de 3 tipos de proyecto: blank, tabs y sidemenu (aunque hay todo un mercado de tipos de proyecto en la red). La verdad nos gustó más el de tabs, así que usamos estos comandos:

cd
mkdir myIonicTests
cd myIonicTests
ionic start myApp tabs

Dado que ya habíamos hecho login en el paso anterior, podemos decirle que si (Y) a la pregunta de la terminal “Link this app to your Ionic Dashboard to use tools like Ionic View? (Y/n)“. Al decir que sí el sistema termina de crear el app y nos lleva al navegador de Internet a la página de ionic para crear nuevas apps para el visor. Más tarde será necesario utilizar el comando ionic link para conectar el código de nuestra app local con su correspondiente entrada en Ionic View.

(!) Notas: Algo importante de resaltar es que este template de una vez crea el proyecto como un repositorio GIT. Reconectar un repositorio GIT a nuestra cuenta GIT de preferencia es una tarea importante a  futuro, pero eso lo dejaremos para otro artículo.
Otra cosa importante es que el comando start de ionic necesitará una conexión a Internet estable para poder descargar todos los archivos, bibliotecas y dependencias necesarias.

En este punto ya podemos ejecutar el comando ionic serve para pre-visualizar el app en nuestro navegador local.


#4 Ejecutar la aplicación en un celular

Nótese que al crear la aplicación en el sitio web de ionic, se generó un código de identificación de la app. En la aplicación IonicViewer de Android o IOS se puede acceder con sus credenciales de ionic, o usando el código de identificación de la aplicación.

Antes de subir el código a Ionic View, necesitamos enlazarlo con nuestra nueva app; usando el comando ionic link. Se usan las flechas arriba y abajo del teclado para seleccionar el app.

Para subir el código más reciente utilizamos el comando ionic upload; luego en la aplicacion de celular Ionic View usamos la opción “Clear App Data” y luego “View App”

En una próxima entrada estaremos discutiendo cómo modificar el código.

 

Introducción al ESP8266

31 May , 2017,
Jose Nunez
, , , , ,
No Comments

Aquí resumo algunas cosas que he ido descubriendo del ESP8266 esta semana:

#1 – El ESP8266 viene programado de manera nativa con un firmware que responde a comandos AT para realizar conexiones y comunicación WiFi. Una referencia útil al set de comandos se puede encontrar acá.

#2 – El ESP8266 puede ser programado mediante el IDE de ARDUINO. Para esto es necesario instalar la definición de placa usando la opción de Tools > Board Manager; pero antes de esto es necesario configurar la siguiente URL para definición de tarjetas adicionales usando la opción File > Preferences > Additional Boards Manager URLs.

URL:  http://arduino.esp8266.com/stable/package_esp8266com_index.json

Es necesario cerrar el IDE y volverlo a cargar para poder utilizar el board que aparece en la lista abajo como “Generic ESP8266 Module“. (!) Importante: Una vez re-programado el módulo se pierde el firmware que habilita los comandos AT. Para re-habilitarlos será necesario seguir alguno de los procedimientos disponibles para cargar el firmware

#3 – Se puede conectar el módulo directamente a la PC usando un convertidor USB-Serial FOCA 2.2 con las siguientes conexiones; pero antes se debe configurar el FOCA 2.2 para operar a 3.3V, caso contrario se daña el ESP8266:

esp8266_pinoutFOCAV2.2        ESP8266
   VCCIO -----> VCC (3.3V)
     TXD -----> RXD
     RXD <----- TXD
     GND <----- GND
   VCCIO -----> CH_PD

 Opcionalmente se coloca GPIO0 a tierra (GND) para habilitar la descarga de sketches de ARDUINO en el módulo; y luego se desconecta de GND para operar con el Sketch descargado.
FTDI Cable             ESP8266
 VCCIO (red)    -----> VCC (3.3V) 
   TXD (orange) -----> RXD 
   RXD (yellow) <----- TXD
   GND (black)  <----- GND
 VCCIO (red)    -----> CH_PD

#4 – La definición de placa del ESP8266 de ARDUINO (“Generic ESP8266 Module“) incluye una cantidad importante de ejemplos muy básicos para la operación del módulo, ya sea como Cliente HTTP, o cliente WiFi, o Access point, e incluso la creación de redes tipo Mesh usando WiFi.

#5 – El módulo ESP8266 no tiene capacidad para comunicarse con servicios de Internet por canales seguros de tipo HTTPS, lo cual representa una limitante sobre el tipo de aplicación que se pueda implementar. Como medida mínima es recomendable conectar el ESP8266 a un IoT Gateway con capacidad de comunicación HTTPS hacia la nube y no usarlo en aplicaciones suceptibles en caso de ser “hackeadas” ya que es relativamente facil para un hacker poder interceptar los datos provenientes del ESP8266 (no cifrados) interpretarlos e incluso suplantarlos.

#6 – El ESP8266 se puede conseguir en Costa Rica en CR Cibernetica. Nótese que al momento de escribir este artículo el precio estaba en $7.95, solamente $1 por debajo del SONOFF que aparte de traer uno de estos módulos tiene el hardware necesario para manejar corriente AC y un programa predeterminado para poder operarlo mediante un App de teléfono.

#7 – En Amazon se puede conseguir hasta por $15 cuatro módulos ($3.75 cada uno!). En Wish.com se pueden conseguir incluso a $2. Aunque para ser sinceros la comodidad de comprarlos en CR Cibernética y que me los traigan a domicilio el día siguiente es inigualable.

 #8 – Volviendo a los comandos AT, se puede acceder a estos mediante una terminal como Putty usando el puerto serial del FOCA V2.2 a una velocidad de 115200 bauds, pero es necesario (al menos en el caso de Putty) utilizar [ENTER] y [CTRL]+[ J ] para enviar los comandos al módulo y obtener una respuesta. Una conexión parecida se puede usar desde un ARDUINO 101 (que opera a 3.3V) usando la librería SoftwareSerial para operar el ESP8266 usando comandos AT enviados desde el ARDUINO. También se puede operar el ESP8266 desde un arduino usando los GPIO del ESP8266 como indicativos de qué hacer y que un Sketch de ARDUINO en el ESP8266 tome decisiones y realice comunicaciones WiFi basadas en esas señales.

#9 –  Finalmente cabe mencionar que el módulo tiene la capacidad de almacenar información en estado apagado. Lo cual permite, por ejemplo, recordar cual fue el último SSID/Passphrase que se usó y reconectar al encender, tanto para aplicaciones basadas en comandos AT como para aplicaciones basadas en sketch de Arduino ejecutados en el módulo ESP8266.