Tutoriel Xamarin 

Créer une application mobile avec C# et RapidAPI

Pentiminax
Créer une application mobile avec C#, Xamarin et RapidAPI

À propos de ce tutoriel

Je vais vous expliquer comment créer une application mobile avec C# et RapidAPI.

Il s’agit d’une application qui va nous donner des informations sur des films et des séries à partir d’un terme de recherche.

Nous allons utiliser l’IDE Visual Studio 2019 et le framework Xamarin pour mener à bien ce projet.

L’API Movie Database (IMDB Alternative)

Pour récupérer des informations sur des films et de séries nous allons utiliser une API disponible à cette adresse.

Création du projet

Ouvrez Visual Studio et cliquez sur Créer un projet.

  1. Choisissez le type de projet Application mobile (Xamarin.Forms).

2. Vous pouvez nommer votre projet comme bon vous semble.

3. Choisissez une application mobile vide

Modification de la classe App

Vous allez modifier le fichier App.xaml.cs, l’objectif va être de mettre à disposition un RestClient accessible partout dans notre code afin de réaliser lesrequêtes HTTP.

using RestSharp;
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace PentiMovie
{
    public partial class App : Application
    {
        private const string API_BASE_URL = "https://movie-database-imdb-alternative.p.rapidapi.com";

        public static RestClient Client;

        public App()
        {
            InitializeComponent();
            MainPage = new NavigationPage(new MainPage());
        }

        protected override void OnStart()
        {
            Client = new RestClient(API_BASE_URL);
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}

Création de la page principale

Nous allons modifier le fichier MainPage.xaml afin de créer une page scrollable.

De plus nous allons y ajouter les éléments nécessaires pour l’affichage des résultats de recherche des films et séries.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PentiMovie.MainPage"
             Title="Penti Movie">


    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Primary">#96d1ff</Color>
        </ResourceDictionary>
    </ContentPage.Resources>
    
    <ScrollView>
        <FlexLayout Direction="Column" Padding="20">

            <StackLayout Orientation="Vertical" Margin="0, 0, 0, 20">
                <Label Text="Bienvenue sur Pentie Movie !" 
                       FontSize="Title" 
                       HorizontalOptions="Center"/>
                
                <Label Text="Accéder à des informations sur des milliers de films et séries !" 
                       FontSize="16" 
                       HorizontalOptions="Center" />
                
                <Entry x:Name="entrySearch" Placeholder="Avengers Endgame" />

                <Button x:Name="btnSearch" Text="Rechercher" BackgroundColor="{StaticResource Primary}" />
            </StackLayout>

            <ActivityIndicator x:Name="activityIndicator" 
                               IsVisible="False" 
                               IsRunning="False" />

            <Label x:Name="lblMovies" 
                   Text="Films" 
                   FontSize="Body" 
                   IsVisible="False" />

            <ScrollView x:Name="scrollViewMovies" Margin="0, 10, 0, 10" Orientation="Horizontal"></ScrollView>

            <Label x:Name="lblSeries" 
                   Text="Séries" 
                   FontSize="Body" 
                   IsVisible="False" />

            <ScrollView x:Name="scrollViewSeries" Margin="0, 10, 0, 10" Orientation="Horizontal"></ScrollView>

        </FlexLayout>
    </ScrollView>

</ContentPage>

Voici ce que cela donne :

Le code de la page principale

using PentiMovie.Models;
using PentiMovie.Services;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace PentiMovie
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            btnSearch.Clicked += OnSearch;
        }

        private async void OnSearch(object sender, EventArgs e)
        {
            await ToggleActivityIndicator(true);

            scrollViewMovies.Content = null;
            scrollViewSeries.Content = null;

            lblMovies.IsVisible = false;
            lblSeries.IsVisible = false;

            var searchResults = await MovieApi.SearchAsync(entrySearch.Text);

            var movies = searchResults.Searches.FindAll(search => search.Type == "movie");
            var series = searchResults.Searches.FindAll(search => search.Type == "series");

            StackLayout stackLayoutMovies = await FillStackLayout(movies);
            StackLayout stackLayoutSeries = await FillStackLayout(series);

            if (stackLayoutMovies != null)
            {
                scrollViewMovies.Content = stackLayoutMovies;
                lblMovies.IsVisible = true;
            }

            if (stackLayoutSeries != null)
            {
                scrollViewSeries.Content = stackLayoutSeries;
                lblSeries.IsVisible = true;
            }

            await ToggleActivityIndicator(false);
        }

        private async Task<StackLayout> FillStackLayout(List<Search> searches)
        {
            StackLayout stackLayout = null;

            if (searches.Count == 0)
            {
                return stackLayout;
            }

            await Task.Run(() =>
            {
                stackLayout = new StackLayout
                {
                    Orientation = StackOrientation.Horizontal
                };

                foreach (Search search in searches)
                {
                    var tapGestureRecognizer = new TapGestureRecognizer();

                    tapGestureRecognizer.Tapped += async (s, ev) =>
                    {
                        var moviePage = await MoviePage.Create(search.imdbID);
                        await Navigation.PushAsync(moviePage);
                    };

                    var image = new Image
                    {
                        Source = search.Poster
                    };

                    image.GestureRecognizers.Add(tapGestureRecognizer);
                    stackLayout.Children.Add(image);
                }
            });

            return stackLayout;
        }

        private async Task ToggleActivityIndicator(bool isBusy)
        {
            await Task.Run(() =>
            {
                Device.BeginInvokeOnMainThread(() =>
                {
                    activityIndicator.IsVisible = isBusy;
                    activityIndicator.IsRunning = isBusy;
                });
            });
        }
    }
}
Télécharger les sources