Crie um App de Videoconferência com Vue.js - Tutorial Completo

Introdução

Neste projeto, você aprenderá a construir uma aplicação de web conferência usando Vue.js 2.x. O projeto foca na implementação de vários efeitos de exibição para a lista de participantes no software de web conferência.

👀 Pré-visualização

Web conferencing app preview

🎯 Tarefas

Neste projeto, você aprenderá:

Como implementar a funcionalidade de leitura e renderização assíncrona de dados para buscar e exibir dados do usuário nas janelas de login e participantes.
Como implementar a função de alternância de login e logout, permitindo que os usuários entrem e saiam da aplicação.
Como garantir que o usuário logado seja sempre exibido como o primeiro usuário na lista de participantes.
Como implementar a funcionalidade de alternar a visibilidade da janela de participantes.
Como implementar a funcionalidade de alternar o efeito de exibição da lista de participantes, incluindo mostrar todos os participantes, ocultar a lista de participantes e mostrar apenas o usuário atualmente logado.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Construir uma aplicação de web conferência usando Vue.js 2.x com várias funcionalidades de interface do usuário.
Buscar e exibir dados de forma assíncrona usando Axios.
Implementar gerenciamento de estado e tratamento de eventos em uma aplicação Vue.js.
Criar interfaces de usuário dinâmicas e alternar entre diferentes modos de exibição.

Configurar a Estrutura do Projeto

Nesta etapa, você aprenderá como configurar a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto para este projeto. A estrutura do diretório é a seguinte:

├── index.html
├── css
├── images
└── js
    ├── axios.min.js
    ├── userList.json
    └── vue.js

Dentre eles:

index.html é a página principal.
css é a pasta de estilos.
images é a pasta de imagens.
js/axios.min.js é o arquivo axios.
js/userList.json é o arquivo de dados que precisa ser requisitado.
js/vue.js é o arquivo Vue 2.x.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Image Description

Implementar Leitura e Renderização de Dados Assíncronos

Nesta etapa, você aprenderá como implementar a funcionalidade de leitura e renderização assíncrona de dados.

Abra o arquivo index.html no projeto fornecido.
Na opção data da instância Vue, adicione alguns atributos para uso posterior.

new Vue({
  el: "#app",
  data() {
    return {
      list: [],
      indexUser: "Tom",
      isShow: false,
      isShowRbtn: false,
      isShowUserList: true,
      isShowOtherUser: false,
      isShowIndexUser: true,
      user: "",
      buttonIndex: 2
    };
  }
});

Na instância new Vue(), adicione o seguinte código no lifecycle hook mounted() para buscar os dados do usuário de ./js/userList.json usando Axios:

new Vue({
  el: "#app",
  data: {
    // ...
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      // Use axios to fetch data from the server
      const res = await axios({
        url: "./js/userList.json"
      });
      this.list = res.data;
    }
  }
});

Na janela de login, atualize o código para exibir os dados do usuário buscados no dropdown:

<!-- The original code: -->
<!-- <p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p> -->

<!-- The updated code: -->
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>

Após concluir esta etapa, a janela de login exibirá os dados do usuário buscados de ./js/userList.json de forma assíncrona.

O efeito é o seguinte:

Asynchronous data rendering effect in login window

Nesta etapa, você aprenderá como implementar a funcionalidade de alternância de login e logout.

Abra o arquivo index.html no projeto fornecido.
Nos methods da instância new Vue(), adicione a função login.
No método login(), adicione o código para alternar entre as janelas de login e logout:

methods: {
  // ...
  login() {
    this.isShow = !this.isShow;
    this.user = this.list.find((item) => item.name == this.indexUser);
  },
},

Nos computed da instância new Vue(), adicione a propriedade isShow para controlar a exibição do texto:

computed: {
  loinOrlogout() {
    return this.isShow ? "Logout" : "Login";
  }
},
methods: {
  // ...
},

Na janela de login ou logout, atualize o código para exibir o conteúdo apropriado com base no estado de login:

<!-- The original code: -->
<!-- <h3>Login</h3>
<p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p>

<a class="login-btn">Login</a> -->

<!-- The updated code: -->
<h3>{{loinOrlogout}}</h3>
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>
<a @click="login" class="login-btn">{{loinOrlogout}}</a>

Após concluir esta etapa, a funcionalidade de alternância de login e logout será implementada, e a janela do participante exibirá, por padrão, apenas as informações do usuário atualmente logado.

O efeito é o seguinte:

Effect after login

Effect after logout

Garantir que o Usuário Logado Seja Sempre o Primeiro na Lista de Participantes

Nesta etapa, você aprenderá como garantir que o usuário logado seja sempre o primeiro na lista de participantes.

Abra o arquivo index.html no projeto fornecido.
Na janela de Participantes, atualize o código para class="say-list" e class="user-list" para mostrar apenas as informações do usuário atualmente logado por padrão:

<ul class="say-list">
  <li>
    <span class="iconfont icon-microphone"></span>
  </li>
  <li class="line"></li>
  <li>Being spoken to: {{list.find((item) => item.isHost).name}};</li>
</ul>
<ul v-if="isShow" class="user-list">
  <li v-if="isShowIndexUser">
    <img class="header" :src="user.imgPath" />
    <div class="user-name">
      <span v-if="user.isHost" class="iconfont icon-user header-icon"></span>
      <span class="iconfont icon-microphone"></span>
      {{user.name}}
    </div>
  </li>
  <li v-for="item in list" v-if="item.name!=user.name&&isShowOtherUser">
    <img class="header" :src="item.imgPath" />
    <div class="user-name">
      <span
        v-if="item.isHost&&changeBtnActive"
        class="iconfont icon-user header-icon"
      ></span>
      <span class="iconfont icon-microphone"></span>
      {{item.name}}
    </div>
  </li>
</ul>

Após concluir esta etapa, o usuário logado sempre será exibido como o primeiro usuário na lista de participantes.

O efeito é o seguinte:

The first user in the participant list is always the logged-in user

Implementar a Alternância de Visibilidade da Janela de Participantes

Nesta etapa, você aprenderá como implementar a funcionalidade de alternar a visibilidade da janela de participantes.

Abra o arquivo index.html no projeto fornecido.
Nos methods da instância new Vue(), adicione a função showUserList e a função showRbtn.

methods: {
  showUserList() {
    this.isShowUserList = !this.isShowUserList;
    this.showRbtn();
  },
  showRbtn() {
    this.isShowRbtn = !this.isShowRbtn;
  },
},

No HTML, atualize o código para adicionar o botão para mostrar ou ocultar a janela de participantes:

<!-- The original code: -->
<!-- <button id="show" class="right-btn">
  <span class="iconfont icon-left-arrow"></span>
</button> -->

<!-- The updated code: -->
<button
  v-if="isShow&&isShowRbtn"
  @click="showUserList"
  id="show"
  class="right-btn"
>
  <span class="iconfont icon-left-arrow"></span>
</button>

Após concluir esta etapa, você poderá mostrar ou ocultar a janela de participantes clicando no botão.

O efeito é o seguinte:

Position of the Hide/Show Participant Window button icon

Implementar a Alternância do Efeito de Exibição da Lista de Participantes

Nesta etapa, você aprenderá como implementar a funcionalidade de alternar o efeito de exibição da lista de participantes.

Abra o arquivo index.html no projeto fornecido.
Nos methods da instância new Vue(), adicione a função changeBtnActive.
No método changeBtnActive(), adicione o código para lidar com a alternância do efeito de exibição da lista de participantes:

methods: {
  changeBtnActive(userFlag, otherUserFlag, value) {
    this.isShowIndexUser = userFlag;
    this.isShowOtherUser = otherUserFlag;
    this.buttonIndex = value;
  },
},

No HTML, localize a class="user-dialog" e atualize o código para adicionar o botão usado para alternar o efeito de exibição da lista de participantes:

<div v-if="isShowUserList&&isShow" class="user-dialog">
  <ul class="tools">
    <li class="tools-left">
      <button
        @click="changeBtnActive(false,false,1)"
        :class="{'active': buttonIndex==1 ? true : false}"
      >
        <span class="iconfont icon-close"></span>
      </button>
      <button
        @click="changeBtnActive(true,false,2)"
        :class="{'active': buttonIndex==2 ? true : false}"
      >
        <span class="iconfont icon-dialog"></span>
      </button>
      <button
        @click="changeBtnActive(true,true,3)"
        :class="{'active': buttonIndex==3 ? true : false}"
      >
        <span class="iconfont icon-list"></span>
      </button>
    </li>
    <li @click="showUserList" class="tools-right">
      <button class="show-list">
        <span class="iconfont icon-retract"></span>
      </button>
    </li>
  </ul>
  <!-- user list -->
  <!-- Omit the code already mentioned... -->
</div>

Após concluir esta etapa, você poderá alternar o efeito de exibição da lista de participantes clicando nos botões correspondentes.

O efeito é o seguinte:

Effect of showing all participants