Vanguarsoft Developers blog

Ing. Javier Leal – Coordinador de Requerimientos en Traetelo.com / Traiter Lourted – VENEZUELA


Deja un comentario

Primera aplicación Xamarin (Xamarin Form)

 

Hola internautas para seguir pagando mi deuda prometida sobre Xamarin una vez que ya conocemos la introducción e instalamos visual studio siguiendo las instrucciones de los Link dados en el anterior Post.

https://javierleal.wordpress.com/2017/08/19/introduccion-a-xamarin/

Cabe destacar que en Xamarin puedes desarrollar aplicaciones Nativas como Aplicaciones compartidas y es por ello que en este tutorial veremos lo que es Xamarin Form, la mejor forma de comprender este concepto es teniendo la arquitectura de Xamarin sin Xamarin Form.

enfoque 1

Xamarin tiene un enfoque tradicional donde puede desarrollar toda la capa de negocio de tu aplicación en C Sharp y luego de manera individual en cada plataforma desarrollar el Front.

 

 

 

enfoque 2Xamarin Form por otra parte permite crear una interfaz compartida entre varias aplicaciones al igual que su capa de negocio o Back End esto brinda una flexibilidad y menos tiempo para el desarrollo de aplicaciones en Múltiples Plataformas..

 

 

Las ventajas de Xamarin form fueron visualizadas muy rápidamente por muchos desarrolladores que ya se encuentran explotando todas estas capacidades cabe destacar que el siguiente tutorial se enfoca en Xamarin Form por lo que crearemos el ejemplo tradicicional “Hola mundo” en una aplicación Xamarin Form que corra en Windows 10, Windows Phone y Android, para poder dar un ejemplo de IOS se requiere una Mac y en este momento no cuento con ella.

1.- Lo primero que se debe realizar es crear una nueva aplicación seleccionando nuevo ->proyecto, en la sección de lenguaje C sharp seleccionar Cross-Platform y luego aplicación multiplataforma (Xamarin Form o nativa) es mi caso le coloque al nombre del proyecto HelloWord.

paso1

2.- Aparecer una pantalla con diversas opciones del proyecto en este caso vamos a seleccionar aplicación vacía en la sección que dice Tecnología de UI seleccionamos Xamarin.Form y en estrategia de uso compartido del código seleccionamos Biblioteca de clases portatic (PLC)  y presionamos en Botón Aceptar.

paso2

3.- El proceso de creación del proyecto a veces tarda un poco en este proceso es normal que se solicite la configuración de la versión de aplicaciones universales en mi caso elegí Windows 10, y aceptamos para seguir con la creación del proyecto.

paso3

Así como debes Elegir la versión de Windows también se nos presenta inmediatamente opciones para conectar tu sitio web con una MAC en mi caso simplemente presiones cancelar por lo antes expuesto.

paso4

4.- Una vez ya creado podemos observar que se crearon 4 proyectos el primero representa la librería de clases potables donde podremos codificar toda la capa de negocio y por ser Xamarin Form también tenemos la capa de diseño, se crean 3 proyectos mas que representan las plataformas Android, IOS y Windows Universal este paso es mas para hacer una conceptualización sencilla .

paso5

5.- En el proyecto Portable, tenemos un archivo MainPage.xaml esta es la pantalla principal de la aplicación basta con tener conocimiento sobre XAML para ya empezar a trabajar en el diseño de la aplicación procedemos a abrir el archivo MainPage.xaml, de manera predeterminada el MainPage.xaml tiene el siguiente código:

<Label Text=”Welcome to Xamarin Forms!”
VerticalOptions=”Center”
HorizontalOptions=”Center” />

Para que sea mas interesante agregamos un Label donde mostrar resultados, Un entry que equivale a un TextBox para que la persona ingrese su nombre y un botón que permita saludar a quien escribió su nombre por lo que ahora su contenido queda de esta manera.

<StackLayout>
    <Label Text=”Welcome to Xamarin Forms!”
       VerticalOptions=”Center”
      HorizontalOptions=”Center” />
    <Label x:Name=”LBLMsg”
       VerticalOptions=”Center”
      HorizontalOptions=”Center” />
   <Entry x:Name=”TXTName”></Entry>
   <Button Text=”Saludar” Clicked=”Button_Clicked”></Button>
</StackLayout>

Como ven agregamos un botón y agregamos el evento Clicked que gracias a la ayuda de Visual studio genero el evento al cual le agregaremos el siguiente código.

private void Button_Clicked(object sender, EventArgs e)
{
          LBLMsg.Text = string.Format(“Hola Mundo {0}”, TXTName.Text);
}

6.- Ya con esto nuestra aplicación esta lista para ser probada, quizá por urgencia de integración del proyecto Xamarin en Visual Studio falta la detección de algunos errores es por ello que recomiendo comenzar compilando por Windows ya que el depurador de Windows 10 puede arrojar excepciones rápidamente y evitar quedar trancado corriéndolo en Android sin saber que hacer por que aun falta mejorar esos aspectos, es por ello que en la lista de proyecto elegimos para compilar UWP, para estas aplicaciones a veces se hayan problemas de arquitectura al compilar es por ello que yo personalmente elijo x86.

PASO6

Ya procedemos a compilar con nuestro equipo local y observamos la carga de la aplicación.

paso7

Y luego que carga ingresamos nombre y presionamos el botón para comprobar funcionalidad.

paso8

Ahora solo queda correr la misma aplicación en Android podemos conectar directamente el teléfono activando las opciones developer o simplemente ejecutamos los emuladores disponibles, la prueba de esta app con Windows 10 se las estaré debiendo debido a que al compilar con Windows Phone 10 se esta presentando la aplicación como la anterior y lo estaré resolviendo pronto, la aplicación de Android la veremos a continuación:

paso9

Esto seria todo por hoy espero que lo practiquen en sus casa y pronto vendremos con otro tutorial de Xamarin.

 

 

 

 


Deja un comentario

Introducción a Xamarin

Muy buenas tardes internautas como deuda de un curso que realice sobre esta tecnología vengo a saldar deudas comenzando inmediatamente.Xamarin-logo.svg

Xamarin es una tecnología que fue comprada recientemente por Microsoft enfocada en el desarrollo Móvil que nació de el proyecto Mono la misma nos permite a nosotros los desarrolladores construir aplicaciones con lenguaje de programación C sharp y la misma aplicaciones funciones en IOS, Android, Windows Phone, antes era pago pero luego de ser comprado por Microsoft esta gratuito con licencia Open Source.

Historia:

En junio de 2000, Microsoft anunció por primera vez su .NET Framework. Miguel de Icaza, de Ximian, comenzó a investigar si una versión para Linux era factible. Posteriormente, el proyecto Mono fue lanzado el 19 de junio de 2001. Ximian fue adquirida por Novell el 4 de agosto de 2003.

Después de la subsiguiente adquisición de Novell por parte de Attachmate en abril de 2011, Attachmate anunció el despido de cientos de trabajadores de Novell, incluyendo a desarrolladores de Mono, poniendo así el futuro del proyecto en cuestión.

El 16 de mayo, Miguel de Icaza anunció en su blog que Mono será desarrollado y soportado por Xamarin, empresa que planea lanzar una serie de productos para dispositivos móviles. De acuerdo con de Icaza, al menos una parte del equipo original de Mono se ha movido a la nueva compañía.

Sin embargo, en julio de 2011, Novell, ahora una subsidiaria de Attachmate, anuncio que concedería una licencia perpetua a Xamarin para Mono, MonoTouch y Mono para Android, tomando así Xamarin la administración oficial del proyecto. En febrero de 2016 es comprada por Microsoft.

Fuente: Wikipedia

Xamarin es único en que combina todo el poder de las plataformas nativas y añade una serie de características poderosas propias, incluyendo:

  1. Binding completo para los SDK subyacentes – Xamarin contiene enlaces para casi todos los SDK de la plataforma subyacente en iOS y Android. Además, estos enlaces están fuertemente mecanografiados, lo que significa que son fáciles de navegar y usar, y proporcionan una comprobación robusta del tipo de tiempo de compilación y durante el desarrollo. Esto genera menos errores de ejecución y aplicaciones de mayor calidad.
  2. Objetivo-C, Java, C y C ++ Interop – Xamarin proporciona facilidades para invocar directamente bibliotecas Objective-C, Java, C y C ++, dándole el poder de usar una amplia gama de código de terceros que ya se ha creado. Esto le permite aprovechar las bibliotecas iOS y Android existentes escritas en Objective-C, Java o C / C ++. Además, Xamarin ofrece proyectos vinculantes que le permiten enlazar fácilmente bibliotecas nativas de Objective-C y Java usando una sintaxis declarativa.
  3. Modern Language Constructs – Las aplicaciones de Xamarin están escritas en C #, un lenguaje moderno que incluye mejoras significativas sobre Objective-C y Java, tales como características de lenguaje dinámico , construcciones funcionales como Lambdas , LINQ , características de programación paralela , genéricos sofisticados y más.
  4. Amazing Base Class Library (BCL) – Las aplicaciones de Xamarin utilizan .NET BCL, una colección masiva de clases que cuentan con funciones completas y optimizadas, como potentes soportes XML, Database, Serialization, IO, String y Networking, por nombrar algunos. Además, el código C # existente se puede compilar para su uso en aplicaciones, lo que proporciona acceso a miles y miles de bibliotecas que le permitirán hacer cosas que aún no están cubiertas en el BCL.
  5. Entorno de desarrollo integrado moderno (IDE) – Xamarin utiliza Xamarin Studio en Mac OS X y Visual Studio en Windows. Estos son IDEs modernos que incluyen características como autocompletado de código, un sofisticado sistema de administración de Project y Solution, una biblioteca de plantillas de proyectos completos, control de fuentes integrado y muchos otros.
  6. Soporte de plataforma móvil cruzada – Xamarin ofrece un sofisticado soporte multiplataforma para las tres principales plataformas móviles de iOS, Android y Windows Phone. Las aplicaciones se pueden escribir para compartir hasta un 90% de su código, y nuestra biblioteca Xamarin.Mobile ofrece una API unificada para acceder a recursos comunes en las tres plataformas. Esto puede reducir significativamente los costos de desarrollo y el tiempo de lanzamiento al mercado para desarrolladores móviles que apuntan a las tres plataformas móviles más populares.

Esta tabla muestra qué plataformas se pueden construir con diferentes combinaciones de herramientas de desarrollo y sistemas operativos:

MAC OS VENTANAS
Entorno de desarrollo VISUAL STUDIO PARA MAC ESTUDIO VISUAL
Xamarin.iOS Sí (con equipo Mac)
Xamarin.Android
Xamarin.Forms Sólo para iOS y Android
(macOS en vista previa)
Android, Windows / UWP
(iOS con equipo Mac)
Xamarin.Mac Abrir proyecto y compilar solo ^

NOTA: Para desarrollar para iOS en equipos con Windows debe haber un equipo Mac accesible en la red , para la compilación remota y la depuración. Esto también funciona si tiene Visual Studio ejecutándose dentro de una máquina virtual de Windows en un equipo Mac.

Para su instalación la propia documentación nos brinda un manual para realizar la instalación paso a paso síguelas y lograras instalar Xamarin exitosa mente:

https://developer.xamarin.com/es-es/guides/android/getting_started/installation/windows/

En caso de ser util te coloco el link de la instalación con MAC.

https://developer.xamarin.com/guides/ios/getting_started/installation/

Con Xamarin los objetivos son como los que vemos en las imágenes podremos ver nuestra aplicación corriendo en tres plataformas con el mismo código.

intro-app-examples

Una vez que lo tengas instalado comenzaremos luego de este Post una serie de video s con ciertas características de Xamarin que podrán ayudarte a comenzar en ese mundo.


Deja un comentario

Serializar JSON resultado de Query MYSQL con PHP

Buenos días amigos hoy les traigo algo bastante sencillo, a veces muchos programadores nos topamos con problemas que parecen ser difíciles pero no lo son y terminan solucionando con algo muy sencillo y como el tiempo de un programador lo vale quiero compartir esto con lo que estuve casi 2 horas lidiando bueno mi fuerte no es php pero no deja de ser un tips que pueda usar yo mismo al pasar del tiempo o simplemente ayudar a algún colega.

El problema que se me presento es el siguiente: hacia una consulta del MYSQL  y quería serializar el resultado y pensé que utilizando mysql_fetch_array podría la consulta convertirse en un arreglo y devolver el valor deseado pero era lo esperado y tampoco tenia los key de los campos por lo que investigue y luego de varias pruebas fallidas soluciones con el siguiente código.

$resultData=mysql_query(“Select * from tableSample”,$conexion);

$rows = array();
while($r = mysql_fetch_assoc($resultData)) {
$rows[] = $r;
}

echo json_encode($rows);

Se utilizo el mysql_fetch_assoc para que devolviera los KEYS de cada campo consultado lo que llamamos un arreglo asociativo y se realizo un bucle while para recorrer cada valor devuelto por la consulta que este era uno de los errores que presentada por crees que ya el arreglo venia completo al consultarlo y al llevarlo todo de los datos utilizar json_encode para serializar en json y devolver el valor a donde desees ya que json lo permite y es un gran estandar

 


Deja un comentario

JSfiddle y Codepen (Tools)

Hola amigos amantes de tecnologías yo otras vez diciendo que volveré y no termino de volver espero que esta si sea la vencida, en mi articulo de hoy les traigo Tools y mas Tools, las herramientas al momento de desarrollar son sumamente importante sobre todo cuando no estar en una pc de manera fija o simplemente quieres probar algo sin afectar el código existente o si tienes talento y quieres mostrarle a al mundo lo que sabes hacer con tecnologías Font and Back del mundo web pues estas son las herramientas necesarias para mostrar y compartir tus habilidades.

Ahora mas allá de todo eso también si simplemente necesitas hacer una funcionalidad y quieres buscar de que manera lo ha hecho otro desarrollador también este termina siento el lugar correcto..

LogoEs un sitio web en el que te puedes registrar para guardar funcionalidad web que hayas hecho construido la herramienta tiene un poder impresionante por que si por ejemplo estas en la pc que no es tuya pero necesitas probar o comprobar una funcionalidad básica que no sea necesario de traer tu código existente puede usar codepen, esta te permitirá agregar otros tools como jquery , bootstrap para hacer tus pruebas directo en la web y a real time donde puedes ver código y resultados en una sola pantalla, codepen es mi favorito cuando deseo buscar un diseño agradable para mis web Sites mucho talento ha compartido sus creaciones aca y son una comunidad bastante grande ademas si eres Teachers puedes usarlo para mostrar a tus alumnos código y resultado de manera que lo entiendan.

Aca te coloco una vista previa para que veas como se veras tus pruebas o lo que hagas con esta herramienta.

codepen

Url: http://codepen.io/

Como todo lo bueno siempre debe seguir y no por ser el segundo en este blog significa que no sea mejor que codepen todo depende del usuario:

jsfiddle.pngAl igual que codepen es una excelente herramienta para compartir, buscar, practicar tus códigos aquí tenemos un área de colaboración bastante interesante para por ejemplo dar tus clases yo les recomiendo que las empiecen a usar y sin mas que explicar les dejo la captura y url del site de JSFiddle.

jsfiddle.jpg

Url: https://jsfiddle.net/


Deja un comentario

Diseñando con código XAML

Para comenzar a desarrollar aplicaciones para la Windows Store es necesarios conocer Principalmente su Plataforma Arquitectónica, sus principios para el diseño de Aplicaciones y luego decidir cual será tu rumbo si vas a querer desarrollar aplicaciones basadas en HTML5 y JavaScrips o Lenguaje C sharp o Visual Basic con XAML.

 

XAML-LOGO

 

En mi caso todos mis post sobre la Windows Store estarán basados en C# ya que es el área donde quiero enfocar, pero antes de comenzar a publicar artículos mas avanzados de diferentes funcionalidades voy a dejarles bien en claro lo básico que es lo que eh estado haciendo en los últimos 3 artículos publicados.

 

Cabe destacar que si cuando se anuncio por primera vez este Lenguaje de Marcado y llegaste ya a conocerlo cuando por primera vez salió Silverlight quiero decirte que se ha mantenido, con esto solo quiero decir que XAML en Silverlight, en Windows Phone, En Windows 8 e incluso en WPF la sintaxys es igual no necesitas aprender algo nuevo.

 

Hace tiempo cree un artículo que les será útil si por primera vez están tocando la Windows Store.

 

https://javierleal.wordpress.com/2011/05/21/conociendo-el-codigo-xaml-parte-1/

 

Hay algo bien importante que recalcar en cuando al XAML y es que cuando hablamos de alguna de las etiquetas estas son clases..  para poder verse visualmente en la pantalla deben heredar de un UI Element.

 

Daré un ejemplo muy sencillo un Botton:

 

En XAML

<Button x:Name="BTNVolverMenu"
        Background="Blue"
        Foreground="White"
        HorizontalAlignment="Right"
        Content=" Volver al Menu "
        Grid.Row="1"
        Margin="0,0,20,0"
        Click="BTNVolverMenu_Click">
</Button>

 

Detrás de este código esta una clase que hereda de UI Element que permite que sea visible al escribir el código o simplemente arrastras el control pero esto que vemos no es muy diferente a hacer esto.

 

Código C sharp

 

Button BTNVolverMenu = new Button();
BTNVolverMenu.Name = "BNVolverMenu";
BTNVolverMenu.Background = new SolidColorBrush(Colors.Blue);
BTNVolverMenu.Foreground = new SolidColorBrush(Colors.White);
BTNVolverMenu.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
BTNVolverMenu.Content = " Volver al Menu ";
Grid.SetRow(BTNVolverMenu, 1);
BTNVolverMenu.Margin = new Thickness(0, 0, 20, 0);
BTNVolverMenu.Click +=BTNVolverMenu_Click;

 

 

La diferencia entre 2 objetos UI Element tiene una diferencia y es que cuando lo haces por XAML Ya el control se encuentra plasmado en la pantalla mientras que por código debe agregarlo a uno de los contenedores disponibles como:

 

Grid, Canvas o Stackpanela  través de su propiedad Children.


Deja un comentario

Principios de Diseño – Windows Store

 DEV-CENTER-L1-Design_Get-inspired_InvariantCulture_Default_472x300_InvariantCulture_DefaultUna de las principales cosas que debemos tener en cuenta antes de desarrollar aplicaciones para la Windows Store son sus principios de diseño, hare un pequeño resumen de lo que se trata esto y daré un link para que puedan profundizar este tema, a pesar de ser un tema enfocado mas a diseño que a desarrollo es un tema importante que hay que tomar muy en cuenta al momento de desarrollar estas aplicaciones.

 

WSA_Design_L2_1_UniquelyWindows_ModernDesign_702x394px_InvariantCulture_Default

Lo que se quiere lograr con estos principios es darle protagonismo a la información aprovechando la capacidad de los lenguajes universales de todo el mundo.. Por ejemplo: muchos han visto el símbolo que representa un cuarto de baño y cualquier persona sin importar idioma puede entenderlo, básicamente se trata de utilizar este lenguaje universal que fácilmente puedes verlo al ver la imagen principal de este post.

 

Básicamente en esto se basa los principios del fundamento de Microsoft claro es un resumen si quieres saber mas detalle de donde proviene todo esto te recomiendo entres a: http://dev.windows.com/es-es/design/modern-design.

 

Estos fundamentos son primordiales para lograr características interesantes en las aplicaciones están el los siguiente grupos:

 

Ojo: Todo esto no es mas que un resumen de un articulo de MSDN basado en estos principios yo solo quise resumirlo y mostrar mis opiniones, esperare las de ustedes.

Muestra buen hacer

 

La jerarquía y el Equilibrio en la aplicación:

IC730743 IC733868

Jerarquía                                Jerarquía Insuficiente

 

Se puede observar muy fácilmente como una información sin aplicar esta norma la información termina siendo confusa para el usuario final. Importante usar adecuadamente la Tipografía esto te permite agregar a tu aplicación mas personalidad.

 

Haz más con menos

 

Otro de los putos resaltantes es el protagonismo de la información con estos principios, podemos hacer estas dos comparaciones y analizarlas a simple vista.

  IC730745IC729987

Enfoque de contenido                   Contenido que distrae

 

A pesar de que la aplicación de Outlook para Windows Mobile tiene mas imágenes y colorido no podemos negar que estos principios vuelven a tener la razón, es muchísimo mas organizado, serio y presentable la opciones de la interfaz moderna, Ustedes que Opinan espero comentarios.

 

Para continuar es muy imparte dejar que la información fluya en su espacio, no quiere decir no colores imágenes puede usarlas.. pero no le quites el protagonismo y en espacio a la información.

IC733869

 

En muchas aplicaciones siempre la interfaz estaba abarrotada de opciones e imágenes que incluso eran innecesarias y no tenían mucho que ver con el contenido principal en esta aplicación del tiempo se puede ver fácilmente lo que el usuario necesita el estado del tiempo que se ve a través de la imagen de fondo y datos resaltantes como la temperatura.

 

Rápido y fluido

 

IC728119  IC728120 (1)

 

Movimiento y Dinamismo: Es lo que brinda las aplicaciones del Store a través de sus Tiles, la cual permiten mostrar información sin necesidad de acceder a la aplicación, sigue teniendo mas protagonismo la información, si nos basamos en el ejemplo anterior del tiempo acá podemos mostrar ese estado del tiempo sin necesidad de abrir la aplicación y solo acceder si se quiere ir a mas detalle.

 

Verdaderamente digital

El uso de la iconografía es la que resalta en esta área donde la instrucción es se iconográfico no iconográfico.

IC729988 IC729989

Esto sigue dando mas seriedad y rapidez a la aplicación al dejar de usar imágenes y comenzar a usar vectores que puedas construir un excelente mensaje universal con una sola infografía se puede comprender de que se trata la funcionalidad.

 

Gana en equipo

Esto es lo mejor de todo y se trata de unificar tu trabajo para que funciones en diferentes dispositivos manteniendo estos principios, y esto es un chicho muy famoso que dice no vuelvas a inventar la rueda. dedícate a innovar y mostrar la verdadera personalidad y protagonismo de tu solución.

IC728122

 

Como dije anteriormente todo esto no es mas que un resumen de un articulo de MSDN basado en estos principios yo solo quise resumirlo, para ver mas a detalle

https://msdn.microsoft.com/library/windows/apps/hh781237.aspx