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.

 

Cómo enviar correos desde Android con Apache Commons


Trabajando con Android, muchos buscamos  enviar mensajes de correo electrónico usando un servidor SMTP, utilizando autenticación y cifrado, dentro de  de la propia aplicación android de forma que sea completamente transparente para el usuario.

Por desgracia javax.mail en Android no es una buena opción, ya que depende de las clases awt (problemas por la herencia) y no siempre funciona:no en vano ,de hecho algunas personas han tratado de adaptar la librería dado  que no ser requiere todo el paquete awt , pero lamentablemente han tenido poco éxito con eso; !y eso sin mencionar a quienes que refactorizando javax.mail para Android  (que lleva muchos  años, sin ningún mantenimiento)!.

Apache Commons es un conjunto de proyectos de Apache Software Foundation, que originalmente formaron parte de Jakarta Project. El propósito de estos proyectos consiste en proveer componentes de software Java reutilizables, en código abierto. Según su grado de madurez y actividad, los proyectos se agrupan en las categorías: proper, sandbox o dormant.

Otra opción mas pragmática pues  es usar Apache Commons ,puesto que la comunidad ha añadido un SMTPSClient y un AuthenticatingSMTPClient para el cliente SMTP original ,el cual con la  aplicación de un pequeño parche  para SSL y autenticación, se puede incrustar esta biblioteca en su aplicación para Android sin necesitar dependencias transitivas para enviar correo mediante la autenticación sobre una capa segura.

Autenticación SMTP y STARTTLS

STARTTLS es una extensión a los protocolos de comunicación de texto plano, que ofrece una forma de mejorar desde una conexión de texto plano a una conexión cifrada (TLS o SSL) en lugar de utilizar un puerto diferente para la comunicación cifrada.

El puerto utilizado para  envíos de correos es generalmente 25 o el puerto 587 alternativo por lo que lo que se trata es de conectar al servidor SMTP en una conexión simple, se piden los comandos disponibles, y si se soporta STARTTLS,se  usa ,y el resto de la comunicación está cifrado.

Ahora tomemos el ejemplo de gmail, ya que el servidor es  smtp.gmail.com , como soporta autenticación y STARTTLS  podemos enviar fácilmente correos si importamos la libreria Apache Commons

 

Un ejemplo de código funcional que podemos probar desde Android Studio es el siguiente:

com.google.android.gms.appindexing.Action;
import com.google.android.gms.appindexing.AppIndex;
import com.google.android.gms.appindexing.Thing;
import com.google.android.gms.common.api.GoogleApiClient;
import org.apache.commons.net.smtp.AuthenticatingSMTPClient;

import org.apache.commons.net.smtp.SMTPClient;

import org.apache.commons.net.smtp.SMTPReply;

import org.apache.commons.net.smtp.SimpleSMTPHeader;  

  public void sendEmail()

{ String hostname = «smtp.gmail.com»;

int port = 587; String password = «xxxxxxxxx»;

// aqui necesitamos la pwd de al cuenta de gmail

String login = «[email protected]»;

//aqui necesitamos la cuenta de gmail desde //la que enviaremos los email desde la app

String from = login;

//aqui ponemos el nombre del correo de envío

// es el enviante

String subject = «subject«;

//asunto del correo

String text = «message»;

//texto del correo try

{ AuthenticatingSMTPClientclient = new AuthenticatingSMTPClient();

String to = «[email protected]»;

//destino del correo

// optionally set a timeout to have a faster

//feedback on errors client.setDefaultTimeout(10 * 1000);

// you connect to the SMTP server client.connect(hostname, port);

// you say ehlo  and you specify the host you are connecting from, //could be anything client.ehlo(«localhost»);

// if your host accepts STARTTLS, we’re good everything will be encrypted,

// otherwise we’re done here

if (client.execTLS())

{ client.auth(AuthenticatingSMTPClient.AUTH_METHOD.LOGIN, login, password);

checkReply(client); client.setSender(from);

checkReply(client);

client.addRecipient(to);

checkReply(client);

Writer writer = client.sendMessageData();

if (writer != null)

{ SimpleSMTPHeader header = new SimpleSMTPHeader(from, to, subject); writer.write(header.toString()); writer.write(text); writer.close();

if (!client.completePendingCommand())

{

// failure

throw new Exception(«Fallo al  enviar email » + client.getReply() + _ client.getReplyString()); } }

else

{ throw new Exception(«Fallo al enviar email » + client.getReply() + _ client.getReplyString()); } }

else

{ throw new Exception(«STARTTLS no fue aceptado » + client.getReply() +_ client.getReplyString());

} }

catch (Exception e) {

// some other problem

Toast.makeText(MainActivity.this, «Problema enviado email.», _ Toast.LENGTH_SHORT).show(); } }

 

private static void checkReply(SMTPClient sc) throws Exception

{ if (SMTPReply.isNegativeTransient(sc.getReplyCode()))

{ throw new Exception(«Transient SMTP error » + sc.getReply() + sc.getReplyString()); }

else if (SMTPReply.isNegativePermanent(sc.getReplyCode()))

{ throw new Exception(«Permanent SMTP error » + sc.getReply() + sc.getReplyString()); } }

//* * ATTENTION: This was auto-generated to implement the App Indexing API. * // See https://g.co/AppIndexing/AndroidStudio for more information. */

public Action getIndexApiAction()

{ Thing object = new Thing.Builder() .setName(«Main Page»)

// TODO: Define a title for the content shown.

// TODO: Make sure this auto-generated URL is correct.

.setUrl(Uri.parse(«http://[ENTER-YOUR-URL-HERE]»)) .build();

return new Action.Builder(Action.TYPE_VIEW) .setObject(object) ._ setActionStatus(Action.STATUS_TYPE_COMPLETED) .build(); }

 

@Override public void onStart()

{ super.onStart();

// ATTENTION: This was auto-generated to implement the App Indexing API.

// See https://g.co/AppIndexing/AndroidStudio for more information. client2.connect(); AppIndex.AppIndexApi.start(client2, getIndexApiAction()); }

@Override public void onStop()

{ super.onStop();

// ATTENTION: This was auto-generated to implement the App Indexing API

. // See https://g.co/AppIndexing/AndroidStudio for more information. AppIndex.AppIndexApi.end(client2,

getIndexApiAction());

client2.disconnect(); }

No hay mucho que añadir aquí, por supuesto, la manipulación de excepciones podría ser optimizado si utiliza sus propias clases de excepción y por ejemplo tanto el login como el pwd de gmail  pueden ser capturados en los ajustes de la aplicación para personalizarlo a voulntas.

Autenticación SMTP y SSL con Commons Net

Algunos servidores SMTP están configurados para aceptar sólo SSL  por lo  hay que asegurar la comunicación antes de emitir cualquier comando al servidor siendo generalmente el puerto usado el 465.

Por ejemplo  LaPoste.net oferece cuentas gratuitas de correo electrónico ofrecidas por la publicación francesa, asi que enviar correos desde  ahi seria similar a esto:

 public void sendEmail() throws Exception {  
    String hostname = "smtp.laposte.net";
    int port = 465;
    String password = "password";
    String login = "firstname.lastname";
    String from = login + "@laposte.net";
    String subject = "subject" ;
    String text = "message";
    // this is the important part : you tell your client to connect using 
    //SSL right away
   AuthenticatingSMTPClient client = new AuthenticatingSMTPClient("TLS",true);
    try {
      String to = "[email protected]";
      // optionally set a timeout to have a faster feedback on errors
      client.setDefaultTimeout(10 * 1000);
      client.connect(hostname, port);
      client.ehlo("localhost");
      client.auth(AuthenticatingSMTPClient.AUTH_METHOD.LOGIN, login, password);
      checkReply(client);
     client.setSender(from);
     checkReply(client);
      client.addRecipient(to);
      checkReply(client);
      Writer writer = client.sendMessageData();

      if (writer != null) {
        SimpleSMTPHeader header = new SimpleSMTPHeader(from, to, subject);
        writer.write(header.toString());
        writer.write(text);
        writer.close();
        if(!client.completePendingCommand()) {// failure
          throw new Exception("Failure to send the email "+ client.getReply() +_
 client.getReplyString());
        }
      } else  
{
        throw new Exception("Failure to send the email "+ client.getReply() + _
client.getReplyString());
      }

    } catch (Exception e) {
        throw e;
    } finally {
        client.logout();
        client.disconnect();
    }
  }

No repitimos el método checkReply () aquí, ya que es el mismo para ambos fragmentos de código

Usted habrá notado que el uso de SSL de inmediato significa que usted no tiene que buscar la respuesta execTls () (de hecho no funcionará si lo hace).

Dependencias

Eso es todo; Si desea hacer que estos ejemplos funcionen en su entorno, debe descargar la liberia  apache commons net 3.3 jar    y agregar el jar apache commons net 3.3 a su proyecto

 

 

coomons