SAE 402

Pour la SAE402 notre but était de créer une expérience intéractive pour cela nous sommes partis sur un site intéractif ou les utilisateurs ont accès à un téléphone avec lequel ils peuvent utiliser les applications de l'entreprise.

Chaque application joue un rôle dans la vie de l'utilisateur, par exemple l'application message permet de communiquer avec les autres utilisateurs, ce qui débloque des événements.

Pour cela nous avons utilisé le framework Vue.js et de Pinia pour la gestion de l'état. La fusion des deux nous a permis de discuter entre les différentes applications et de créer des événements qui se déclenchent lors de l'utilisation de l'application.

Store

Le store est le coeur de l'application, il permet de gérer l'état de l'application et de déclencher des événements.

Exemple de store

Store général de l'application

import {reactive, ref} from 'vue'
export const store = reactive({
seePhoto: false,
seeLocalizations: ref(false),
Author: 'Arthur',
Message: 'C\'était vraiment une soirée de dingue hier !',
    EmmaSlice: 0,
    ArthurSlice: 0,
    EmmaWait: false,
    Image: false,
    App: false,
    Localize: false,


    sendFirstMessage() {

    },

    updateEmmaSlice() {
        this.EmmaSlice = this.EmmaSlice + 1
    },

    updateArthurSlice() {
        this.ArthurSlice = this.ArthurSlice + 1
    }


})

export default store;

Application

Plusieurs des applications que nous avions réalisé était reliée via des watchers qui permettaient de déclencher des événements lors de l'utilisation de l'application.