EduPrime é um ERP modular para escolas, desenvolvido usando Ionic Framework 8 com Vue 3. Cada módulo (por exemplo, cadastro de alunos, cadastro de escolas, cadastro de professores) é gerenciado de forma independente usando submódulos Git.
A estrutura do projeto é organizada da seguinte forma:
EduPrime/
├── src/
│ ├── components/
│ ├── modules/
│ │ ├── student-registration/
│ │ ├── school-registration/
│ │ └── teacher-registration/
│ │ ├── views/
│ │ ├── services/
│ │ ├── index.ts
│ │ └── routes.ts
│ ├── views/
│ ├── App.vue
│ └── main.ts
├── public/
├── package.json
└── ionic.config.json
Crie um novo repositório para o módulo que você deseja adicionar. Por exemplo, para um módulo de "Cadastro de Turmas":
class-registration
.No novo repositório, crie a estrutura necessária:
mkdir -p src/modules/class-registration/views
mkdir -p src/modules/class-registration/services
touch src/modules/class-registration/index.ts
touch src/modules/class-registration/routes.ts
Edite os arquivos conforme necessário.
ClassRegistration.vue
Este é o componente de visualização principal para o módulo, onde você definirá a interface do usuário.
<!-- src/modules/class-registration/views/ClassRegistration.vue -->
<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue'
defineProps({})
</script>
<template>
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Cadastro de Turmas</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<!-- Formulário de Cadastro de Turmas -->
</IonContent>
</IonPage>
</template>
<style scoped>
/* Seu estilo aqui */
</style>
index.ts
Este arquivo é usado para exportar os componentes ou serviços que você deseja disponibilizar a partir deste módulo.
// src/modules/class-registration/index.ts
export { default as ClassRegistration } from './views/ClassRegistration.vue'
routes.ts
Neste arquivo, você define as rotas específicas para o módulo, incluindo propriedades meta
para controle de navegação e organização.
// src/modules/class-registration/routes.ts
import { school } from 'ionicons/icons'
import ClassRegistration from './views/ClassRegistration.vue'
const routes = [
{
path: '/class-registration',
name: 'ClassRegistration',
component: ClassRegistration,
meta: {
moduleName: 'ClassRegistration',
moduleIcon: school,
icon: school,
name: 'Cadastro de Turmas',
order: 1,
},
},
]
export default routes
No diretório do projeto principal EduPrime, adicione o módulo como submódulo Git:
cd EduPrime/src/modules
git submodule add https://github.com/seu-usuario/class-registration.git class-registration
git submodule init
git submodule update
As rotas do novo módulo serão importadas automaticamente para o projeto global do Ionic. Ao definir suas rotas no módulo e adicionar o módulo ao projeto principal, o sistema irá carregar essas rotas e disponibilizá-las no roteador principal.
main.ts
Os componentes do novo módulo serão importados automaticamente para o projeto global do Ionic. Isso significa que qualquer componente definido e exportado em index.ts
do módulo estará disponível globalmente no projeto, sem necessidade de importações adicionais.
App.vue
A estrutura do menu será gerada dinamicamente com base nas rotas definidas nos módulos. Ao carregar as rotas no projeto principal, o sistema construirá o menu com base nas propriedades meta
definidas em cada rota, garantindo uma navegação consistente e organizada.
Para atualizar os submódulos, navegue até o diretório de cada módulo, faça as alterações necessárias e commite:
cd src/modules/class-registration
# Fazer alterações
git add .
git commit -m "Atualizar componente de cadastro de turmas"
git push origin main
Depois, no projeto principal, atualize os submódulos:
git submodule update --remote
Seguindo essas instruções, você poderá adicionar e integrar novos módulos ao EduPrime de forma modular e organizada. Isso facilita a colaboração e a manutenção do projeto, permitindo que cada módulo seja desenvolvido e gerenciado de forma independente.