El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Xamarin

Següent ►
►

Introducció a Xamarin

Xamarin és una plataforma de desenvolupament d'aplicacions mòbils que permet crear aplicacions per a Android, iOS i Windows amb un sol codi base en C#. Utilitza el framework .NET i proporciona accés complet a les API natives de cada plataforma, permetent als desenvolupadors crear aplicacions amb una experiència d'usuari nativa.

Objectius del Tema

  1. Entendre què és Xamarin i les seves capacitats.
  2. Configurar l'entorn de desenvolupament per a Xamarin.
  3. Crear una aplicació bàsica amb Xamarin.
  4. Comprendre l'estructura d'un projecte Xamarin.
  5. Utilitzar controls bàsics d'interfície d'usuari.
  6. Implementar la navegació entre pàgines.
  7. Accedir a funcionalitats natives del dispositiu.

  1. Què és Xamarin?

Xamarin és una plataforma de desenvolupament d'aplicacions mòbils que permet als desenvolupadors utilitzar C# i .NET per crear aplicacions per a Android, iOS i Windows. Les aplicacions creades amb Xamarin tenen accés complet a les API natives de cada plataforma, permetent una experiència d'usuari nativa.

Avantatges de Xamarin

  • Codi Compartit: Permet compartir fins al 90% del codi entre les diferents plataformes.
  • Experiència Nativa: Accés complet a les API natives de cada plataforma.
  • Productivitat: Utilitza C# i .NET, llenguatges coneguts per molts desenvolupadors.
  • Ecosistema .NET: Accés a una àmplia gamma de biblioteques i eines .NET.

  1. Configuració de l'Entorn de Desenvolupament

Requisits

  • Visual Studio: Visual Studio 2019 o posterior amb el component Xamarin instal·lat.
  • SDK d'Android: Per desenvolupar aplicacions Android.
  • Xcode: Per desenvolupar aplicacions iOS (només en macOS).

Passos per Configurar l'Entorn

  1. Instal·lar Visual Studio:

    • Descarrega i instal·la Visual Studio des del lloc web oficial.
    • Durant la instal·lació, selecciona el càrrec "Desenvolupament mòbil amb .NET".

  2. Configurar l'SDK d'Android:

    • Obre Visual Studio.
    • Ves a Tools > Options > Xamarin > Android Settings.
    • Assegura't que l'SDK d'Android estigui configurat correctament.

  3. Configurar Xcode (només en macOS):

    • Descarrega i instal·la Xcode des de l'App Store.
    • Obre Xcode i accepta els termes i condicions.

  1. Creació d'una Aplicació Bàsica amb Xamarin

Pas 1: Crear un Nou Projecte

  1. Obre Visual Studio.
  2. Selecciona Create a new project.
  3. Cerca Xamarin i selecciona Mobile App (Xamarin.Forms).
  4. Dona un nom al projecte i selecciona la ubicació.
  5. Selecciona el tipus de plantilla (per exemple, Blank).

Pas 2: Estructura del Projecte

Un projecte Xamarin.Forms típic té la següent estructura:

  • Projecte Compartit: Conté el codi compartit entre les plataformes.
  • Projecte Android: Conté el codi específic per a Android.
  • Projecte iOS: Conté el codi específic per a iOS.

Pas 3: Crear una Interfície d'Usuari Bàsica

// MainPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">

    <StackLayout>
        <Label Text="Welcome to Xamarin.Forms!"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />
        <Button Text="Click Me"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand"
                Clicked="OnButtonClicked"/>
    </StackLayout>

</ContentPage>
// MainPage.xaml.cs
using System;
using Xamarin.Forms;

namespace MyApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            DisplayAlert("Alert", "Button clicked!", "OK");
        }
    }
}

Pas 4: Executar l'Aplicació

  1. Selecciona la plataforma de destinació (Android o iOS).
  2. Fes clic a Run per compilar i executar l'aplicació en un emulador o dispositiu físic.

  1. Controls Bàsics d'Interfície d'Usuari

Xamarin.Forms proporciona una àmplia gamma de controls d'interfície d'usuari. Alguns dels més comuns són:

  • Label: Per mostrar text.
  • Button: Per crear botons interactius.
  • Entry: Per introduir text.
  • ListView: Per mostrar llistes de dades.
  • StackLayout: Per organitzar altres controls en una disposició vertical o horitzontal.

Exemple d'Ús de Controls

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.ControlsPage">

    <StackLayout>
        <Label Text="Enter your name:"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />
        <Entry x:Name="nameEntry"
               Placeholder="Name"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="CenterAndExpand" />
        <Button Text="Submit"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand"
                Clicked="OnSubmitClicked"/>
    </StackLayout>

</ContentPage>
// ControlsPage.xaml.cs
using System;
using Xamarin.Forms;

namespace MyApp
{
    public partial class ControlsPage : ContentPage
    {
        public ControlsPage()
        {
            InitializeComponent();
        }

        private void OnSubmitClicked(object sender, EventArgs e)
        {
            string name = nameEntry.Text;
            DisplayAlert("Hello", $"Hello, {name}!", "OK");
        }
    }
}

  1. Navegació entre Pàgines

Xamarin.Forms proporciona diverses maneres de navegar entre pàgines. La més comuna és utilitzar el NavigationPage.

Exemple de Navegació

// MainPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">

    <StackLayout>
        <Button Text="Go to Next Page"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand"
                Clicked="OnNextPageClicked"/>
    </StackLayout>

</ContentPage>
// MainPage.xaml.cs
using System;
using Xamarin.Forms;

namespace MyApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnNextPageClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new NextPage());
        }
    }
}
// NextPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.NextPage">

    <StackLayout>
        <Label Text="This is the next page!"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>
// NextPage.xaml.cs
using Xamarin.Forms;

namespace MyApp
{
    public partial class NextPage : ContentPage
    {
        public NextPage()
        {
            InitializeComponent();
        }
    }
}

  1. Accés a Funcionalitats Natives del Dispositiu

Xamarin.Essentials proporciona una col·lecció d'API per accedir a funcionalitats natives del dispositiu com la càmera, la geolocalització, els sensors, etc.

Exemple d'Ús de Xamarin.Essentials

using Xamarin.Essentials;
using Xamarin.Forms;

namespace MyApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnGetLocationClicked(object sender, EventArgs e)
        {
            try
            {
                var location = await Geolocation.GetLastKnownLocationAsync();
                if (location != null)
                {
                    await DisplayAlert("Location", $"Latitude: {location.Latitude}, Longitude: {location.Longitude}", "OK");
                }
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error", ex.Message, "OK");
            }
        }
    }
}

Exercicis Pràctics

Exercici 1: Crear una Aplicació de Calculadora

  1. Crea un nou projecte Xamarin.Forms.
  2. Dissenya una interfície d'usuari amb botons per als números i operacions bàsiques (+, -, *, /).
  3. Implementa la lògica per realitzar les operacions matemàtiques.

Exercici 2: Aplicació de Llista de Tasques

  1. Crea un nou projecte Xamarin.Forms.
  2. Dissenya una interfície d'usuari amb un Entry per introduir tasques i un ListView per mostrar-les.
  3. Implementa la funcionalitat per afegir, eliminar i marcar tasques com a completades.

Resum

En aquest tema, hem après què és Xamarin i com configurar l'entorn de desenvolupament. Hem creat una aplicació bàsica, explorat l'estructura d'un projecte Xamarin i utilitzat controls bàsics d'interfície d'usuari. També hem après a navegar entre pàgines i accedir a funcionalitats natives del dispositiu. Finalment, hem proposat alguns exercicis pràctics per reforçar els conceptes apresos.

Amb aquests coneixements, estàs preparat per començar a desenvolupar aplicacions mòbils amb Xamarin. En el següent mòdul, explorarem millors pràctiques i patrons de disseny per millorar la qualitat del teu codi.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats