Instalación de ionic en Windows y posibles fallos por tener conectividad bajo un Proxy


El proceso de instalación de Ionic es relativamente sencillo pues se requiere instalar node.js como paso previo

Despues se requiere instalar Git ( si no lo tiene ya instalado en su equipo)   y acto seguido se debe hacer la instalación de la CLI de Apache Cordova..

Finalmente ya podemos instalar Ionic

Veamos paso a paso como realizar dicha instalación:

1-Instalar node.js

Primero, instale Node.js.

Una vez instalado Node, abra el Terminal y ejecute  node -v.  Este comando le dice a Node que informe de nuevo la versión actualmente instalada:

>node-v
>v8.2.1

También debe asegurarse de que el comando npm está actualizado  ( el nodo gestor de paquetes para módulos de node) .

Cuando instala Node.js esto se hace automáticamente para usted, pero si desea comprobar qué versión de npm se ha instalado  ejecute  el siguiente comando:

>npm -v
>5.4.1

Si necesita actualizar su instalación de npm, el comando es:

$ npm install npm -g

2-Instalación de Git

Con Node y npm instalados correctamente, ahora deberiamos instalaremos Git, pues aunque que usted es libre de elegir cualquier solución de control de versiones (Perforce, SourceSafe o Git), el Ionic CLI aprovecha Git para la gestión de plantillas.

Vaya a https://git-scm.com/download/win  para descargar el paquete de windows . Siga adelante y abra el archivo de paquete y siga la instalación predeterminada.

Una vez que la instalación se haya completado, desde el interfaz de comandos :

>git –version
>git versión 2.14.1.vindows-1-1

3-Instalación de la CLI de Apache Cordova..

Aunque podemos instalar tanto Cordova como Ionic al mismo tiempo, se recomienda instalar cada uno individualmente , de modo  qeu en caso de que haya un problema durante el proceso de instalación podamos resolverlo mas facilmente.
La instalación de Cordova CLI utiliza el administrador de paquetes del nodo (npm) para realizar la instalación.

Para instalarlo, abra la ventana Terminal o Git Bash e introduzca el siguiente comando:

>npm install -g cordova

Dependiendo de su conexión a Internet, esto puede tomar un tiempo. Una vez finalizado para comprobar como ha quedado  puede ejecutar

>cordova -v
>7.0.1

Siga las guías de plataforma en cordova.apache.org/docs/en/latest/guide/platforms/ tanto para Android e IOS  para instalar las herramientas necesarias para el desarrollo

4-Instalar Ionic

Al igual que la instalación del CLI de Cordova, el Ionic CLI también se instala a través de npm. En la ventana Terminal, ingrese el siguiente comando:

>npm install -g cordova ionic

Esta instalación tardará un tiempo en completarse. Una vez que la CLI Ionic haya completado su instalación, volveremos a comprobarlo emitiendo el comando ionic en nuestro cmd:

>ionic -v (hay que situarse en el camino d; \ user\ Appdata \ Roaming \ nmp \)
>3.10.3

Ahora tenemos nuestra instalación base en el lugar para el desarrollo iónico. Sin embargo, eventualmente queremos probar nuestras aplicaciones en un emulador de dispositivo o en un dispositivo real. Vamos a echar un vistazo a la instalación de estas herramientas en breve. Pero primero, vamos a configurar una aplicación de ejemplo y ver cómo visualizarla en nuestro navegador.

Desarrolladores de Windows: se recomienda Visual Studio Community , que viene con todo lo que necesita, incluyendo plantillas de inicio

Iniciar una aplicación

La CLI Ionic proporciona un comando sencillo que le permite configurar un proyecto  generando  una aplicación Ionic básica en el directorio activo. El marco iónic puede scaffold este proyecto vía una colección de plantillas del arrancador. Estos pueden provenir de una plantilla con nombre, un repo GitHub, un código o incluso un directorio local. Las plantillas nombradas están en blanco, sidemenu y pestañas.

Por ahora, ejecute el comando siguiente para crear un proyecto de Ionic:

ionic start myApp tabs

Para proyectos v1, utilice la siguiente receta:

 --type ionic1 .

$ ionic start myApp blank

$ ionic start myApp tabs

$ ionic start myApp sidemenu

Ejecutar su aplicación

myApp ionic serve cd myApp ionic serve

Gran parte de su aplicación se puede construir directamente en el navegador con ionic serve .Se recomienda comenzar con este flujo de trabajo.

Su panel de control siempre está disponible en dashboard.ionicjs.com

Lista de url ‘s asociadas:

Componente URL
Node.js https://www.nodejs.org/
Git https://git-scm.com/
Ionic https://ionicframework.com/
Apache Cordova https://cordova.apache.org/

Problemas

Puede que a pesar  de haber instalado  todas las herramientas necesarias ,al intentar crear un proyecto nuevo nos de error:

D:\user\AppData\Roaming\npm>ionic -v

3.10.1

D:\user\AppData\Roaming\npm>ionic start testApp

? What starter would you like to use: tabs

[INFO] Fetching app base

       (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)

× Downloading – failed!

Error: connect ETIMEDOUT 192.30.253.113:443

    at Object.exports._errnoException (util.js:1024:11)

    at exports._exceptionWithHostPort (util.js:1047:20)

    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1150:14)

Es decir  iónic [appName] esta o detrás de un proxy. Por alguna razón, al ejecutar desde el cmd ionic no puede utilizar la configuración del proxy npm o del proxy git.

Para resolver el problema   puede  intentar seguir los siguientes pasos (según la version de Windows  puede que las localizaciones del archivo sean diferentes).

1. Agregue la url proxy a request.js ubicada en ‘C: \ Usuarios \ [nombre de usuario] \ AppData \ Roaming \ npm \ node_modules \ ionic \ node_modules \ request \ request.js’.

(Por ejemplo el fichero seria  C:[nombre de usuario]\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js

Aquí está la actualización citada incluyendo las líneas justo antes y después para que pueda encontrar dónde ponerlo.

if (self.strictSSL === false) {
self.rejectUnauthorized = false
}

// hack to add proxy
self.proxy = 'http://10.68.0.5:8080';

if (self.proxy) {
if (typeof self.proxy == 'string') self.proxy = url.parse(self.proxy)

// do the HTTP CONNECT dance using koichik/node-tunnel
if (http.globalAgent && self.uri.protocol === "https:") {
var tunnelFn = self.proxy.protocol === "http:"
? tunnel.httpsOverHttp : tunnel.httpsOverHttps

var tunnelOptions = { proxy: { host: self.proxy.hostname
, port: +self.proxy.port
, proxyAuth: self.proxy.auth
, headers: { Host: self.uri.hostname + ':' +
(self.uri.port || self.uri.protocol === 'https:' ? 443 : 80) }}
, rejectUnauthorized: self.rejectUnauthorized
, ca: this.ca }

self.agent = tunnelFn(tunnelOptions)
self.tunnel = true
}
}

2. Agregue la URL del proxy a registry.js ubicada en ‘C: \ Users \ [nombre de usuario] \ AppData \ Roaming \ npm \ node_modules \ cordova \ node_modules \ plugman \ src \ registry \ registry.js o   D:[nombre de usuario]\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\plugman\registry

Aquí  vemos las líneas alrededor del hack para que pueda encontrar dónde ponerlo:

headers.accept = "application/json"

headers["user-agent"] = settings['user-agent'] ||
'node/' + process.version

// hack to add proxy
var p = settings.proxy || 'http://10.68.0.5:8080'
var sp = settings['https-proxy'] || p
opts.proxy = remote.protocol === "https:" ? sp : p

// figure out wth 'what' is
if (what) {
if (Buffer.isBuffer(what) || typeof what === "string") {
opts.body = what
headers["content-type"] = "application/json"
headers["content-length"] = Buffer.byteLength(what)
} else {
opts.json = what
}
}
Anuncio publicitario

Mejora de un mini conmutador Hdmi


La mayoría de los conmutadores HDMI   de 5 puertos o mas  con mando a distancia cuestan cuatro veces  o mas  veces  de  lo que cuesta  un  mini-conmutador  automático de tres  puertos(unos 8€)  lo cual puede hacernos pensar que quizás  estos  sencillos mini-conmutadores  sean una buena opción ,   pues ademas coincide  que estos dispositivos mas económicos  son totalmente compatibles con v.1.3, un estándar que Blu-Ray y algunas consolas de juegos requieren para funcionar correctamente.   Incluso en algunos casos puede que  un Blu Ray o PS3 solo funcionen en un puerto concreto hdmi del conmutador  (o puede que en ninguno de  estos).

Algunos conmutadores no cambian automáticamente  según la señal de vídeo presente , y esto solo justifica  el precio una mas bajo .  Respecto a los modelos sin mando a distancia , hay  algunas personas que suplen la carencia con los mandos de la fuentes de video , incluso usando mandos que aúnan el control de todas la fuentes  ( por ejemplo el control remoto universal Harmony ) ,de modo que desde estos, pueden  apagar cada dispositivo antes de encender el que se quiere ver, pues el conmutador hdmi encuentra automáticamente el puerto activo y conmuta  hacia él.

 

Un peculiaridad de estos conmutadores es  su pequeño espacio  ( aproximadamente del tamaño de un paquete de naipes), pues suelen estar  destinados a estar escondidos manteniendo la unidad principal fuera de la vista , pero esto conlleva precisamente dos graves inconvenientes:

  • No podemos ver cual es la fuente que esta conmutando pues los leds de canal activos no quedan visibles
  • No es posible acceder  fácilmente al conmutador  para forzar al selección de fuente de vídeo en caso de desear  conmutar entre varias fuentes de vídeo disponibles. .

minihdmi.png

 

Uno de los  conmutadores HDMI de 3 puertos mas conocidos el modelo Portta  que permite conmutar entre varias fuentes HDMI, como portátiles, HD-DVD, PS3 y Xbox 360, a televisores o pantallas HDMI ,Soporta 3D, 12 bits por píxel y resolución en alta definición [email protected] . Se pueden conmutar hasta 3 entradas, manteniendo todos los componentes de señal codificados mediante el sistema HDCP obtieniendo la energía que es necesaria para su funcionamiento directamente desde el cable / HDMI desde la fuente de salida .

El cambio entre dos fuentes en este conmutador  tarda aproximadamente un segundo, en modo  auto-switch. Aunque estamos seguro de que existen  algunos que son más rápidos, no creemos que valga la pena pagar más.

Aparte de conectores hdmi en los laterales  (tres o mas de entrada y uno de salida),   en la parte superior cuentan con  leds indicadores de la fuentes de video  seleccionado ( tantos como fuentes pueda conmutar ) y  un  pulsador   en la parte superior de la unidad principal  que sirve para forzar la entrada deseada.

Estos conmutadores   que  vamos a mejorar en realidad de venden bajas diferentes marcas siendo en esencia la misma electronica y las mejoras por tanto las mismas :

  • Los leds de canal activos no quedan visibles
  • No se puede  acceder  fácilmente al conmutador  para forzar al selección de fuente de vídeo en caso de desear  conmutar entre varias fuentes de vídeo disponibles. .

 

Para  solucionar ambos problemas   accederemos a la electronica,  capturarnos las salidas de los leds, el pulsador de cambio , conectaremos un interruptor de energía ( opcional)   y ocultaremos los conectores, así que empecemos:

En primer lugar, debemos de desmontar un conmutador  , lo cual es una tarea bien sencilla ,pues solo cuenta con tres tornillos que nos dejaran al descubierto la placa

Observe que no son 4 tornillos  con toda la intención , pues es un medida  justo para que no hay equívocos al cerrar las tapas en el ensamblaje

IMG_20171026_180412[1]

En la parte trasera queda visible claramente el regulador de tensión muy cerca precisamente de la salida del conmutador hdmi,  pues es precisamente desde esa fuente es desde donde se alimenta el circuito.

IMG_20171026_180418[1]

En el lado del chip de conmutación de video hdmi , ya vemos los leds formato miniatura ( tantos como entradas )   y el pulsador normalmente abierto para el cambio de entradas

 

IMG_20171026_180944[1]

Para hacerlo accesible el pulsador  soldaremos dos cables en el lado de las conexiones por detrás justo del pulsador físico de la placa

Para quitar los leds, unos alicates de corte puede ser mucho mas sencillo  y rápido antes que intentar desoldarlos ,pues desoldar estos puede acarrear demasiado calor para la placa;

 

IMG_20171026_182639[1].jpg

Deberemos soldar en los terminales de los leds  justo en el lado de atrás  dos cablecillos  por cada led ( ojo con no confundir el ánodo con el cátodo) y respetando el orden  de éstos.IMG_20171026_195754[1].jpg

Se pueden poner los leds originales o leds convencionales de color con objeto de que sea mas visible la  entrada de señal de vídeo a conmutar

Una vez soldado los cables de los leds  meteremos   todo en un receptáculo  que quede  visible el  frontal  con objeto de poder cambiar y visualizar claramente el resultado

IMG_20171026_195828[1].jpg

 

El resultado estéticamente es muy mejorable , pero funcionalmente es mucho mas interesante cel conmutador con este montaje que la configuración original  donde prácticamente no veimos ni podiamos intereactuar apenas con las fuentes de video.

IMG_20171029_221835[1].jpg

 

Una mejora  opcional es conectaremos un interruptor de energía para que no se encienda  ningún led  y por supuesto no conmute ninguna fuente de vídeo , pero esto es mas complejo porque hay que capturar la salida del regulador e intercalar  un interruptor  para desconectar toda la electrónica .