🛠️SAE401 - Concevoir dispositif interactif

UE 4.3 / UE 4.4

Pour cette SAE nous avons recréer une interface de téléphone sous IOS afin de raconter une histoire interactive avec le lecteur.

L'application a été créée en Vue.js. Il y a plusieurs vues pour les applications et des composants pour les compléter. La fonctionnalité qui nous a le plus mis en difficulté a été le déclenchement des différentes actions en fonction de la navigation de l'utilisateur. Par exemple, pour la notification lorsque l'utilisateur navigue sur l'app Galerie, nous avons utilisé un store pour enregistrer les états d'avancement des notifications.

// exemple store code

```javascript
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,

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

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


})

export default store;
```

exemple app code

```vue

function play() {
  overlayVisible.value = false;
  setTimeout(() => {
    overlayVisible.value = false;
  }, 500); 
// Attendez 500ms avant de masquer l'overlay pour permettre à la transition de se terminer
}

watch(() => store.seePhoto, async (newValue) => {
  if (newValue === true) {
    store.updateArthurSlice()
    await new Promise(resolve => setTimeout(resolve, 3000));

    isActive.value = 'active';

    const audio = new Audio('/song/ding.mp3');
    await audio.play();

    await new Promise(resolve => setTimeout(resolve, 3000));

    isActive.value = 'inActive';
  }
});

```

Dans ces exemples de code, on peut voir le fonctionnement global des notifications et de l'envoi des messages. Dans le watch, en dessous de la fonction "play", on observe le déclenchement en chaîne après que l'utilisateur a vu la photo, ce qui déclenche le reste du scénario.