RSS

Instalar Xamarin Studio para desarrollo Android/iOS

20 Abr

Problema: Necesito hacer unas pruebas para generar una pequeña aplicación con Xamarin para probar como funciona la herramienta para desarrollo de una app Android y iOS.

 

Solución:

1.- Lo primero que hay que hacer es descargar Xamarin Studio de la página del proyecto:

https://www.xamarin.com/platform

Hay que registrarse, y después se puede bajar e instalar (Hay que recordar que debemos tener en Android SDK instalado y si se necesita desarrollo iOS se debe instalar Xamarin Studio en una máquina con Sistema Operativo OSX, una mac).

DESINSTALAR: Necesitamos revisar esta liga donde podemos encontrar la forma de desinstalar la herramienta:

https://developer.xamarin.com/guides/cross-platform//installation/uninstalling_xamarin/

HolaMundo en Xamarin.iOS

1.- Primero necesitamos varias cosas para comenzar:

  • Tener una Mac con al menos SO 10.10.
  • Tener última versión de XCode y iOS SDK instalado.
  • Última versión de Xamarin Studio
  • EN caso de Windows, tener la última versión de Visual Studio.

2.- Iniciamos el Xamarin Studio, veremos algo asÍ

xamarin_1

3.- Damos click en:  Archivo>Nuevo>Solución y en la ventana de dialogo: iOS>App>C# y Next.

4.- En la siguiente pantalla ponemos como nombre “HolaMundo_ios” y en Organization ponemos: com.companyname.holamundoios y ponemos en Next.

5.- Elegimos un directorio de trabajo, en este caso yo voy a crear llamado uno Workspace_Xamarin_ios, y ponemos en “Crear”.

Tendremos una pantalla como al siguiente:

xamarin_2

6.- Ahora tenemos que abrir el archivo: Main.storyboard para crear la interfaz de usuario. Cuando cargue por completo, necesitamos agregar un componente del tipo “label” desde la “Barra de Herramientas”.

Vamos a modificar el texto por “Hola Mundo” desde el menú de propiedades, y también vamos a agregar otros componentes para que al final quede así:

xamarin_3

En el componente campo de texto debemos poner el nombre del componente, lo pondremos como: PhoneNumberText y cambiamos en título por: 1-855-XAMARIN.

El botón se llamara: TranslateButton y tendrá como texto “Generar numérico” .

También se generó un botón que se llamará: CallButton, y tendrá el texto “Hacer llamada”.

Los datos se guardan con ⌘ + s.

7.- Ahora hay que crear un nuevo archivo, en el nombre del proyecto> Añadir > Nuevo archivo > Clase Vacía, y ponemos como nombre: PhoneTranslator 

8.- Reemplaza el código con el siguiente:

using System.Text;
using System;

namespace Phoneword_iOS
{
    public static class PhoneTranslator
    {
        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;
        }
    }
}

Guardamos el archivo.

9.- Ahora escribimos el código para manejar los componentes de la interfaz gráfica, abrimos el archivo llamado ViewController.class, agregamos el siguiente código debajo de la llamada base.ViewDidLoad();

string translatedNumber = "";

    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
    // Convert the phone number with text to a number
    // using PhoneTranslator.cs
    translatedNumber = PhoneTranslator.ToNumber(
        PhoneNumberText.Text);

    // Dismiss the keyboard if text field was tapped
    PhoneNumberText.ResignFirstResponder ();

    if (translatedNumber == "") {
        CallButton.SetTitle ("Call ", UIControlState.Normal);
        CallButton.Enabled = false;
    } else {
        CallButton.SetTitle ("Call " + translatedNumber,
            UIControlState.Normal);
        CallButton.Enabled = true;
    }

Ahora agregamos el código para el segundo botón, pero antes agregamos al inicio del archivo una llamada a Foundation, agregamos esta línea hasta arriba junto a las demás:

      using Foundation;

Y abajo del código del botón anterior, agregamos lo siguiente:

CallButton.TouchUpInside += (object sender, EventArgs e) => {
    // Use URL handler with tel: prefix to invoke Apple's Phone app...
    var url = new NSUrl ("tel:" + translatedNumber);

    // ...otherwise show an alert dialog
    if (!UIApplication.SharedApplication.OpenUrl (url)) {
        var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
        alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
        PresentViewController (alert, true, null);
    }
};

Guardamos el archivo y compilamos con,  ⌘ + B  si la aplicación compila sin errores el IDE mostrar un mensaje.

10.- Ahora vamos a configurar algunos elementos de la aplicación, abrimos el archivo info.plist:

xamarin_4

Vamos a dejar el nombre de Application Name como:  HolaMundo_ios.

11.- En la sección de iPhone Launch Images, se pueden cambiar las imágenes de los proyectos, según las medidas de imágenes para la app y diferentes resoluciones. Para esto hay que descargar los archivos necesarios:

https://developer.xamarin.com/guides/ios/getting_started/hello,_iOS/hello,iOS_quickstart/Resources/Xamarin%20App%20Icons%20and%20Launch%20Images.zip

Después de bajar los archivos se asignan dentro del IDE en Nombre Proyectos>Resources>images.xcassets>AppIcons.appiconset> Contents.json y en esta vista se pueden asignar las imágenes según las medidas requeridas

xamarin_5

12.- Al final debemos probar la aplicación en el simulador, presionar el botón Start y se puede seleccionar el dispositivo, en el IDE. Y debería mostrar la siguiente pantalla:

xamarin_6

Si se oprime el botón de hacer llamada, mostrará un aviso de que el simulador no tiene soporte para emular una llamada telefónica.

 

.

 

 

 

 

 

 

 
Deja un comentario

Publicado por en 20 abril, 2016 en Uncategorized

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: