Aplicaciones bonitas con Xamarin Forms | Pt. 1

Aplicaciones bonitas con Xamarin Forms

Hace algunos días un developer me escribió y me contaba que Xamarin forms era asombroso que para el las aplicaciones era algo feas en cuanto a la UI, yo le respondí y le dije que si se puede solo que se necesita un poquito más de esfuerzo. Pues en la play store o en cualquiera de las tiendas se engancha mucho mas rápido al futuro usuario de nuestra app si tiene una interfaz atractiva y amigable.

Que necesito para comenzar ?

1) Visual Studio 2015 Community (gratis  o una version superior ) o Visual Studio for MAC.

Vamos a hablar de interfaces bonitas

 

XFParallax by DevsDNA

Super pero que es XFParallax by DevsDNA, pues XFParallax by DevsDNA busca implementar el muy popular efecto efecto Parallax muy famoso en la plataforma ios.

Pero Yhorby que te digo que quiero hacer apps bonitas en Xamarin Forms, calma colega que se puede implementar en Xamarin forms.

Como lo hago?

Pues puedes encontrar un proyecto de ejemplo en su repositorio de Github aquí. 

Con esta librer√≠a podemos crear el efecto¬†parallax en las tres plataformas : Android, iOS and Windows ‚Äď con ¬†Xamarin Forms

Pasamos a explicar como funciona la librería.

1. Primero debemos crear ¬†el codigo responsable para crear¬†¬†la vista efecto parallax . Creamos un¬†nuevo ‚ÄúContentView‚ÄĚ llamado ‚ÄúParallaxView‚ÄĚ:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DevsDNA.XFParallax.ParallaxView">
  <ContentView.Content>
    <Grid>
      <ContentView x:Name="Header" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"/>
      <ScrollView x:Name="ParentScroll" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ContentView x:Name="Body"/>
      </ScrollView>
    </Grid>
  </ContentView.Content>
</ContentView>

2. EL Code behind para ‚ÄúParallaxView.xaml.cs‚ÄĚ deberia lucir como este :

namespace DevsDNA.XFParallax
{
    using Xamarin.Forms;
 
    public partial class ParallaxView : ContentView
    {
        private double lastScroll = 0;
 
        public static readonly BindableProperty HeaderContentProperty = BindableProperty.Create(nameof(HeaderContent), typeof(ContentView), typeof(ParallaxView), coerceValue: HeaderContentCoerceValue);
        public static readonly BindableProperty HeaderScrollSpeedProperty = BindableProperty.Create(nameof(HeaderScrollSpeed), typeof(int), typeof(ParallaxView), 2);
        public static readonly BindableProperty BodyContentProperty = BindableProperty.Create(nameof(BodyContent), typeof(ContentView), typeof(ParallaxView), coerceValue: BodyContentCoerceValue);
        public static readonly BindableProperty BodyMarginProperty = BindableProperty.Create(nameof(BodyMargin), typeof(Thickness), typeof(ParallaxView), new Thickness(0), coerceValue: BodyMarginCoerceValue);
 
        public ParallaxView()
        {
            InitializeComponent();
            ParentScroll.Scrolled += ParentScroll_Scrolled;
        }
 
        public ContentView HeaderContent
        {
            get { return (ContentView)GetValue(HeaderContentProperty); }
            set { SetValue(HeaderContentProperty, value); }
        }
 
        public int HeaderScrollSpeed
        {
            get { return (int)GetValue(HeaderScrollSpeedProperty); }
            set { SetValue(HeaderScrollSpeedProperty, value); }
        }
 
        public ContentView BodyContent
        {
            get { return (ContentView)GetValue(BodyContentProperty); }
            set { SetValue(BodyContentProperty, value); }
        }
 
        public Thickness BodyMargin
        {
            get { return (Thickness)GetValue(BodyMarginProperty); }
            set { SetValue(BodyMarginProperty, value); }
        }
        /// 
        <summary>
        /// Important to call this method from Page OnDissapearing to remove event handlers and avoid memory leaks.
        /// </summary>
 
        public void DestroyParallaxView()
        {
            ParentScroll.Scrolled -= ParentScroll_Scrolled;
        }
 
        private static object HeaderContentCoerceValue(BindableObject bindableObject, object value)
        {
            if (bindableObject != null && value != null && value is ContentView)
            {
                ParallaxView instance = (ParallaxView)bindableObject;
 
                instance.Header.Content = (ContentView)value;
            }
            return value;
        }
 
        private static object BodyContentCoerceValue(BindableObject bindableObject, object value)
        {
            if (bindableObject != null && value != null && value is ContentView)
            {
                ParallaxView instance = (ParallaxView)bindableObject;
 
                instance.Body.Content = (ContentView)value;
 
                if (instance.BodyMargin != null)
                {
                    instance.Body.Margin = instance.BodyMargin;
                }
            }
            return value;
        }
 
        private static object BodyMarginCoerceValue(BindableObject bindableObject, object value)
        {
            if (bindableObject != null && value != null && value is Thickness)
            {
                ParallaxView instance = (ParallaxView)bindableObject;
 
                if (instance.Body != null)
                {
                    instance.Body.Margin = instance.BodyMargin;
                }
            }
            return value;
        }
 
        private void ParentScroll_Scrolled(object sender, ScrolledEventArgs e)
        {
            if (lastScroll == 0)
                lastScroll = e.ScrollY;
            else
            {
                CalculateHeaderTranslation(e);
            }
        }
 
        private void CalculateHeaderTranslation(ScrolledEventArgs e)
        {
            double translation = 0;
 
            if (lastScroll < e.ScrollY) { translation = 0 - ((e.ScrollY / HeaderScrollSpeed)); if (translation > 0)
                    translation = 0;
            }
            else
            {
                translation = 0 + ((e.ScrollY / HeaderScrollSpeed));
                if (translation > 0)
                    translation = 0;
            }
            Header.TranslateTo(Header.TranslationX, translation);
            lastScroll = e.ScrollY;
        }
    }
}

3. Ahora podemos usar Parallax en una de nuestras  Content Pages, como se muestra a  continuación:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:DevsDNA.XFParallax.Sample" xmlns:parallax="clr-namespace:DevsDNA.XFParallax;assembly=DevsDNA.XFParallax" x:Class="DevsDNA.XFParallax.Sample.MainPage">
 
  <parallax:ParallaxView x:Name="MainParallax" BodyMargin="0,180,0,0" HeaderScrollSpeed="4">
    <parallax:ParallaxView.HeaderContent>
      <ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Blue">
        <Image Source="https://www.windowscentral.com/sites/wpcentral.com/files/styles/large/public/field/image/2016/02/microsoft-xamirin.jpg?itok=M_JRL3qE" Aspect="AspectFill" VerticalOptions="Start"/>
      </ContentView>
    </parallax:ParallaxView.HeaderContent> 
    <parallax:ParallaxView.BodyContent>
      <ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White" HeightRequest="500">
        <ContentView.Margin>
          <!-- need to add specific margin to Windows to show header.-->
          <OnPlatform x:TypeArguments="Thickness" WinPhone="0,180,0,0"/>
        </ContentView.Margin>
        <Grid BackgroundColor="White">
                    <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
                </Grid.RowDefinitions>
                     
                <Image HorizontalOptions="Center" VerticalOptions="Start" Margin="0,-50,0,0" HeightRequest="100" WidthRequest="100" Grid.Row="0" Source="http://students.stmaryschs.org.uk/Y9_Scratch_To_VB/images/VS_Logo.png" Aspect="AspectFit"/>
                <Label Text="Xamarin Parallax Effect!" Grid.Row="1" HorizontalOptions="Center"/>
                     
        </Grid>
      </ContentView>
    </parallax:ParallaxView.BodyContent>
  </parallax:ParallaxView>
 
</ContentPage>

4. Ahora en el ¬†code behind invocamos¬†‚ÄúDestroyParallaxView‚ÄĚ en el m√©todo llamado ¬†MainParallax¬†en el metodo ‚ÄúOnDisappearing‚ÄĚ :

public partial class MainPage : ContentPage
  {
      public MainPage()
      {
          InitializeComponent();
      }
 
      protected override void OnDisappearing()
      {
          base.OnDisappearing();
          // To avoid memory leak:
          MainParallax.DestroyParallaxView();
      }
  }

Y así es como tenemos el hermoso efecto Parrallax en nuestra aplicacion Xamarin Forms.

Quieres verlo funcionando ?

Ejecuta tu codigo y dejame saber que tal !!

Cualquier duda o comentario puedes escribirme o dejar un comentario en la entrada !

Xamarin.Forms | Eliminar margenes entre Grids

Xamarin.Forms es una gran ayuda a la hora de desarrollar aplicaciones para las tres principales plataformas móviles (Windows, iOS y Android), pero aveces si no ponemos atencion se nos escapan algunas cositas. Por ejemplo con los Grids, ya que la interpretación que hace para cada una de las plataformas de los controles es muy distinta y por defecto para iOS y Android deja un espacio entre las Grids.

Porque pasa esto ?

Pues porque no hemos indicado el padding a las celdas.

Como resolverlo ?

Para resolver este ‚Äúproblema‚ÄĚ tan s√≥lo tienes que hacer uso de una propiedad de los Grids, ‚ÄúRowSpacing‚ÄĚ

como muestra el siguiente code

<Grid RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>;
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Text="Item 1" />
    <Label Grid.Row="1" Text="Item 2" />
    <Label Grid.Row="2" Text="Item 3" />
</Grid>

as√≠ solucionamos ¬†el problema¬†en las tres plataformas y conseguiremos¬†pr√°cticamente la ‚Äúmisma‚ÄĚ visualizaci√≥n en todas las plataformas; dependiendo de los controles que pongas como contenido de cada una de las celdas del Grid.

Concatenar string en un Binding XAML Xamarin Forms

Saludos en esta entrada trabajaré con XAML y XAMARIN FORMS

Imaginemos que tenemos el siguiente código XAML:

<Label Text = "${Binding Price}"
       x:Name = "artPrice"
       HorizontalOptions = "Center"
       VerticalOptions = "Center"
      />

Y queremos que como resultado ese label muestre algo como esto:

$50

pero como resultado cuando ejecutemos nuestra aplicación obtenemos esto:

"${Binding Price}"

Para obtener el resultado deseado nuestro codigo XAML debe estar asi :

<Label Text = "{Binding Price, StringFormat='${0}'}"
       x:Name = "artPrice"
       HorizontalOptions = "Center"
       VerticalOptions = "Center"
      />

Y cuando ejecutemos nuestro label mostrara correctamente el string concatenado y el dato bindeado.

$50

Si tienes alguna duda o alg√ļn comentario, h√°zmelo saber deja un comentario aca.

Microsoft Azure, Creando una m√°quina virtual con Linux.

En Microsoft Azure encontraremos dos formas de implementación  la clásica y la administrador de recursos, Microsoft recomienda usar el modo administrador de recursos para las nuevas implementaciones en lugar de el clásico.

Para la realización de esta práctica necesitaremos una suscripción a Microsoft Azure, podemos obtener un trial de prueba aquí.

Herramientas que necesitamos para conectarnos de manera segura a nuestro servidor Linux.

SSH ‚ÄĒ o secure shell ‚ÄĒ es un protocolo de conexi√≥n cifrada que permite inicios de sesi√≥n seguros sobre conexiones no seguras. Se trata del protocolo de conexi√≥n predeterminado para las m√°quinas virtuales de Linux hospedadas en Azure, a menos que configuremos nuestras m√°quinas virtuales de Linux para habilitar alg√ļn otro mecanismo de conexi√≥n. Los usuarios de Windows tambi√©n pueden conectarse a m√°quinas virtuales Linux en Azure y administrarlas mediante una implementaci√≥n de cliente ssh, pero los equipos Windows normalmente no incorporan un cliente ssh, por lo que tendremos que elegir uno.

yo particularmente prefiero usar puTTY y puTTYgen, pueden descargar a puTTy aquí y a puTTygen aquí.

Antes de crear la m√°quina virtual Linux, ser√° necesario descargar las herramientas cliente y generar los archivos de claves p√ļblica y privada para poder crear una conexi√≥n segura desde nuestro¬†equipo de trabajo hacia la m√°quina virtual Linux en Azure.

Manos a la obra !!!!! XD ūüôā

Obtener ssh-keygen y openssl en Windows

La configuraci√≥n b√°sica SSH para Azure incluye un par de claves p√ļblicas y privadas ssh-rsa de 2048 bits, as√≠ como un archivo .pem generado a partir del archivo de clave privada id_rsa para su uso con el modelo de implementaci√≥n cl√°sica del portal cl√°sico (si es que en alguna ocasi√≥n necesitamos usarlo).

Si no tenemos  Git para windows instalado en nuestra pc podemos descargalo aqui. Una vez hecho esto ejecutamos el Git Bash como Administrador.

Cuando ejecutemos el Git Bash nos deberá aparecer una Línea de comandos similar a esta01

 

 

 

 

 

 

Luego escribimos el siguiente comando para crear una nueva clave p√ļblica.

openssl.exe req -x509 -nodes -days 365 -newkey rsa:2048 -keyout myPrivateKey.key -out myCert.pem 

Debemos proporcionar toda la información que nos pida, al terminar habremos creado  2 archivos: myPrivate.key y myCert.pem. La pantalla se verá similar a la siguiente.  02

 

 

 

 

 

 

Ahora ejecutamos el siguiente comando para convertir el archivo myPrivate.key en una clave privada RSA.

openssl rsa -in ./myPrivateKey.key -out myPrivateKey_rsa 

Esta sería el resultado en nuestra pantalla al ejecutar el comando03

El comando anterior nos creó una nueva clave privada llamada myPrivateKey_rsa.

Ahora ejecutamos¬†¬†Puttygen,¬†hacemos¬†clic en el men√ļ File > Load a Private Key.¬†04

Buscamos la clave privada, a la que hemos llamamos anteriormente myPrivateKey_rsa. Debemos cambiar el filtro de archivos para mostrar todos los archivos.

Nota: A la hora de buscar el archivo debemos tener en cuenta que se nos puede guardar en la carpeta de nuestro usuario y no en el folder git .

Luego de buscar el archivo myPrivateKey_rsa, nos aparecerá una ventana similar a esta.

05

Hacemos clic en aceptar. Y pulsamos¬†¬†Save private key¬†, para guardar nuestra clave privada. Luego hacemos clic en la opci√≥n¬†¬†Save Public Key,¬†para generar el archivo con la llave p√ļblica que se nos¬†solicitara al crear la m√°quina virtual Linux en el portal de Azure.

06

Si queremos confirmar que nuestra clave p√ļblica se guardo correctamente vamos a la consola git apuntamos al directorio donde guardamos el archivo que contiene nuestra clave p√ļblica en mi caso la nombre como passServer.txt, para visualizar mi clave publica utilice el siguiente comando

$  cat passServer.txt

La salida en la consola debería ser similar a este.

07

Creando una m√°quina virtual con Linux en el Portal de Azure

Nos dirigimos a la siguiente dirección https://portal.azure.com/ 

Una vez dentro, en el men√ļ concentrador damos clic en la opci√≥n +Nuevo.

08 

Seleccionamos la categoría Máquina Virtuales.

09

Nos aparecerá una lista de aplicaciones destacadas, Seleccionamos la imagen de Ubuntu Server 14.04 LTS. 

10

En la parte inferior de la página Ubuntu Server 14.04 LTS, seleccionamos Administrador de recursos para crear la máquina virtual en el Administrador de recursos de Azure.  Debemos tener en cuenta que, para la mayoría de las cargas de trabajo nuevas, Microsoft recomienda el modelo de implementación Administrador de recursos sobre el Clásico. En la misma página, damos clic al botón Crear, para iniciar el aprovisionamiento de la máquina virtual Linux.

12

Después de que  seleccionemos  la imagen, podemos utilizar los valores predeterminados de Azure en la mayor parte de la configuración y crear rápidamente la máquina virtual.
1. En la sección de configuración básica, proporcionamos los datos solicitados y damos clic en el botón Aceptar.

  • ¬†Nombre de la m√°quina virtual.¬†El nombre que le querramos dar a nuestra maquina
  • ¬†Nombre del usuario. Este es el nombre de usuario que utilizaremos al realizar la conexi√≥n con el cliente SSH.
  • ¬†Tipo de autenticaci√≥n. Seleccionamos la opci√≥n Clave p√ļblica SSH.
  • ¬†Clave p√ļblica SSH. Proporcionamos el contenido del archivo con la llave p√ļblica generada en anteriormente.
  • ¬†Suscripci√≥n. Seleccionamos nuestra suscripci√≥n Azure.
  • Grupo de recursos. Seleccionamos +Nuevo.
  • ¬†Nombre del nuevo grupo de recursos.
  • Ubicaci√≥n. Seleccionamos la ubicaci√≥n m√°s cercana a la regi√≥n.

13

En la secci√≥n Tama√Īo, ¬†deberemos seleccionar el tama√Īo adecuado para el uso que queramos dar a la m√°quina virtual. Cada tama√Īo especifica el n√ļmero de n√ļcleos de proceso, la memoria y otras caracter√≠sticas como la compatibilidad con el Almacenamiento Premium, lo que afectar√° al precio. Azure recomienda autom√°ticamente determinados tama√Īos seg√ļn la imagen que se elija.

En nuestro caso como es para fines educativos ¬†elegiremos ¬†el bloque DS1_V2 como tama√Īo de la m√°quina virtual y da clic en el bot√≥n Seleccionar.

14

En la sección Configurar características opcionales, podemos ver la configuración de red y de almacenamiento de la nueva máquina virtual. En la primera máquina virtual, generalmente podemos aceptar la configuración predeterminada. Damos clic en el botón Aceptar para elegir los valores predeterminados.

15

En la sección de Resumen podemos revisar las opciones de configuración. Cuando terminemos de revisar la configuración, damos clic en el botón Aceptar para proceder a la creación de la máquina virtual. El proceso dará inicio y el estatus actual será mostrado en el Panel de inicio.

Al finalizar se nos desplegar√° una pantalla similar a esta.

17

 

 Utilizar ssh para realizar una conexión a la Máquina Virtual creada

Ahora podemos conectarnos a una máquina virtual con Ubuntu mediante ssh de manera normal. Sin embargo, necesitamos detectar la dirección IP asignada a la máquina virtual de Azure.
El valor de la IP p√ļblica puede encontrarse en la hoja de configuraci√≥n de la m√°quina virtual creada.
1. Navega a la hoja de configuración de la nueva máquina virtual creada.
2. Copia el valor de la IP p√ļblica.

18

Ejecutamos la herramienta Putty.exe que descargamos anteriormente y escribimos la direccion IP publica de nuestra m√°quina virtual.

19

Hacemos clic en la pesta√Īa Connection > SSH > Auth para elegir la clave privada.

20

Hacemos clic en Open para conectarnos a nuestra máquina virtual. En la ventana de alerta de seguridad, seleccionamos Yes para agregar la llave del servidor en el caché de Putty y continuar con la conexión.

21

Después de realizar la conexión, se nos mostrará la consola del servidor.

22

En la consola, escribimos el nombre de usuario que proporcionamos al crear la m√°quina virtual.

23

En este momento, habremos realizado la conexi√≥n a nuestro servidor Linux en Azure !!! Genial no ? ūüôā

Esto es todo hasta el momento en esta entrada , describimos el proceso para crear una máquina virtual con Linux en Microsoft Azure. Describimos también, el proceso para poder realizar una conexión segura con el servidor Linux mediante SSH.

Cualquier duda, comentario o sugerencia no duden en escribirme ¬†! ūüôā

 

 

 

 

 

Que es Office 365

 

Saludos en este POST estaremos aprendiendo acerca un poco de las características que nos brinda este producto de Microsoft.

Como primer punto vamos a identificar los puntos en que 365 nos ayuda a resolver:
*infraestructura: por mucho que gastes en la infraestructura jamas se igualara a la de microsoft
la disponibilidad y calidad.
*costos indirectos: esto implica investigar, adquirir, capacitación y gestión estratégica.
*pérdida de productividad: todos conocemos la vital importancia dentro de un negocio que es el correo este  afecta la productividad.

Ahora bien

–Qu√© es Office 365?
Es mucho más que office en la nube, más bien es un conjunto de herramientas para  ser productivo en tu empresa con ello obtendrás email de primera clase, almacen documentos en la nube.
Este producto es escalable pero no toda la suite , los features se venden por separado esto lo hace muy  flexible

–Todo¬†estar√°¬†en la nube ?¬†
Se decide dónde guardar tus datos local o nube trabaja transparente , optas por la nube a medida que la conoces.
En fin office 365 es su oficina completa en la nube se adapta en la forma que el usuario trabaja y tiene clientes para cualquier dispositivo