Clínica Veterinária

Front-end VUEJS

by Luiz Lins, Prof

acompanhar aula

primevue

tailwindcss

daisyUI

primevue

tailwindcss

daisyUI

primevue

tailwindcss

daisyUI

daisyUI

daisyUI

https://daisyui.com/

O que é?

Uma biblioteca de componentes prontos que funciona como um plugin do Tailwind CSS. Ele oferece classes semânticas (como btn, card, alert) que geram componentes estilizados usando as classes do Tailwind por baixo dos panos.

  •  

Vantagens

Vem com componentes prontos, responsivos e acessíveis (botões, formulários, modais, barras de navegação etc.);

Suporta (modo claro/escuro e mais de 30 esquemas de cores);

Reduz código repetitivo — por exemplo: <button class="btn btn-primary"> em vez de class="px-4 py-2 bg-blue-500 text-white rounded-lg...".

Totalmente compatível com o Tailwind — você pode misturar classes utilitárias e classes do DaisyUI.

Desvantagens

Traz um estilo mais "opinativo" (menos flexibilidade se você quiser controle total).

Aumenta um pouco o tamanho do bundle (mas ainda é leve).

Você depende da API de componentes do DaisyUI.

Na prática

manda um exemplo



// tailwindcss
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-700 text-white font-medium rounded-lg transition">
  Clique aqui
</button>



// daisyUI
<button class="btn btn-primary">
  Clique aqui
</button>

Conclusão

Use o Tailwind CSS se quiser máxima flexibilidade.

 

Adicione o DaisyUI se quiser agilizar o desenvolvimento com componentes bonitos, consistentes e suporte a temas — sem sair do ecossistema do Tailwind.

Tailwind CSS

Tailwind CSS

Rapidly build modern websites without ever leaving your HTML.

Atividade!

Regras da atividade.

Início do fim

  • Determinem o TechLead do grupo;
    • O mesmo será o responsável pelo projeto final e executará as próximas atividades;
  • A partir da branch (daisyUI, PrimeVUE ou tailwindcss) façam 02 (três);
    • Prod (Branch de produção)
    • Dev (Branch de desenvolvimento);
  • Adicionem os componentes do grupo em seu projeto;
  • Adicione "luizmagao@gmail.com" como o último componente.
  • O projeto deverá ser feito exclusivamente front-end com javascript com auxílio de algum framework.

Clínica Veterinária

Clínica Veterinária

📌 Módulo 1: Cadastro de Clientes e Pets

📌 Módulo 2: Agendamento de Consultas

📌 Módulo 3: Prontuário Veterinário

📌 Módulo 4: Dashboard Administrativo

📌 Módulo 1: Cadastro de Clientes e Pets

Objetivo

Registrar e gerenciar os dados dos tutores (clientes) e de seus animais de estimação.

Funcionalidades Principais

  • Cadastrar/editar cliente (nome, telefone, e-mail, endereço);
  • Cadastrar/editar pet (nome, espécie, raça, data de nascimento, peso, histórico médico resumido);
  • Vincular pet(s) a um cliente; e
  • Buscar cliente ou pet por nome.

📌 Módulo 1: Cadastro de Clientes e Pets

Elementos de Interface para Design

  • Formulários com campos bem definidos;
  • Botões de ação (Salvar, Cancelar, Adicionar Novo Pet);
  • Tabela ou lista com visualização dos clientes/pets cadastrados; e
  • Ícones intuitivos (ex: ícone de cachorro/gato para pets);

Fluxo Sugerido

  • Tela inicial → Botão “Cadastrar Cliente”;
  • Preencher dados do cliente → Salvar;
  • Após salvar, opção “Adicionar Pet” vinculado ao cliente; e
  • Visualizar lista de clientes com botão “Ver Pets”.

Estrutura básica de um sistema

Estrutura do código

Estrutura do código

M

model

V

view

C

controller

src/
├── models/
│   ├── User.js
│   └── Pet.js
├── services/
│   ├── apiClient.js
│   ├── UserService.js
│   └── PetService.js
├── repositories/
│   ├── UserRepository.js
│   └── PetRepository.js
├── controllers/
│   ├── UserController.js
│   └── PetController.js
└── views/
    ├── users/
    │   ├── index.vue
    │   ├── add.vue
    │   ├── edit.vue
    │   └── show.vue
    └── pets/
        ├── index.vue
        ├── add.vue
        ├── edit.vue
        └── show.vue

MVC

 

 

"É um padrão de arquitetura de software que divide uma aplicação em três camadas interconectadas: Model (modelo de dados e lógica de negócios), View (interface do usuário) e Controller (lógica de controle)"

src/
├── models/
│   ├── User.js
│   └── Pet.js
├── services/
│   ├── apiClient.js
│   ├── UserService.js
│   └── PetService.js
├── repositories/
│   ├── UserRepository.js
│   └── PetRepository.js
├── controllers/
│   ├── UserController.js
│   └── PetController.js
└── views/
    ├── users/
    │   ├── index.vue
    │   ├── add.vue
    │   ├── edit.vue
    │   └── show.vue
    └── pets/
        ├── index.vue
        ├── add.vue
        ├── edit.vue
        └── show.vue

Services

 

 

"É uma camada intermediária que lida com a lógica de negócios da aplicação, separando-a do Controlador e da persitência de dados.

src/
├── models/
│   ├── User.js
│   └── Pet.js
├── services/
│   ├── apiClient.js
│   ├── UserService.js
│   └── PetService.js
├── repositories/
│   ├── UserRepository.js
│   └── PetRepository.js
├── controllers/
│   ├── UserController.js
│   └── PetController.js
└── views/
    ├── users/
    │   ├── index.vue
    │   ├── add.vue
    │   ├── edit.vue
    │   └── show.vue
    └── pets/
        ├── index.vue
        ├── add.vue
        ├── edit.vue
        └── show.vue

Repositories

 

"Atua como uma camada de abstração para gerenciar o acesso a dados. Ele isola a lógica de negócio (no Model e Service) da lógica de persistência (como consultas a um banco de dados), fornecendo uma interface simples para operações de dados comuns como adicionar, buscar, editar e deletar entidades. 

A Model-View-Controller (MVC) architecture

Por onde a gente começa?

src/
├── models/
│   ├── User.js
│   └── Pet.js
├── services/
│   ├── apiClient.js
│   ├── UserService.js
│   └── PetService.js
├── repositories/
│   ├── UserRepository.js
│   └── PetRepository.js
├── controllers/
│   ├── UserController.js
│   └── PetController.js
└── views/
    ├── users/
    │   ├── index.vue
    │   ├── add.vue
    │   ├── edit.vue
    │   └── show.vue
    └── pets/
        ├── index.vue
        ├── add.vue
        ├── edit.vue
        └── show.vue

Por onde a gente sabe!

curiosidades

estrutura de

dados de um

sistema

Routers

Rotas

Naturais
Terrestres
Marítimas

Propósito das rotas?

Comércio;

Troca de conhecimento;

Conflito e poder

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/dashboard.vue')
    },
    {
      path: '/tutors',
      component: () => import('@/views/tutors/index.vue')
    },
    {
      path: '/tutors/add',
      component: () => import('@/views/tutors/add.vue')
    },
    {
      path: '/tutors/:id/edit',
      component: () => import('@/views/tutors/index.vue'),
      props: true
    },
    {
      path: '/tutors/:id/show',
      component: () => import('@/views/tutors/index.vue'),
      props: true
    }
  ],
})

export default router
  • path: '/tutors',
  • path: '/tutors/add',
  • path: '/tutors/:id/edit',
  • path: '/tutors/:id/show',

devemos usar

children's

como ficaria isso?





/user/johnny/profile                   /user/johnny/posts 
┌──────────────────┐                  ┌──────────────────┐
│ User             │                  │ User             │
│ ┌──────────────┐ │                  │ ┌──────────────┐ │
│ │ Profile      │ │  ────────────>   │ │ Posts        │ │
│ │              │ │                  │ │              │ │
│ └──────────────┘ │                  │ └──────────────┘ │
└──────────────────┘                  └──────────────────┘


const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
        // when /user/:id/profile is matched
        path: 'profile',
        component: UserProfile,
      	props: (route) => ({
          id: route.params.id // 👈 pega o :id da rota PAI
        })
      },
      {
        // when /user/:id/posts is matched
        path: 'posts',
        component: UserPosts,
        props: (route) => ({
          id: route.params.id // 👈 pega o :id da rota PAI
        })
      },
    ],
  },
]




<template>
  <div class="user">
    <h2>User {{ $route.params.id }}</h2>
    <router-view />
  </div>
</template>






<template>
  <div>
    <h2>Editar Tutor #{{ id }}</h2>
  </div>
</template>

<script setup>
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
})
// Se quiser converter para número (já que a rota passa como string):
// const tutorId = computed(() => parseInt(props.id, 10))
</script>

rota vai mostrar o que?

*.vue

  • this.$route

    • (dados da rota atual)

  • this.$router

    • (funcionalidades para a rota)