---
title: 'Créer une application mobile avec C# et RapidAPI'
description: 'Je vais vous expliquer comment créer une application mobile avec C# et RapidAPI.'
pubDate: 2021-10-04
family: 'dotnet-csharp'
tags: []
heroImage: '/images/creer-une-application-mobile-avec-csharp-et-rapidapi.webp'
videoUrl: 'https://youtu.be/ZJf7mXnraBI'
---

## À propos de ce tutoriel

Je vais vous expliquer comment créer une application mobile avec C# et [RapidAPI](https://rapidapi.com/).

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](https://visualstudio.microsoft.com/fr/vs/) et le framework [Xamarin](https://dotnet.microsoft.com/apps/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](https://rapidapi.com/rapidapi/api/movie-database-imdb-alternative/).

## Création du projet

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

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

![Création d'un projet Xamarin.Forms dans Visual Studio 2019](/images/creer-un-projet-xamarin-vs-2019-1024x552.webp)

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

3\. Choisissez une **application mobile vide**

![Sélection du modèle d'application mobile vide avec Xamarin.Forms](/images/app-mobile-vide.webp)

## 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 :

![Interface de l'application mobile Xamarin consommant l'API RapidAPI](/images/application-mobile-xamarin-rapidapi.webp)

## 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](https://github.com/Pentiminax/MobileAppRapidAPI)