Créer une première application SPFx

par Celine | Mar 3, 2024 | Microsoft, SharePoint, SPFx

Dans ce projet nous allons créer une application SPFx afin de découvrir les étapes de création d’une application SharePoint Framework (SPFx).
Nous allons faire une application très utile qui fait appel à une API externe que l’on peut trouver sur le site thecatapi !
Notre but va d’être d’afficher une image de petit chat tout mignon au chargement de la page intranet et ajouter un petit bouton pour afficher un nouveau petit chat trop mignon si l’envie nous en prend !

Mise en place de l’environnement

Nous allons utiliser VSCode et son terminal intégré pour passer toutes les commandes utiles au projet.
On vérifie tout d’abord la version de NodeJS, elle doit être compatible avec la version de SharePoint Framework que l’on souhaite utiliser.
Pour vérifier la version à utiliser il faut se référer à la documentation officielle.

PowerShell

node -v

Puis l’on installe Gulp, Yeoman et enfin Yeoman SharePoint generator.

PowerShell

npm install gulp
npm install yo
npm install @microsoft/generator-sharepoint

Et ensuite on initie le projet.

PowerShell

yo @microsoft/sharepoint

Une fois la commande lancée on entre les paramètres du projet.
Ici on va choisir de créer un composant WebPart et utiliser Javascript sans aucun framework.

Une fois cela fait il faudra indiquer l’url de l’espace de développement SharePoint au niveau de « initialPage » dans le fichier serve.json.

Et l’on passe ensuite la commande ci-dessous pour approuvé son certificat auto-signé.

PowerShell

gulp trust-dev-cert

L’environnement de développement peut alors être lancé avec la commande

PowerShell

gulp serve

Une fois cela fait on peut passer au code !

Source : set-up-your-development-environment

Développement de l’application

Dans cette application nous allons uniquement modifier les fichiers CatApiWebPart.ts et CatApiWebPart.module.scss

JavaScript

import { Version } from '@microsoft/sp-core-library';
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

// Styles CSS spécifiques au composant
import styles from './HelloWorldWebPart.module.scss'; 
// Fichier de ressources localisées
import * as strings from 'HelloWorldWebPartStrings'; 

export interface IHelloWorldWebPartProps {
  description: string; 
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

  // URL de l'API 
  public catApiUrl = 'https://api.thecatapi.com/v1/images/search?api_key=YOURAPIKEY'; 
  // URL de l'image d'un chat
  public catImageUrl = ''; 

  // Appel asynchrone pour récupérer l'image de chat
  public async onInit(): Promise<void> {
    // Appel de la fonction getCat()
    await this.getCat(); 
    // Appel de la méthode onInit() d ela classe parente
    return super.onInit();
  }

  public async render(): Promise<void> {
    this.domElement.innerHTML = `
      <div class="${styles.container}">
        <h2>Envie de voir un autre pôti chat ?</h2>
        <button id="refreshButton">OUI !</button>
        <img class="${styles.img}" src="${this.catImageUrl}" alt="Chat aléatoire" />
      </div>`;
      // Gestionnaire d'évènement pour rafraîchir
      await this.addRefreshButtonHandler(); 
  }
  
  public async addRefreshButtonHandler(): Promise<void> {
    const refreshButton = this.domElement.querySelector('#refreshButton');
    refreshButton!.addEventListener('click', async () => {
      // Récupération d'une nouvelle image de chat
      await this.getCat(); 
      // Mise à jour le rendu du composant
      this.render(); 
    });
  }

  public async getCat(): Promise<void> {
    try {
      // Appel API publique
      const response = await fetch(this.catApiUrl); 
      // Convertion de la réponse en JSON
      const data = await response.json(); 
      // Mise à jour de l'URL de l'image de chat
      this.catImageUrl = data[0].url; 
    } catch (error) {
      console.error('Erreur lors de la récupération de l\'image de chat :', error);
    }
  };

  protected get dataVersion(): Version {
    return Version.parse('1.0'); 
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

CSS

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

.container {
  width: 40rem;
  height: auto;
}
.img {
  width: 20rem;
  height: auto;
  display:block;
  margin:auto;
  padding: 1rem 0;
}
h2 {
  text-align: center;
}
button {
  display: block;
  margin: auto;
  border: 0.125rem solid #1dd2af;
  color: white;
  background-color: #182534;
  padding: 0.5rem;
}

Déploiement de l’application

Après avoir testé et corrigé l’application on package cette dernière grâce aux commandes ci-dessous.

PowerShell

gulp bundle
gulp package-solution --production

On rajoute l’application dans le catalogue d’applications SharePoint.

Puis l’on rajoute l’application sur le site souhaité.

Cette application, très utile, est maintenant disponible pour tous sur la page d’accueil de l’Intranet !

Consultante spécialisée dans les technologies Microsoft, je justifie de plus de 14 ans d’expérience dans le secteur IT.
Mon parcours professionnel, riche et varié, m’a permis de développer de solides compétences, tant techniques qu’humaines. Je suis reconnue pour ma capacité à analyser rapidement les enjeux techniques et à concevoir des solutions pertinentes, y compris sur des problématiques complexes.
Mon approche proactive, alliée à mes compétences en développement, me permet de proposer des évolutions efficaces, toujours en cohérence avec les objectifs métiers.
En parallèle de mon activité professionnelle, je prends plaisir à approfondir mes compétences techniques en réalisant des projets personnels. Je développe notamment des jeux web basés sur React et PHP, ainsi que des applications orientées métier avec SPFx.