WorkShop lab1 para mac

por | octubre 21, 2017

Esta guía se divide en dos partes que ayudaran a compilar nuestro workshop, aplicación de Xamarin.Android (mediante Visual Studio o Visual Studio para Mac) y a comprender los aspectos básicos del desarrollo de aplicaciones de Android con Xamarin.

Basado en: Hello Xamarin developer.xamarin.com/es-es

Android APP

En este tutorial, crearemos una aplicación que convierte un número de teléfono alfanumérico (escrito por el usuario) en un número de teléfono numérico y muestra ese número al usuario. La aplicación final tiene este aspecto:

Captura de pantalla de la aplicación una vez completada

Requisitos

Para seguir este tutorial, necesitará lo siguiente:

  • La versión más reciente de Visual Studio para Mac.

En este tutorial se presupone que está instalada la última versión de Xamarin.Android y que se está ejecutando en la plataforma que ha seleccionado. Para obtener una guía de instalación de Xamarin.Android, vea las guías Instalación de Xamarin.Android. Antes de empezar, descargue y descomprima el conjunto Iconos de aplicación y pantallas de inicio de Xamarin.

Configuración de los emuladores

Si estás usando el emulador Android SDK de Google, le recomendamos que configure el emulador para usar la aceleración de hardware. Las instrucciones para configurar la aceleración de hardware están disponibles en Aceleración de hardware.

Vamos con el workshop

  1. Inicie Visual Studio para Mac desde la carpeta Aplicaciones o desde Spotlight. (cmd más espacio)
  2. Haga clic en Nueva solución… para crear un proyecto.
  3. En el cuadro de diálogo Choose a template for your new project (Elegir una plantilla para el nuevo proyecto), haga clic en Android > Aplicación y seleccione la plantilla Aplicación de Android. Haga clic en Siguiente.

    Elegir la plantilla Aplicación de Android

  4. En el cuadro de diálogo Configure su aplicación de Android, asigne a la nueva aplicación el nombre Phoneword y haga clic en Siguiente.

    Configurar la aplicación de Android

    En el cuadro de diálogo Configure su aplicación de Android, deje los nombres de solución y proyecto establecidos en Phoneword y haga clic en Crear para crear el proyecto.

  5. Después de que el nuevo proyecto se haya creado, expanda la carpeta Recursos y, después, la carpeta Diseño en el panel de Solución. Haga doble clic en Main.axml para abrirlo en Android Designer. Este es el archivo de diseño de la pantalla cuando se visualiza en Android Designer:

    Abrir Main.axml

  6. Seleccione el botón Hello World, Click Me! (Hola a todos, haz clic aquí)Botón en la superficie de diseño; pulse la tecla Eliminar para quitarlo.
  7. Desde el Cuadro de herramientas (el área de la derecha), escriba text en el campo de búsqueda y arrastre un widget de Texto (grande) a la superficie de diseño (el área del centro):

    Agregar un widget de texto grande

  8. Con el widget de Texto (grande) seleccionado en la superficie de diseño, puede usar el panel Propiedades para cambiar la propiedad Text del widget de Texto (grande) a Enter a Phoneword: como se muestra a continuación:

    Establecer las propiedades del widget de texto grande

  9. Después, arrastre un widget de Texto sin formato del Cuadro de herramientas a la superficie de diseño y colóquelo debajo del widget de Texto (grande). Tenga en cuenta que puede usar el campo de búsqueda para ayudarle a buscar widgets por el nombre:

    Agregar un widget de texto sin formato

  10. Con el widget de Texto sin formato seleccionado en la superficie de diseño, puede usar el panel Propiedades para cambiar la propiedad Id del widget de Texto sin formato a @+id/PhoneNumberText y cambiar la propiedad Text a 1-855-XAMARIN:

    Establecer las propiedades del widget de texto sin formato

  11. Arrastre un Botón del Cuadro de herramientas a la superficie de diseño y colóquelo debajo del widget de Texto sin formato:

    Agregar un botón

  12. Con el Botón seleccionado en la superficie de diseño, puede usar el panel Propiedades para cambiar la propiedad Iddel Botón a @+id/TranslateButton y cambiar la propiedad Text a Translate:

    Configurar como el botón Traducir

  13. Arrastre la vista de texto desde Cuadro de herramientas hasta la superficie de diseño y colóquela debajo del widget Botón. Con la vista de texto seleccionada, establezca la propiedad id de la vista de texto en @+id/TranslatedPhoneWord y cambie el text por una cadena vacía:

    Establecer las propiedades en la vista de texto.

  14. Guarde su trabajo presionando ⌘ + S.
  15. Ahora, agregue código para convertir números de teléfono de formato alfanumérico a numérico. Agregue un nuevo archivo al proyecto haciendo clic en el icono de engranaje junto al proyecto Phoneword en el panel de Solución y seleccionando Agregar > Nuevo archivo…:

    Agregar un nuevo archivo al proyecto

  16. En el cuadro de diálogo Nuevo archivo, haga clic en General > Clase vacía, asigne al archivo nuevo el nombre PhoneTranslator y haga clic en Nuevo. Esto crea una nueva clase de C# vacía.
  17. Quite todo el código de plantilla de la clase nueva y reemplácelo por el siguiente código:
    using System.Text;
    using System;
    namespace Core
    {
        public static class PhonewordTranslator
        {
            public static string ToNumber(string raw)
            {
                if (string.IsNullOrWhiteSpace(raw))
                    return "";
                else
                    raw = raw.ToUpperInvariant();
    
                var newNumber = new StringBuilder();
                foreach (var c in raw)
                {
                    if (" -0123456789".Contains(c))
                    {
                        newNumber.Append(c);
                    }
                    else 
                    {
                        var result = TranslateToNumber(c);
                        if (result != null)
                            newNumber.Append(result);
                    }
                    // otherwise we've skipped a non-numeric char
                }
                return newNumber.ToString();
            }
            static bool Contains (this string keyString, char c)
            {
                return keyString.IndexOf(c) >= 0;
            }
            static int? TranslateToNumber(char c)
            {
                if ("ABC".Contains(c))
                    return 2;
                else if ("DEF".Contains(c))
                    return 3;
                else if ("GHI".Contains(c))
                    return 4;
                else if ("JKL".Contains(c))
                    return 5;
                else if ("MNO".Contains(c))
                    return 6;
                else if ("PQRS".Contains(c))
                    return 7;
                else if ("TUV".Contains(c))
                    return 8;
                else if ("WXYZ".Contains(c))
                    return 9;
                return null;
            }
        }
    }

    Guarde los cambios en PhoneTranslator.cs pulsando Archivo > Guardar (o presionando ⌘ + S) y cierre el archivo. Asegúrese de que no hay errores de tiempo de compilación al volver a compilar la solución.

  18. El siguiente paso consiste en agregar código para conectar la interfaz de usuario al agregar código auxiliar en la clase MainActivity. Haga doble clic en el archivo MainActivity.cs en Panel de solución para abrirlo.
  19. Para empezar, agregue un controlador de eventos al botón Traducir. En la clase MainActivity, busque el método OnCreate. Agregue el código de botón dentro de OnCreate, debajo de las llamadas a base.OnCreate(bundle) y SetContentView (Resource.Layout.Main). Quite el código de control del botón de plantilla de manera que el método OnCreate tenga el aspecto siguiente:
    using System;
    using Android.App;
    using Android.Content;
    using Android.Runtime;
    using Android.Views;
    using Android.Widget;
    using Android.OS;
    
    namespace Phoneword
    {
        [Activity (Label = "Phone Word", MainLauncher = true)]
        public class MainActivity : Activity
        {
            protected override void OnCreate (Bundle bundle)
            {
                base.OnCreate (bundle);
    
                // Set our view from the "main" layout resource
                SetContentView (Resource.Layout.Main);
    
                // Our code will go here
            }
        }
    }
  20. Después, se necesita una referencia de los controles que se han creado en el archivo de diseño con Android Designer. Agregue el código siguiente dentro del método OnCreate (después de la llamada a SetContentView):
    // Get our UI controls from the loaded layout
    EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
    TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneWord);
    Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);
  21. Agregue el código que responda a las pulsaciones del usuario del botón Traducir agregando el siguiente código al método OnCreate (después de las líneas que se han agregado en el último paso):
    // Disable the "Call" button
    callButton.Enabled = false;
    
    // Add code to translate number
    string translatedNumber = string.Empty;
    
    translateButton.Click += (sender, e) =>
    {
        // Translate user’s alphanumeric phone number to numeric
        translatedNumber = PhonewordTranslator.ToNumber(phoneNumberText.Text);
        if (string.IsNullOrWhiteSpace(translatedNumber))
        {
            translatedPhoneWord.Text = string.Empty;
        }
        else
        {
            translatedPhoneWord.Text = translatedNumber;
        }
    };
  22. Guarde el trabajo y compile la aplicación seleccionando Compilar > Compilar todo (o presionando ⌘ + B). Si la aplicación se compila, obtendrá un mensaje de operación correcta en la parte superior de Visual Studio para Mac:

    Si hay errores, repase los pasos anteriores y corrija cualquier error hasta que la aplicación se compile correctamente. Si obtiene un error de compilación como El recurso no existe en el contexto actual, compruebe que el nombre del espacio de nombres en MainActivity.cs coincida con el nombre del proyecto (Phoneword) y, después, recompile completamente la solución. Si sigue obteniendo errores de compilación, compruebe que ha instalado las últimas actualizaciones de Xamarin.Android y Xamarin Studio.

  23. Ahora que tiene una aplicación que funciona, es el momento de agregar los toques finales. Empiece editando Labelpara MainActivityLabel es lo que Android muestra en la parte superior de la pantalla para que los usuarios conozcan el lugar en el que se encuentran en la aplicación. En la parte superior de la clase MainActivity, cambie Label por Phone Word como se muestra aquí:
    namespace Phoneword
    {
        [Activity (Label = "Phone Word", MainLauncher = true)]
        public class MainActivity : Activity
        {
            ...
        }
    }
  24. Ahora es el momento de establecer el icono de la aplicación. De forma predeterminada, Visual Studio para Mac proporcionará un icono predeterminado para el proyecto. Vamos a eliminar estos archivos de la solución y reemplazarlos por un icono diferente. Expanda la carpeta Recursos en Panel de solución. Observe que hay cinco carpetas que tienen el prefijo mipmap- y que cada una de estas carpetas contiene un archivo Icon.png:

    carpetas mipmap- y archivos Icon.png

    Es necesario eliminar del proyecto todos estos archivos de icono. Haga clic con el botón derecho en cada uno de los archivos Icon.png y haga clic en Quitar en el menú contextual:

    Eliminar archivo Icon.png predeterminado

    Haga clic en el botón Eliminar en el cuadro de diálogo.

  25. Luego, descargue y descomprima el conjunto de iconos de aplicación de Xamarin. Este archivo ZIP contiene los iconos de la aplicación. Todos los iconos son idénticos visualmente, pero se representan correctamente con resoluciones diferentes en distintos dispositivos con distintas densidades de pantalla. El conjunto de archivos debe copiarse en el proyecto Xamarin.Android. En Visual Studio para Mac, en Panel de solución, haga clic con el botón derecho en la carpeta mipmap-hdpi y seleccione Agregar > Agregar archivos:

    Agregar archivos

  26. En el cuadro de diálogo de selección, vaya al directorio descomprimido de los iconos de aplicación de Xamarin y abra la carpeta mipmap-hdpi. Seleccione Icon.png y haga clic en Abrir.
  27. En el cuadro de diálogo Add File to Folder (Agregar archivo a carpeta), seleccione Copy the file into the directory (Copiar el archivo en el directorio) y haga clic en Aceptar:

    Cuadro de diálogo Copiar el archivo en el directorio

  28. Repita estos pasos para cada una de las carpetas mipmap- hasta que el contenido de las carpetas de iconos de aplicación de Xamarin mipmap- se copie en las carpetas mipmap- equivalentes en el proyecto Phoneword.
  29. Después de copiar todos los iconos en el proyecto de Xamarin.Android, abra el cuadro de diálogo Opciones del proyecto haciendo clic con el botón derecho en el proyecto en Panel de solución. Haga clic en Compilar > Aplicación de Android y seleccione @mipmap/icon en el cuadro combinado Icono de aplicación:

    Establecer el icono del proyecto

  30. Por último, pruebe la aplicación ejecutándola en un dispositivo o emulador Android y traduciendo un Phoneword:

    Captura de pantalla de la aplicación una vez completada

Ha completado su primera aplicación de Xamarin.Android. Ahora es el momento de analizar las herramientas y los conocimientos que ha aprendido.

Seguimos con la ppt de Análisis detallado

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *