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

Desarrollo de aplicaciones nativas multiplataforma en Windows


Microsoft  ha demostrado  un  compromiso con el código abierto  ayudando a navegar por herramientas de código abierto, marcos y plataformas, por ejemplo   desarrollando Apache Cordova ,creando y realizando el mantenimiento de complementos de diferentes plataformas,colaborando con Google para ofrecer la herramienta Angular JS 2.0,etc.

Como ejemplo vamos a ver en este post como es posible desarrollar para diferentes entornos moviles usando una de las herramientas mas famosas de desarrollo de Microsoft ,la cual  por cierto esta  disponible para ambientes de educación o formación de forma gratuita

Tipos de aplicaciones móviles

A la hora de crear aplicaciones móviles para plataformas como Android o iOS contamos con varias alternativas:

  • Aplicaciones nativas :muy buen rendimiento y se pueden distribuir desde las tiendas de aplicaciones. Hay que desarrollar las apps para cada entorno  usando herramientas especificas como por ejemplo:

En Android:  Android Studio o Eclipse

En IoS: Swift, Objetive-c  o Xcode

                       En Windows Phone: Visual  Studio

  • Aplicaciones web móviles: un único desarrollo con tecnologías web (js, hrml5 y css).No se distribuyen desde las apps  stores y no permiten acceder a todas las capacidades del hw del móvil. También se está desarrollando las llamadas apps  progresivas
  • Aplicaciones móviles hibridas:se mezclan ambas tecnologías sobre una carcasa  nativa que incrusta una web view. A diferencia de las aplicaciones web móviles pueden distribuirse en las diferentes apps stores incluso permitiendo magnetización de estas. Si bien el rendimiento no es tan bueno como las nativas permiten acceder a diferentes terminales  mediante un   desarrollo web  incluso pudiendo acceder a elementos  hardware . Entre las herramientas mas famosas destacan Phonegapp o Ionic, basadas ambas  en Apache-Cordoba

Creación de  aplicaciones para móviles mediante HTML, CSS y JS

Las aplicaciones móviles híbridas son una combinación de tecnologías web como HTML, CSS y JavaScript, que no son ni aplicaciones móviles verdaderamente nativas, porque consisten en un WebView ejecutado dentro de un contenedor nativo, ni tampoco están basadas en Web, porque se empaquetan como aplicaciones para distribución y tienen acceso a las APIs nativas del dispositivo.

Si sabe cómo crear aplicaciones web, rápidamente se sentirá cómodo creando aplicaciones móviles para iOS, Android y Windows mediante Apache Cordova.

La mayoría de desarrolladores obtiene cerca de un 100 % de reutilización del código aprovechando la API de JavaScript compartida de Cordova para acceder a las funcionalidades de dispositivo nativo, como la cámara, el calendario y los contactos.

Además, debido a que las aplicaciones híbridas utilizan vistas web nativas, puede llevarse su marco JavaScript favorito consigo (marcos como Angular, React e Ionic).

Y hablando de Ionic, es un SDK de código abierto que provee herramientas y servicios para desarrollar aplicaciones móviles híbridas. Está construido por encima de AngularJS y Apache Cordova y se centra principalmente en el look and feel y la interacción con la interfaz de usuario de la aplicación, con la finalidad de simplificar el front-end.

Ionic    es  pues  :

  • Un framework CSS con multitud de elementos de front-end reutilizables y personalizables, que permiten desarrollar una interfaz de usuario relativamente rápido, como por ejemplo encabezados, pies de página, botones de diferentes tamaños y estilos, listas, avatares, tarjetas, formularios, entradas, casillas de verificación, pestañas y,etc .
  • Una biblioteca JavaScript de interfaz de usuario con componentes JS que dan vida a los elementos del front-end y se utilizan como elementos HTML en la aplicación. Uno de los componentes JS de Ionic más utilizados es el componente pestañas,  el cual permite que un determinado contenido se muestre u oculte en función de la pestaña seleccionada por el usuario.

 

 

Visual Studio con Córdova

Debido al aumento de la complejidad de las aplicaciones, necesita más que un editor de texto por lo que el IDE Visual Studio 2017 es una buena  opción  pues integra un editor de código optimizado para la refactorización, el completado automático y la comprensión del código

 

Resumidamente   Visual Studio 2017 ofrece las siguientes  funcionalidades  :

  • Resaltado de sintaxis para ayudarle a identificar los errores visualmente
  • IntelliSense para ayudarle a comprender y codificar mejor las nuevas API
  • Inspección de código para revisar la referencia en línea
  • Si  su aplicación funciona y tiene el aspecto exacto diseñado por usted Tanto si trabaja para iOS, Android o Windows, Visual Studio ofrece compatibilidad de vista previa para una amplia variedad de emuladores y dispositivos anclados a red.Incluso puede implementar y depurar emuladores hospedados en una máquina remota o virtual (por ejemplo, paralelos).
  • Depuración y análisis .Independientemente de dónde se ejecute su código, Visual Studio puede depurarlo (tanto si su código se está ejecutando en un dispositivo iOS, Android o Windows, un emulador o simulador o en un destino de depuración basado en explorador como Ripple). No es necesario cambiar de herramientas cuando crea para otra plataforma. Visual Studio se conecta con casi cualquier destino de implementación.El depurador de Visual Studio le permite revisar el código con puntos de interrupción y notificaciones de excepción automática que exponen el estado del tiempo de ejecución de objetos y variables.Las funcionalidades avanzadas, como editar y continuar, los puntos de interrupción condicionales, los puntos de seguimiento y los números de llamadas ofrecen el tipo de análisis detallado que necesita para que el código resulte divertido y no un juego despiadado de “localización del error”.
  • Acceso a capacidades de dispositivo nativo.Con tecnología de Apache Cordova, sus aplicaciones escritas en HTML, CSS y JavaScript pueden acceder fácilmente a las API de dispositivo nativo que todavía no se encuentran disponibles para los exploradores (por ejemplo, la cámara, el calendario, los contactos, el escáner de códigos de barras, etc.).Lo mejor de todo es que puede acceder a capacidades de dispositivo nativo a través de una API de JavaScript común para obtener la máxima reutilización de código en su aplicación.
  • Conexion  a datos ( a la plataforma de Azure ):con tan solo unas cuantas líneas de código, puede Usar notificaciones de inserción para conectarse con usuarios específicos o audiencias completas,Habilitar la mensajería en tiempo real para provocar conversaciones y el uso compartido entre sus usuarios,Admitir capacidades sin conexión para aquellas ocasiones en las que no haya disponible una conexión de red,Administrar datos de Exchange mediante las API de servicio de Office 365 para compartir y editar calendarios, contactos, archivos, etc.

 

 

 

 

Instalación Visual Studio  para apps moviles

Todo lo que usted necesita para poder comenzar  con Visual Studio es descargar alguna de las siguientes versiones:

El  instalador realiza todo el trabajo pesado necesario para poner en marcha el equipo con los SDK, bibliotecas, herramientas, etc. necesarios para crear aplicaciones multiplataforma.

Para Instalar las herramientas de Cordova con una instalación inicial de Visual Studio siga lso siguientes pasos:

  1. Para instalar Visual Studio Tools para Apache Cordova junto con una instalación limpia de Visual Studio, descargue e inicie el instalador de Visual Studio ( en de algunos de los tres links de arriba o directamente si necesita el  la versión  sin coste en el link  siguiente: Visual Studio Community  :)
  2. El instalador mostrará la lista de componentes instalables mostrada en la siguiente figura.Al instalar  Visual Studio, deberua  asegúrarse  de incluir los componentes opcionales, HTML / JavaScript (Apache Cordova) bajo Desarrollo móvil multiplataforma como vamos a ver.Inicio de instalación de Visual Studio Tools para Apache Cordova
  3. Desplácese por la lista de cargas de trabajo disponibles y localice un grupo denominado Mobile & Gaming .
  4. Marque la casilla de verificación junto a Desarrollo móvil con JavaScript como se muestra en la siguiente figura. Esto permitirá la instalación de los componentes necesarios para las herramientas de Córdoba.  Selección de la instalación de Cordova Tools
  5. Dependiendo de sus necesidades específicas de desarrollo, es posible que deba instalar componentes opcionales adicionales. Por ejemplo, para apoyar el desarrollo de aplicaciones para Android, necesitará agregar soporte para el SDK de Android . Para probar las aplicaciones de Android en los emuladores, debe agregar soporte para Google Android Emulator , como se muestra en la siguiente figura.Si su entorno de desarrollo de Cordova ya incluye estas herramientas, puede omitir la instalación de nuevo aquí y modificar la configuración de Visual Studio Tools para Apache Cordova para apuntar a la instalación existente más adelante.Personalización de la instalación de herramientas de Cordova
  6. Compruebe rápidamente que puede cargar y crear la plantilla de aplicación en blanco predeterminada. En Visual Studio, elija Archivo , Nuevo , Proyecto , JavaScript ,Aplicaciones de Apache Cordova , Aplicación en blanco y nombre el nuevo proyecto “en blanco” y construya con F5. Si tiene algún problema, consulte estos pasos de solución de problemas .
  7. Ionic es un popular framework front-end JavaScript para desarrollar aplicaciones móviles multiplataforma usando Cordova. Puede utilizar Visual Studio 2015 para crear y depurar fácilmente aplicaciones multiplataforma Ionic.http://www.youtube.com/watch?v=4fNmTkYGVeUPuede instalar las plantillas de inicio de Ionic en Visual Studio y utilizarlas para comenzar a crear una aplicación.
    1. Agregue directamente a Visual Studio descargando y haciendo doble clic en VS Extension for IonicO bien, hágalo en Visual Studio, seleccionando Archivo , Nuevo y luego Proyecto .
    2.  En el cuadro de diálogo Nuevo proyecto, seleccione en línea .
    3.  En el cuadro de búsqueda, escriba Ionic .                                                Cómo obtener las plantillas
    4.   Escriba cualquier nombre y elija Aceptar para instalarlos. Cuando se le solicite permiso para instalar las plantillas, dé su permiso.
    5. Cierre y vuelva a abrir Visual Studio.
    6. De nuevo, elija Archivo , Nuevo y , a continuación, Proyecto.
    7. Ahora, elija  Instalar y , a continuación, Plantillas , las plantillas de inicio nuevas aparecerán en JavaScript , Apache Cordova AppsElegir una plantilla
    8. Elija una de las siguientes plantillas de inicio para su nuevo proyecto:
      • Aplicación en blanco iónico
      • Plantilla Iónica de SideMenu
      • Plantilla de Tabulaciones Iónicas
    9. Elija Aceptar .Visual Studio crea el proyecto Ionic.
    10. Agregue IntelliSense para Ionic a su proyecto.

    Haga que su aplicación funcione en Android

    1. Añada la plataforma Android de Android como destino de depuración (lista de plataformas de soluciones) y , a continuación, seleccione Generar y , a continuación, Crear solución .
    2. Elija Android como destino de depuración (lista de plataformas de solución) y para que la aplicación funcione seleccione un destino como el VS Emulator 5 “KitKat (4.4) (se requiere Hyper-V) o Google Android Emulator (lento para cargar inicialmente).  Ejecutar la aplicación
    3. Puede configurar un emulador de Google Android en AVD Manager .También puede ejecutar en el simulador de Ripple en su lugar, pero tendrá que utilizar la solución descrita más adelante en este artículo .
    4. Presione F5 y la aplicación debería cargarse correctamente.                     Aplicación que se ejecuta en el emulador

    Haga que su aplicación funcione en iOS

    Puede ejecutar inicialmente en el Emulador de Ripple después de seleccionar iOS como destino de depuración, pero para obtener información detallada sobre cómo configurar el agente de remoción remota para iOS, consulte este tema .

    Las plantillas de inicio de Ionic deben ejecutarse correctamente en iOS cuando el agente de remotebuild se ejecuta en un Mac (o un servicio como MacInCloud) y cuando Visual Studio está configurado para conectarse a él.

 

Monetizacion de aplicaciones en Android


Uno de los primeros dilemas ante los que se enfrenta un desarrollador primerizo, es cómo poder monetizar su aplicación. ¿La hace gratuita con publicidad? O mejor, ¿opta por ponerle un precio? ¿Y si entonces nadie la descarga? Esta y muchas preguntas similares se le aparecen en la cabeza de un desarrollador a la hora de crear su primera aplicación.

Hoy en día, pocas empresas que hacen juegos o aplicaciones de pago consiguen ser rentables, al menos en el mercado hispano . La mayoría de la gente busca apps y juegos gratis, aunque tengan publicidad. En muchos casos  por este motivo muchos programadores  prefieren realizar  apps  gratuitos con publicidad.Veamos en este post  que herramientas hay disponibles :

aDMOV

AdMob es una herramienta de Google que ayuda a monetizar  su app móvil mediante publicidad integrada a ella  siendo por tanto la mas utilizada por parte de los programadores, aunque como veremos no es la unica. Los anuncios pueden mostrarse como anuncios de banners, intersticiales, de video o nativos, y se agregan perfectamente a componentes de IU nativos de las plataformas. En Android, puede mostrar de manera adicional anuncios de compra directa desde la app  permitiendo  incluso a los usuarios comprar productos promocionados desde su app.

Para poder mostrar anuncios dentro de tu app, deberá crear una cuenta de AdMob y activar uno o más ID de Ad Unit. Estos son identificadores únicos para los espacios de su apps en los cuales se muestran anuncios. Si ya usas AdMob en su app, todos tus ID de Ad Unit existentes continuarán funcionando después de que agregues Firebase a tu app.

AdMob usa el Google Mobile Ads SDK,  SDK que ayuda a los desarrolladores de apps a obtener información sobre sus usuarios, lograr más compras directas desde la app y maximizar los ingresos a través de anuncios. Para esto, la integración predeterminada del Mobile Ads SDK recopila información sobre dispositivos, ubicaciones proporcionadas por editores y aspectos generales relacionados con la compra directa desde la app, como el precio de compra de los artículos y la moneda.

Si quiere utilizar AdMob, debe registrarse para obtener una cuenta. Una cuenta de AdMob se compone de una cuenta de AdSense y de una cuenta de AdWords. Durante el proceso de registro, revisan ambas cuentas o ayudan a crearlas. A continuación,  asocian para crear su cuenta de AdMob.

 

 

Debe tener en cuenta lo siguiente:

  • Una vez creada su cuenta de AdMob, no podrá cambiar las cuentas de AdSense y de AdWords asociadas. Consulte la información correspondiente a cada cuenta.
  • AdSense: solo está permitido mantener una cuenta de AdSense bajo el mismo nombre de beneficiario. Si desea cambiar de cuenta, tendrá que cancelar la de AdSense o desvincularla en primer lugar. La cancelación de la cuenta debería ser el último recurso y reservarse para aquellas cuentas inactivas que no estén recibiendo solicitudes de anuncios ni generando ingresos. Recuerde que, si cancela la cuenta, dejará de tener acceso a los datos que haya en ella. Si no ve la opción de cancelar la cuenta al iniciar sesión en AdSense, póngase en contacto con el servicio de atención al cliente de AdSense.
  • AdSense: solo puede cambiar la dirección de pago de AdSense si sigue con la misma entidad contractual de Google.
  • AdWords: no es posible cambiar la moneda de facturación de AdWords.
  • AdWords: solo puede cambiar la zona horaria de AdWords una vez desde la creación de la cuenta.

 

 

paso 1;

Nos iremos a la pagina https://apps.admob.com/signup/#  y  nos validaremos  por  medio obligatoriamente de una cuenta de google (no olvidemos que es un producto de Google)

Obviamente en el caso hipotético de no tener cuenta de gmail tendremos que crear una aunque solo sea para usar este servicio

 

Paso 2

 

Ahora toca revisar la información de Adsense:

 

 

Paso 3

Lo siguiente es cumplimentar los datos de AdWords  como son la zona horaria   y la moneda

La zona horaria de los informes de la campaña y la moneda de facturación no se podrán modificar más adelante.

 

 

AdMob se conectará a la cuenta existente de AdSense y a la nueva cuenta de AdWords. Si se quita de alguna de estas cuentas, perderá el acceso a su cuenta de AdMob.

 

 

paso 5

Casi se ha terminado , solo se necesita aceptar…

Paso 6: registrar su aplicación

Realice estos pasos para registrar su aplicación y crear un bloque de anuncios.

  1. Inicie sesión en su cuenta de AdMob en https://apps.admob.com.
  2. Haga clic en la pestaña Obtener ingresos.
  3. Haga clic en + Obtener ingresos de la nueva aplicación.
  4. Seleccione una aplicación de la que desee obtener ingresos mediante uno de los siguientes métodos:
    1. Busque la aplicación: búsquela en Google Play o iTunes App Store y, a continuación, haga clic en + Obtener ingresos.
    2. Añada su aplicación manualmente: si su aplicación todavía no se ha publicado, introduzca el nombre de la aplicación y la plataforma y, a continuación, haga clic en + Obtener ingresos.
      Recomiendan enlazar su aplicación a la tienda de aplicaciones una vez que se publique.
    3. Seleccione una de las aplicaciones que ha añadido: seleccione una de las aplicaciones que acaba de añadir y haga clic en + Obtener ingresos.
  5. Ahora toca crear un bloque de anuncios. Hay 4 opciones posibbles :Banner,Intersticial,Vídeo recompensado y Nativo
  6. Necesita ahora decidir muy bien el tipo de anuncio  que va a implementar                                                                                                                                                                    Banner
    • Tipo de anuncio: selecciona los tipos de anuncios permitidos para este bloque de anuncios. Puede elegir cualquier combinación de texto e imagen marcando las casillas. Se recomienda marcar ambas casillas, ya que, si desmarcas una de ellas, se podrían limitar los ingresos que genera el bloque de anuncios. Si desmarcas todas las casillas, se producirá un error. Debe elegir al menos un tipo de anuncio para cada bloque de anuncios.
    • Actualización automática: determina la frecuencia con la que se genera una nueva impresión de anuncio. Puedes optar por no actualizar los anuncios o hacerlo con una frecuencia de entre 30 y 120 segundos. Se recomienda configurar una velocidad de actualización de entre 45 y 60 segundos.
    • Estilo del anuncio de texto: seleccione un estilo del anuncio de texto que se ajuste a tu aplicación. Puede usar el estilo estándar o crear uno propio.
    • Nombre del bloque de anuncios: introduce un nombre y una descripción únicos que te permitan encontrar este bloque de anuncios más adelante (p. ej., “Banner superior de la página principal”).

     

    Intersticial

    • Tipo de anuncio: selecciona los tipos de anuncios permitidos para este bloque de anuncios. Puedes elegir cualquier combinación de texto, imagen y vídeo marcando las casillas. Se recomienda marcar las tres casillas, ya que, si se desmarca alguna de ellas, se podrían limitar los ingresos que genera el bloque de anuncios. Si desmarcas todas las casillas, se producirá un error. Debes elegir al menos un tipo de anuncio para cada bloque de anuncios.
    • Limitación de frecuencia: elige si quieres configurar un límite para el número de impresiones que se pueden mostrar a cada usuario. De esta forma se limitan las veces por minuto, por hora o por día que los anuncios se muestran a un mismo usuario en un bloque de anuncios específico.
    • Nombre del bloque de anuncios: introduzca un nombre y una descripción únicos que te permitan encontrar este bloque de anuncios más adelante (p. ej., “Intersticial al finalizar el nivel”).
    Vídeo recompensado

    Utilize  los bloques de anuncios de vídeo recompensados si quiere ofrecer a los usuarios recompensas in-app a cambio de ver anuncios de vídeo. Puedes definir el valor de la recompensa y los bloques en función de la ubicación de cada bloque de anuncios en tu aplicación, así como establecer varias recompensas para diferentes bloques de anuncios.

    • Tipo de anuncio: los bloques de anuncios de vídeo recompensados solo se pueden utilizar con anuncios de vídeo.
    • Importe de la recompensa: introduzca la cantidad de elementos de recompensa que recibirá el usuario. Debe ser un número entero.
    • Elemento de recompensa: introduzca el nombre del elemento de recompensa que recibirá el usuario, como por ejemplo, monedas o más vidas en el juego.
    • Casilla de verificación: anula la configuración de la recompensa proporcionada por redes publicitarias de terceros. Está marcada de forma predeterminada.
    • Limitación de frecuencia: elija si quieres configurar un límite para el número de impresiones que se pueden mostrar a cada usuario. De esta forma se limitan las veces por minuto, por hora o por día que los anuncios se muestran a un mismo usuario en un bloque de anuncios específico.
    • Nombre del bloque de anuncios: introduczca un nombre y una descripción únicos que le permitan encontrar este bloque de anuncios más adelante (por ejemplo, “Monedas como recompensa”).

    Nativos                                                                                                                                                                                                                                                                                              Es un formato de anuncio  “a la carta ” donde se puede diseñar de una forma mas flexible              

  7. Opcionalmente puede enlazar sus aplicaciones de AdMob con Firebase y compartirían los datos de la herramienta gratuita Firebase Analytics con AdMob para mejorar la obtención de ingresos de aplicaciones y la interacción de los usuarios ,pero para ello debe proporcional un código único de haberlo subido a Google Play
  8. Descargue el SDK de anuncios Google para móviles.
  9. Siga la guía de integración del SDK. Al integrar el código, indica el tipo, el tamaño y el emplazamiento del anuncio.
    • ID de aplicación: xxxxxx
    • ID del bloque de anuncios: xxx
  10. Haga clic en Finalizado para volver a la pestaña Obtener ingresos o haga clic en Enviar un correo electrónico con las instrucciones para recibir las instrucciones por correo electrónico.

Ya ha registrado la aplicación y ha creado un bloque de anuncios. Para mostrar banners en su aplicación Android o iOS, siga las instrucciones detalladas sobre la incorporación del SDK y el código de ejemplo para crear un banner.

 

 

 

Alternativas a Admov

 

Otras empresas para monetizar sus aplicaciones si ya no puedes utilizar AdMob:

  •  “MoPub” que pertenece a Twitter por lo que la fiabilidad es alta. Con el SDK de MoPub podremos regular la aparición de los diferentes anunciantes en nuestras aplicaciones y además tienen un MarketPlace con el que ganar dinero, podemos combinar las impresiones de mopub con el resto de anunciantes incluido AdMob. El problema de MoPub es que paga a los 60 días pero son serios con los pagos.
  • MobileCore“, solo para interesticiales (anuncios gráficos a pantalla completa), aunque tiene otras novedades como sticks y anuncios integrados en el contenido. Lo mejor de esta empresa es que pagan religiosamente cada semana mediante PayPal o transferencia bancaria. Si está interesados en la publicidad tipo interesticial no dudéis en probar MobileCore.
  •  Startapp aún ofrece banners(ha de saber que ya casi están en desuso, ofrecen un bajo ecpm y pocas empresas apuestan por ellos) pero se puede sacar un buen rendimiento combinando la publicidad con interesticiales.
  • ppNext es muy buena opcion . la publicidad aparece la mayoría de las veces y pagan muy bien, cada mes.

Facil monitorizacion de cortes de suministro electrico o acceso a una vivienda por SMS o email


Los inmuebles son el mayor activo de las personas tanto a nivel personal como a nivel de empresas o negocios, por lo que es importante asegurarnos que no son accedidos por terceros. Además, dada la gran dependencia del suministro de corriente alterna, es necesario tener constancia de cualquier caída en el suministro pero desgraciadamente, las soluciones que existen en el mercado suelen tener un coste alto y suelen llevar implícita una cuota periódica.

 En este contexto, esta nueva aplicación intenta resolver que estén informados particulares, pequeños negocios, comercios, segundas residencias, locales comerciales, etc. sobre problemas relacionados con la necesidad de saber si ha habido corte de suministro eléctrico o de conocer si se accede a estos.

La nueva aplicación Seguricasa puede enviar notificaciones automáticamente vía SMS o por correo electrónico en el momento que se detecte la apertura o cierre de la puerta gracias al sensor de proximidad que incluye cualquier Smartphone. Asimismo, también puede enviar notificaciones si se detecta corte de red ya que dejaría de estar alimentado externamente el Smartphone (por el cargador del terminal), circunstancia que puede ser monitorizada y procesada dentro de la aplicación y que fácilmente podemos entender como falta de red de corriente alterna.

Esta app, pues, está pensada dirigida a particulares pero tambien autónomos, pequeños comerciantes, etc., ya que por su simplicidad está prevista para ser auto instalada por cualquier usuario.

Primeros pasos

Seguricasa es una solución ideal para aquellos que no están dispuestos a pagar una cuota por un sistema de alarma, pero les gustaría saber lo que ocurre en sus propiedades.

La solución es única, pues no es necesario adquirir ningún hardware adicional, ya que se basa en un Smartphone con SO Android 4.1 (Yelly Bean) o superior, para gestionar tanto los accesos, como los cortes de red del suministro eléctrico de una vivienda o local.

Basta con insertar una SIM en su viejo Smartphone, instalar la aplicación Seguricasa y   mantener el Smartphone conectado al cargador, para que desde ese momento, en cuanto defina el número del teléfono y las cuentas de correo de origen y de destino, pueda recibir   a voluntad   notificaciones por SMS o por mail, de cualquier anomalía que suceda en el suministro de corriente alterna de su vivienda.

En el caso de que se desee también monitorizar los accesos, tampoco se necesita ningún hardware especial: simplemente tendrá que fijar su viejo Smartphone   cerca de la puerta de acceso mediante un velcro o similar , y colocar un soporte solidario a la puerta que pueda cubrir aproximadamente al menos 1cm la parte superior del Smartphone, para  que en cuanto  abramos la puerta  automáticamente oculte el sensor  y de esta forma ser envíen según se defina,   notificaciones por SMS o por mail de cualquier acceso  ( obviamente si ha definido  el número del teléfono  y las cuentas de correo de origen y de destino dentro de la propia aplicación).

Montaje

Pare este monatje vamos a necesitar  instalar la aplicación “Seguricasa ” en un Smartphone con SO Android 4.1 (Yelly Bean) o superior. Tambien es importante destacar que   si se desea almacenar las notificaciones de SMS o e-mail, el terminal debería contar al menos con 128MB de espacio en la SD externa para almacenamiento de logs.

El montaje es muy sencillo, pues solo habrá que descargar la aplicación  Seguricasa  desde Amazon aqui (el precio de 1€ es algo que todos podemos permitirnos) e  instalar  la aplicación  Seguricasa en el terminal que vayamos a  destinar.

El terminal Android debe tener SO Android 4.1 (Yelly Bean) o superior y no  es fundamental  que tenga  la pantalla  perfecta ( o la bateria)  ya que la interacción con el terminal solo sera necesaria para configurar cuales van a ser las notificaciones  y los destinatarios de estas ( es decir este terminal puede ser perfectamente reciclado  o incluso en mal estado ) .

El siguiente paso  es insertar la SIM  en el terminal si es que vamos  a enviar SMS o emails estando sin suministro eléctrico  , ya que normalmente cuando no haya red eléctrica tampoco solo tenemos tener wifi. Dependiendo de lo que deseemos (sms o emails ) necesitaremos  un plan mas o menos ajustado ,pero ene general con una tarjeta prepago debería ser suficiente .

Ahora  lo siguiente debería ser fijar el terminal  a un extremo de la puerta si es que vamos a usarlo  también para notificar los acceso a la vivienda o local. Por ejemplo un belcro auto-adhesivo pegado en la parte de atrás del terminal  puede ser un sistema perfecto  , aunque en el mercado  obviamente también existen soportes  para  fijar el terminal de forma vertical de una manera muy simple.

IMG_20170316_191402.jpg

Fijado el terminal   ya solo nos quedaría  si lo que deseamos es  controlar el acceso  fijando un cartón   al extremo de la puerta  con cinta  adhesiva de modo que  al abrir al puerta este  tape el sensor de proximidad del terminal tal y como se ve en la fotografía siguiente

Una vez fijados el terminal  y el cartón es hora de conectar  la alimentación  por medio del cargador original  o en su defecto cualquier cargador con salida micro-usb .En este sentido tenga en cuenta que el cargador debe permanecer siempre enchufado de modo que pueda ser motorizado  el estado de la red eléctrica por lo que este  debería ser preferentemente el original  o por lo menos de buena calidad.

Ya tenemos todo preparado , así que arrancaremos  la aplicación   y  podemos  configurar  todos los  parámetros como vamos a ver  a continuación.

Manejo de la aplicación

Para iniciar la aplicación basta con pulsar sobre el icono “Seguricasa”.

Inmediatamente al iniciar la aplicación, aparecerá la pantalla principal de la aplicación donde se muestra la información básica del estado de los sensores, la cual incluso cerrándola queda en segundo plano con objeto de seguir monitorizando la vivienda o inmueble.

La información mostrada por la aplicación en la pantalla principal es la siguiente:

  • Nivel de carga de la batería expresada en tanto por ciento.
  • Temperatura del terminal en grados centígrados.
  • Estado de suministro eléctrico expresado en voltios.
  • Estado del sensor de proximidad.

Bajo el icono del botoncito de la esquina superior derecha se muestra el nivel de batería expresado en tanto por uno

Asimismo, la aplicación cuenta con dos botones:

  • Ayuda: pulsando aquí se accede  al menú básico de ayuda en línea
  • Histórico: se accede al log de envíos de correos o SMS ’s enviados desde la propia aplicación.

Hay un tercer botón oculto muy importante, que es el de configuración de la aplicación, el cual se accede pulsando el botón contextual del terminal   de Android.

Este botón   suele colocarse en los terminales Android nuevos en la parte inferior a la izquierda, con una “U” invertida en la parte inferior de la pantalla en cuyo interior hay dos pequeñas rallas horizontales.

AYUDA EN PANTALLA

Desde la pantalla principal pulsando el menú ayuda, se accede a una pantalla auxiliar donde se explica sucintamente el sentido de esta aplicación.

Para volver a la pantalla principal,   pulsar el botón volver del terminal, o simplemente se puede pulsar el botón cerrar de esta pantalla.

LOG DE EVENTOS

Desde la pantalla principal, pulsando el menú histórico se pueden acceder al log de envíos de correos o SMS ’s enviados desde la propia aplicación.

Siempre que se haya definido un nombre valido de fichero en la pantalla de configuración,   y el terminal cuente con al menos con 128MB de espacio en la SD externa para almacenamiento de logs, se mostrara en cada línea del log la fecha y hora junto el tipo de notificación (SMS o e-mail) y los motivos (corte o vuelta de red y puerta abierta o cerrada).

Para volver a la pantalla principal   pulse el botón volver del terminal o simplemente pulsa el botón cerrar de esta pantalla.

Es interesante destacar que, en esta pantalla, en cuanto se supera el tamaño visualizable en la pantalla del terminal, sobre esta se podrá hacer scroll vertical para poder acceder al resto de información.

En caso de no que no interese mantener este fichero de log, el usuario siempre puede acceder al administrador de ficheros y acceder a la raíz de la SD para proceder a mover o eliminar dicho fichero de log.

Obviamente si desea personalizar el nombre del fichero de log, simplemente deberá cambiar el nombre del fichero personalizado de fichero de log en la opción Fichero de Log→Carpeta

También si desea no registrar los eventos, simplemente deberá borrar el nombre del fichero personalizado de fichero de log en la opción Fichero de Log→Carpeta

CONFIGURACION DE LA APLICACIÓN

Hay una opción muy importante referida a la configuración de la aplicación, la cual se accede pulsando el botón contextual del terminal   de Android.

Este botón   suele colocarse en los terminales Android nuevos en la parte inferior a la izquierda con una “U” invertida en la parte inferior de la pantalla en cuyo interior hay dos pequeñas rallas horizontales.

Pulsando sobre el botón de configuración del terminal nos aparecerá el menú Configuración en la parte Inferior de la pantalla.

Una vez ahí, pulsando sobre el ítem, se mostrara el submenú de configuración de la aplicación:

La pantalla está divida por seis secciones claramente identificadas:

  • Avisos por SMS.
  • Avisos por email.
  • Números de teléfono para SMS.
  • Correo electrónico destino.
  • Usuario Gmail para envíos.
  • Fichero de log.

Avisos por SMS.

La conectividad a internet de los terminales de última generación junto con el crecimiento exponencial tanto de las redes sociales como los de servicios de mensajería no han frenado la expansión de los mensajes SMS a nivel comercial.

Está claro que  los nuevos métodos de comunicación han tomado la delantera en lo que se refiere a las comunicaciones personales y grupales  ,pero a cambio han dejado a los mensajes SMS cómo líderes absolutos  de las comunicaciones de empresas como bancos,  empresas de transporte público, empresas de telecomunicaciones , compañías de seguros, hospitales ,otras instituciones públicas y un largo etcétera las cuales han adoptado los mensajes SMS como método para enviar notificaciones, confirmar transacciones, recordar citas, etc.

Precisamente pensando en la gran seguridad, accesibilidad y confianza que ofrecen los SMS’s frente a otros servicios de mensajería, en esta aplicación se ha optado por permitir él envió de mensajes de forma selectiva según las necesidades de los usuarios.

Clicando en cualquiera de las tres opciones de este submenú automáticamente se enviaran   un SMS al número que se defina ante las siguientes circunstancias:

  • Corte de suministro de corriente alterna mediante la el suministro de tensión externa al terminal ( opción “Cortes de electricidad”)
  • Aperturas o  cierres de la puerta   ocultando el sensor de presencia(opción “Aperturas puerta”)
  • Al iniciar por primera vez la aplicación Seguricasa (opción “Al iniciar esta app”).

Avisos por e-mail.

Estar dado de alta en una cuenta de correo electrónico, hoy en día es una realidad pues todos los usuarios de la red disponen de una dirección de correo electrónico y lo utilizan diariamente.

En la actualidad, el uso del correo electrónico, se puede dividir en diferentes ámbitos como académico, laboral y personal, por lo que es muy interesante  también poder avisar  por e-mail ante cualquier evento de acceso  o anomalía en el suministro de corriente alterna desde el Core de esta aplicación.

Los avisos por e-mail en esta aplicación son personalizables mediante esta sección:

Clicando en cualquiera de las tres opciones del submenú de avisos por  e-mail, automáticamente se enviaran   un email a la cuenta de correo electrónico que se defina ante las siguientes circunstancias:

  • Corte de suministro de corriente alterna mediante la el suministro de tensión externa al terminal (opción “Cortes de electricidad”).
  • Aperturas o cierres de la puerta ocultando el sensor de presencia (opción “Aperturas puerta”).
  • Al iniciar por primera vez la aplicación Seguricasa (opción “Al iniciar esta app”).

Número de teléfono para envíos SMS

Complementando el submenú de avisos por SMS ’s se incluye esta sección, donde   se definirá el número de teléfono al que se deseen dirigir los mensajes de texto.

Tenemos que definir sobre todo el número del Teléfono hacia el que quieren dirigirán los SMS ‘s ante los eventos que se deseen auditar chequeados en   el submenú de avisos por sms’s.Opcionalmente,   también se puede asignar una cadena de texto en la opción Usuario que nos permita por ejemplo identificar el número de teléfono que hayamos asignado.

Es interesante destacar que si no informamos del número de teléfono destinatario de los SMS ‘s y clicamos alguna opción de SMS, nos saltara un error de número no definido.Si introducimos el numero o el nombre de usuario en esta sección, para volver a la pantalla principal, pulsar el botón volver del terminal o simplemente pulsa el botón cerrar de esta pantalla.

Correo electrónico destino

Complementando el submenú de avisos por mail, se incluye esta sección donde   se definirá la cuenta de correo electrónico al que se deseen dirigir los mails.

Tenemos que definir el correo electrónico destino hacia el que quieren dirigirán las e-mail ante los eventos que se deseen auditar chequeados en   el submenú de avisos por e-mail

Clicaremos en la copión E-mail y sobre la caja de texto cumplimentaremos el destinatario donde se dirigirán el e-mail ante los eventos que se deseen auditar chequeados en   el submenú de avisos por e-mail.

Es interesante destacar que si no informamos de la cuenta de correo y clicamos alguna opción de envíos de correos, nos saltara un error de mail no definido.

Para volver a la pantalla, el botón volver del terminal o simplemente pulsa el botón cerrar de esta pantalla.

Usuario Gmail para envíos

Complementando el submenú de avisos por mail, en esta sección   se definirá la cuenta de correo electrónico de Gmail desde donde se enviaran los mails.

Obviamente se podría haber definido otro tipo de servidor  de correo saliente, pero  por simplicidad dado que los usuarios de Android están obligados a tener una cuenta vinculada a una dirección de correo de Gmail para instalar nuevas aplicaciones en su terminal , este es el  candidato ideal como  servicio de envió de e-mails.

Dada la facilidad de envíos de correos electrónicos ante las circunstancias definidas, tenemos que definir el correo electrónico origen desde donde se dirigirán las e-mail ante los eventos que se deseen auditar chequeados en   el submenú de avisos por e-mail

La cuenta de Gmail pues se cumplimentara en la opción “cuenta” mediante el formato establecido completo (es decir con el formato [email protected]).

Para volver a la pantalla principal, basta pulsar el botón volver del terminal, o simplemente pulsar el botón cerrar de esta pantalla.

Dado que usaremos la cuenta de Gmail, para poder enviar correos desde esta cuenta, necesitamos cumplimentar en el apartado “Clave” la password de la cuenta de Gmail.

Como vemps en la pantalla anterior al cumplimentar la password de la cuenta de Gmail se ocultara su contenido tanto cuando estamos cumplimentándolo como cuando los revisamos pudiéndolo actualizar o eliminar en cualquier momento desde esta opción.

Es interesante destacar que si no informamos de la cuenta de correo y clicamos alguna opción de envíos de correos, nos saltara un error de mail no definido.

Para volver a la pantalla principal   pulsar el botón volver del terminal o simplemente pulsa el botón cerrar de esta pantalla.

Fichero de log

Es importante destacar que   si se desea almacenar las notificaciones de SMS o e-mail, el terminal debería contar al menos con 128MB de espacio en la SD externa para almacenamiento de logs.

Si deseamos registrar los logs de aviso por email o por SMS, simplemente necesitamos apuntar en el apartado “Carpeta” el nombre del fichero que deseamos usar para registrar todos estos eventos en el root de la microsd.

Para volver a la pantalla principal   pulsar el botón volver del terminal o simplemente pulsa el botón cerrar de esta pantalla.

 

En el siguiente vídeo  podemos ver  mas claramente el funcionamiento de todas estas opciones comentadas;

Requisitos

  • Smartphone Android con SO Android 4.1 (Yelly Bean) o superior.
  • Tarjeta SIM (puede ser de Prepago).
  • Cargador original.
  • Es importante destacar que si se desea almacenar las notificaciones de SMS o e-mail, el terminal debería contar al menos con 128MB de espacio en la SD externa para almacenamiento de logs.
  • Opcional: sistema para fijar el smartphone a la pared y soporte solidario a la puerta de acceso que tape parcialmente el sensor de presencia del Smartphone al abrirse.

Como recompilar una aplicación en Android en otra version


Si esta  desarrollando un aplicación con Android Studio  , en el momento que se crea un proyecto nuevo habrá especificado el  API LEVEL de la  aplicación Android

Seguro que con bastante esfuerzo habrá desarrollado partir de la estructura inicial  su aplicación basándose en esa especificación ,pero una vez  finalizado el desarrollo  ( y las pruebas de la app) si  intenta subirla a Google Play,  quizás  en un segundo intento vez, habrá visto que da error en la subida del APK debido a que ya tiene un archivo con ese código de versión.

Este problema  también le puede ocurrir cuando desee probar su aplicación con otro terminal   que   cuente con una versión de Android inferior

En este post precisamente  vamos  a ver cómo cambiar el código de versión de una aplicación Android o el nivel del  API  para  solucionar  precisamente los problemas comentados  .Como vamos a ver es un procedimiento realmente sencillo, y no debería llevarnos ninguna complicación.

En primer lugar,  veamos  en la siguiente tabla las diferentes versiones del nivel de API de Android  en relación a la versión  que todos conocemos : la versión de la Plataforma

Versión de la plataforma Nivel de API VERSION_CODE
Android 7.0 24 N
Android 6.0 23 M
Android 5.1 22 LOLLIPOP_MR1
Android 5.0 21 LOLLIPOP
Android 4.4W 20 KITKAT_WATCH
Android 4.4 19 KITKAT
Android 4.3 18 JELLY_BEAN_MR2
Android 4.2 y 4.2.2 17 JELLY_BEAN_MR1
Android 4.1 y 4.1.1 16 JELLY_BEAN
Android 4.0.3 y 4.0.4 15 ICE_CREAM_SANDWICH_MR1
Android 4.0, 4.0.1 y 4.0.2 14 ICE_CREAM_SANDWICH
Android 3.2 13 HONEYCOMB_MR2
Android 3.1.x 12 HONEYCOMB_MR1
Android 3.0.x 11 HONEYCOMB
Android 2.3.4 10 GINGERBREAD_MR1
Android 2.3.3
Android 2.3.2 9 GINGERBREAD
Android 2.3.1
Android 2.3
Android 2.2.x 8 FROYO
Android 2.1.x 7 ECLAIR_MR1
Android 2.0.1 6 ECLAIR_0_1
Android 2.0 5 ECLAIR
Android 1.6 4 DONUT
Android 1.5 3 CUPCAKE
Android 1.1 2 BASE_1_1
Android 1.0 1 BASE
Si por la razón que sea  quiere cambiar el API Level, por ejemplo de API  16 ( correspondiente a : Android 4.1 Jelly Bean)  a API 22 ( correspondiente a : Android 5.1.0 (Lollipop)  sólo hay que seguir los siguientes pasos:
  •  Buscar la carpeta app del menú desplegable “Project” ( o la carpeta que contenga el nombre de nuestra app )
  •  Pulsación en el  Botón derecho => OPEN MODULE SETTINGS:
openmodules.png
  •  Nos aparecerá  otro menú  con cinco pestañas  posicionándose por defecto en Properties  donde especificamos la versión del complilador , la cual recomendamos dejar en la máxima versión( 7.1.1):
properties.PNG
  • Haremos clic sobre la tercera pestaña FLAVORS:
ejmplo
  •  Aparecen en esta pantalla   el nivel dela API minimo y  otras parametros . Pincharemos en el desplegable de MIN SDK VERSION, donde podemos escoger el nuevo API LEVEL ( clic sobre la flecha )  que deseemos:
androidversionmion
Una vez situados aquí, también  podemos  cambiar el código de la versión del APK, que es efectivamente el que tenemos seleccionado. El primer APK por defecto lleva versionCode 1, pero la siguiente versión debe llevar el 2 y así sucesivamente, de ahí a quGoogle Play de error si subimos un APK con la misma versionCode o código de versión.Lo que haremos será tan sencillo como cambiar la Version Code cada vez que generamos una nueva versión de la aplicación, es decir, un nuevo APK a publicar. Una vez hecho esto, tan solo tendremos que guardar el proyecto y volver a generar el APK.
  • GRADLE reconstruirá  automáticamente todo el proyecto ( SYNC )  al  darle al botón Aceptar
  • Este proceso podemos repetirlo cuantas veces deseemos con diferentes versiones para adaptar nuestro proyecto a las diferentes versiones de Android
 Con esta actuación ( y todas las que deseemos )   habremos configurado el fichero  build.gradle (Module:app) de forma segura   y  completamente funcional.