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 '@angular/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 '@angular/core'; import { Http, Response } from '@angular/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 '@angular/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

 

 

 

Anuncios

IoT con LattePanda


Muy resumidamente LattePanda es un un mini ordenador completo con Arduino integrado   que ejecuta la versión completa de Windows 10. Incluye todo lo que un PC normal tiene  pudiendo hacer cualquier cosa que hace un PC normal. Es ademas compatible con casi todos los aparatos que conoce como  impresoras, joysticks, cámaras y más. Todos los periféricos que funcionan en su PC funcionaran en LattePanda.

Ademas LattePanda viene pre-instalado con una edición completa  pre-activada de Windows 10.


Utilizando las API existentes, puede desarrollar sus propios proyectos de software y hardware en LattePanda como lo haría en un PC normal usando  C #, JavaScript, Ruby y así sucesivamente de modo que no necesita su ordenador portátil  para construir una aplicación con el

Pero no sólo puede ser utilizado como un ordenador normal de bajo costo con  Windows pues LattePanda también está diseñado con un compatible co-procesador Arduino, lo que significa que se puede utilizar para controlar y detectar el mundo físico, al igual que una placa Arduino!

Si usted es un desarrollador de Windows, un desarrollador de la IO, un fanático de hardware de bricolaje, diseñador interactivo, robótica genio o un fabricante, LattePanda puede ayudar a su proceso creativo con los proyectos informáticos físicos!

LattePanda puede ejecutar la versión completa de Windows 10 y Ubuntu.

ESPECIFICACIÓNES

  • Procesador: 1,8 GHz Intel Cherry Trail Z8300 Quad Core
  • Funcionamiento del sistema: Pre-instalado preactivado completa edición de Windows 10 (versión Inicio)
  • Ram: 2 / 4GB DDR3L
  • Capacidad de almacenamiento: 32 / 64GB
  • USB: 1 x USB 3.0, USB 2.0 x 2
  • HDMI de salida de vídeo y el puerto Ethernet
  • 3,5 mm de salida de audio jack
  • Ranura para tarjeta Micro SD
  • Toque y Conector de pantalla
  • Plug and Play Conectores de sensor
  • WiFi y Bluetooth 4.0
  • Coprocesador: ATmega32u4
  • GPIO: 2 GPIO de chips Intel, 20 GPIO para Arduino
  • Potencia: 5v / 2A
  • Dimensiones: 3.46 “x2.76”
  • Peso: 100 g

 Pines

Debajo de cuadros es un diagrama básico que muestra todos los pines del bus de expansión:

LattePanda pines

 

Distribución de los pines en el área U1 se asignan a la base de X-Z8300. Por el momento, no hay información disponible.

Distribución de los pines en el área de U2 se asignan al núcleo ATmega32u4.Cada uno de los 20 pines digitales (A0 – A5, D0 – D13) en la zona de U2 se puede utilizar como una entrada o salida, cada uno operando a 5 voltios. Cada salida puede fijar o recibir 40 mA y cada uno tiene una resistencia de pull-up (desconectada por defecto) de 20-50k ohmios.

Precaución: Superior a 40 mA en cualquier pin de E / S puede causar daños permanentes en el ATmega32u4.

Algunos pines tienen funciones especializadas:

Entradas analógicas: A0 – A5, A6 – A11 (en D4, D6, D8, D9, D10, D12 y). El LattePanda tiene 12 entradas analógicas, etiquetados A0 a A11, todos los cuales también pueden ser utilizados como I / O digital. Cada pin tiene una resolución de 10 bits (es decir, 1024 valores diferentes). Por defecto se miden desde el suelo a 5 voltios.

De serie: D0 (RX) y D1 (TX). Se utiliza para recibir (RX) y transmitir datos en serie (TX) TTL.

Las interrupciones externas: D3 (interrumpir 0), D2 (interrumpir 1), D0 (interrumpir 2), D1 (interrumpir 3) y D7 (interrumpir 4). Estos pines pueden ser configurados para desencadenar una interrupción en un valor bajo, un flanco ascendente o descendente, o un cambio en el valor.

PWM: D3, D5, D6, D9, D10, y D13 proporcionan salida PWM de 8 bits.

SPI: D16 (MOSI), D14 (MISO), D15 (SCK).

LED: D13 Hay un LED integrado impulsado por pin digital 13. Cuando el valor del pin es alto o bajo

TWI: D2 (SDA), D3 (SCL).

Otros pines de la placa:

Reset: Lleva a este BAJA línea para reiniciar el microcontrolador. Normalmente se utiliza para añadir un botón de reinicio para escudos que bloquean la una en la mesa.

¿Cuál es el propósito de este proyecto?

En este ejemplo  vamos a aprender, cómo nos comunicamos entre Arduino (chip de Arduino interna en LattePanda) y Microsoft Visual Studio y envían los datos desde el Arduino para utilizar una aplicación de Windows. Aquí vamos a medir la temperatura y humedad ambiental y enviar los datos del sensor de DHT Thingspeak.

Cómo acceder a la disposición de patillas de Visual Studio

LattePanda.Firmata es una biblioteca de código abierto Firmata proporcionada por LattePanda, que es adecuado para aplicaciones de Windows desarrollado en Visual Studio. Esta clase le permite controlar Arduino GPIO desde aplicaciones de Windows, con funciones que incluyen:

  • La lectura y escritura a los pines digitales
  • La lectura de las entradas analógicas
  • El control de servomotores
  • El envío de datos a los dispositivos y los dispositivos de recepción de formularios de datos a través del bus I2C

Para este proyecto, he hecho algunos cambios en la biblioteca Firmata de datos del sensor DHT leer o cualquier otro sensor.

3 pasos para su proyecto Arduino remoto

  • Descarga e instalación de Visual Studio 2015
  • Configurar el Arduino (Es pre-instalado, a menos que cambiara el programa de Arduino)
  • Crear un proyecto o utilizar el proyecto de ejemplo

Descarga e instalación de Visual Studio 2015

En el primer paso, es necesario instalar Visual Studio en LattePanda. No se instala por defecto.

  • Activar el modo de programador en su sistema operativo, para este fin, vaya a Configuración> Actualización y seguridad> en la sección para desarrolladores> Selección de Modo desarrollador

Estableció el Arduino

  • Descargar este archivo y abra el archivo en Arduino. (Este archivo reemplaza con StandardFirmata . Algunos cambios se han hecho en este archivo)
  • Seleccione Arduino Leonardo del Board sección. A continuación, seleccione el puerto COM correcto, cargar el último boceto.

Cableado

El objetivo de este proyecto es leer los datos de temperatura y humedad por el sensor DHT11 conectado a LattePanda(se puede utilizar en lugar de DHT21 o DHT22).

El sensor  se  debe conectar como en la imagen  siguiente ,es decir el pin de la izquierda (Data) al terminal D7 de LattePanda, el terminal central del sensor al pin +5V de LattePanda  y por ultimo el terminal de la derecha al ping de GND de LattePanda.

 

 

Leer Temperatura y Humedad

Descargar este archivo y abra el archivo con Microsoft Visual Studio.Registrarse en Thingspeak y crear un nuevo canal con dos campos. ( Field 1de la temperatura y Field 2 de la humedad). Después Save Channel , en la API Keys pestaña, copia Key valor y pegar en Program.cs archivo en lugar deTHINGSPEAK_KEY_HERE .

Guardar el archivo y haga clic Start botón. La salida será como se muestra a continuación:

Al final, los datos se pueden ver en el  servidor deThingspeak  apareceran  como se muestra a continuación:

Recursos

Fuente   aqui

¿Qué es NETMF?


NETMF es una plataforma de código abierto, que se convirtió en un proyecto de colaboración de código abierto allá  por  el año 2009, cuya principal virtud es  ampliar  el potencial y la capacidad de adaptación de .NET para el mundo de los dispositivos integrados de modo que programadores de escritorio , también pueden crear aplicaciones que se ejecuten en una amplia gama de sistemas de pequeños dispositivos, como mandos a distancia,  PCs ,servidores en la nube ,etc    todos ellos usando el mismo modelo de programación y herramientas comunes. Así de  este modo ,desarrolladores de sistemas integrados pueden aprovechar las ventajas  de lenguajes de productividad masiva orientados a escritorio y reducir su tiempo de comercialización.

.NET Micro Framework  pues esta diseñado  pues para dispositivos pequeños y por tanto de recursos limitados ofreciendo un entorno completo e innovador de desarrollo y ejecución que trae la productividad de las herramientas informáticas modernas a esta clase de dispositivos,pudiendo utilizarse para construir dispositivos integrados en dispositivos limitados recursos en un microcontrolador con pocos cientos kilobytes de memoria RAM y almacenamiento  como por ejemplo Netduino del que tantas veces hemos tratado en este blog.

Uno de los punto fuertes  respecto a otras plataformas  Open Hardware como Arduino o Raspberry Pi es que los desarrolladores pueden utilizar sus conocimiento de Visual Studio, C# y .net   para escribir rápidamente aplicaciones integradas sin tener que preocuparse por las complejidades de cada microcontrolador, asi que cualquier desarrollador puede comprarse  una placa  compatible con .net, conectar la placa a su equipo de desarrollo con Visual Studio y comenzar a escribir aplicaciones para dispositivos físicos  no  necesitando por tanto amplios conocimientos de diseño de hardware  para empezar a escribir código para dispositivos físicos.

Las  ventajas de NETMF pues son las siguientes:

  • Mejores herramientas  y experiencia para los desarrolladores : al utilizar  tecnologías existentes (c#.net )  y entornos de desarrollo profesionales es evidente que  la experiencia de uso es mucho  mejor que en otros entornos de  desarrollo para crear micro dispositivos inteligentes de depuración.
  • Prototipado rápido :dar vida a sus ideas en horas es fácil (en lugar de días o semanas con otras plataformas) usando por ejemplo los módulos de . net Gadgeteer. Por tanto es una vía rápida y fácil de desarrollar sus invenciones para mostrar a la gente sus diseños creativos.
  • Aprovechamiento de . net y C# : puede usar su  base de conocimientos que ya tenga de C# y. net para hacer dispositivos frescos e innovadoras.

 

Desde el punto de vista del desarrollador ,  trabajar con NETMF tiene dos caras : portarlo al hardware  o  utilizarlo para controlar su hardware . Portarlo  requiere costo considerable , mucho tiempo y mucha experiencia . Una vez hecho esto , podrá usar  NETMF  casi sin esfuerzo .

Usando criterios de calidad y fiabilidad como  directrices principales, otras empresas  como Secrets Labs o GHI  han  enriquecido aún más NETMF con características de valor añadido tales como WiFi, USB servidor y base de datos, lo cual se traduce en soluciones  de bajo riesgo de abandono a un costo mínimo.

benefits

En cuanto al hardware  existen  dos partners de  .NET Micro como son  GHI Electronics y  Secret Labs.

placas

Características fundamentales

NETMF está lleno de características propias de  cualquier lenguaje  moderno,como el soporte de  las siguientes estructuras  y facilidades como son :

  • Arrays
  • Classes
  • Collections — ArrayList, Dictionary, Stack, Queue
  • Cryptography — Encrypting/decrypting, hashing, SSL
  • Displays
  • Dynamic memory management with GC
  • Exceptions
  • File I/O — Files, directories and various storage types.
  • Globalization
  • Graphics — Bitmap, GIF, JPEG, Windows Presentation Foundation (WPF), fonts, touch and gestures.
  • Numerics
  • Power Management
  • Reflection
  • Hardware — Analog Input/Output, Digital Input/Output, I2C, Interrupts, OneWire, PWM, SPI, UART (Serial Port)
  • Math helpers
  • Namespaces
  • Networking — DHCP. DNS. HTTP. Sockets. TCP. UDP. Wireless
  • Runtime Debugging
  • Serialization
  • Strings
  • Text Encoding/Decoding
  • Threading, Events, Delegates, and Timers
  • Time keeping
  • USB Client
  • XML
  • Resources

Hay empresas  como GHI , que ademas construyen sobre las características principales del NETMF anteriormente citadas , extensiones adicionales de valor añadido como pueden ser las siguientes:

  • Configuración de la pantalla y el logotipo de la puesta en marcha
  • E / S – CAN, captura de la señal, generador de señales, I2C Software, USB de almacenamiento masivo
  • En-Campo de actualización
  • PPP
  • Reloj en tiempo real
  • Registro Acceso
  • RLP para cargar código nativo (c / montaje) para los propósitos de velocidad y en tiempo real.
  • Base de datos SQLite
  • USB Client – joystick, teclado, almacenamiento masivo, Ratón
  • USB Host – joystick, teclado, almacenamiento masivo, ratón, USB-Serial, Webcam
  • Perro guardián

.NET Gadgeteer se construye en la parte superior de NETMF para proporcionar una plataforma de desarrollo rápido utilizando placas base y módulos plug-and-play  como sensores .

Supongamos que queremos por ejemplo  hacer una aplicación de registrador de temperatura,  esto requiere una placa base, módulo de tarjeta SD y un  módulo de temperatura. En cuanto al software, ademas también se necesitan  controladores necesarios .

Si contamos  con el hardware ya  preconstruido  y los controladores para estos se incluyen, en el desarrollo de  la nueva aplicación  se reducen significativamente el tiempo de desarrollo.

.NET Gadgeteer es un estándar mantenido por Microsoft para la normalización de las conexiones entre las placas base y módulos. GHI fue  elegido para ser el primer proveedor en ofrecer una tarjeta de .NET Gadgeteer, el FEZ araña. El ecosistema continúa creciendo con más placas base y módulos.

 

Diseñador

Usando el diseñador de .NET Gadgeteer es simple y acelera su diseño.En la pantalla de diseño, se abre la caja de herramientas, arrastrado y soltando los componentes deseados.Haciendo clic y seleccionando “Conectar todos los módulos”  habrá terminado la configuración inicial.

Este proceso  incluye automáticamente todos los archivos DLL necesarios y genera una variable para alcance de cada componente  que le permite centrarse en la escritura de la funcionalidad principal de su diseño sin tener que escribir todo desde el principio ahorrándole tiempo y recursos valiosos.

IntelliSense

Visual Studio de Microsoft incluye una característica denominada IntelliSense. A medida que escribe  su código , IntelliSense entiende lo que podría estar tratando de escribir y muestra cuadros con sugerencias. Es por eso que se envian productos .NET Gadgeteer sin ningún tipo de manuales de programación.

Imaginemos  que esta utilizando un módulo de la cámara:todo lo que necesita hacer es escribir la palabra “rfidReader” y  golpe  el teclado para ver una lista de los métodos admitidos disponibles en los controladores incluidos.

Gadgeteer vs  Arduino Phidgets

¿Cómo se compara Gadgeteer contra otras plataformas de desarrollo?,Si esta interesado puede echar un vistazo  al siguiente vídeo que compara parpadear un LED, el control de un servo con un potenciómetro y un podómetro que muestra los pasos en una matriz de LED todo ello comparando varias plataformas.

 

Fuente   aqui

Evento Developer Tour, ReConnect 2015


Hace un año el evento Connect() Microsoft inició un viaje de un nuevo Microsoft para desarrolladores, presentando  el futuro Open Source de .NET en  entornos no Microsoft,  como pueden ser  Linux y   hasta Mac.

La pieza angular  de este entorno lo constitute el nuevo entorno de desarrollo de Visual Studio, asi como la plataforma renovada  en nube tipo  IaaS constituida por Azure.

En cuanto a  herramientas destaca  una version de Visual Studio para programar en cualquier dispositivo y en cualquier Sistema operativo:  es decir no cerrado exclusivamente   a SO  Windows, lo cual es una autentica  buena noticia  para  todos  los desarrolladores que  usan  plataformas tan distintas  a Windows   como pueden ser Linux o Mac.

reconnect.PNG

Desde Microsoft Ibérica estan ofreciendo una serie de eventos presenciales, de la mano de los mejores profesionales de la comunidad, donde se  puede tener la posibilidad de conocer de primera mano las últimas novedades en desarrollo que se presentaron en el evento Connect de Nueva York.

Entre los contenidos  previstos   destaca el desarrollar sitios web modernos, interactivos y rápidos con ASP.NET, gracias  al uso de las novedades que trae Visual Studio 2015 asi como  conocer Visual Studio Code

Visual Studio Code Beta es la nueva herramienta gratuita de edición de código redefinida y optimizada para la compilación y depuración de aplicaciones web y en la nube modernas,que ademas encontrará es compatible con su plataforma favorita: Linux, OS X y Windows.

Una de las novedades de esta  nueva herramienta es las cobertura de más de 30 lenguajes  por el momento, resaltado de sintaxis y coincidencia de paréntesis. Gracias a la coloración y el resaltado de la sintaxis, así como a la coincidencia de paréntesis, Code es un excelente editor para todas las tareas de programación. Visual Studio Code es compatible con JavaScript, C#, C++, PHP, Java, HTML, R, CSS, SQL, Markdown, TypeScript, LESS, SASS, JSON, XML y Python, así como con muchos otros formatos de archivo comunes.

Tambien con estas sesiones pretenden dar a  conocer  las nuevas características que  ayudarán desplegar    y alojar en la nube de Microsoft  (Microsoft Azure) , que ademas también ha incorporado este año grandes novedades

 

Los eventos previstos  hasta final de año  son los siguientes:

 

Más información y Registro
Málaga, 25 de noviembre de 2015 Evento finalizado
Barcelona 3 de diciembre de 2015 Registro w
Sevilla, 10 de diciembre de 2015 Registro w
Madrid, 11 de diciembre de 2015 Registro w
Zaragoza, 16 de diciembre de 2015 Registro w
Logroño, 17 de diciembre de 2015 Registro w
Tenerife, 17 de diciembre de 2015 Registro w
Palma de Mallorca, 17 de diciembre de 2015 Registro w

Mas información aqui

LLega Visual Studio 2015


El conocido  IDE de Microsoft  mejoró considerablemente desde el lanzamiento de Visual Studio 2012, aunque con ciertos problemas de compatibilidad, mientras que la edición actual (2013) ya no  sólo ofrece varias herramientas para el desarrollo de  aplicaciones de escritorio con los lenguajes .NET (c#.net, visual basic , visual c++,etc)    , incluso ofrece herramientas  para desarrollar aplicaciones para ecosistemas Microsoft (Windows Phone)  asó como  también para desarrollar para  su mas directo competidor : Android.

Al día de hoy, la herramienta de desarrollo Visual Studio se encuentra disponible en cuatro ediciones :

  • Visual Studio Premium 2013  tiene un valor de USD$6.119  y  pasará a mejor vida.
  • Visual Studio  Ultimate 2013  llega hasta los USD$13.299   y pasará a mejor vida.
  • Visual Studio Community 20113  para desarrolladores independientes, que en noviembre pasado fue lanzada , ofreciendo todas las funciones de la versión Professional completamente gratis.
  • Visual Studio Professional 2013  la cual tiene un valor de USD$5.999.

 

visual studio

Con el fin de evitar confusiones entre las variantes del nuevo  IDE Visual Studio 2015 , que estará  disponible cuando lanzen el producto final en este verano,  se distribuirá con   una sola edición denominada Visual Studio Enterprise con MSDN, con lo mejor de ambas(antiguas versiones Visual Studio Premium y Visual Studio Ultimate  )  y con un precio reducido.  Esta versión incluirá por tanto  todas las características de alto valor que  está familiarizado de Visual Studio Ultimate, junto con la nueva innovación que viene con la versión 2015. A ésta oferta  los usuarios ademas  podrán optar por Visual Studio Premium y Visual Studio Community, además de las versiones Express y Team Foundation Server.

Los usuarios de Visual Studio 2013 que hayan adquirido estas licencias recibirán una actualización automática a Visual Studio Enterprise con MSDN sin cargo extra,

Además  la Comunidad de Visual Studio y Visual Studio Professional con MSDN,  el  nuevo Visual Studio Enterprise con MSDN completa las tres 2015 ofertas primarias de Visual Studio.

Van  a seguir  ofreciendo Visual Studio Professional, Team Foundation Server, Team Foundation Server Express, Visual Studio Express y MSDN Plataformas como parte de la completa de Visual Studio 2015 y la cartera de MSDN.

Conseguir Visual Studio 2015

Los clientes que tengan una suscripción activa para Visual Studio Premium con MSDN o Visual Studio Ultimate con MSDN conseguirá automáticamente actualizado a Visual Studio Enterprise con MSDN. Y el precio de Visual Studio Enterprise con MSDN será significativamente menor que el precio actual de Visual Studio Ultimate con MSDN. Eche un vistazo a las Visual Studio 2015 Ediciones del producto para la función detallada y el precio, incluyendo las promociones actuales que estan empleando para que pueda obtener el máximo valor de hoy de Visual Studio.

Además, si usted no ha probado todavía, puede descargar Visual Studio 2015 CTP 6 para probar las nuevas características

 

Fuente  aqui

Arduino para Visual Studio


El hardware de la plataforma Arduino y el software es, en palabras de la página principal de Arduino “, destinado a artistas, diseñadores, aficionados y cualquier persona interesada en la creación de objetos o entornos interactivos”.

Los buenos artistas prestando código, los grandes artistas robando código, pero ningún artista debería tener que escribir código…Y sin embargo, la mayoría lo hace, o al menos tiene que intentarlo.

 

La codificación es difícil para los principiantes, y la codificación en C no es un gran lugar para comenzar. Nombres de mayúsculas y minúsculas, los paréntesis no coincidentes, variables con establecimiento inflexible: estas son las cosas que hacen tropezar a cada recién llegado, y no hay manera de que les rodea. El minimalista Arduino IDE oculta estos temas, pero no los resuelve..Escribir y depurar código en el IDE de Arduino es lento y frustrante: una servidumbre de ensayo y error.

No tiene que ser así! Artistas, diseñadores, aficionados: tires sus herramientas primitivas y únanse  a la revolución tecnológica! He aquí … Arduino para Microsoft Visual Studio !

 

OK, vamos a terminar con esto. Su reacción a esto es probablemente una de 3 cosas:

  1.  Oh, bien, Microsoft. ¿Cuánto es que me va a costar? Probablemente nada
  2.  Oh, bien, Microsoft. ¿Por cuánto tiempo es el que me va a llevar a aprender?  Menos de lo que piensa
  3. ¿Espera código cerrado?    Sí, Microsof  Visual Studio nunca va a ser de código abierto, y sólo se ejecuta en Windows. Si eso es un motivo de ruptura para usted, entonces usted puede dejar de leer.Puede que no quiera saber lo que se estás perdiendo.

Costo y la curva de aprendizaje

Arduino Visual Micro complemento requiere Visual Studio Professional, no Visual Studio Express. De vuelta en el día, Microsoft Visual Studio dirigido a las grandes corporaciones, y tenía un precio en consecuencia.

Afortunadamente, eso ya no es cierto. La página web de Visual Micro tiene más información sobre cómo usted puede obtener legalmente una copia de Visual Studio de forma gratuita . Otra opción para los muchachitos jóvenes es de Microsoft DreamSpark programa para los estudiantes .

En los últimos 10 + años, Microsoft ha reducido cada vez más la barrera para los desarrolladores que adquieren sus herramientas de desarrollo. Microsoft no está siendo puramente altruista aquí. Su motivación es atraer a nuevos desarrolladores para la  plataforma  Windows  , pero el resultado final es que Visual Studio es mucho más fácil de conseguir de lo que solía ser.

En cuanto a la curva de aprendizaje, Visual Micro ha hecho un buen trabajo en la reducción de 3 pasos el proceso de carga / creación de un boceto y subirlo a Arduino.la documentación de Visual Micro es muy amplia – usted no tiene que confiar en los blogs y foros para averiguar cómo usar su producto.)

Sí, Visual Studio está erizada de menús, barras de herramientas y ventanas, pero se puede ignorar el 95% de ellos, al igual que ya lo hacen en Microsoft Word. El 5% restante de estas características, por otro lado, le ahorrará un montón de tiempo.

No está convencido? Vamos a entrar en lo que siento son los 6 mejores características de Arduino para Visual Studio. La mayoría de estos será familiar para cualquiera que haya usado Visual Studio con otros lenguajes: lo bueno es que Visual Micro les ha traído al mundo Arduino.

1. Finalización Código

¿Alguna vez tiene problemas para recordar lo que la sintaxis exacta de una sentencia Arduino es? ¿Es Serial.print o Serial.print o Serial.Write? ¿Cuáles son los parámetros.

Sí, nosotros los profesionales tenemos  el mismo problema,pero ue tendemos a no memorizar las cosas a menos que tengamos que hacerlo, y gracias a la finalización de código en Visual Studio (y Google), que rara vez tiene que hacerlo.

Al comenzar a escribir una declaración en Visual Studio, aparecerá una lista desplegable de opciones para completar la declaración. En lugar de escribir todo esto, sólo tiene que utilizar las teclas de flecha para seleccionar el que desee y, a continuación, haga clic en la tecla Tab para completar el resto.

Cuando usted no está seguro de cuál de ellos desea, hacer una pausa en una de las opciones y la información sobre herramientas aparecerá una lista de los parámetros que los métodos de toma.

2. Resaltado Error

El proceso de corrección de erratas en el IDE de Arduino es una rutina tediosa: construir, descifrar el mensaje de error, averiguar qué línea de código a su referencia a,  corregir el error, construir, repetir ….

Esa es la forma en que los profesionales codificaban software también, hace 20 años, pero con un poco de esfuerzo en la construcción de mejores herramientas el resultado de esto es en vuelo el  resaltado de error poe ejemplo . Cada nueva versión de Visual Studio ha conseguido mejorar en esto, y  ahora en un punto que puede solucionar el 90% de sus errores antes de llegar a la etapa de construcción.

Y, por supuesto, es mucho más fácil de averiguar qué línea de código es incorrecta cuando está subrayado para usted.

3. Búsqueda inteligente

La función de búsqueda de un resultado en un-tiempo es otra área donde el Arduino IDE es de unos 15 años detrás del estado de la técnica. Teniendo en cuenta que todo lo que hemos aprendido a aprovechar los motores de búsqueda en la búsqueda de todo tipo de respuestas, es desconcertante que esto no ha sido mejorada.

Hay un montón de diferentes maneras de buscar información en Visual Studio:

  • Necesidad de revisar rápidamente el código que utiliza una variable? Esto sucede todo el tiempo: no está seguro de si es un string o número, o no están seguros de qué valor ha inicializado a, o no está seguro de que su ser leído o actualizado en su programa. En Visual Studio, haga clic derecho y seleccione Buscar todas las referencias. Se abrirá una ventana que enumera toda la código que utiliza esa variable.
  • Olvidado de lo que se llama una variable? Si conoces parte del nombre, función Buscar de Visual Studio mostrará una lista de todas las líneas de código que contienen una cadena de búsqueda en particular. Los comodines son compatibles.Haciendo doble clic en uno de los resultados de la búsqueda le llevará directamente a la línea de código
  • Usted sabe que cool “buscar mientras escribe” función en la búsqueda de texto en una página web, en el que el cursor salta automáticamente al primer partido mientras se escribe el término de búsqueda? Visual Studio tiene que demasiado: sólo tienes que escribir Ctrl-I para la búsqueda.

4 Bibliotecas:. Dios mío, está lleno de código!

Las bibliotecas son la mayor fortaleza de la Arduino. Codificadores brillantes han creado bibliotecas empaquetadas para manejar todas las cosas complicadas: la lectura y la escritura a los dispositivos, manejo de cuerdas, que conecta a los sitios Web, y así sucesivamente. Usted no sabe cómo funcionan, y que no te importa. Sólo trabajan.

Excepto cuando no lo hacen. Cuando se llama a una función de la biblioteca, y se cuelga, se devuelve un mensaje de error genérico, o no hace nada, uno se queda en la estacada.¿Qué hice mal? Parámetro incorrecto? Ajustes erróneos? Google?!

En Visual Studio, hay algunas maneras diferentes para tirar de la cortina y tener un buen vistazo a la biblioteca que está utilizando.

Si hace clic en una clase o función y selecciona Buscar Declaración, Visual Studio automáticamente cargarlo en el editor. A menudo, los comentarios agregados por el codificador le dará la información que se está perdiendo. Si no es así, echa un vistazo a el código. No se deje intimidar: si usted puede escribirlo, puede leerlo. El código abierto no es sólo una palabra de moda, ¿sabes?

En el Visual Studio Encuentra en diálogo de archivos, se cambia el “Buscar en” campo “Proyecto actual”, aparecerá una lista de todas las apariciones de una variables, incluyendo los que aparecen en las bibliotecas. Esto es útil cuando usted está buscando para una constante especial: usted tiene una idea de lo que quieres, pero no estás seguro de lo que se escribe exactamente es.

Por último, cuando se quiere dar marcha atrás y echar un vistazo a la imagen más grande, el Examinador de objetos enumera todo lo relacionado con una biblioteca en un lugar conveniente. El panel de la izquierda se indican todas las clases en las bibliotecas que se incluyen en el proyecto. Selección de una clase se enumeran las funciones de esa clase en el panel superior derecho. Al hacer doble clic en una función abre el código fuente de la biblioteca y le lleva a la definición de la función

Si realmente quieres volar tu mente, active la opción “Mostrar todos los archivos Arduino”, a continuación, comprobar el Explorador de soluciones. ¡Caramba, ¿de dónde todos esos archivos vienen? Aquellos que todos han estado en su proyecto desde el principio, cubierto por la capa de invisibilidad de Arduino. Usted probablemente querrá dejar el “Show All Arduino archivos” de salir la mayoría del tiempo (yo), pero es muy útil para poder buscar fácilmente a través de ese código en las pocas ocasiones en las que usted necesita.

 5 Serial Console: no es sólo una idea tardía

La consola serie Arduino también ha parecido como algo que a regañadientes viraron a software. Se supone que el código Arduino es  “sólo trabajo”. ¿Quién necesita un depurador? ¿Por qué molestarse en poner el trabajo en algo que nadie va a usar?

Visual Micro hizo poner un poco de trabajo en los sus años, y tiene varias características interesantes que Arduino de carencias.

En primer lugar, han hecho lejos con esa limitación tonto de tener que cerrar la consola cada vez que subes código para el Arduino. Depuración mediante declaraciones de impresión es bastante difícil: quitar esa información cada vez que se ejecuta el código es sencillamente asqueroso. En Visual Studio, usted no tiene que cerrar la consola, nunca.Al transferir el código para el Arduino, la consola de serie en voz baja y automáticamente libera el puerto serie, y luego se vuelve a conectar cuando se realiza la transferencia.

Cuando se selecciona un texto en la consola de serie y haga clic en, un contexto de menú lista todas las opciones:. Seleccionar todo, copiar, cortar, etc Es una cosa pequeña, pero un ahorro de tiempo que cualquier ventana de texto debería tener.

Otro ahorro de tiempo es la capacidad de rápidamente volver a introducir texto mediante la selección en un menú desplegable. Depuración de prueba y error es siempre un dolor, pero ser capaz de hacer introducciones en un solo clic hace que los ensayos menos doloroso.

6. No Java

Java está comenzando a rivalizar con Internet Explorer como un software que es más problemas de lo que vale. El agresivo auto-actualizador pasiva es bastante malo, pero los autores de malware se dirigen cada vez más a Java como un medio de hacer furtivamente su software en los PC. El único software Java corro es Arduino, por lo que reemplazar el Arduino IDE tiene un beneficio secundario importante.

Muchos de los recién llegados a Arduino tener la impresión de que Java es fundamental para Arduinos; algunos piensan que el lenguaje de programación Arduino es Java. En realidad, Java y el Arduino son una extraña pareja. Arduinos están codificados en C + +, el mismo lenguaje de Visual Studio está escrito en, y un lenguaje que el IDE de Visual Studio ha apoyado durante 15 años. Visual Studio C + + se pone de una manera que un IDE basado en Java no se puede. Visual Micro ha hecho un trabajo increíble en el aprovechamiento de un rico soporte de Visual Studio para C + + de desarrollo.

Conclusión

Arduino para Visual Studio ha estado realmente alrededor por un tiempo ahora, y me gustaría la intención de escribir sobre ello de nuevo en la primavera. Se desvió fuera de mi radar cuando dejé de usar el Arduino en mis proyectos.

Mi principal problema con el Arduino es la falta de depuración. Depuración de prueba y error es una gran pérdida de tiempo.

Arduino para Visual Studio apareció de nuevo en mi radar recientemente cuando Visual Micro lanzó un depurador de Arduino para pruebas beta . Si pensabas “Visual Studio para Arduino” era una frase de aspecto extraño, ¿qué hay de “Arduino Debugger”? Este es un depurador de software, sin necesidad de JTAG u otros complementos de hardware, algo que había pensado previamente imposible. No es una idea tan loca, sin embargo.Como he dicho antes, Visual Studio está estrechamente integrado con C + +, y su depuración se ha conectado a varios entornos de ejecución de C + +. Visual Micro ha descubierto la manera de conectar el Arduino a ella.

Un depurador Arduino, integrado en Visual Studio, es un potencial cambio de juego, algo que hará que sea posible hacer proyectos de codificación mucho más ambiciosos en mucho menos tiempo. Estoy con ganas de darle una oportunidad. Si usted es demasiado, la cabeza hacia el sitio web de Visual Micro y leer todo al respecto.

 

Fuente aqui