Resumo 1°Unidade

Desenvolvimento Back-end

  • A disciplina Desenvolvimento BackEnd foca na criação de soluções modernas e escaláveis para a camada de servidor de aplicações web.

  • Integra o uso da biblioteca Vue.js para construção de componentes reutilizáveis e interfaces interativas.

    • Alinha o desenvolvimento frontend com práticas de UX antecipada, como:

    • Criação de wireframes.

    • Acessibilidade.

    • Usabilidade desde as etapas iniciais.

  • No backend:

    • Aborda desenvolvimento de APIs RESTful utilizando:

    • Node.js com o framework Express.

    • TypeScript.

    • Explora conceitos fundamentais, como:

    • Cabeçalhos HTTP.

    • Infraestrutura de linguagem comum.

  • Avanço no conteúdo:

    • Integração com bancos de dados NoSQL, especialmente o MongoDB.

    • Inclui práticas seguras de autenticação e login, focando em:

    • Proteção e validação dos dados dos usuários.

    • Ensina a consumir e integrar APIs externas, permitindo que os sistemas desenvolvidos se comuniquem com outros serviços e ampliem suas funcionalidades.

  • Conclusão:

    • O aluno é submetido a etapas práticas de checkpoint, validação e entrega de um projeto final de backend, consolidando o aprendizado com a implementação de um sistema funcional completo.

  • Material didático:

    • Protegido por direitos autorais da Universidade Veiga de Almeida e do Centro Universitário Jorge Amado.

    • Qualquer uso não autorizado, reprodução ou distribuição é proibido e sujeito a penalidades legais.

    • Todos os direitos reservados à UVA & Unijorge.

Objetivos

Ao final da disciplina, o aluno deverá ser capaz de:

  • Desenvolver componentes reutilizáveis com a biblioteca Vue.js, aplicando conceitos de UX antecipada na criação de interfaces interativas e funcionais.

  • Construir APIs RESTful utilizando Node.js com o framework Express e TypeScript:

    • Compreensão da estrutura de cabeçalhos HTTP.

    • Papel da infraestrutura de linguagem comum.

  • Implementar soluções de back-end integradas a bancos de dados NoSQL,

    • Incluindo autenticação e login de usuários,

    • Visando segurança e integridade dos dados.

  • Realizar integração de APIs externas e concluir entrega do back-end do projeto, com checkpoints de validação e testes de funcionamento das funcionalidades implementadas.

Conteúdo Programático

A disciplina está organizada em unidades:

  • Unidade 1 – Desenvolvimento com Vue.js e UX antecipada.

  • Unidade 2 – Criação de APIs com Node.js, Express e TypeScript.

  • Unidade 3 – Integração com Banco de Dados NoSQL e Autenticação.

  • Unidade 4 – Projeto de desenvolvimento de Backend.

Autoria

  • Igor Gonzalez Pimenta: Mestre em Ciência e Sistema da Computação pela Universidade Salvador – Unifacs.

    • Analista de Sistemas.

    • Professor da Universidade Jorge Amado – Unijorge.

    • Empreendedor e tech lead em desenvolvimento de software na parte de customizações da torre de varejos da TOTVS.

Desenvolvimento com Vue.js e UX antecipada

  • Importância:

    • Criação de interfaces modernas e eficientes:

    • Domínio técnico das ferramentas de desenvolvimento.

    • Abordagem centrada no usuário desde as fases iniciais do projeto.

    • Vue.js como biblioteca JavaScript progressiva e flexível, ideal para:

    • Construção de componentes reutilizáveis.

    • Aplicações dinâmicas.

    • Simplicidade e arquitetura baseada em componentes, facilitando:

    • Manutenção.

    • Escalabilidade dos projetos.

    • Integrado a UX antecipada, onde:

    • Práticas devem ser seguidas:

      • Criação de wireframes.

      • Definição de fluxos de interação.

      • Princípios de usabilidade e acessibilidade.

  • Objetivo:

    • Desenvolver componentes reutilizáveis usando Vue.js e conceitos de UX antecipada.

Conteúdo Programático - Desenvolvimento com Vue.js e UX antecipada

  • Unidade organizada pelos seguintes temas:

    • Tema 1 - Introdução ao Vue.js e criação de componentes.

    • Tema 2 - Componentes reutilizáveis e comunicação entre componentes.

    • Tema 3 - Aplicando UX antecipada no desenvolvimento de interfaces.

Exemplo de Aplicação do Vue.js

  • Cenário: Aplicação para pedidos em uma cafeteria.

    • Clientes montam pedidos personalizados pelo celular antes de chegarem ao balcão.

    • Requisitos de interface:

    • Simples, rápida e funcional em celulares.

    • Componentes reutilizáveis que podem ser criados:

    • Componente de seleção de bebida: opções incluir café, chá, suco.

    • Componente de personalização: opções para adicionar açúcar, escolher tamanho e tipo de leite.

    • Resumo do pedido: atualiza automaticamente.

    • Risco de confusão na interface:

    • Botões pequenos.

    • Opções escondidas.

    • Fluxo difícil de entender.

    • Importância da UX antecipada:

    • Desenho de wireframes a priori.

    • Consultar usuários (clientes da cafeteria) para definir:

      • Botões grandes e visíveis.

      • Fluxo linear e claro (escolha → personalize → confirme).

      • Sistema que indica preço em tempo real.

    • Resultado com Vue.js:

    • Implementação modular e eficiente.

    • UX antecipada garante sistema agradável e funcional.

Tema 1 - Introdução ao Vue.js e Criação de Componentes

  • Vue.js: biblioteca JavaScript criada por Evan You, focada em:

    • Criação de interfaces dinâmicas e reativas.

    • Construção de aplicações SPA (Single Page Applications).

    • Modularização de código em componentes reutilizáveis.

  • Estrutura de um Projeto Vue.js:

    • Exemplo de estrutura:
      src/ ├── App.vue # Componente raiz ├── main.js # Ponto de entrada da aplicação ├── components/ # Componentes reutilizáveis │ └── MeuBotao.vue └── assets/ # Imagens, ícones, CSS etc.

    • Arquivo main.js: inicializado da seguinte forma:
      javascript import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')

O que é um Componente Vue?

  • Definição: um componente é uma unidade modular, independente e reutilizável da interface de uma aplicação.

  • Características:

    • Parte visual e funcional da tela, como botão, formulário, menu, card de produto.

    • Internamente contém:

    • Template: parte visual (HTML).

    • Script: lógica da aplicação (JS/TS).

    • Style: aparência (CSS).

  • Código Exemplo:

    <template>
  <button @click="contarCliques">
    Você clicou {{ contador }} vezes
  </button>
</template>

<script setup>
import { ref } from 'vue'
const contador = ref(0)
function contarCliques() {
  contador.value++
}
</script>

<style scoped>
button {
  background-color: #42b983;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
</style>

Detalhes do Componente

  • Template:

    • @click="contarCliques": evento que chama a função contarCliques ao clicar no botão.

    • {{ contador }}: interpolação Vue que exibe o valor da variável no HTML.

  • Script:

    • import { ref } from 'vue': importa função ref, usada para criar variáveis reativas.

    • Reatividade: se valor muda, o DOM se atualiza.

    • const contador = ref(0): cria variável reativa contador, iniciando em 0.

    • contador.value++: incrementa o valor do contador.

    • Acesso ao valor com .value.

  • Style:

    • Estilos aplicados apenas ao componente atual devido ao atributo scoped.

Ciclo de Vida do Componente

  • O Vue possui um ciclo de vida, permitindo executar ações em diferentes momentos:

    • Montagem: onMounted(): buscar dados, inicializar recursos.

    • Atualização: onUpdated(): reagir a mudanças no DOM.

    • Desmontagem: onUnmounted(): limpar timers, ouvintes de eventos.

  • Exemplo onMounted:
    javascript ¨K45K

Tema 2 - Componentes Reutilizáveis e Comunicação Entre Componentes

  • Definição: um componente reutilizável é um trecho de interface que pode ser usado em diferentes partes da aplicação.

    • Exemplos práticos incluem um botão de "Adicionar ao Carrinho" em várias páginas, mas com produtos diferentes.

  • Modelagem de um Componente Reutilizável (BotaoPadrao.vue):

    <template>
  <button :style="{ backgroundColor: cor }" @click="clicar">
    {{ texto }}
  </button>
</template>

<script setup>
defineProps({
  texto: String,
  cor: String
})
const emit = defineEmits(['clique'])
function clicar() {
  emit('clique')
}
</script>

  • Características do Código:

    • defineProps(): recebe texto e cor como propriedades personalizáveis.

    • emit('clique'): notifica o componente pai ao ser clicado.

  • Uso em um Componente Pai:

    <template>
  <div>
    <BotaoPadrao texto="Salvar" cor="green" @clique="salvar" />
    <BotaoPadrao texto="Cancelar" cor="red" @clique="cancelar" />
  </div>
</template>

<script setup>
import BotaoPadrao from './components/BotaoPadrao.vue'
function salvar() {
  alert('Salvando...')
}
function cancelar() {
  alert('Cancelando...')
}
</script>

  • Explicação:

    • Dois botões reutilizando o mesmo componente com textos e cores diferentes,
      permitindo comportamentos diferentes.

Comunicação Entre Componentes

  • Métodos: props e emit.

  • Comunicação Pai → Filho (props):

  <!-- Pai.vue -->
  <template>
    <Filho :mensagem="'Olá do componente pai!'" />
  </template>

  <!-- Filho.vue -->
  <template>
    <p>{{ mensagem }}</p>
  </template>
  <script setup>
  defineProps({ mensagem: String })
  </script>

  • Comunicação Filho → Pai (emit):

  <!-- Filho.vue -->
  <template>
    <button @click="emitirMensagem">Clique</button>
  </template>
  <script setup>
  const emit = defineEmits(['mensagem'])
  function emitirMensagem() {
    emit('mensagem', 'Olá, pai!')
  }
  </script>

  <!-- Pai.vue -->
  <template>
    <Filho @mensagem="mostrarAlerta" />
  </template>
  <script setup>
  import Filho from './Filho.vue'
  function mostrarAlerta(msg) {
    alert(msg)
  }
  </script>

Boas Práticas para Comunicação entre Componentes

  1. Use props para passar dados e emit para eventos: Mantém a independência dos componentes.

  2. Crie componentes pequenos e focados: Não misture muita lógica em um só componente.

  3. Use nomes claros: Nomeie componentes e props que reflitam sua função (ex: BotaoPadrao.vue, CardProduto.vue).

  4. Evite acoplamento: Não acesse variáveis do pai via this.$parent para manter o isolamento.

Tema 3 - Aplicando UX Antecipada no Desenvolvimento de Interfaces

  • Importância do UX:

    • UX (User Experience) antecipada: processo de considerar a experiência do usuário desde o começo do desenvolvimento, incluindo:

      • Entendimento do usuário.

      • Planejamento da interface.

      • Wireframes.

    • Foca em garantir que a aplicação seja útil e facilmente acessível.

  • Desenvolvimento de UX Antecipada (Etapas):

    • Definir o público-alvo.

    • Identificar dispositivos a serem usados.

    • Entender necessidades e problemas a serem resolvidos.

    • Wireframes ajudam a organizar elementos antes da codificação.

  • Exemplo de Código de Forma Simples:

    <template>
  <form @submit.prevent="logar">
    <label for="email">E-mail:</label>
    <input id="email" v-model="email" type="email" required />
    <label for="senha">Senha:</label>
    <input id="senha" v-model="senha" type="password" required />
    <button type="submit">Entrar</button>
    <p v-if="erro" class="erro">{{ erro }}</p>
  </form>
</template>

<script setup>
import { ref } from 'vue'
const email = ref('')
const senha = ref('')
const erro = ref('')
function logar() {
  if (email.value === '' || senha.value === '') {
    erro.value = 'Por favor, preencha todos os campos.'
    return
  }
  erro.value = ''  // Simulação de login
  alert('Login efetuado!')
}
</script>

<style scoped>
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}
.erro {
  color: red;
}
</style>

  • Resultados:

    • UX antecipada assegura que a aplicação Vue.js não seja apenas funcional, mas também acessível e intuitiva,
      entregando uma experiência superior ao usuário.

Encerramento

  • Resumo:

    • A criação de componentes com Vue.js permite organizar a interface em partes menores e reutilizáveis, facilitando manutenção e escalabilidade.

    • Um componente pode ser criado uma vez e utilizado várias vezes com diferentes props.

    • UX é fundamental, assegurando que interfaces sejam úteis e agradáveis.

    • A unidade ensinou a criar interfaces modernas com Vue.js aliando à UX antecipada desde o início do desenvolvimento.