Construir una consola retro con Orange Pi PC


RetrOrange Pi es un proyecto sin fines de lucro. Se compone de una configuración básica de Retropie con la mayoría de los núcleos de Libretro encima de una versión de Jessica Desktop de Armbian preinstalada incluyendo   ademas  OpenELEC .Mas especificamnte RetrOrangePi  es por tanto una distribución de juegos y medios basada en Armbian (Debian 8), es decir  Full Armbian 5.23 con versión de escritorio de Jessie con el núcleo 3.4.113 (backdoors fijados)  que es  compatible con dispositivos H3 / Mali , como por ejemplo la Orange Pi PC . Ha sido  desarrollado y mantenido por Stevie Whyte y Alerino Reis con la colaboración de Wang Matt.

Gran parte del software incluido en la imagen tiene licencias no comerciales. Debido a esto, vender una imagen RetrOrange preinstalada no es legal, ni incluirla con su producto comercial .

Las plataformas soportadas  por esta distribución son las siguientes:  Nintendo DS, Neo Geo Pocket, Neo Geo, Neo Geo, Neo Geo, Nintendo, Neo Geo, Neo Geo, Neo Geo Pocket Color, PC Engine (TurboGrafx), Playstation 1, Playstation Portable, Sega32x, SegaCD, SG-1000, Super Nintendo, Vectrex, ZxSpectrum

Ademas, recientemente se han incorporado  otras plataformas como Amiga (emulador FS-UAE, fullscreen ahora, sonido de disquete, lanzador),Atari 5200 ,Atari 8bit (modelos 400 800 XL XE) ,Coco / Tandy ,Colecovision (ColEm emu * Colección personalizada BlueMSX núcleo **),Creativision ,Daphne (emulador Philips Cdi),Dosbox (versión GLES) y Dreamcast (fijo reicast-joyconfig),OpenMSX (con soporte .dsk) ,PPSSPP (nueva versión 1.3 de repo odroid),TI99 / 4A (Texas Instruments) entre otras.

Retrorange Pi incluye además OpenELEC (Kodi Jarvis 16.1) con el apoyo de la CEC por Jernej krabec y  Kodi Krypton beta6 (populares reproductores multimedia  que sirven ademas para ver estaciones de TV por internet,ect )  ,  pero tenga cuidado ,pues si ejecuta cualquiera de ellos cada que arranque su OrangePi arrancará con Kodi/OpenELEC y no podrá volver a Emulation Station sin hacer una serie de pasos que pueden ser complicados para muchos usuarios.

kodi01 kodi02

Ademas también tenemos un escritorio Linux completamente funcional bajo el eficiente Xfce

Incluye  teclado en pantalla con fácil configuración wifi y control de almacenamiento con características adicionales añadidas por el equipo ROPi: configuración de visualización, OpenELEC / Desktop launcher y switcher de música de fondo integrado en el menú principal.

También soporta  Plug n ‘Play – USB roms autoload (lee desde / media / usb0) (buggy) entre sus muchas carasterictics

Instrucciones  de instalación

Lo primero  es descargar la imagen correspondiente  en su ordenador, segun la  placa  que tenga , descargue la última imagen del sitio oficial  http://www.retrorangepi.org/#download  .

Por ejemplo para Orange Pi PC el fichero descargado seria RetrOrangePi-3.0.1.Orangepipc.tar.gz

Para descomprimir la imagen,  si estamos en Windows  primero en un fichero tar lo mejor es usar  el  famoso descompresor 7-Zip

Para descomprimir el tar obtenido por el 7-zio    ahora si podemos usar el  Winrar  para obtener el fichero .iso

Para crear la imagen en la sd existen dos métodos  principalmente  , veamos el procedimiento tradicional:

  • Inserte la tarjeta SD en el lector de tarjetas SD  de su ordenador comprobando cual es la letra de unidad asignada. Se puede ver fácilmente la letra de la unidad, tal como G :, mirando en la columna izquierda del Explorador de Windows.
  • Puede utilizar la ranura para tarjetas SD, si usted tiene uno, o un adaptador SD barato en un puerto USB.
  • Descargar la utilidad Win32DiskImager desde la página del proyecto en SourceForge como un archivo zip; puede ejecutar esto desde una unidad USB.
  • Extraer el ejecutable desde el archivo zip y ejecutar la utilidad Win32DiskImager; puede que tenga que ejecutar esto como administrador. Haga clic derecho en el archivo y seleccione Ejecutar como administrador.
  • Seleccione el archivo de imagen ISO  que ha extraído anteriormente
  • Seleccione la letra de la unidad de la tarjeta SD en la caja del dispositivo. Tenga cuidado de seleccionar la unidad correcta; si usted consigue el incorrecto puede destruir los datos en el disco duro de su ordenador! Si está utilizando una ranura para tarjetas SD en su ordenador y no puede ver la unidad en la ventana Win32DiskImager, intente utilizar un adaptador SD externa.retro
  • Haga clic en Write  Escribir y esperar a que la escritura se complete.
  • Salir del administrador de archivos  y expulsar la tarjeta SD.

Existe un procedimiento alternativo que permite usar diferentes funcionalidades en diferentes sistemas operativos en una única herramienta

  • Ir a etcher.io donde podemos descargar el software para cada sistema operativo
    pudiéndose e elegir aquí el sistema operativo que desea para Mac, linux o Windows
  • Una vez descargado el sw  instale en su equipo y  ejecute
  • Ahora seleccione la imagen ISO
  • Seleccione la unidad de tarjeta sd donde desee crear la imagen
  • Luego haga clic en flash, y la imagen será transferido a su tarjeta SD

etcher.PNG

 

Al finalizar de crear la imagen extraiga de su pc de  forma ordenadas

Coloque la sd en su Orange Pi PC ( o la placa que tenga)

El usuario y la contraseña predeterminados son:

user – pi
pass – pi
root – orangepi

Los emuladores ya están instalados (al menos los más comunes). Para agregar ROMs, simplemente coloque los archivos en la ~/RetroPie/roms/$CONSOLE , donde $CONSOLE es el nombre de la consola de destino, por ejemplo, snes o arcade.

Para usar la GUI, seleccione Desktop desde el menú EmulationStation, inserte la unidad USB con sus ROMs, cópielos en la RetroPie/roms/$CONSOLE (acceso directo en su escritorio).

Información importante:
 

  • En caso de que su placa no parezca arrancar, trate de reformatear su tarjeta SD con SDFormatter 4.0 por Trendy (con ajuste de tamaño )  pruebe con una fuente de alimentación diferente (real 2A) y  otra  sdcard (Original, class10 recomendado), y por último, pero no menos importante, asegúrese de estar conectado al televisor compatible con HDMI 720 (sin adaptadores DVI)
  • En el primer arranque se instalará automáticamente el sistema, cambiara el tamaño de la tarjeta SD y se reiniciara de nuevo asi que por favor tenga paciencia
  • Los emuladores ya están instalados , pero sólo aparecen en EmulationStation cuando se agregan roms.
  • Para agregar ROMs, simplemente coloque los archivos en la carpeta / home / pi / RetroPie / roms / $ CONSOLE, donde $ CONSOLE es el nombre de la consola de destino, por ejemplo, snes o arcade. Puede iniciar Desktop desde EmulationStation y conectar una unidad USB con sus ROMs. Las carpetas de Roms también son partes de samba.
  • Debido a nuestra configuración personalizada, no ejecute ‘sudo apt-get upgrade’. Puede romper algunas cosas.

 

 

Web oficial de RetroRangePiorange314.com/RetrOrangePi

Anuncios

Nueva vida al homestaion


Es habitual que al migrar el servicio ADSL  a FTTH  el operador  nos deje como medida de cortesía  , el viejo router de ADSL  en casa del cliente , así que probablemente el  viejo router haya quedado  en el olvido en un cajón sin saber muy bien que hacer con el. Asimismo  también hay personas que optan por comprar un router de mayor calidad al ofrecido  por el operador , por lo que es probable que se mantenga también el de su proveedor de Internet en casa .

Seguramente pues  todos tenemos en nuestra casa algún router viejo que ya no usamos para nada. Lo típico por ejemplo seria cambiar de ADSL  a FTTH , y el viejo ( tipicamente el Homestation ) ya no le encontramos ninguna utilidad  pues al cambiar  de tecnología, al pasar de ADSL a fibra óptica, el router antiguo queda inservible pues se  equiere otro  hardware mas moderno ( actualmente el novedoso  HGU que en  efecto  integra un router wifi , pero también un ONT y también un video-bridge).
En cualquier caso ,sea por el motivo que sea, es relativamente   habitual tener  en casa o en  la oficina un viejo router inalámbrico que ya no se está utilizando, sin saber muy bien que hacer con este,     ! así que es el momento de sacarle partido !
 
 Lo cierto es con estos routers  modernos  podemos hacer muchas cosas que nos sirvan en el día a día e incluso sustituir a otros dispositivos sin que nos cueste dinero. Una de las  funciones mas famosas es la de convertir nuestro viejo router en un servidor multimedia, pero también podemos usarlo como servidor de impresión , como   concentrador (o switch ) o incluso como repertidor wfi.

Concentrador (Hub)

La idea es que si no disponemos de un hub o concentrador a mano, podemos usar los 4 puertos (en realidad 3) de red del router para conectar más equipos.En la mayoría de hogares router principal  suele estar conectado a un equipo por cable, y el resto de aparatos (teléfonos, portátiles, netbook, ipad, tablets, etc) se conectan por wifi. Todos disfrutan de internet, pero puede que os haga falta conectar varios equipos por cable, para ampliar conectividad  en una pequeña oficina, o para jugar en red entre amigos, o incluso para crear una nueva red wifi, pues bien el modo de conexión es bastante sencillo :

  • Llevaremos a  cualquiera de las tomas del router secundario  una conexión ethernet proveniente del router prcincipal (*)
  • Alimentamos  el  router secundario
  • Automáticamente el router secundario  hará de  hub  y podremos conectar a los otros tres conexiones ethernet nuevos cables que lleven conectividad  a otras equipos
  • Podemos activar o  desactivar del modo habitual la wifi del router secundario  y por supuesto conectarnos a esta

(*)En el caso de que  la distancia fuera bastante grande  y no poder usar cable de red que  uniese ambos routers, podríamos utilizar dos  PLC ( “Power Line Communications” ) los cuales  al usar nuestra propia instalación eléctrica tiene la ventaja de que no está sometida a las interferencias de las redes WIFI de otros vecinos y equivale prácticamente a un cable de red ethernet convencional.

Repetidor WIFI

En algunos momentos  podríamos necesitar usar dos routers para ampliar la cobertura wifi  o por necesitar mayor numero de puertos ethernet  ,para lo cual  necesitaremos conectar ambos físicamente   bien por cable ethernet (caso anterior) o bien por wifi  .

Al usar dos routers  ambos deberán tener el mismo rango de red por ejemplo 192.168.1.X , siendo el Router principal  el que nos de acceso a internet  y debera estar en  modo routing (generalmente ya vienen así por defecto pero no está de más comprobarlo) y el router secundario sería el que pediría al principal los datos que necesitase para conectarse a internet o para conectarse a nivel local con las maquinas que estén conectadas al router principal y que deberemos cambiar a modo bridge y con el DHCP desabilitado.

En el caso  de querer conectar los dos router por  WIFI ambos deberán soportar WDS (Wireless Distribution System), que significa Sistema de Distribución Inalámbrico.

La  función WDS no es habitual en todos los routers WIFI (por ejemplo en el caso del famoso fabricante Zyxel,solo el modelo 660hw-t1 v3 lo es)   pero afortunadamente en los home-station    si  son compatibles con el modo ADB ,  aunque diferirá  el modo de cambiar la configuración  según el  fabricante del homestation (Amper o Adb)

Los  pasos a seguir son los siguientes a realizar en el router secundario si este es  el fabricado por Amper son los siguientes:

HOMESTATION AMPER( modelo ALPHA)

  1.  Accedemos a  la interfaz avanzada : http://192.168.1.1:8000  ( login 1234 pwd 1234)
  2. En el menú superior vamos Setup (aparece seleccionado por defecto) y en el menú de la izquierda vamos a Internet Setup.
  3.  En esa tabla central dejamos todos tal como esta, solo en la opcion WAN SETTINGS  y cambiamos la opción a bridge mode.                                               router1
  4.  En la opcion WAN cambiamos a 1483 bridged IP LLC presiona ADD/apply.router12
  5. Para que los cambios se validen en el menu Maintenance vamos a System Settings.
  6. Pulsamos en el botón Reboot para reiniciar.

 

HOMESTATION  ADB

Los  pasos a seguir son los siguientes a realizar en el router secundario HomeStation ,si este es el modelo Adb,  son los siguientes:

  1. Nos vamos al interfaz de administración avanzado : http://192.168.1.1/main.html 
  2.  Una vez accedamos nos vamos a Advanced Setup y en el menú que se despliega vamos WAN service, en esa pantalla seleccionamos todas las configuraciones (ppp0 y ppp1) activando los cuadritos de la casilla REMOVE una por una  y presionamos REMOVE para borrarlas.
  3. Presionamos ADD desde ahi llenando los   siguientes parametros   según se soliciten:VPI: 8, VCI: 32, DSL Link Type: EoA,  Encapsulation Mode: LLC/SNAP-BRIDGING,Service Category: UBR Without PCR – Select IP QoS Scheduler,Algorithm: Strict Priority .(El resto lo dejamos en predeterminado)
  4. Pulsamos  Apply/Save y quedaría guardada esta configuración.
  5. Presionamos  ahora  en el menú izquierdo el apartado “Advanced Setup  seleccionando  WAN Service  y en el panel de la derecha (WAN Service Setup)  pulsaremos   add.
  6.  En la opción  “WAN Service Interface Configuration” se seleciona  la opcion ” Layer2 Interfaceº” y luego NEXT.
  7. En la nueva pantalla con titulo “WAN Service Configuration” debe estar la opcion briging y en Enter Service Description cualquier nombre que aparezca es correcto. Pulsaremos   Next luego APPLY/SAVE y la configuración creada aparecerá en el panel WAN Service Setup
  8.  Nos vamos a a Advanced Setup -x> LAN”  verificando los siguientes parámetros:Groupname: Default,IP Address: 192.168.1.1, Subnet Mask: 255.255.255.0,“Enable IGMP Snooping” NO ,seleccionado, “Enable LAN side firewall” NO seleccionado
  9.  Ya estaria el router  en modo briging ahora se debe instalar un cliente PPPoE en el PC.

En ambos casos ya tendríamos  un repetidor secundario  wifi  funcionando inalmbricamente,  contando además de  cuatro tomas ethernet para conectar dispositivos  por cable

 

 

 

Servidor multimedia en el router

Tambien podremos utilizar para que, de forma inalámbrica o por cable, podamos acceder a él desde cualquier otro dispositivo conectado a nuestra red local y poder ver archivos de vídeo, música o cualquier documento. Desde nuestra televisión, si acepta conexión a la red, tendremos a nuestra disposición nuestras series favoritas o películas que tengamos dentro del router.

El requisito indispensable es que el viejo router tenga conexión por puerto USB como es el caso del famoso HomeStartion  y, evidentemente, un cargador conectado a la electricidad, ya que tiene que estar activo.

  • Enchufado a la corriente eléctrica y esperamos  funcionando correctamente (esperar un par de minutos, no justo cuando lo encendamos ya que como sabemos este tipo de aparatos tarda un poco), lo conectamos a un ordenador mediante cable de Ethernet y lo configuramos.
  • Para ello hay que buscar la configuración del servidor DHCP para deshabilitarla.
  • Una vez hecho esto, hay que conectar el router viejo nuevamente con un cable de Ethernet, pero esta vez al router principal, lo que nos permite navegar desde otro punto de la casa.
  • Una vez configurado el router tendremos que conectar un dispositivo de almacenamiento por USB, que puede ser un pendrive, disco duro externo, etc. Nuestro ordenador lo debemos conectar a la red que hemos creado con el antiguo router y escribiremos en la ventana de ejecución de Windows cmd y en la ventana de línea de comandos ipconfig y buscar donde ponga puerta de enlace predeterminada, que lo normal es que sea 192.168.1.1 o 192.168.1.2.
  • Nuevamente en la ventana de ejecución deberemos de escribir \\ seguido de la dirección de la puerta de enlace. Ahora nos aparecerán las carpetas llamadas usb_0_0, usb_1_0 y todos los que tengamos conectados.
  • Una vez tengamos seleccionado cuál es el puerto que vamos a utilizar como almacenamiento, tendremos que pulsar Windows + E y seleccionar la opción de agregar una ubicación de red. Pulsaremos dos veces a siguiente y posteriormente escribimos \\ (dirección de la puerta de enlace)\(nombre del disco duro).
  • Después de haber hecho este proceso, nos aparecerá una nueva ubicación de reden el ordenador que será el servidor multimedia creado.
  • Ahora ya podremos acceder a los archivos que metamos en la memoria, añadir o eliminar, desde cualquier dispositivo que se encuentre conectado a nuestra red local y configurado para ello.

Esta es una de las muchas utilidades que podremos darle a ese viejo router que tenemos en casa sin usar. Siempre que funcione correctamente y cuente con un puerto USB, podremos convertirlo en un servidor multimedia.

Servidor de impresión

Un Servidor de Impresión es un equipo o concentrador, o modernamente  un servidor, que conecta una impresora a la red lan interior , para que cualquier equipo pueda acceder a ella e imprimir trabajos, sin depender de otro ordenador para poder utilizarla, como es el caso de las impresoras compartidas.

Veamos  como convertir un  Home-Station modelo Observa  como servidor de impresión :

  1. En primer lugar debemos cambiar  la ip de acceso por defecto ( para que no haya colisiones con la ip del router principal)   y desactivar el DHCP
  2. En el caso de querer implementar una impresora de red , aparte de conectar la toma usb de la impresora a la toma usb del Home-Station , tan solo necesitaremos  ir al menú Advanced ->Network Tools –>Printer   y activar ( check enable )printer
  3. Observe  que la url( http://192.168.1.100:631/printers/Printer) sera la que necesitaremos para añadir la impresora de red desde nuestro ordenador.
  4. Asimismo es interesante   ,si se desea,  asociar un  nombre  que sugiera el tipo de impresora  a la que  nos conectaremos y finalmente pulsar Apply
cabon
Conexión a la impresora

Lo primero obviamente, es conectar la impresora al puerto USB del router y encenderla. En el equipo con Windows nos dirigiremos a Panel de Control – Impresoras y haremos clic en Agregar una impresora.

printer1

Seleccionaremos Agregar una impresora de Red y no esperaremos a que intente encontrarla, seleccionaremos directamente la opción La impresora no está en la lista .

En la siguiente pantalla pulsaremos la opción Seleccionar una impresora compartida por nombre  y  justo ahí   introduciremos los datos que configuremos  en el  paso anterior  (en el ejemplo  http://192.168.1.100:631/printers/Canon MG2550)

Después de intentar comunicarse con la impresora mediante la dirección http  que le hemos especificado, si la comunicación es correcta    , pedirá información adicional  de  marca  y  modelo .

Si en el equipo no tiene los drivers de la impresora puede  hacer clic en Usar disco e introducir el CD de la impresora en el equipo o en su defecto descargar los drivers desde la página web del fabricante seleccionando Marca y modelo directamente via windows update.

printercanon

 

Tras la instalación, podremos lanzar una página de prueba y comprobar que imprime correctamente.

 

printerprueba.PNG

 

En el caso de ser una multifunción, no es posible  escanear, sólo es posible imprimir.,pero para eso esta siempre la opción de desenchufar la impresora del Home-Sation  y volverlo conectar al pc para esa eventualidad

 

NOTA: Existen diferentes modelos de router Homestation, por lo que si no funciona de esta manera, recomiendo visitar el foro de Movistar,

Primeros pasos con Raspberry Pi 3


Con  más de ocho millones de unidades vendidas , incluyendo tres millones de unidades de Raspberry  Pi 2 , nadie duda  que Raspberry es una plataforma  muy exitosa ,  tanto, que de hecho la Fundación Raspberry Pi ha crecido desde tener  unos pocos voluntarios ,a llegar a más de sesenta empleados a tiempo completo, ! incluso  han enviado un Raspberry Pi a la Estación Espacial Internacional !

Quizás uno de los aciertos de esta placa,  y que explique tan tamaño éxito, es que esta placa en si constituye un ordenador completo que ejecuta un sistema operativo Linux ( aunque puede ejecutar otros ,  como por ejemplo Windows 10 Core)  ,  que ademas es muy versátil  ( pues puede ser utilizado para aprender a programar  o hacer cosas que hacemos en ordenadores convencionales como escribir textos, navegar , dibujar ,etc ) ,  y sobre todo , gracias a sus expansiones y puertos de E/S ,  es también capaz de intereactuar con el medio que nos rodea   (como por ejemplo monitorizando  el estado de sensores, activando luces o motores , etc),   lo cual lo hace ideal para cualquier proyecto de IoT 

Raspberry Pi 3 es un  ordenador del tamaño de  una tarjeta de crédito desarrollado por la Fundación Raspberry Pi  para promover la enseñanza de las ciencias de la computación en las escuelas.  Dado  el gran éxito de esta innegable iniciativa  ,  varias generaciones de  Raspberry  PI’s han sido liberados desde el  2012.

La primera generación, la Raspberry  pi,  fue lanzada en febrero de 2012, a  los daos años en febrero de 2015,  ya apareció  la versión 2  y finalmente en febrero de 2016 salio al mercado  la versión  3, rondando todas un precio  por debajo de los  $ 35 en el mercado americano.

También  han desarrollado un modelo más sencillo  en noviembre de 2015: la Raspberry Pi cero, con un tamaño más pequeño y limitado ,pero con posibilidades de E/S  y un coste ridículo de  sólo cinco dólares.

Desde 2016  tenemos disponibles la Raspberry Pi 3 Modelo B, la última placa de la familia de Raspberry Pi, una placa 10 veces más potente que la original (es decir la primera versión) ,  donde   lo mas destacable,  es que se ha añadido   conectividad inalámbrica integrada tanto por wifi (soportando los estándares  802.11 b/g/n) ,  como  por  Bluetooth ( versión 4.1).

Hablando de conectividad, la nueva placa  incorpora el chip BCM2837 junto el chip inalámbrico “combo” BCM43438  , lo cual  ha permitido  adaptar la funcionalidad inalámbrica en casi el mismo factor de forma de los modelos anteriores como el Raspberry Pi Modelo B + 1 y Raspberry Pi 2 Modelo B ( es decir aproximadamente del  tamaño de una tarjeta de crédito). De  hecho,  el único cambio  fisico, ha sido  que la posición de los LEDs los  han trasladado al otro lado de la ranura de la tarjeta SD para hacer espacio para la antena.

Ademas,para Raspberry Pi 3 Modelo B , Broadcom  ha apoyado un nuevo SoC, el  BCM2837, el cual  conserva la misma arquitectura básica que sus predecesores BCM2835 y BCM2836, por lo que todos los proyectos y tutoriales que se basan en este  hardware de la Raspberry  Pi continuarán funcionando.

broadcom

Comparable con el modelo  anterior (Raspberry pi 2 model b  ) , esta nueva placa   destaca  por usar un procesador   de  64  bits : un  ARM Cortex-A53  de  cuatro núcleos  a una velocidad de reloj  de 1,2 GHz  en lugar de un  Quad-Core Cortex A7 de 32 bits  a 900 MHz de su antecesor ( Raspberry Pi  2 modelo B), por lo  que vemos que el cambio de procesador  ha sido espectacular no solo por la velocidad de reloj superior (de 900 Mhz  a   1,2 GHz) ,  sino básicamente  por el cambio de arquitectura también ARM , pero  de 64 bits en lugar de la antigua de 32 bits .

La combinación final de un aumento del 33% en la velocidad de reloj  y con varias mejoras en la arquitectura, ha permitido  proporcionar un aumento del 50-60% en el rendimiento en el modo de 32 bits frente a la Raspberry Pi 2, o aproximadamente un factor de diez sobre la Raspberry Pi original.

Sobre la memoria  RAM,  cuenta  con 1GB LPDDR2 ( la versión anterior también contaba con 1GB)  y a nivel de gráficos, también han mejorado,   pues cuenta con  un Dual Core VideoCore IV ® Multimedia Co-procesador.

 

Todos los conectores anteriores  están en el mismo lugar y tienen  la misma funcionalidad, y para alimentar la placa  todavía se puede usar un  adaptador de alimentación de 5V micro-USB, pero en esta ocasión, están recomendando un adaptador 2.5A   (por si se  desean conectar dispositivos USB que consumen mucha energía  de la Raspberry Pi 3).

Vamos a identificar las partes de la  Raspberry Pi 3:


En el centro de la placa, vemos   el chip mas voluminoso  que constituye el cerebro del sistema , es decir el  chip  Broadcom  BCM2835, el cual  incluyen un procesador de 64 bits con cuatro núcleos  ARM Cortex corriendo a 1.2 Megahertz y  un procesador gráfico.

Ademas el ARM está vinculado a un   Módulo de memoria  1 Gigabyte   en la parte posterior del tablero

Sobre los conexiones disponibles ,sin embargo ,  no ha cambiado sustancialmente  , contando , como en la versión anterior , con las siguientes conexiones:

  • 4 Puertos  USB 2.0 (a la izquierda de  la imagen ).
  • Salida HDMI rev 1.3 y 1.4 para conectarse a un monitor o a un televisor.
  • Toma  Ethernet.
  • Jack de de 2  1/2″ (en la parte inferior tenemos un jack de audio estéreo y  vídeo compuesto).
  •  Interfaz de cámara (CSI).
  • Interfaz de Pantalla , es decir conexión via Display Serial Interface  (DSI) para conectar la pantalla (en la parte superior).
  • Lector  micro SD visible en la parte posterior de la placa  que es  utilizado con  una tarjeta micro SD como disco duro . Se recomienda  utilizar tarjetas SD  de al menos 16 GB.
  • Conector micro usb  para  la fuente de alimentación de  5V
  • Puerto 40 pines : una aparte muy importante de  la placa son precisamente  las conexiones del GPIO, de uso general de entrada / salida, el cual  permite conectar sensores y actuadores digitales. Es interesante destacar que Raspberry pi 3 mantiene el mismo cabezal de 40 pines que los anteriores versiones PI

Es importante mencionar que todos los puertos USB y Ethernet comparten el mismo canal USB, actuando como USB A ,adaptador Ethernet y concentrador USB
Esto podría ser importante si  el consumo de USB es demasiado alto pues algunos de los dispositivos pueden no funcionar correctamente de modo que no se deben conectar dispositivos usb que consumas mucha energia ( a no se qeu se alimente con un hub usb autoalimentado ).

Otra característica muy importante es que la  Raspberry 3 cuenta con  Wi-Fi y Bluetooth
de baja energía.  No es necesario conectar una antena externa pues a la Raspberryi 3, sus radios están conectados a esta antena de chip soldada directamente a la placa , la cual a pesar de su pequeño tamaño, esta antena debe ser capaz de recoger señales  Wi-Fi y  Bluetooth, incluso a través de las paredes-

Por ultimo , en la parte posterior encontramos el chip de comunicaciones

 

 

Para empezar a usar la RP 3,  tenemos que conectar a una pantalla a través de un cable HDMI. También tenemos que conectar un ratón y un teclado USB  a respectivos conectores USB ( normalmente un combo inalámbrico sólo usara un puerto USB)

Asimismo debemos conectar el cable de alimentación de 5V al menos 1Amp   por el conector   micro usb

Por ultimo, esta el  tema de  la tarjeta SD donde necesitamos copiar un sistema operativo pues sin esta,  la RP no hará absolutamente nada ( ni siquiera habrá señal de vídeo). Para ello necesitamos una tarjeta SD de al menos 8 GB (preferiblemente 16 GB ) e  instalar un sistema operativo

En  la página web principal de la  fundación Raspberry Pi iremos a descargas, y aquí
podemos descargar diferentes sistemas operativos, por ejemplo, Ubuntu mate o incluso windows 10.

También hay una herramienta llamada Noobs  que le permite instalar diferentes sistemas operativos de una manera muy fácil.

raspb.PNG

Existe una versión especial de ventanas especifico  para  la Raspberry  Pi  , y que es el más usado en esta placa llamado  Raspbian  y por tanto que es el mas  aconsejable . Nos iremos pues al sitio  oficial Raspbian   (en esta versión  están utilizando el mismo espacio de usuario de 32 bits Raspbian usada en otros dispositivos Raspberry Pi, pero en los próximos meses van a trabajar  el movimiento al modo de 64 bits.)

Jessie  está lleno de novedades, desde características y aplicaciones bastante interesantes a algunos cambios más sutiles en el diseño del sistema, como por ejemplo,al iniciar ahora su Raspberry Pi  la pantalla inicial  cambiara por completo  mostrando una imagen mas moderna . También el sistema incluirá por defecto algunas aplicaciones como un nuevo navegador , el famoso software  de RealVNC, para acceder a su Pi desde un escritorio remoto . Ademas ,  también incluye nuevos iconos para algunas aplicaciones, nuevo diseño para las ventanas y, cómo no, un sinfín de wallpapers nuevos para que decore el fondo de escritorio de su Raspberry Pi.

En la url de descarga, como se  aprecia en la imagen de abajo ,   se mantienen tanto la imagen de la versión previa mínima (Jessie Lite ) o la nueva de Jessie con escritorio:

jessie.PNG

Lógicamente si la SD es suficiente grande , lo interesante es descargar la primera  en lugar de la versión mínima, que ademas no incluye ninguna novedad.

Una vez decidida,  lo primero  es descargar la imagen correspondiente  en su ordenador

Para crear la imagen en la sd existen dos métodos  principalmente  , veamos el procedimiento tradicional:

  • Inserte la tarjeta SD en el lector de tarjetas SD  de su ordenador comprobando cual es la letra de unidad asignada. Se puede ver fácilmente la letra de la unidad, tal como G :, mirando en la columna izquierda del Explorador de Windows.
  • Puede utilizar la ranura para tarjetas SD, si usted tiene uno, o un adaptador SD barato en un puerto USB.
  • Descargar la utilidad Win32DiskImager desde la página del proyecto en SourceForge como un archivo zip; puede ejecutar esto desde una unidad USB.
  • Extraer el ejecutable desde el archivo zip y ejecutar la utilidad Win32DiskImager; puede que tenga que ejecutar esto como administrador. Haga clic derecho en el archivo y seleccione Ejecutar como administrador.
  • Seleccione el archivo de imagen que ha extraído anteriormente de Raspbian.
  • Seleccione la letra de la unidad de la tarjeta SD en la caja del dispositivo. Tenga cuidado de seleccionar la unidad correcta; si usted consigue el incorrecto puede destruir los datos en el disco duro de su ordenador! Si está utilizando una ranura para tarjetas SD en su ordenador y no puede ver la unidad en la ventana Win32DiskImager, intente utilizar un adaptador SD externa.
  • Haga clic en Escribir y esperar a que la escritura se complete.
  • Salir del administrador de archivos  y expulsar la tarjeta SD.

Existe un procedimiento alternativo que permite usar diferentes funcionalidades en diferentes sistemas operativos en una única herramienta

  • Ir a etcher.io donde podemos descargar el software para cada sistema operativo
    pudiéndose e elegir aquí el sistema operativo que desea para Mac, linux o Windows
  • Una vez descargado el sw  instale en su equipo y  ejecute
  • Ahora seleccione la imagen de Raspbian que descargo anteriormente del sitio  oficial Raspbian
  • Seleccione la unidad de tarjeta sd donde desee crear la imagen
  • Luego haga clic en flash, y la imagen será transferido a su tarjeta SD

etcher.PNG

Una vez creada la imagen de Raspbian en la SD ,ya puede insertar la SD en su Raspberry Pi en el adaptador de micro-sd , conectar un monitor por el hdmi , conectar un teclado y ratón en los  conectores USB, conectar la  con un cable ethernet  al router  conectividad a Internet y finalmente conectar la alimentación  para comprobar que la Raspberry arranca con la nueva imagen

 

Cuando la frambuesa Pi comienza a recibir energía el LED rojo marcado PWR se encenderá y el LED verde marcado OK o ACK en las versiones posteriores parpadeará en un patrón irregular para mostrar siempre que el Pi, seguidamente leera desde la tarjeta SD( tenga en cuenta que el BIOS para el RP3 esta
almacenados en la tarjeta SD.  Si todo va bien, y carga con éxito , raspbian comienza mostrando un texto de pantalla larga que le dice exactamente lo que está haciendo el so para empezar a trabajar.

La primera vez toma más tiempo para comenzar,pero después de un rato , la interfaz gráfica carga el escritorio pidiendo las credenciales por defecto (el nombre de usuario es “pi” y lla contraseña es raspberry para iniciar sesión )

 

Si el arranque no tiene éxito,  no mostrará nada en la pantalla, por lo que si tiene problemas repita los pasos anteriores o pruebe con otra micro sd

 

Lo siguiente, es  configurar la Raspberry Pi 3  :

  • Abra una ventana de terminal y escriba “sudo raspi -config” .
  • Esto le llevará a la pantalla de configuración:
    • Puede ampliar el sistema de archivos si lo necesita
    • Puede cambiar el usuario y la contraseña
    • Puede cambiar, configurar el idioma y la configuración regional
    • Puede activar la cámara en las opciones avanzadas
    • Puede activar, activar o desactivar algunos periféricos
  • Finalmente, también puede conectarse a diferentes redes Wi-Fi para poder conectarse a Internet ,opción que debería  gestionar para dar conectividad  a  la placa  y empezar  a hacer cosas  con esta :la nueva placa no es solo un dispositivo estupendo para programar sino que también es   ideal para jugar y experimentar incluso  para sus futuros proyectos de IoT.

 

 

 

Sin duda el producto es muy recomendable para muchas aplicaciones, incluso   supliendo  funciones de automatización que antes requerían un ordenador de sobremesa o por ejemplo como potente centro multimedia,

Por cierto, si le   interesa este modelo,   por unos 36€  puede conseguirlo  en Amazon

Monitorize su Raspberry Pi y Orange Pi


Puede ser muy útil monitorizar la carga de la CPU, la memoria y el uso de almacenamiento, y el tráfico de red de sus placas  a un estilo similar a  como lo hacen las  herramientas gráficas como System Monitor en Ubuntu que proporciona la mayor parte de la información, y monit que se puede usar en  servidores .

Recientemente se ha presentado  la utilidad RPi-Monitor para las placas Raspberry Pi ,Orange Pi  (versión parcheada) e incluso  para  la Banana Pi , y  como vamos a ver, es  muy fácil de instalar, proporcionando un panel gráfico limpio de muchas variables diferentes de lo que ocurren en nuestra placa.

En el caso de que tenga una placa Orange Pi ( en el ejemplo es la placa Orange Pi PC)  , lo recomendable es usar Armbian (versión servidor) , por lo que esta  sería  la plataforma ideal  para ejecutar RPi-Monitor (OPi-Monitor), pero el uso debe ser exactamente el mismo en Raspberry Pi aunque los pasos de instalación son algo diferentes .

Para instalar RPi-Monitor en Orange Pi PC ,One,etc   abra un terminal ssh  o acceda a la consola serie y puede instalar e iniciar el servicio con una sola línea de comandos:

 sudo armbianmonitor -r

Tras lanzar el comando , debería sacar por pantalla una salida similar a la siguiente:

/ _ \ _ __ __ _ _ __ __ _ ___ | _ \(_) | _ \ / ___|
| | | | ‘__/ _` | ‘_ \ / _` |/ _ \ | |_) | | | |_) | |
| |_| | | | (_| | | | | (_| | __/ | __/| | | __/| |___
\___/|_| \__,_|_| |_|\__, |\___| |_| |_| |_| \____|
|___/
Welcome to ARMBIAN 5.30 stable Ubuntu 16.04.2 LTS 3.4.113-sun8i
System load: 0.31 0.51 0.23 Up time: 3 min
Memory usage: 4 % of 1000MB IP: 192.168.1.48
CPU temp: 33°C
Usage of /: 8% of 15G
[ 0 security updates available, 73 updates total: apt upgrade ]
Last check: 2017-08-09 16:23
[ General system configuration: armbian-config ]
Last login: Wed Aug 9 16:24:46 2017
[email protected]:~# sudo armbianmonitor -r
Extracting templates from packages: 100% to 5 minutes. Be patient please
Selecting previously unselected package libxau6:armhf.
(Reading database … 43590 files and directories currently installed.)
Preparing to unpack …/libxau6_1%3a1.0.8-1_armhf.deb …
Unpacking libxau6:armhf (1:1.0.8-1) …
Selecting previously unselected package libxdmcp6:armhf.
Preparing to unpack …/libxdmcp6_1%3a1.1.2-1.1_armhf.deb …
Unpacking libxdmcp6:armhf (1:1.1.2-1.1) …
Selecting previously unselected package libxcb1:armhf.
Preparing to unpack …/libxcb1_1.11.1-1ubuntu1_armhf.deb …
Unpacking libxcb1:armhf (1.11.1-1ubuntu1) …
Selecting previously unselected package libx11-data.
Preparing to unpack …/libx11-data_2%3a1.6.3-1ubuntu2_all.deb …
Unpacking libx11-data (2:1.6.3-1ubuntu2) …
Selecting previously unselected package libx11-6:armhf.
Preparing to unpack …/libx11-6_2%3a1.6.3-1ubuntu2_armhf.deb …
Unpacking libx11-6:armhf (2:1.6.3-1ubuntu2) …
Selecting previously unselected package libxext6:armhf.
Preparing to unpack …/libxext6_2%3a1.3.3-1_armhf.deb …
Unpacking libxext6:armhf (2:1.3.3-1) …
Selecting previously unselected package fonts-dejavu-core.
Preparing to unpack …/fonts-dejavu-core_2.35-1_all.deb …
Unpacking fonts-dejavu-core (2.35-1) …
Selecting previously unselected package fontconfig-config.
Preparing to unpack …/fontconfig-config_2.11.94-0ubuntu1.1_all.deb …
Unpacking fontconfig-config (2.11.94-0ubuntu1.1) …
Selecting previously unselected package libfreetype6:armhf.
Preparing to unpack …/libfreetype6_2.6.1-0.1ubuntu2.3_armhf.deb …
Unpacking libfreetype6:armhf (2.6.1-0.1ubuntu2.3) …
Selecting previously unselected package libfontconfig1:armhf.
Preparing to unpack …/libfontconfig1_2.11.94-0ubuntu1.1_armhf.deb …
Unpacking libfontconfig1:armhf (2.11.94-0ubuntu1.1) …
Selecting previously unselected package fontconfig.
Preparing to unpack …/fontconfig_2.11.94-0ubuntu1.1_armhf.deb …
Unpacking fontconfig (2.11.94-0ubuntu1.1) …
Selecting previously unselected package libpixman-1-0:armhf.
Preparing to unpack …/libpixman-1-0_0.33.6-1_armhf.deb …
Unpacking libpixman-1-0:armhf (0.33.6-1) …
Selecting previously unselected package libxcb-render0:armhf.
Preparing to unpack …/libxcb-render0_1.11.1-1ubuntu1_armhf.deb …
Unpacking libxcb-render0:armhf (1.11.1-1ubuntu1) …
Selecting previously unselected package libxcb-shm0:armhf.
Preparing to unpack …/libxcb-shm0_1.11.1-1ubuntu1_armhf.deb …
Unpacking libxcb-shm0:armhf (1.11.1-1ubuntu1) …
Selecting previously unselected package libxrender1:armhf.
Preparing to unpack …/libxrender1_1%3a0.9.9-0ubuntu1_armhf.deb …
Unpacking libxrender1:armhf (1:0.9.9-0ubuntu1) …
Selecting previously unselected package libcairo2:armhf.
Preparing to unpack …/libcairo2_1.14.6-1_armhf.deb …
Unpacking libcairo2:armhf (1.14.6-1) …
Selecting previously unselected package libdatrie1:armhf.
Preparing to unpack …/libdatrie1_0.2.10-2_armhf.deb …
Unpacking libdatrie1:armhf (0.2.10-2) …
Selecting previously unselected package libdbi1:armhf.
Preparing to unpack …/libdbi1_0.9.0-4_armhf.deb …
Unpacking libdbi1:armhf (0.9.0-4) …
Selecting previously unselected package libencode-locale-perl.
Preparing to unpack …/libencode-locale-perl_1.05-1_all.deb …
Unpacking libencode-locale-perl (1.05-1) …
Selecting previously unselected package libfile-which-perl.
Preparing to unpack …/libfile-which-perl_1.19-1_all.deb …
Unpacking libfile-which-perl (1.19-1) …
Selecting previously unselected package libgraphite2-3:armhf.
Preparing to unpack …/libgraphite2-3_1.3.6-1ubuntu1_armhf.deb …
Unpacking libgraphite2-3:armhf (1.3.6-1ubuntu1) …
Selecting previously unselected package libharfbuzz0b:armhf.
Preparing to unpack …/libharfbuzz0b_1.0.1-1ubuntu0.1_armhf.deb …
Unpacking libharfbuzz0b:armhf (1.0.1-1ubuntu0.1) …
Selecting previously unselected package libtimedate-perl.
Preparing to unpack …/libtimedate-perl_2.3000-2_all.deb …
Unpacking libtimedate-perl (2.3000-2) …
Selecting previously unselected package libhttp-date-perl.
Preparing to unpack …/libhttp-date-perl_6.02-1_all.deb …
Unpacking libhttp-date-perl (6.02-1) …
Selecting previously unselected package libio-html-perl.
Preparing to unpack …/libio-html-perl_1.001-1_all.deb …
Unpacking libio-html-perl (1.001-1) …
Selecting previously unselected package liblwp-mediatypes-perl.
Preparing to unpack …/liblwp-mediatypes-perl_6.02-1_all.deb …
Unpacking liblwp-mediatypes-perl (6.02-1) …
Selecting previously unselected package liburi-perl.
Preparing to unpack …/liburi-perl_1.71-1_all.deb …
Unpacking liburi-perl (1.71-1) …
Selecting previously unselected package libhttp-message-perl.
Preparing to unpack …/libhttp-message-perl_6.11-1_all.deb …
Unpacking libhttp-message-perl (6.11-1) …
Selecting previously unselected package libhttp-daemon-perl.
Preparing to unpack …/libhttp-daemon-perl_6.01-1_all.deb …
Unpacking libhttp-daemon-perl (6.01-1) …
Selecting previously unselected package libipc-sharelite-perl.
Preparing to unpack …/libipc-sharelite-perl_0.17-3build3_armhf.deb …
Unpacking libipc-sharelite-perl (0.17-3build3) …
Selecting previously unselected package libjson-perl.
Preparing to unpack …/libjson-perl_2.90-1_all.deb …
Unpacking libjson-perl (2.90-1) …
Selecting previously unselected package libthai-data.
Preparing to unpack …/libthai-data_0.1.24-2_all.deb …
Unpacking libthai-data (0.1.24-2) …
Selecting previously unselected package libthai0:armhf.
Preparing to unpack …/libthai0_0.1.24-2_armhf.deb …
Unpacking libthai0:armhf (0.1.24-2) …
Selecting previously unselected package libpango-1.0-0:armhf.
Preparing to unpack …/libpango-1.0-0_1.38.1-1_armhf.deb …
Unpacking libpango-1.0-0:armhf (1.38.1-1) …
Selecting previously unselected package libpangoft2-1.0-0:armhf.
Preparing to unpack …/libpangoft2-1.0-0_1.38.1-1_armhf.deb …
Unpacking libpangoft2-1.0-0:armhf (1.38.1-1) …
Selecting previously unselected package libpangocairo-1.0-0:armhf.
Preparing to unpack …/libpangocairo-1.0-0_1.38.1-1_armhf.deb …
Unpacking libpangocairo-1.0-0:armhf (1.38.1-1) …
Selecting previously unselected package librrd4:armhf.
Preparing to unpack …/librrd4_1.5.5-4_armhf.deb …
Unpacking librrd4:armhf (1.5.5-4) …
Selecting previously unselected package librrds-perl:armhf.
Preparing to unpack …/librrds-perl_1.5.5-4_armhf.deb …
Unpacking librrds-perl:armhf (1.5.5-4) …
Selecting previously unselected package rpimonitor.
Preparing to unpack …/rpimonitor_2.10-1_all.deb …
Unpacking rpimonitor (2.10-1) …
Processing triggers for libc-bin (2.23-0ubuntu7) …
Processing triggers for man-db (2.7.5-1) …
Processing triggers for systemd (229-4ubuntu17) …
Processing triggers for ureadahead (0.100.0-19) …
Setting up libxau6:armhf (1:1.0.8-1) …
Setting up libxdmcp6:armhf (1:1.1.2-1.1) …
Setting up libxcb1:armhf (1.11.1-1ubuntu1) …
Setting up libx11-data (2:1.6.3-1ubuntu2) …
Setting up libx11-6:armhf (2:1.6.3-1ubuntu2) …
Setting up libxext6:armhf (2:1.3.3-1) …
Setting up fonts-dejavu-core (2.35-1) …
Setting up fontconfig-config (2.11.94-0ubuntu1.1) …
Setting up libfreetype6:armhf (2.6.1-0.1ubuntu2.3) …
Setting up libfontconfig1:armhf (2.11.94-0ubuntu1.1) …
Setting up fontconfig (2.11.94-0ubuntu1.1) …
Regenerating fonts cache… done.
Setting up libpixman-1-0:armhf (0.33.6-1) …
Setting up libxcb-render0:armhf (1.11.1-1ubuntu1) …
Setting up libxcb-shm0:armhf (1.11.1-1ubuntu1) …
Setting up libxrender1:armhf (1:0.9.9-0ubuntu1) …
Setting up libcairo2:armhf (1.14.6-1) …
Setting up libdatrie1:armhf (0.2.10-2) …
Setting up libdbi1:armhf (0.9.0-4) …
Setting up libencode-locale-perl (1.05-1) …
Setting up libfile-which-perl (1.19-1) …
Setting up libgraphite2-3:armhf (1.3.6-1ubuntu1) …
Setting up libharfbuzz0b:armhf (1.0.1-1ubuntu0.1) …
Setting up libtimedate-perl (2.3000-2) …
Setting up libhttp-date-perl (6.02-1) …
Setting up libio-html-perl (1.001-1) …
Setting up liblwp-mediatypes-perl (6.02-1) …
Setting up liburi-perl (1.71-1) …
Setting up libhttp-message-perl (6.11-1) …
Setting up libhttp-daemon-perl (6.01-1) …
Setting up libipc-sharelite-perl (0.17-3build3) …
Setting up libjson-perl (2.90-1) …
Setting up libthai-data (0.1.24-2) …
Setting up libthai0:armhf (0.1.24-2) …
Setting up libpango-1.0-0:armhf (1.38.1-1) …
Setting up libpangoft2-1.0-0:armhf (1.38.1-1) …
Setting up libpangocairo-1.0-0:armhf (1.38.1-1) …
Setting up librrd4:armhf (1.5.5-4) …
Setting up librrds-perl:armhf (1.5.5-4) …
Setting up rpimonitor (2.10-1) …
[ ok ] Starting rpimonitor (via systemctl): rpimonitor.service.
Processing triggers for libc-bin (2.23-0ubuntu7) …
Now patching RPi-Monitor to deal correctly with H3
Now you’re able to enjoy RPi-Monitor at http://192.168.1.48:8888
[email protected]:~#

 

Realmente en la instalación anterior en una Orange pi PC con ArmBian ,el comando tomó alrededor de mucho menos  de 8 minutos de los anunciados (unos 3 minutos)   y descargó e instaló los paquetes requeridos.

Si  la salida del log de ejecución  es mas corta que la anterior, o en la finalizacion  nos ofrece la url por defecto (http://192.168.0.112:8888)   ,es decir con una url diferente  a la que tengamos para conectarnos, probablemente  no  se habrá instalado correctamente por algún tipo de incompatibilidad de algún paquete que se tenga ya instalado ( por ejemplo el sw de cayenne que no funciona aún en una Orange pi Pc).

En cualquier caso, la solución es bastante simple: o desistalamos el paquete que sospechemos o lo mas rápido: volvemos a instalar ArmBian en la microSD (aqui puede ver los pasos)

 

Una vez completada la instalación correctamente, redirijase  a una ventana del navegador de su computadora a la URL que se proporciona al final del script para acceder a la interfaz web (en el  ejemplo http://192.168.1.48:8888)

 

Ahora haga clic en el botón verde de Inicio para que el sistema recopile datos automáticamente y terminará en la página de estado con información sobre la versión, el tiempo de actividad, el uso de la CPU, la temperatura, el uso de la memoria, el uso de tarjetas SD y el tráfico de red.

 

Eso es interesante , pero la parte favorita es la pestaña de Estadísticas pues muestra cuadros realmente limpios y útiles

 

Pueden ser confusas al principio ya que se utilizan dos escalas para elementos múltiples, con por ejemplo el izquierdo (0 a 100) que muestra el uso de la CPU en porcentaje y temperatura SoC, con la escala izquierda (0 a 5) usada para las otras métricas tales como frecuencia de CPU en GHz, CPUs Activas, etc … ,pero  cada elemento puede ser fácilmente desactivado y habilitado.

Existen 7 tipos de gráficos: Uptime, velocidades de carga / reloj / temperatura, detalles CPU Stats, memoria. Disks – boot, Disks – root y Network, y 6 opciones de actualización con la más rápida actualización cada 10 segundos para una ventana de 24 horas, y la más lenta cada 60 minutos para una vista de un año de la placa.

La pestaña Opciones sólo se utiliza para seleccionar el tiempo de actualización predeterminado y también puede acceder a los gráficos en el navegador de su teléfono inteligente explorando el núcleo QR en la sección Acerca de.

 

Por cierto, RPi-monitor es open source  ,lo que significa que puede estudiar el código,mejorarlo  y  reportar  bugs en  github. También puede obtener mas información y actualizaciones en el  blog del desarrollador.

Cómo instalar ArmBian en Orange Pi PC


Armbian es una distribución ligera basada en Debian o Ubuntu especializada para placas de desarrollo ARM. Compilado desde cero, contando con poderosas herramientas, desarrollo de software, y una comunidad vibrante.Otras placas ARM pueden ser las Raspberry PI, Odroid, Cubieboard… cada una de un fabricante distinto y luchando por hacerse con su espacio

Para instalar Armbian, primero debemos elegir entre un entorno gráfico o linea de comandos pues dependiendo lo que queramos hacer, elegiremos uno u otro sistema. Según la placa tendremos soporte completo con una de cuatro sistemas básicos  Debian Wheezy  (Jessie)  o   Ubuntu Trusty  (Xenial)

Ademas  dentro de esas distribuciones, podemos elegir entre “Legacy” y “Vanilla”,ambos estables y listos para producción, pero se debe elegir en base a nuestras necesidades, ya que su soporte básico es diferente:

  • Legacy: aceleración de vídeo, sistema al que conectar pantallas y otros periféricos, como teclado, ratón…
  • Vanilla: servidores sin monitor o periféricos, que se vayan a controlar remotamente por ssh ( por ejemplo desde el putty)

Más información acerca de Armbian se puede encontrar: Aquí  y se puede encontrar la guía de instalación: Aquí

Ok, ¿qué necesitamos para iniciar este pequeño proyecto?

Hardware necesario:

  1. Orange Pi PC
  2. 5V / 2A con el barril del CC Jack o el cable grueso del USB (utilicé 5V / 1,5A de mi teléfono viejo)
  3. Tarjeta SD – Clase 10!
  4. Teclado y ratón
  5. Cable HDMI
  6. Cable ethernet de LAN
  7. Lector de tarjetas

Software necesario:

  1. Descargar Armbian – Jessie,versión servidor  para el Orange Pi PC   Aquí
  2. Descargar SDFormatter: aqui
  3. Descargar Etcher: Here
  4. Descargar 7-Zip: Aquí
  5. Descargar Putty: aqui

Upzip, formato e instalación de Armbian a la tarjeta SD

Upzip, Formato e Instalación de Armbian a Tarjeta SD
  • Empezar a descargar Armbian (ver enlaces anteriores) e instalar SDFormatter, Etcher y 7-zip.
    (No estoy explicando cómo instalar esas aplicaciones porque es bastante sencillo.
  • Cuando esto se hace, abra la carpeta donde descargó la imagen de Armbian,
    Esto debe ser nombrado así:
    “Armbian_5.20_Orangepiplus_Debian_jessie_3.4.112_desktop.7z
  • Abra 7-zip y descomprima este archivo en un nuevo directorio para que tenga algo como: “Armbian_5.20_Orangepiplus_Debian_jessie_3.4.112_desktop.img 
  • Conecte su tarjeta SD a su computadora, en este caso utilicé un lector de tarjetas USB
  • Iniciar SDformatter
    • Drive: Seleccione su tarjeta SD ( Compruebe esto! )
    • Vaya a las opciones -> “Ajuste del tamaño del formato” -> YES (El valor predeterminado es “No”) -> OK
    • Compruebe nuevamente si la tarjeta SD está seleccionada en la sección “Drive”.
    • Haga clic en “Formato”
  • Iniciar Etcher (ejecutar como Administrador!)
    • ” Seleccionar imagen ” -> Seleccione su unzipt:
      Archivo “Armbian_5.20_Orangepiplus_Debian_jessie_3.4.112_desktop.img”
    • Seleccione ” Cambiar ” para cambiar su letra de unidad para usted Tarjeta SD
    • Seleccione “Flash!” Y esperar hasta que esto se haga
  • Desconecte su tarjeta SD cuando se haya completado este proceso, use la opción “Quitar hardware y expulsar material de forma segura” en Windows para asegurarse de que está bien

Conecte su Orange Pi PC  y arranque por  primera vez con Armbian

 Ok, ahora es el momento de conectar todos sus dispositivos y cables para iniciar su Orange Pi!
  • Conecte un teclado + mouse a USB
  • Conecte su cable HDMI a su TV  o monitor
  • Conecte el cable LAN al enrutador / conmutador
  • Inserte la tarjeta SD en la ranura de la tarjeta SD
  • Por último, pero no menos importante, conecte el cable de alimentación a su Orange Pi (recuerde que no hay soporte en el Micro USB como fuente de alimentación)
  • ¡Que empiece la diversión!

¿Cómo arrancar?

El primer arranque toma alrededor de 3 minutos y luego se reinicia y tendrá que esperar otro minuto para iniciar sesión. Este retraso se debe a que el sistema actualiza la lista de paquetes y crea SWAP de emergencia de 128Mb en la tarjeta SD.

¿Cómo iniciar sesión?

Ingrese como nombre de usuario ” root” en la consola o mediante SSH y use la contraseña ” 1234″ . Se le pedirá que cambie esta contraseña en el primer inicio de sesión. A continuación, se le pedirá que cree una cuenta de usuario normal que esté sudo (admin) habilitada.
Incluso te está preguntando si quieres cambiar la resolución de la pantalla, pero para mí está bien en 720P.
Estoy usando la línea de comandos con SSH (masilla) la mayor parte del tiempo.

Su escritorio ya está listo para usar! :

Le mostrará algo como esto: donde como vemos aparece la dirección IP a la que nos podemos conectar por ssh

Inicie Putty y conéctese a la dirección IP de su Orange Pi así (ver captura de pantalla):

Nombre de host (o dirección IP): 192.168.1.48 (sólo mi ejemplo, cambie a su IP)
Puerto 22 (predeterminado)
Y haga clic en “Abrir”

Putty le dará un mensaje de seguridad la primera vez, simplemente haga clic en “Sí”.

Ingrese con “root” como nombre de usuario, y su propia contraseña.

Actualizar, establecer una IP estática y deshabilitar raíz para iniciar sesión.

Su Orange Pi debe ejecutar el escritorio y SSH ahora mismo, pero queremos hacer más!

Estos 3 pasos no son obligatorios, pero me gustaría recomendarlo o al menos echarle un vistazo.

  • Actualizar / actualizar su Armbian
    Inicie sesión con Putty en su Orange Pi, y use este comando para actualizar / actualizar su Armbian:
    ” Sudo apt-get update  o simplemente   “apt-get update” si esta logado como root
    Después de esto:
    Sudo apt-get upgrade -y ” o simplemente apt-get upgrade -y  si esta logado como root     .En caso de error puede que tenga   que selecionar la opcion -f , es decir            apt-get -f install
  • Configurar un IP estático
    Quiero tener una dirección IP estática (no DHCP) en mi Orange Pi, así que sé con seguridad que estoy conectando a mi Orange Pi en la misma dirección IP todo el tiempo.
    Inicie sesión con Putty en su Orange Pi y utilice este comando ifconfig  para ver los detalles de su IP actual:

    [email protected]:~# ifconfig
    eth0 Link encap:Ethernet HWaddr d2:94:6d:f5:41:56
    inet addr:192.168.1.48 Bcast:192.168.1.255 Mask:255.255.255.0
    inet6 addr: fe80::d094:6dff:fef5:4156/64 Scope:Link
    UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
    RX packets:20090 errors:0 dropped:0 overruns:0 frame:0
    TX packets:9527 errors:0 dropped:0 overruns:0 carrier:0
    collisions:0 txqueuelen:1000
    RX bytes:24031895 (24.0 MB) TX bytes:757452 (757.4 KB)
    Interrupt:114
    lo Link encap:Local Loopback
    inet addr:127.0.0.1 Mask:255.0.0.0
    inet6 addr: ::1/128 Scope:Host
    UP LOOPBACK RUNNING MTU:16436 Metric:1
    RX packets:1 errors:0 dropped:0 overruns:0 frame:0
    TX packets:1 errors:0 dropped:0 overruns:0 carrier:0
    collisions:0 txqueuelen:0
    RX bytes:104 (104.0 B) TX bytes:104 (104.0 B)

    [email protected]:~#

  • En este caso, quiero usar esta dirección IP 192.168.1.48 como una dirección IP estática, pero usted tiene que comprobar qué dirección IP que desea utilizar en este rango.Tipo:
    nano / etc / network / interfaces “, el texteditor Nano se abrirá y le mostrará la configuración de red, busque los detalles de “eth0”, como esto:

source /etc/network/interfaces.d/*

# Wired adapter #1
allow-hotplug eth0
no-auto-down eth0
iface eth0 inet dhcp
#address 192.168.0.100
#netmask 255.255.255.0
#gateway 192.168.0.1
#dns-nameservers 8.8.8.8 8.8.4.4
# hwaddress ether # if you want to set MAC manually
# pre-up /sbin/ifconfig eth0 mtu 3838 # setting MTU for DHCP, static just: mtu 3838

# Wireless adapter #1
# Armbian ships with network-manager installed by default. To save you time
# and hassles consider using ‘sudo nmtui’ instead of configuring Wi-Fi settings
# manually. The below lines are only meant as an example how configuration could
# be done in an anachronistic way:
#
#allow-hotplug wlan0
#iface wlan0 inet dhcp
#address 192.168.0.100
#netmask 255.255.255.0
#gateway 192.168.0.1
#dns-nameservers 8.8.8.8 8.8.4.4
# wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
# Disable power saving on compatible chipsets (prevents SSH/connection dropouts over WiFi)
#wireless-mode Managed
#wireless-power off

# Local loopback
auto lo
iface lo inet loopback

  • Ahora necesitamos cambiar la parte ” dhcp ” a ” static “, y llenar todos los detalles de la dirección

    IP.Cambiarlo así:# Wired adapter #1
    allow-hotplug eth0
    no-auto-down eth0
    iface eth0 inet static
    address 192.168.1.48
    netmask 255.255.255.0
    gateway 192.168.0.1
    #dns-nameservers 8.8.8.8 8.8.4.4
    # hwaddress ether # if you want to set MAC manually
    # pre-up /sbin/ifconfig eth0 mtu 3838 # setting MTU for DHCP, static just: mtu 3838# Wireless adapter #1
    # Armbian ships with network-manager installed by default. To save you time
    # and hassles consider using ‘sudo nmtui’ instead of configuring Wi-Fi settings
    # manually. The below lines are only meant as an example how configuration could
    # be done in an anachronistic way:
    #
    #allow-hotplug wlan0
    #iface wlan0 inet dhcp
    #address 192.168.0.100
    #netmask 255.255.255.0
    #gateway 192.168.0.1
    #dns-nameservers 8.8.8.8 8.8.4.4
    # wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
    # Disable power saving on compatible chipsets (prevents SSH/connection dropouts over WiFi)
    #wireless-mode Managed
    #wireless-power off# Local loopback
    auto lo
    iface lo inet loopback

    Guarde este documento pulsando ” ctrl + x “, ” Y ” y pulse enter ( no cambie el nombre de archivo! )
    Ahora necesitamos reiniciar el servicio de red en Armbian, pero no sé por qué, reiniciando Armbian funciona muy bien aquí. Puede reiniciar tecleando este “reboot”.

  • Putty le dará un mensaje ” Server inesperadamente cerrado conexión de red “, pero eso no es extraño, que está reiniciando el Orange Pi.
    En putty utilice el botón “Restart ression” para reiniciar la conexión a su Orange Pi.Ahora cambiamos una dirección IP DHCP a una dirección IP estática para ” ETH0 “.
  • Desactivar la conexión root de SSH en Armbian
    ¿Por qué debemos desactivar la cuenta de root para el inicio de sesión de SSH? Bastante simple, la seguridad !
    Casi todas las distribuciones de Linux tienen la cuenta “root”, así que si alguien quiere hackear / fuerza bruta
    Un servidor Linux que están intentando iniciar sesión con esta cuenta. Al deshabilitar esta cuenta, primero deben encontrar una cuenta de usuario.Para solucionar este problema, debemos editar el archivo ” sshd_config “, que es el archivo de configuración principal del servicio sshd. ¡Asegúrese de que su segunda cuenta funcione! Al principio, Armbian le pidió que creara una segunda cuenta de usuario con una contraseña. Cierre sesión en Putty e intente iniciar sesión con esta cuenta. En mi caso creé una cuenta ” orangepi “.Tipo:
    ” Sudo nano / etc / ssh / sshd_config “Encuentre esta parte: (en Nano puede buscar con “ctrl + w”)
    ” PermitRootLogin “Te mostrará:
    # Autenticación:LoginGraceTime 120
    PermitRootLogin sí
    StrictModes síCambie el “ PermitRootLogin  ” a ” PermitRootLogin no ”
    Guardar esto golpeando ” ctr + x “, Y (es) y pulse enter (no cambie el nombre del archivo!)
    Reinicie SSH escribiendo:
    ” Sudo service ssh restart “Cierre la sesión e intente ingresar con “root”, si ha cambiado esto correctamente, le dará un error ahora.
    “Acceso denegado”.
    Inicia sesión con tu segunda cuenta ahora, en mi caso es “orangepi” y ya está!

Software adicional

Estos son sólo extra como: 

  • GPIO 
    Al igual que la Raspberry Pi (RPI), el Orange Pi (OP o OPI) tiene algunos GPIO para jugar.
    El RPI usa un programa llamado “WiringPi”, pero para el Orange Pi tenemos “WiringOP”!
    Se puede encontrar más información: aquí y aquí

    • Ir a su homedirectory
    • Tipo: “clon de git https://github.com/zhaolei/WiringOP.git -b h3″
    • Tipo: “cd WiringOP”
    • Tipo: “sudo chmod + x ./build”
    • Tipo: “sudo ./build”
    • Tipo: “gpio readall” para ver una visión general de todos los puertos GPIO.
  • VNC sobre SSH
    Puedo copiar pasado este sitio web completo, pero toda la información es:Aquí
  • RPI-Monitor
    Puedo copiar pasado este sitio web completo, pero toda la información es:Aquí
  • Webmin 
    Puedo copiar pasado este sitio web completo, pero toda la información es: Aquí

Cómo enviar ficheros grandes y no morir en el intento


Hay serias limitaciones en cuanto al tamaño máximo de ficheros que se pueden enviar por  correo electrónico, pudiéndose usarse como regla general, inlcuso   si usa servicios de correo de grandes empresas como Google (gmail)  o Microsft ( Hotmail),   nos conviene evitar adjuntar archivos de más de 10 MB de peso ya que excepto raras excepciones, suelen dar problemas.

Ademas por si fuera poco para terminar de empeorar el problema ,la forma en que los servicios de correo procesan los archivos hace que aumenten su peso cerca de un 30%,razón  por la cual algunos proveedores puedan recibir mensajes de hasta 25 MB, el peso total de los adjuntos que usted envía no debería exceder los 20 MB.

En cuanto gmail se  puede enviar varios archivos adjuntos en un mismo mensaje, pero en total no pueden superar los 25 MB.Si el archivo tiene más de 25 MB, Gmail añadirá automáticamente un enlace a Google Drive en vez de adjuntarlo. Así, el destinatario podrá descargárselo y acceder a él incluso si retiras el archivo de Google Drive.

Y en cuanto a hotmail ,el panorama tampoco es muy diferente,  pues es    tamaño total máximo de un mensaje de correo electrónico  tampoco  debería pasar  los  25Mb (el tamaño total incluye el encabezado del mensaje, el cuerpo del mensaje y cualquier archivo adjunto)

La misión pues de enviar un archivo grande (1 o 2GB)  parece imposible sin pasar por un servicio de almacenamiento en nube o por lo menos eso parecía   hasta que entrara la herramienta Send de Firefox.

Veamos los pasos para utilizar a esta potente herramienta gratuita:

  1. Acceder a la url  de Send,una manera de enviar archivos de hasta 2GB de tamaño mediante un enlace “encriptado, privado, seguro y que caducará automáticamente para que tus datos no sean accesibles en línea de por vida”.
  2. Al ir integrada esta herramienta en Firefox,obliga a actualizar  a la ultima versiónfirefox.PNG
  3.  Nos obligara si tenemos instalada una versión antigua  actualizarnos  vía la url habitual de descarga (https://www.mozilla.org/es-ES/firefox/  )fire2
  4. Pulsaremos como puede verse en el botón de descarga y ejecutaremos el instalador que procederá a la sustitución de la versión que tubiee  previa de Firefox por la ultima versión (  en la fecha de publicación de estye post   la  v 54.0,1 en la versión de 32bits)
  5.  Ahora desde una ventana de un navegador ( no necesariamente  FireFox)   nos iremos a https://send.firefox.com/ .
  6. Su interfaz no puede ser más sencilla, y nos encontramos un pequeño recuadro sobre el que lanzar o seleccionar los archivos que queremos enviar donde ,como podemoes ver, nos recomiendan (por motivos de seguridad) que el archivo sea inferior a 1GB  (aunque podremos enviar hasta 2GB):send1.PNG
  7. Una vez que lo hagamos, comenzará a subirlo y después nos devolverá un enlace para que lo enviemos a otra personaenlace2.PNG
  8. Es interesante destacar que como vemos ,nos ofreces la opción de eliminarlo  por si cambiamos de opinión  pulsando en el botón  “Eliminar archivo
  9. Muy importable : debemos saber que se autodestruirá  el  contenido del enlace al pasar 24 horas o cuando la otra persona se lo descargue por primer vez .

 

 

Por si ha quedado duda ,en el vídeo se puede ver el proceso de envió de ficheros grandes en acción:

Desarrollo de una app hibrida movil con Ionic 2 y Visual Studio


Ionic es un popular framework front-end JavaScript para desarrollar aplicaciones móviles multiplataforma usando Apache Cordova . El Marco Iónico da a las aplicaciones Cordova una apariencia nativa y ajusta automáticamente esa apariencia a través de las plataformas. Puede utilizar Visual Studio 2017 y Visual Studio Tools para Apache Cordova (TACO) para crear y depurar fácilmente aplicaciones multiplataforma Ionic.

En este artículo, vermos como configurar un entorno de desarrollo de Visual Studio 2017 para Ionic 2 y crear una versión Ionic 2 de la aplicación Weather que se muestra a continuación:

Aplicación de Tiempo Acabado

Requisitos

Para administrar, codificar, ejecutar y depurar aplicaciones Ionic 2 utilizando Visual Studio, debe instalar lo siguiente:

  • Visual Studio 2017
  • Herramientas de Visual Studio para Apache Cordova
  • Plantillas de Visual Studio Ionic 2
  • Dependencias de plantillas Ionic 2 (descritas a continuación)

Instalación de las plantillas de Ionic 2

  1. Si aún no lo ha hecho, instale Visual Studio 2017 y TACO.Bajo las portadas, las aplicaciones de Ionic son aplicaciones de Apache Cordova, necesitará un entorno de desarrollo de Cordova funcional antes de poder desarrollar aplicaciones usando Ionic.Compruebe que puede crear y ejecutar la aplicación predeterminada Cordova Blank . En Visual Studio, abra el menú Archivo , seleccione Nuevo y, a continuación, Proyecto . En el cuadro de diálogo del nuevo proyecto, expanda la sección de plantillas de JavaScript , seleccione Aplicaciones móviles y , a continuación, elija la plantilla de aplicación en blanco (Apache Cordova) . Dé al nuevo proyecto un Nombre y Ubicación y luego haga clic en el botón Aceptar . Presione F5 para crear y ejecutar el nuevo proyecto utilizando la nueva opción Simular en explorador . El navegador Chrome debe abrir y mostrar el contenido de la aplicación.
  2. Instale la plantilla de Ionic en Visual Studio seleccionando el menú Herramientas , luego Extensiones y actualizaciones …. En el cuadro de diálogo Extensiones y actualizaciones, seleccione Online . En el cuadro de búsqueda situado en la esquina superior derecha del cuadro de diálogo, escriba Ionic 2 . Seleccione la opción Ionic 2 Templates en la lista. Haga clic en el botón Descargar para iniciar la instalación.              De Como Obtener las Plantillas jónico                                 Los archivos de plantilla se descargarán, a continuación, Visual Studio iniciará automáticamente el proceso de instalación. Cuando se le solicite, haga clic en el botón Instalar para comenzar la instalación.                     Instalación de las Plantillas de Ionic
Nota:Las plantillas Ionic no pueden aparecer en Visual Studio hasta que se reinicie. Cierre y vuelva a abrir Visual Studio antes de continuar.

Creación de un proyecto Ionic en Visual Studio

  1. Crear un nuevo proyecto Ionic. Abra el menú Archivo , seleccione Nuevo y luego Proyecto . En el cuadro de diálogo del nuevo proyecto, expanda la sección de plantillas de TypeScript y, a continuación, seleccione Apache Cordova Apps . Ionic ofrece tres estilos de aplicación por defecto (otras plantillas están disponibles en línea): Blank , Sidemenu y Tabs ; Esto es un proyecto simple, así que selecciona la plantilla en blanco .Asigne al nuevo proyecto un nombre y una ubicación y, a continuación, haga clic en el botón Aceptar . Esta aplicación se convertirá más tarde en nuestro proyecto de aplicación meteorológica, por lo que probablemente debería llamarla aplicación meteorológica o aplicación meteorológica Ionic 2 para guardar el trabajo más tarde.Cuadro de Diálogo Nuevo Proyecto
  2. Compruebe el archivo Readme del nuevo proyecto de Ionic para cualquier herramienta adicional que se debe instalar para utilizar la plantilla.Nodo de dependencias                                                           En el momento de escribir este post, solo necesitará instalar la extensión NPM Task Runner .Los requisitos pueden cambiar a medida que se realizan actualizaciones a las plantillas. Para instalar las extensiones necesarias, abra el menú Herramientasy seleccione Extensiones y actualizaciones . Utilice la búsqueda para localizar e instalar las extensiones requeridas.
  3. Ionic es un marco pesado, que requiere una gran cantidad de herramientas y bibliotecas para operar. Una vez que Visual Studio crea el nuevo proyecto, inicia un proceso para descargar e instalar los componentes necesarios mediante Node Package Manager (npm). Espere unos minutos mientras se instalan los paquetes ncm de Ionic.
    Nota :Este proceso tomará varios minutos dependiendo del sistema y las velocidades de conexión a Internet.

    Para comprobar el progreso, abra el Explorador de soluciones y busque el nodo Dependencias . Debería ver Restaurar … si no lo hace, expanda el nodo Dependencias en el Administrador de soluciones y, a continuación, haga clic con el botón derecho en la carpeta npm y seleccione Restaurar paquetes .

    Nodo de dependencias del Explorador de soluciones

    Puede supervisar el proceso de instalación del paquete a través de la ventana de resultados de Visual Studio. Abra el menú Ver , luego seleccione Salida o utilice el método abreviado de teclado Ctrl-W + O :

    Corredor de tareas

  4. En este punto, usted tiene un proyecto de aplicación Ionic completo listo para funcionar. Para probar y depurar la aplicación en Visual Studio, seleccione una plataforma de destino en la Barra de herramientas estándar, seleccione un dispositivo de destino y pres F5 para ejecutar la aplicación en el destino seleccionado. El desarrollo de aplicaciones iOS requiere alguna configuración adicional                                                                                Aplicación JONICA Que se ejecuta en Android

Creación de la aplicación de tiempo

Ahora, vamos a hacer algo con esta aplicación que creaste. Usted tomará el proyecto de aplicación en blanco y lo convertirá en la aplicación de tiempo mostrada anteriormente. En las siguientes secciones, comenzará agregando una página de Condiciones actuales , luego conectará en un cuadro de búsqueda y, finalmente, agregará un área para mostrar los datos de pronóstico . Empecemos.

La aplicación utiliza el servicio gratuito OpenWeatherMap para recuperar las condiciones meteorológicas de una ubicación. Antes de poder utilizar el servicio, debe configurar una cuenta y solicitar una clave de API para su API Condiciones actuales.Apunte su navegador a OpenWeatherMap y configure una cuenta. Una vez que tenga un inicio de sesión válido, vaya a la página API del servicio y suscríbase al servicio de datos Tiempo actual y, a continuación, genere una clave de API.

Nota :Anote la clave de la API como lo necesitará más adelante en el código TypeScript de la aplicación.

Configuración del proyecto de aplicación

  1. Comience configurando algunas opciones de configuración para la aplicación.En Visual Studio Solution Explorer, haga doble clic en el archivo config.xmldel proyecto. Visual Studio abrirá un editor personalizado como el que se muestra en la siguiente figura:Modificación del archivo Config.xml de la Aplicación                          Como mínimo, establezca los valores de nombre de pantalla y nombre de paquete del proyecto; Puede que también desee actualizar los campos AutorDescripción .
  2. De forma predeterminada, la aplicación muestra datos meteorológicos basados ​​en la ubicación actual del dispositivo, por lo que necesitaremos utilizar el complemento Cordova Geolocation para añadir esta capacidad a nuestra aplicación. Puede utilizar las capacidades de geolocalización incorporadas del navegador, pero Cordova y Ionic proporcionan capacidades especiales que hacen que el uso de la geolocalización en una aplicación de Ionic sea un poco más fácil.Cambie a la pestaña Plugins del editor y seleccione el complemento Geolocation en la lista. Haga clic en el botón Agregar para agregar el complemento al proyecto.Añadiendo el plugin de Geolocalización de Córdova                 Presione la tecla Ctrl + S del teclado para guardar sus cambios, luego cierre el archivo del editor.
  3. Abra el archivo src\index.html del proyecto y cambie el título de la aplicación. Esto no es un paso obligatorio, pero si más tarde prueba la aplicación en el navegador, el título de la aplicación será correcto.
    <title>Weather App Ionic</title>

Generación de un proveedor de tiempo

Ahora, vamos a empezar a trabajar en el código de la aplicación. Por convención, las aplicaciones iónicas segregan fuentes de datos de otros tipos de código de aplicación utilizando un tipo de componente Proveedores especial. Dado que los datos meteorológicos provienen de una fuente externa y no queremos que el código de la aplicación llame directamente al servicio, haremos un proveedor de tiempo y pondremos allí todo el código de acceso a la aplicación.

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta src del proyecto y seleccione Agregar -> Nueva carpeta . Asigne un nombre a los providers carpetas y presione la tecla Intro . Esto crea una carpeta para todos los proveedores que usará la aplicación (solo tendremos una, pero muchas aplicaciones de Ionic tendrán varias).
  2. Haga clic con el botón derecho en la nueva carpeta de providers y seleccione Agregar -> Nuevo elemento . En el cuadro de diálogo que aparece, seleccione Ionic 2 Provider y, en el campo Name , escriba Weather.De Como para contactar el Proveedor de Servicios meteorológicos                                   La CLI de Ionic creará el proveedor en src\providers\Weather.ts
  3. Ahora que usted tiene el proveedor de Weather , usted tiene que decir Ionic sobre él. Abra el archivo src\app\app.module.ts del proyecto y agregue la línea siguiente a la sección de importaciones en la parte superior del archivo:
    import { WeatherProvider } from '../providers/weather';
  4. A continuación, agregue una referencia al proveedor de clima en la matriz de providers del archivo:
    providers: [WeatherProvider, {provide: ErrorHandler, useClass: IonicErrorHandler}]

    Guarde los cambios antes de continuar.

Codificación del proveedor de tiempo

En esta sección, agregaremos código al Proveedor de tiempo para conectarse con la API meteorológica externa y entregar datos a la aplicación.

  1. Abra el archivo src\providers\Weather.ts recién creado y modifique la importación @angular/http en la parte superior del archivo para que se vea como sigue:
    import { Http, Response } from [email protected]/http';

    El componente HTTP se carga por defecto en cualquier proveedor, lo que está haciendo aquí es añadir el componente de respuesta que usaremos en el código del proveedor más adelante.

  2. Aún en la parte superior del archivo, agregue una importación que cargue el módulo toPromise :
    import 'rxjs/add/operator/toPromise';

    Cuando haya terminado, la sección de importaciones en la parte superior del archivo se verá así:

    import { Injectable } from [email protected]/core'; import { Http, Response } from [email protected]/http'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise';
  3. En la parte superior de la clase Weather , agregue las siguientes declaraciones de variables:
    private weatherEndpoint = 'http://api.openweathermap.org/data/2.5/'; private weatherKey = '';

    weatherKey variable weatherKey con la clave API que obtuvo anteriormente del servicio meteorológico.

  4. Después del constructor de la clase de weather , agregue el código siguiente:
    getCurrent(loc: any): Promise<any> { let url: string = this.makeDataURL(loc, 'weather'); return this.http.get(url) .toPromise() .then(this.extractData) .catch(this.handleError); } private makeDataURL(loc: any, command: string): string { //Build a weather service URL using the command string and //location data that we have. let uri = this.weatherEndpoint + command; //Do we have a location? if (loc.long) { //then use the 'grographical coordinates' version of the API uri += '?lat=' + loc.lat + '&lon=' + loc.long; } else { //Otherwise, use the zip code uri += '?zip=' + loc.zip; } //Configure output for imperial (English) measurements uri += '&units=imperial'; //Use the following instead for metric //uri += '&units=metric'; //Append the API Key to the end of the URI uri += '&APPID=' + this.weatherKey; //Return the value return uri; } //'Borrowed' from //https://angular.io/docs/ts/latest/guide/server-communication.html private extractData(res: Response) { //Convert the response to JSON format let body = res.json(); //Return the data (or nothing) return body || {}; } //'Borrowed' from //https://angular.io/docs/ts/latest/guide/server-communication.html private handleError(res: Response | any) { console.error('Entering handleError'); console.dir(res); return Promise.reject(res.message || res); }

    Al iniciar, la aplicación pasa la ubicación actual (longitud y latitud) a la función getCurrent . Al buscar una ubicación utilizando un código postal de Estados Unidos, se pasa el código postal en su lugar. getCurrent llama a la API apropiada para obtener los datos meteorológicos actuales, pero usa makeDataURL para dar formato a la URL de la solicitud correctamente dependiendo de si tiene una ubicación o un valor de código postal.

    La función extractData formatea los datos devueltos por la llamada API como JSON. Este código podría ser fácilmente incluido directamente en el método getCurrent , pero como verás más adelante, este código se utiliza más de una vez por la aplicación, por lo que tenía sentido para mover una función separada.

Crear la página Condiciones actuales

  1. Abra el archivo src\pages\home\home.html y reemplace el contenido del archivo por lo siguiente:
    <ion-header> <ion-toolbar> <ion-buttons right> <button ion-button (click)="refreshPage()"> <ion-icon name="refresh"></ion-icon> </button> </ion-buttons> <ion-title> Weather App (Ionic 2) </ion-title> </ion-toolbar> </ion-header> <ion-content padding> <ion-list no-lines> <!--show this if there are no items in the list--> <ion-item [hidden]="c_items.length > 0"> <p><strong>Weather data is not available</strong></p> </ion-item> <!--Display the current conditions data we have --> <ion-item *ngFor="let c_item of c_items"> <p><strong>{{c_item.name}}:</strong> {{c_item.value}}</p> </ion-item> </ion-list> </ion-content> <ion-footer> <ion-toolbar> <ion-title>Visual Studio Tools for Apache Cordova</ion-title> </ion-toolbar> </ion-footer>

    Lo que se ve en el archivo es referencias a componentes iónicos, así como algunos códigos Angulares también. Este marcado es un subconjunto del HTML de la página, el resto se encuentra en los archivos src\index.html y src\app\app.html . En la puesta en marcha, el marco iónico reemplaza el contenido de la etiqueta <ion-app></ion-app> del archivo src\index.htmlarchivo src\app\app.html <ion-nav [root]="rootPage"></ion-nav>continuación, pasa contenido HTML dentro y fuera de esa etiqueta como el usuario utiliza la aplicación. En este caso, cuando la aplicación se inicia, el contenido de la página src\pages\home\home.html se analiza y procesa.

    El encabezado contiene una barra de herramientas que muestra el título de la aplicación y un botón de actualización que el usuario puede tocar para actualizar los datos meteorológicos que se muestran en la página.

    La etiqueta de ion-content define la parte del contenido que comprende el contenido dinámico de la página. En este ejemplo, muestra una <ion-list>de elementos; Básicamente un listview. En este caso, procesa el contenido de la matriz c_items como una lista usando una directiva Angular: *ngFor="let c_item of c_items" que se *ngFor="let c_item of c_items"través de cada elemento de la matriz. A medida que el código loops, asigna cada elemento de la matriz a c_item , entonces el código de plantilla que sigue muestra las propiedades de name y value del objeto c_item . Verá cómo la matriz c_items se rellenará pronto.

  2. Abra el archivo src\pages\home\home.ts del proyecto. En la parte superior del archivo, añada las importaciones para el complemento Geolocalización y el proveedor de clima:
    import { Geolocation, Keyboard } from 'ionic-native'; import { WeatherProvider } from '../../providers/weather';
  3. También en la parte superior del archivo, modifique la importación ionic-angular por lo que se ve así:
    import { AlertController, LoadingController, NavController, Platform } from 'ionic-angular';

    Esto carga algunos componentes adicionales usados ​​por el código de la página:

    • AlertController gestiona la visualización de diálogos de alerta.
    • LoadingController gestiona la visualización de una hiladora de carga.
    • NavController gestiona la navegación entre las páginas.
    • Platform proporciona utilidades relacionadas con la plataforma.
  4. Dentro de la clase HomePage , agregue las siguientes declaraciones de variables:
    degreeStr: string = ' degrees (F)'; //an empty object (for now) to store our location data passed to the API currentLoc: any = {}; //current weather items array c_items: Array<any> = [];
  5. Agregue los siguientes parámetros al constructor de clase HomePage :
    public alertController: AlertController, public loadingCtrl: LoadingController, public platform: Platform, public weather: WeatherProvider,

    Cuando haya terminado, debería verse así:

    constructor( public alertController: AlertController, public loadingCtrl: LoadingController, public nav: NavController, public platform: Platform, public weather: WeatherProvider ) { }
  6. Reemplace la función openLink en el cuerpo de la clase HomePage con lo siguiente (la función openLink es parte de la plantilla en blanco iónica y no es utilizada por la aplicación Weather):
    ionViewDidLoad() { //Once the main view loads //and after the platform is ready... this.platform.ready().then(() => { //Setup a resume event listener document.addEventListener('resume', () => { //Get the local weather when the app resumes this.getLocalWeather(); }); //Populate the form with the current location data this.getLocalWeather(); }); } refreshPage() { this.showCurrent(); } getLocalWeather() { let locOptions = { 'maximumAge': 3000, 'timeout': 5000, 'enableHighAccuracy': true }; Geolocation.getCurrentPosition(locOptions).then(pos => { //Store our location object for later use this.currentLoc = { 'lat': pos.coords.latitude, 'long': pos.coords.longitude }; //and ask for the weather for the current location this.showCurrent(); }).catch(e => { console.error('Unable to determine current location'); if (e) { console.log('%s: %s', e.code, e.message); console.dir(e); } }) } showCurrent() { //clear out the previous array contents this.c_items = []; //Create the loading indicator let loader = this.loadingCtrl.create({ content: "Retrieving current conditions..." }); //Show the loading indicator loader.present(); this.weather.getCurrent(this.currentLoc).then( data => { //Hide the loading indicator loader.dismiss(); //Now, populate the array with data from the weather service if (data) { //We have data, so lets do something with it this.c_items = this.formatWeatherData(data); } else { //This really should never happen console.error('Error retrieving weather data: Data object is empty'); } }, error => { //Hide the loading indicator loader.dismiss(); console.error('Error retrieving weather data'); console.dir(error); this.showAlert(error); } ); } private formatWeatherData(data): any { //create a blank array to hold our results let tmpArray = []; //Add the weather data values to the array if (data.name) { //Location name will only be available for current conditions tmpArray.push({ 'name': 'Location', 'value': data.name }); } tmpArray.push({ 'name': 'Temperature', 'value': data.main.temp + this.degreeStr }); tmpArray.push({ 'name': 'Low', 'value': data.main.temp_min + this.degreeStr }); tmpArray.push({ 'name': 'High', 'value': data.main.temp_max + this.degreeStr }); tmpArray.push({ 'name': 'Humidity', 'value': data.main.humidity + '%' }); tmpArray.push({ 'name': 'Pressure', 'value': data.main.pressure + ' hPa' }); tmpArray.push({ 'name': 'Wind', 'value': data.wind.speed + ' mph' }); //Do we have visibility data? if (data.visibility) { tmpArray.push({ 'name': 'Visibility', 'value': data.visibility + ' meters' }); } //do we have sunrise/sunset data? if (data.sys.sunrise) { var sunriseDate = new Date(data.sys.sunrise * 1000); tmpArray.push({ 'name': 'Sunrise', 'value': sunriseDate.toLocaleTimeString() }); } if (data.sys.sunset) { var sunsetDate = new Date(data.sys.sunset * 1000); tmpArray.push({ 'name': 'Sunset', 'value': sunsetDate.toLocaleTimeString() }); } //Do we have a coordinates object? only if we passed it in on startup if (data.coord) { //Then grab long and lat tmpArray.push({ 'name': 'Latitude', 'value': data.coord.lat }); tmpArray.push({ 'name': 'Longitude', 'value': data.coord.lon }); } //Return the new array to the calling function return tmpArray; } showAlert(message: string) { let alert = this.alertController.create({ title: 'Error', subTitle: 'Source: Weather Service', message: message, buttons: [{ text: 'Sorry' }] }); alert.present(); }

    Hay un montón de código allí; Tomar unos minutos y estudiarlo. Esto es lo que hace:

    • ionViewDidLoad : ionViewDidLoad un evento que se ionViewDidLoad cuando la página finaliza la carga. En este caso, la función llama a la función getLocalWeather para iniciar el proceso de obtención de datos meteorológicos para la ubicación actual del dispositivo. Utiliza las capacidades del componente Platform para asegurarse de que no hace nada hasta que es seguro que el contenedor de aplicación nativo y el marco Ionic han finalizado la inicialización.
    • refreshPage : se ejecuta cuando el usuario de la aplicación hace clic en el botón Actualizar de la barra de herramientas. Aquí, actualiza los datos meteorológicos actuales en la página. Esta función obtiene más responsabilidades más adelante.
    • getLocalWeather – Determina la ubicación actual del dispositivo (usando el complemento Cordova Geolocation), luego llama a showCurrent para obtener los datos meteorológicos actuales.
    • showCurrent – Muestra el indicador de carga y luego llama al proveedor de tiempo para obtener datos meteorológicos para la ubicación especificada (ya sea una geolocalización o, posteriormente, un código postal).
    • formatWeatherData – Los resultados que obtiene la aplicación de la API meteorológica dependen de si la aplicación solicita las condiciones actuales o la previsión. No estamos pidiendo datos de pronóstico (todavía) pero, pero más tarde. Esta función construye un objeto de datos meteorológicos a partir de los resultados y tiene un código especial que construye el objeto apropiado en función de si se trata de condiciones actuales o de un pronóstico.
    • showAlert : muestra un cuadro de diálogo de error si se rompe algo.

Ejecute la aplicación en el navegador, un emulador, un simulador o un dispositivo físico conectado al ordenador. Si ejecuta la aplicación en el navegador, utilizando las capacidades de Cordova Simulate de Visual Studio 2017, puede ajustar las coordenadas del dispositivo simulado mediante el panel Geolocation;  Cuando se cargue la aplicación, se le solicitará que autorice el acceso de la aplicación a la ubicación actual del dispositivo, como se muestra a continuación:

Autorización de Geolocalización de Android

Cuando permite el acceso (no toque negar , ya que no podrá hacer mucho con la aplicación si lo hace), debería ver los datos meteorológicos actuales de la ubicación actual como se muestra en la siguiente figura:

Aplicación del tiempo: las Condiciones Actuales del tiempo

No es la aplicación completa de interfaz de usuario, pero al menos se pueden ver los resultados del tiempo. En la siguiente sección, agregamos el cuadro de búsqueda de código postal para que pueda obtener datos meteorológicos para una ubicación específica.

Nota :Si obtienes una pantalla en blanco cuando se inicia la aplicación, asegúrate de haber agregado el complemento Corolle Geolocation al proyecto.

Es útil disponer de datos meteorológicos para la ubicación actual, pero ¿qué pasa si viajas a algún lugar y quieres saber cómo será el tiempo cuando llegues? En esta sección, agregará un cuadro de búsqueda que los usuarios pueden utilizar para obtener datos meteorológicos para un código postal específico de los Estados Unidos.

Nota:El uso del código postal como criterio de búsqueda no funcionará fuera de los Estados Unidos; Si desea utilizar el nombre de la ciudad en su lugar, puede realizar pequeños ajustes a la llamada API del clima para cambiar la forma en que busca la API. Echa un vistazo a los documentos de la API para obtener más información.
  1. Abra el archivo src\pages\home\home.html del proyecto. Dentro del comienzo de la sección <ion-content> , justo antes de la etiqueta <ion-list> , añada la siguiente marca:
     <form (ngSubmit)="setZipCode()"> <ion-item> <ion-label>Type your zip code:</ion-label> <ion-input type="text" [(ngModel)]="searchInput" name="ZipCode"></ion-input> </ion-item> <button ion-button icon-left block> <ion-icon name="search"></ion-icon> Find Weather </button> </form>

    Esto agrega el campo de búsqueda en la parte superior de la página y dirige que la función setZipCode se ejecute cuando el usuario hace clic en el botón Buscar tiempo . La referencia a ngModel indica a Ionic (en realidad Angular) que asigna el valor en el campo de búsqueda a la variable searchInput la aplicación que verá en un segundo.

  2. Abra el archivo src\pages\home\home.ts del proyecto y agregue la siguiente declaración de variable a la parte superior de la clase HomePage (antes del constructor ):
    //Mapped to the search field searchInput: string = '';

    Esto define la variable que se rellenará automáticamente con cualquier cadena que el usuario agregue al campo de búsqueda.

  3. Finalmente, aún en el archivo src\pages\home\home.ts del proyecto, agregue la siguiente función a la clase HomePage :
    setZipCode() { //whenever the user enters a zip code, replace the current location //with the entered value, then show current weather for the selected //location. //Hide the keyboard if it's open, just in case Keyboard.close(); //Populate the currentLoc variable with the city name this.currentLoc = { 'zip': this.searchInput }; //Clear the Zip Code input field this.searchInput = ''; //get the weather for the specified city this.showCurrent(); }

    Esta función responde al usuario pulsando el botón Buscar tiempo y crea un objeto de ubicación y luego llama a la función showCurrent para recuperar los datos meteorológicos del código postal especificado. El código Keyboard.close() utiliza el complemento Ionic Keyboard para ocultar el teclado antes de iniciar la búsqueda. Si el código no lo hace, es posible que el teclado permanezca abierto, bloqueando parte de la página, a medida que la página se actualiza con los nuevos datos meteorológicos.

Cuando ejecute la aplicación, debería ver un campo de búsqueda en la parte superior de la página. Introduzca un código postal de los Estados Unidos y toque el botón para obtener datos meteorológicos para la ubicación especificada.

Aplicación del tiempo: las Condiciones Actuales del tiempo

Agregar una página de previsión meteorológica

La API de tiempo que la aplicación utiliza tiene una API para recuperar datos de pronóstico, así que permite mostrarlo también en la aplicación. Puede agregar otra página a la aplicación, a continuación, utilice un menú u otro método de navegación para cambiar entre vistas, pero el campo de búsqueda complica ese enfoque. En su lugar, utilizaremos un componente de segmento ionic  para dividir la página existente en dos partes: una para las condiciones actuales y otra para el pronóstico.

  1. Comience por actualizar el proveedor de clima para apoyar la obtención del pronóstico del servicio meteorológico. Abra el archivo src\providers\weather.ts del proyecto y agregue el código siguiente a la clase Weather .
    getForecast(loc: any): Promise<any> { let url: string = this.makeDataURL(loc, 'forecast'); return this.http.get(url) .toPromise() .then(this.extractData) .catch(this.handleError); }

    Para obtener el pronóstico, todo lo que el proveedor tiene que hacer es reemplazar el weather con la forecast en la URL de la API, de lo contrario el código es exactamente el mismo.

  2. A continuación, abra el archivo src\pages\home\home.html del proyecto.Eliminar la implementación actual <ion-list> :
    <ion-list no-lines> <!--show this if there are no items in the list--> <ion-item [hidden]="c_items.length > 0"> <p><strong>Weather data is not available</strong></p> </ion-item> <!--Display the current conditions data we have --> <ion-item *ngFor="let c_item of c_items"> <p><strong>{{c_item.name}}:</strong> {{c_item.value}}</p> </ion-item> </ion-list>

    Y reemplácelas por las siguientes:

    <ion-segment [(ngModel)]="displayMode"> <ion-segment-button value="current" (ionSelect)="showCurrent()"> Current </ion-segment-button> <ion-segment-button value="forecast" (ionSelect)="showForecast()"> Forecast </ion-segment-button> </ion-segment>

    0″>Weather data is not available

    {{c_item.name}}: {{c_item.value}}

    {{ f_items.length ? ‘Tap an item to view the forecast for the selected period.’: ‘Forecast data is not available at this time.’ }} {{item.period}}

     

    Esto agrega un segmento a la página usando el componente <ion-segment>y define dos segmentos: current y forecast . El atributo <div> con el [ngSwitch]="displayMode" intercambia en componentes separados <ion-list> basados ​​en el valor asignado a la variable displayMode la página.

  3. Ahora vamos a añadir el código TypeScript que hacen que todo esto funcione. Abra el archivo src\pages\home\home.ts del proyecto y agregue las siguientes declaraciones de variables a la parte superior de la clase HomePage.
    //This is used to set the Ionic Segment to the first segment currentMode: string = 'current'; // used to control which segment is displayed displayMode: string = this.currentMode; //holds forecast data, a separate row for each period f_items: Array<any> = []; //array of day strings used when displaying forecast data days: Array<string> = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  4. Cuando la página se cargue, queremos que la aplicación muestre las condiciones actuales de forma predeterminada, por lo que agregue el siguiente código a la función onViewDidLoad :
    //Switch to the Current segment this.displayMode = this.currentMode

    Esto establece this.displayMode a current . Agregue el código al oyente de sucesos de resume , el código resultante debería tener este aspecto:

    document.addEventListener('resume', () => { //Get the local weather when the app resumes //Switch to the Current segment this.displayMode = this.currentMode //then update it with local weather conditions this.getLocalWeather(); });
  5. Ahora que la página muestra dos segmentos, la función refreshPagenecesita saber qué parte de la página debe actualizarse. Reemplace la función actual refreshPage con el código siguiente:
    refreshPage() { //Which page are we looking at now? if (this.displayMode === this.currentMode) { this.showCurrent(); } else { this.showForecast(); } }
  6. La función setZipCode carga por defecto a las condiciones actuales de carga cuando se introduce un código postal, por lo que debe cambiar a la pestaña Actual antes de obtener resultados. Agregue las siguientes líneas a la función antes de la llamada a this.showCurrent() :
    //Switch to the 'current' tab this.displayMode = this.currentMode;

    La función completa debería tener este aspecto:

    setZipCode() { //whenever the user enters a zip code, replace the current location //with the entered value, then show current weather for the selected //location. //Hide the keyboard if it's open, just in case Keyboard.close(); //Populate the currentLoc variable with the city name this.currentLoc = { 'zip': this.searchInput }; //Clear the Zip Code input field this.searchInput = ''; //Switch to the 'current' tab this.displayMode = this.currentMode; //get the weather for the specified city this.showCurrent(); }
  7. Por último, agregue la función showForecast a la clase HomePage :
    showForecast() { //clear out the previous array contents this.f_items = []; //Create the loading indicator let loader = this.loadingCtrl.create({ content: "Retrieving forecast..." }); //Show the loading indicator loader.present(); this.weather.getForecast(this.currentLoc).then( data => { //Hide the loading indicator loader.dismiss(); //Now, populate the array with data from the weather service //Do we have some data? if (data) { //Then lets build the results array we need //Process each forecast period in the array for (let period of data.list) { //Create a 'record' consisting of a time period's results let weatherValues: any = this.formatWeatherData(period); //Append this, along with the time period information, into the forecast //items array. //Get the forecast date as a date object let d = new Date(period.dt_txt); //Determe the day of the week let day = this.days[d.getDay()]; //And the time let tm = d.toLocaleTimeString(); //Create a new object in the results array for this period this.f_items.push({ 'period': day + ' at ' + tm, 'values': weatherValues }); } } else { //This really should never happen console.error('Error displaying weather data: Data object is empty'); } }, error => { //Hide the loading indicator loader.dismiss(); console.error("Error retrieving weather data"); console.dir(error); this.showAlert(error); } ); }

    Esta función obtiene los datos de pronóstico, luego los formatea para mostrarlo en dos páginas. En primer lugar, se construye una serie de períodos de tiempo que representan los diferentes períodos de pronóstico. Luego, para cada período, agrega un objeto que contiene los datos de pronóstico para ese período. El segmento de pronóstico de la página muestra la lista de períodos de pronóstico y, al pulsar en una entrada, la aplicación eventualmente (verá cómo en la siguiente sección) abre una página separada para mostrar los detalles.

En este punto, si ejecuta la aplicación, debería ver lo siguiente:

Aplicación de Tiempo Acabado

Toque la pestaña de pronóstico y verá la lista de períodos de previsión que se muestra en la siguiente figura:

Aplicación de Tiempo Acabado

Cuando pulsa en un elemento de pronóstico, no pasa nada (por ahora); Que es porque necesitamos una página para mostrar los datos, y no ha agregado uno todavía.

Cómo añadir una página de detalles del tiempo

  1. Para agregar una nueva página a la aplicación, en el Explorador de soluciones, haga clic con el botón secundario en la carpeta src\pages , seleccione Agregar -> Nuevo elemento …. En la lista de opciones que aparece, seleccione Ionic 2 Page , dale un nombre de WeatherDetail y WeatherDetail clic en el botón Add .Una Página para contactar a la Aplicación                                                                 Visual Studio creará una nueva carpeta denominada WeatherDetail en src\pages\ y la rellenará con los archivos de origen de la nueva página: weather-detail.ts , weather-detail.html y weather-detail.scss .Explorador de soluciones con La Página WeatherDetail
  2. Como cuando agregó un proveedor de la aplicación, cuando se agrega una página, es necesario actualizar la configuración de la aplicación para utilizarlo. Abra el proyecto de src\app\app.module.tsarchivo y agregue la siguiente importinstrucción al principio del archivo:
    import { WeatherDetailPage } from '../pages/weatherdetail/weatherdetail';
  3. A continuación, agregue una referencia al WeatherDetailPagecomponente al declarationsentryComponentsmatrices como se muestra a continuación:
    @NgModule({ declarations: [ MyApp, HomePage, WeatherDetailPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, WeatherDetailPage ], providers: [Weather, { provide: ErrorHandler, useClass: IonicErrorHandler }] }) export class AppModule { }
  4. Abrir el proyecto de src\pages\weatherdetail\weatherdetail.htmly reemplazar su contenido con el siguiente marcado:
    <ion-header> <ion-navbar> <ion-title>Forecast</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <!--show this if there are no items in the list--> <ion-item [hidden]="forecast.values.length > 0"> <p><strong>Weather data is not available</strong></p> </ion-item> <ion-item [hidden]="forecast.values.length < 1"> Period: {{forecast.period}} </ion-item> <ion-item *ngFor="let item of forecast.values"> <p><strong>{{item.name}}:</strong> {{item.value}}</p> </ion-item> </ion-list> </ion-content> <ion-footer> <ion-toolbar> <ion-title>Visual Studio Tools for Apache Cordova</ion-title> </ion-toolbar> </ion-footer>

    Esto crea una página que muestra el elemento de predicción seleccionado como una lista de namevaluelos valores.

  5. Abra el proyecto de src\pages\weatherdetail\weatherdetail.tsarchivo y reemplazar su contenido con el siguiente código:
    import { Component } from [email protected]/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-weather-detail', templateUrl: 'weatherdetail.html' }) export class WeatherDetailPage { forecast: any; constructor(public navCtrl: NavController, public navParams: NavParams) { //Pull the selected forecast off of navParams this.forecast = this.navParams.get('forecast'); } ionViewDidLoad() { console.log('Weather Detail page loaded'); } }

    Observe que no hay ningún código real en la página, que se debe a la plantilla HTML se encarga de hacer que el Ionic de datos y se encarga de la página de navegación automáticamente. Los tres cambios importantes son:

    • La adición de un NavParamscomponente a la página, que es responsable de transmitir datos entre páginas.
    • La adición de una forecastvariable:
      forecast: any;

      Esta variable es el almacenamiento para el objeto de previsión pasa a la página cuando se abre. Contiene los datos correspondientes al período de predicción actual. La página HTML referencias esta variable como la fuente de los datos que hace que en la página.

    • La adición de una sola línea de código al constructor:
      this.forecast = this.navParams.get('forecast');

      Esto asigna el local de this.forecastobjeto para los datos pasados en el forecastobjeto envía a través del NavParamscomponente

  6. Ahora tenemos que decirle al forecastsegmento de la forma de abrir la página de detalles de pronóstico cuando el usuario pulsa sobre un elemento de la lista. Abrir el proyecto de src\pages\home\home.tsy agregue la siguiente importinstrucción al principio del archivo:
    import { WeatherDetailPage } from '../weatherdetail/weatherdetail';
  7. Todavía en src\pages\home\home.ts, agregue la viewForecastfunción para la clase:
    viewForecast(item) { //When the user selects one of the Forecast periods, //open up the details page for the selected period. this.nav.push(WeatherDetailPage, { 'forecast': item }); }

    HTML de la página ya tiene una referencia a esta función:

    <button detail-push ion-item *ngFor="let item of f_items" (click)="viewForecast(item)"> <ion-icon name="time" item-left></ion-icon> {{item.period}} </button>

Al ejecutar la aplicación ahora, usted debería ser capaz de abrir la previsión de un toque en uno de los períodos de predicción de la lista:

Aplicación página del tiempo Pronóstico

La navegación de la página es manejada por  Ionic y angular, estos  se encargan de añadir la flecha hacia atrás en la esquina izquierda de la barra de herramientas y el cierre de la página cuando se ha intervenido.

¡Eso es! Usted ha completado la Aplicación.

 

Fuente ;https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/first-steps/get-started-with-ionic2