Crear App de Facebook con Xamarin Forms

Con este sencillo ejemplo aprenderá a usar la vista “WebView” en Xamarin Forms con Visual Studio 2017.

  • Publicado el
  • Juan Jos Mendoza.

    Juan José Mendoza --> juan.mendoza@LYNXWORK.CLOUD

    Nota:

    WebView es una vista para mostrar contenido web y HTML en su aplicación, WebView muestra el contenido HTML dentro de la aplicación.

    1.- Creando el proyecto

    Abra Visual Studio 2017, una vez abierto de clic en Archivo --> Nuevo --> Proyecto

    Aparecerá el cuadro de diálogo siguiente, que muestra algunas de las plantillas disponibles para crear un nuevo proyecto, en la sección de plantillas colóquese en Visual C# --> Cross-Platform y seleccione la plantilla Cross Platform App (Xamarin)

    Coloque un nombre al proyecto, defina su ubicación y de clic en Aceptar

    Se abrirá un nuevo cuadro de dialogo que muestra algunas de las plantillas disponibles para crear una aplicación de Xamarin, seleccione la plantilla Aplicación en blanco, en el apartado de Tecnología de UI establezca Xamarin.Forms, como estrategia de uso compartido de código seleccione Biblioteca de clases portátil (PLC) y de clic en OK.

    Aparecerá otro cuadro de dialogo, que permite seleccionar las versiones mínimas con las que la aplicación de Windows Universal será compatible, deje los valores por defecto y de clic en Aceptar.

    2.- Codificando la App

    Cuando Visual Studio 2017 termine de generar la solución de Xamarin Forms, de forma predeterminada abre el código de la clase parcial App contenida en el proyecto portable.

    En el constructor de esta clase se define automáticamente que la página de inicio será MainPage()

    Localice MainPage.xaml

    Abra MainPage.xaml

    Elimine el control Label

    Agregue una vista de tipo WebView dentro del ContentPage, asígnele un nombre a la vista con la finalidad de identificarla (en este ejemplo se asignará el nombre visualizadorWeb) y de clic en el icono correspondiente para guardar los cambios.

    Localice MainPage.xaml.cs

    Abra MainPage.xaml.cs y en su constructor declare una variable y asinele el valor https://www.facebook.com/

    A la propiedad Source de la vista visualizadorWeb asígnele el valor de la variable y establezca su propiedad HeightRequest en 1

    Cree un método protected override bool OnBackButtonPressed() (Se ejecutara cuando se presiona el botón de retroceso del dispositivo)

    Dentro del metodo, verifique el valor de la propiedad CanGoBack de la vista visualizadorWeb,  Esta propiedad contiene true si hay páginas para volver a navegar y false si el navegador está en la URL inicial.

    Establesca una condicion con el valor de la propiedad y en caso de ser verdadero invoque el metodo GoBack() (si CanGoBack es cierto, la llamada GoBack se desplazará a la última página visitada) y retorne true. En el caso contrario invoque OnBackButtonPressed() y retorne false.

    Guarde los cambios.

    De forma predefinida el proyecto de Android es el que está configurado como proyecto de inicio, por lo que en Visual Studio 2017 aparecerá un listado de emuladores de dispositivos Android donde se podrá ejecutar su App

    Seleccione VisualStudio_android-23_x86_phone (Android 6.0 - API 23) y presione la tecla F5

    Espere a que se inicie el Emulador de Android, cuando termine de iniciarse se mostrara el resultado de la ejecucion de su app. (Debe estar conectado a internet para que se muestre correctamente)

    Introduzca sus credenciales correctas

     De clic en Log In

    Verifique como puede entrar a las secciones de forma correcta

    De clic en el botón Atrás y compruebe como funciona correctamente

    Ahora ya tiene su propia App de Facebook disponible para Android

    Detenga la ejecución del programa dando clic en el icono correspondiente

    Seleccione el proyecto correspondiente a la plataforma universal de Windows, de clic derecho y elija Establecer como proyecto de inicio

    De clic en la flecha que se encuentra delante de Debug y seleccione Administrador de configuración…

    Se desplegará una ventana mostrando la configuración de compilación, correspondiente a los proyectos que tiene en su solución. Identifique el proyecto universal de Windows y seleccione los campos Compilación e Implementar, de clic en Cerrar.

    Presione la tecla F5 y espere a que compile e implemente su solución en el sistema local, cuando termine se mostrara el resultado de la ejecución de su App. (Debe estar conectado a internet para que se muestre correctamente)

    Esta aplicación quedara disponible para windows 10 por lo que pódra ser desplegada en una PC un celular o una tablet, incluso en Xbox One.