SGEC: DESENVOLVIMENTO WEB COM TECNOLOGIA MEAN · Com o uso do framework Angular e Express é...

1

LETÍCIA RIBEIRO DE MORAES

SGEC: DESENVOLVIMENTO WEB COM TECNOLOGIA MEAN

Assis

2016

2

SGESC: DESENVOLVIMENTO WEB COM TECNOLOGIA MEAN

Trabalho de Conclusão de Curso apresentado

ao Instituto Municipal de Ensino Superior de

Assis, como requisito do Curso de Graduação

Orientador: Domingos de Carvalho Vilella Junior Área de Concentração: Informática

Assis

2016

3

FICHA CATALOGRÁFICA

MORAES, Letícia Ribeiro

Sistema online de Gerenciamento de Escolas Particulares / Letícia Ribeiro de Moraes. Fundação Educacional do Município de Assis – FEMA – Assis, 2016.

85p.

Orientador: Trabalho de Conclusão de Curso – Instituto Municipal de Ensino Superior

de Assis – IMESA

1. MEAN 2. Javascript 3. SGESC

CDD: 001.61 Biblioteca da FEMA

4

SISTEMA DE GERENCIAMENTO DE ESCOLAS PARTICULARES

LETÍCIA RIBEIRO DE MORAES

Trabalho de Conclusão de Curso apresentado ao

Instituto Municipal de Ensino Superior de Assis,

como requisito do Curso de Graduação,

analisado pela seguinte comissão examinadora:

Orientador: Prof. Esp. Domingos De Carvalho Villela Junior Analisador (1): Prof. Dr. Almir Rogério Camolesi

Assis

2016

5

DEDICATÓRIA

Dedico este trabalho principalmente à minha

família que sempre apostou e confiou nas

minhas decisões. Dedico também a todas as

mulheres que se empenham na área de

tecnologia da informação.

6

AGRADECIMENTOS

Primeiramente agradeço aos meus pais por estarem sempre ao me lado e me

incentivarem arduamente a seguir os meus sonhos, aos meus irmãos por nunca me

deixarem desistir, a minha boa amiga Thais Dízero por estar sempre me cobrando

resultados e a Deus por todas as oportunidades e bênçãos que vêm me dado.

Ao meu professor mestre Felipe Alexandre Cardoso Pazinatto, que me deu

tranquilidade durante todo o desenvolvimento de meu trabalho de conclusão de

curso e ao professor especialista Domingos de Carvalho Vilella Junior que me

orientou e ajudou a todo o momento.

Aos colegas de classe que conquistei ao longo desses três anos de aprendizado. Ao

namorado João Roberto que teve paciência e compreensão e aos meus bons amigos

pelos momentos de descontração proporcionados durante o desenvolvimento desse

projeto.

E a todos que colaboraram direta ou indiretamente na execução deste trabalho.

7

“Só se pode alcançar um grande êxito quando nos mantemos fiéis a nós mesmos.”

Friedrich Nietzsche (1844-1900).

8

RESUMO O presente trabalho descreve o desenvolvimento de um sistema de gestão de

sistema escolar com ênfase na interatividade que cada ambiente terá para com os

outros. O objetivo do sistema é a diminuição do volume de papeis e tempo gasto no

gerenciamento e administração de institutos de ensino. O projeto foi desenvolvido

utilizando a linguagem Javascript e HTML5 com a plataforma NetBeans, em conjunto

dos frameworks Angular e Express, Nodejs para manipulações de dados, bootstrap

para o desenvolvimento do layout de template de todo o site e o contíguo de

tecnologia MEAN que disponibiliza um conjunto de componentes específicos para o

desenvolvimento rápido.

Palavras-chave: Desenvolvimento de aplicação Web Javascript; Javascript; JQuery; MongoDb.

9

Abstract This paper describes the development of an online educational management system

that emphasizes the interactivity each environment will have one another. The system

aims to decrease the paper volume and waste of time when managing and

administrating educational institutions. The project was developed using Javascript

language and HTML5 with NetBeans platform, along with Angular and Express

frameworks, NodeJs to manipulate data, Bootstrap for the development of a template

layout of the whole website and MEAN contiguous technology which provides specific

components for a fast development.

Keywords: Development of Web Javascript application; Javascript; JQuery;

MongoDb;

10

LISTA DE ILUSTRAÇÕES

Figura 1 – Diagrama do Servidor Web Node Js ................................................................ 23

Figura 2 –Mapa Mental Aplicação SGESC ........................................................................38

Figura 3 – Diagrama Caso de Uso Secretário ................................................................... 41

Figura 4 – Diagrama de Caso de Uso de Login - Secretário ..........................................41

Figura 5 – Diagrama de Caso de Uso de Manter Aluno ............................................... 42

Figura 6 – Diagrama de Caso de Uso de Manter Funcionário ......................................43

Figura 7 – Diagrama de Caso de Uso do Coordenador ..............................................45

Figura 8 – Diagrama de Caso de Uso de Manter Período ......................................... 46

Figura 9 – Diagrama de Caso de Uso de Manter Turma ........................................... 47

Figura 10 – Diagrama de Caso de Uso de Manter Boletim .........................................48

Figura 11 – Diagrama de Caso de Uso de Manter Calendário ................................. 49

Figura 12 – Diagrama de Caso de Uso de Manter Matéria ........................................50

Figura 13 – Diagrama de Caso de Uso de Manter Fórum ......................................... 51

Figura 14 – Diagrama de Caso de Uso de Manter Chat ........................................... 52

Figura 15 – Diagrama de Caso de Uso de Diretor .................................................... 54

Figura 16 – Diagrama de Caso de Uso de Visualizar Aluno .................................... 54

Figura 17 – Diagrama de Caso de Uso de Visualizar Responsável ....................... 55

Figura 18 – Diagrama de Caso de Uso de Visualizar Funcionário...........................56

Figura 19 – Diagrama de Caso de Uso de Emitir Relatório ..................................... 57

Figura 20 – Diagrama de Caso de Uso de Professor ............................................... 59

Figura 21 – Diagrama de Caso de Uso de Manter Nota ........................................... 59

Figura 22 – Diagrama de Caso de Uso de Manter Falta ...........................................60

11

Figura 23 – Diagrama de Caso de Uso de Manter Matéria .......................................... 61

Figura 24 – Diagrama de Caso de Uso de Manter Chat ............................................. 62

Figura 25 – Diagrama de Caso de Uso de Manter Fórum ........................................... 63

Figura 26 – Diagrama de Caso de Uso de Aluno ..........................................................65

Figura 27 – Diagrama de Caso de Uso de Visualizar Nota ....................................... 65

Figura 28 – Diagrama de Caso de Uso de Visualizar Falta .......................................66

Figura 29 – Diagrama de Caso de Uso de Visualizar Matéria ..................................67

Figura 30 – Diagrama de Caso de Uso de Manter Chat .......................................... 68

Figura 31 – Diagrama de Caso de Uso de Manter Fórum ....................................... 69

Figura 32 – Diagrama de Caso de Uso de Responsável ........................................ 70

Figura 33 – Diagrama de Caso de Uso de Visualizar Nota ......................................... 71

Figura 34 – Diagrama de Caso de Uso de Visualizar Falta ..........................................72

Figura 35 – Diagrama de Atividade de Secretário ......................................................... 74

Figura 36 – Diagrama de Atividade de Coordenador para Busca e/ou Cadastro ..... 75

Figura 37 – Diagrama de Atividade de Coordenador para Boletim ............................. 76

Figura 38 – Diagrama de Atividade de Aluno para Fórum ........................................... 76

Figura 39 – Camadas MVC ................................................................................................ 79

Figura 40 – Arquivo Package .............................................................................................. 80

Figura 41 – Página Inicial do Sistema SGESC ................................................................81

Figura 42 – Página de Área de Login ................................................................................ 81

12

LISTA DE TABELAS

Tabela 1 – Manter Aluno ....................................................................................................... 32

Tabela 2 – Manter Responsável .......................................................................................... 33

Tabela 3 – Manter Funcionário ............................................................................................ 34

Tabela 4 – Manter Período ................................................................................................... 36

Tabela 5 – Manter Turma ..................................................................................................... 37

Tabela 6 – Manter Boletim ................................................................................................... 38

Tabela 7 – Manter Calendário .............................................................................................. 39

Tabela 8 – Manter Matéria ................................................................................................... 40

Tabela 9 – Manter Fórum ..................................................................................................... 41

Tabela 10 – Manter Chat ...................................................................................................... 43

Tabela 11 – Visualizar Aluno ................................................................................................ 45

Tabela 12 – Visualizar Responsável .................................................................................. 46

Tabela 13 – Visualizar Funcionário.. ................................................................................... 47

Tabela 14 – Emitir Relatórios ............................................................................................... 48

Tabela 15 – Manter Nota ...................................................................................................... 50

Tabela 16 – Manter Falta ...................................................................................................... 51

Tabela 17 – Manter Matéria .................................................................................................. 52


Tabela 19 – Manter Fórum ................................................................................................... 54

Tabela 20 – Visualizar Nota ................................................................................................. 56

Tabela 21 – Visualizar Falta ................................................................................................. 57

Tabela 22 – Visualizar Matéria ............................................................................................ 58

13


Tabela 24 – Manter Fórum ................................................................................................... 60

Tabela 25 – Visualizar Nota ................................................................................................. 61

Tabela 26 – Visualizar Faltas ............................................................................................... 62

14

Sumário

1- INTRODUÇÃO ................................................................................................................... 15

1.1- OBJETIVOS ............................................................................................................. 16

1.2- JUSTIFICATIVA ....................................................................................................... 18

1.3- PÚBLICOS ALVO ........................................................................................................ 19

1.3- ESTRUTURA DO TRABALHO ................................................................................. 20

2- TECNOLOGIAS E FERRAMENTAS DE DESENVOLVIMENTO. ....................................... 21

2.1- O QUE É JAVASCRIPT. .............................................................................................. 21

2.1-1. PRINCIPAIS CARACTERÍSTICAS JAVASCRIPT .................................................... 22

2.2- NODEJS. ..................................................................................................................... 23

2.3- MONGODB. .............................................................................................................. 24

2.3 - EXPRESS.JS. ............................................................................................................ 25

2.4 – ANGULARJS ............................................................................................................. 26

3 – ANÁLISE E ESPECIFICAÇÕES DO SISTEMA ................................................................ 27

3.1 – INTRODUÇÃO AO UML ............................................................................................ 27

3.2 – MAPA MENTAL ......................................................................................................... 27

3.3 - DIAGRAMA E ESPECIFICAÇÃO DE CASOS DE USO .............................................. 30

3.4 – DIAGRAMA DE ATIVIDADES .................................................................................... 63

4 – ORÇAMENTO .................................................................................................................. 68

5 – IMPLEMENTAÇÃO DO PROJETO .................................................................................. 69

5.2 – INTERFACES DA APLICAÇÃO ................................................................................. 75

6 – CONCLUSÃO .................................................................................................................. 78

7 – TRABALHOS FUTUROS ................................................................................................. 79

8- REFERÊNCIA .................................................................................................................... 80

15

1- INTRODUÇÃO

Na era da informação, um dos desafios do gerenciamento de escolas é a

organização de sua rotina, seus dados e compromissos. Deve-se ter um

gerenciamento devidamente completo, que contenha matricula de alunos, emissão

de certificados, controle de notas, presenças, calendário acadêmico, etc. Além disso,

uma instituição de ensino precisa administrar as ações de controle e seus

funcionários, professores, serviços terceirizados e afins.

Para promover a administração de uma instituição de ensino é necessário

desenvolver um sistema de gerenciamento, contendo todos os requisitos para o

controle escolar.

Um sistema de gerenciamento escolar online seria uma solução para diversas

dificuldades encontradas dentro de uma escola.

Toda instituição precisa de um bom sistema de gerenciamento, entretanto o

sistema de gerenciamento somente em papel, onde se acumula pilhas e pilhas de

documentos que ficam suscetíveis aos desgastes do tempo, ocupa muito espaço

físico da instituição e que gera maior custo pode não ser mais o suficiente para as

escolas hoje em dia.

Atualmente, vivemos na era da informação e mobilidade, exigindo das

organizações estratégias eficientes em seus processos a fim de torná-los mais ágeis

e fáceis por meio da utilização de ferramentas inteligentes fornecidas por sistemas de

informação (BAZZOTTI; GARCIA, 2007).

A falta de sistemas de informação em um ambiente escolar corporativo agrega

um déficit em seus processos, devido ao grande volume de dados a serem salvos em

fichas de papeis, além do gasto e desordem no armazenamento de documentos e da

necessidade de um funcionário específico para essa função.

No gerenciamento de escolas, principalmente em relação a particulares e de

ensino de línguas, deve-se ter controle com relação a alunos matriculados, matérias,

calendário escolar, professores e suas qualificações, notas e faltas, etc. Dessa forma,

eleva-se o número de dados já que, para cada uma dessas informações tem que ser

cuidadosamente bem guardadas, ao mesmo tempo em que tenha que ser de fácil

acesso.

Além do cuidado meticuloso com essas documentações, a escola demanda

16

de muito trabalho para gerar esse documento, conferir essas informações, repassar

para os interessados e alimentar os dados da escola. Este trabalho manual é

desgastante aos funcionários, pois além de demandar muito tempo exige cautela

para que nada esteja repetido ou incorreto, pois são muitos dados importantes como

endereço, telefones de emergência, contato eletrônico, notas dos alunos.

Uma aplicação Web é um sistema acessado por uma rede, como a Internet,

por meio de um navegador de páginas. Atualmente, a Internet oferece uma

infinidade de aplicações com conteúdo dinâmico e personalizado, devido a

tecnologias que possibilitaram a evolução de páginas antes estáticas. (TEMPLE et

al., 2004).

Existem várias vantagens em se utilizar a linguagem para web Javascript,

isso se dá devido sua tecnologia estruturada chamada Model-View-Controller

(MVC), isso porque esta tecnologia possibilita a separação por padrão em partes, ou

melhor, denominado, por camadas. Sendo assim as regras de negócio ficam

separadas das camadas de visualização e de controle da aplicação. Ao se utilizar o

padrão MVC a aplicação se torna mais simples quando se trata de manutenibilidade

e assim como consequência se torna uma aplicação mais organizada, o que é uma

boa pratica de programação.

Com o uso do framework Angular e Express é possível tonar a

implementação de MVC com mais facilidade e produtividade, poupando ao

desenvolvedor uma jornada mais cansativa e dando possibilidade de aplicar e

dedicar-se a segundas tarefas do sistema a ser desenvolvido.

1.1- OBJETIVOS

O Objetivo geral deste trabalho é a criação de um sistema de gerenciamento

escolar onde os funcionários terão acesso, com o intuito de facilitar e agilizar o

gerenciamento de cadastro, de emissão de certificados, lançamentos de notas,

presença (tanto do aluno como dos professores) e outras funções importantes.

17

17

Com este sistema será possível obter um melhor e mais conciso controle dos

fluxos de informação de uma escola, assim como também ajudará no

desenvolvimento de boa comunicação entre os usuários dentro do sistema escolar.

Pretende-se com este trabalho, desenvolver um sistema de gerenciamento das

funções escolares, de instituições particulares ou escolas de línguas ou informática de

forma que todos os usuários no sistema tenham acesso aos ambientes que seu

número de usuário liberará permissão obtenham através de Login e senha um

ambiente de gestão especifico para sua função.

De forma a tornar possível a elaboração deste projeto, idealizando todos os

requisitos necessários para o desenvolvimento, os seguintes tópicos específicos

foram instituídos:

Cadastro e Gerenciamento Funcionários:

o Função;

o Departamento;

o Informações pessoais;

o Formação;

o Período de Trabalho;

o Tipo de contrato;

Cadastro e Gerenciamento Corpo Docente:

o Disciplina lecionada;

o Formação;

o Carga Horária;

o Quantidades de Turma;

o Informações Pessoais;

o Tipo de contrato;

Cadastro e Gerenciamento Alunos:


o Nível Escolar;

o Período;

o Ultima Escola;

o Informações do Responsável;

o Download do Contrato, se necessário;

18

Cadastro e Gerenciamento Disciplina:

o Área da Disciplina;

o Carga Horária;

o Período;

o Professores responsáveis;

Cadastro e Gerenciamento Turma:o Calendário Escolar;o Período Turma;o Quantidade de Alunos;o Quantidade de disciplinas;

Calendário e Gerenciamento acadêmico: o Data de feriados; o Data de entrega de notas; o Programação de eventos e campanhas;

Movimentação de finalização de ano letivo:o Troca de ano do Aluno;o Troca de disciplinas;o Troca de Turma;o Troca de Período;

1.2- JUSTIFICATIVA

Ao se implantar um sistema de gerenciamento em uma unidade escolar, a

busca por cadastros, emissões de certificados, pagamento de contas, recebimentos

de contas, lançamentos de notas, entre outras funções que facilitam a gestão escolar

se tornam muito mais práticas.

O sistema facilita e auxilia na administração de tempo e espaço mantendo o

gerenciamento e controle com qualidade superior ao feito com papeis.

As maiorias das escolas particulares, na maioria das vezes, já fazem uso de

um sistema básico e sem muitas funções para o gerenciamento de suas rotinas. O

desenvolvimento de um sistema que agregue todas as necessidades da escola se

tornou algo indispensável.

O sistema suportará auxilio não só na entrada de dados dos alunos que serão

matriculados, na renovação dos dados dos alunos rematrículas e do armazenamento

19

dos alunos que irão se formar, mas também prestará auxilio na emissão de

documentação de todas essas movimentações que serão feitas.

Todo esse sistema tem que ter uma boa integração entre seus ambientes,

para que aja coerência nas informações inseridas, na emissão de boletos e

certificado e outros relatórios.

O acesso à internet não só tem crescido com o tempo como também tem se

tornado indispensável e devido isso os sistemas vêm gradativamente migrando

para web, pois sua mobilidade e custo tem sido muito atrativo para empresa. Sem

levar em consideração que soluções web aliviam a pressão ao se preocupar com o

hardware dos computadores em que serão aplicados já que o Servidor Web que é

responsável pelo processamento e tratamento dos dados.

Segundo um levantamento realizado pela empresa Telebrasil, o acesso à

banda larga vem crescendo rápido devido ao uso de terminais móveis 3G. O

acesso chegou a 88,3 milhões em Janeiro de 2013, tendo alcançado um aumento

de 37% em relação ao mesmo período do ano passado. Em um ano, o número de

acessos cresceu 47%, chegando a 67,6 milhões de conexões. Dessas, 79,73%

eram de dispositivos 3G, incluindo smartphones e tablets (EXAME, 2013).

As empresas cada vez mais têm procurado aplicações que ao mesmo

tempo oferecem segurança e confiabilidade, também sejam capazes de suprir as

necessidades sem ter custos abusivos.

1.3- PÚBLICOS ALVO

Esse desenvolvimento da aplicação proposta neste trabalho tem como público

alvo escolas particulares, escola de idiomas, institutos de educação e outras

instituições de ensino.

Pode-se concluir que este sistema surge como uma solução pratica e

competente para diversas escolas que diariamente sofrem com a sobrecarga da

administração e gerenciamento de suas funções, sendo um alívio nas

responsabilidades de professores, coordenadores e acessibilidade aos alunos e pais

e ou responsáveis desses alunos.

Visando uma aplicação limpa e visualmente agradável, com funcionalidade

igualmente capaz de suprir necessidades optou-se nessa aplicação à arquitetura e

20

desenvolvimento baseado no conjunto de tecnologia MEAN (MongoDB, Express,

Angular e Nodejs).

1.3- ESTRUTURA DO TRABALHO

Este trabalho está estruturado nas seguintes partes:

Capítulo 1 – Introdução.

Capítulo 2 – Tecnologia e Ferramentas de Desenvolvimento.

Capítulo 3 – Analise e Especificação do Sistema.

Capítulo 4 – Estrutura do Projeto.

Capítulo 5 – Implementação do Projeto.

Capítulo 6 – Conclusão.

Capítulo 7 – Trabalhos Futuros.

Referências.

21

21

2- TECNOLOGIAS E FERRAMENTAS DE DESENVOLVIMENTO.

O intuito deste capítulo é apresentar as tecnologias e ferramentas empregadas

no desenvolvimento do sistema SGESC. A tecnologia Javascript foi escolhida devida

sua acessibilidade de desenvolvimento e plataforma orientada a objeto de alto nível,

já o ambiente integrado de desenvolvimento (IDE – Integrated Development

Environment) selecionado foi o NetBeans devido à possibilidade de integração com

novos componentes e o fácil acoplamento de novas bibliotecas, frameworks e

diversas Application Programming Interface (API). ( SILVA,2016)

Utilizou-se para integração do Javascript e o banco de dados Mysql, um dos

mais utilizados pelas empresas hoje em dia, a tecnologia de linguagem chamada

NodeJs, que é uma plataforma embasada sobre o motor de javascript para agilizar e

facilitar a construção de redes escaláveis e rápidas.

Node.js utiliza um modelo I/O direcionada a evento não bloqueante, tornando

assim a aplicação mais leve e eficiente e mais eficiente quando se trata de

aplicações em tempo real que gera uma troca intensa de dados através dos

dispositivos assim distribuídos.(KROL,2015)

Utilizando o framework AngularJs que é um framework open-source Javascript

que tem sido mantido pela Google que tem a intensão de auxiliar na execução SPA

(single-page aplications). Ele é um framework MVC para desenvolvimento front-end.

O Apache foi o servidor web utilizado para a aplicação, isso devido sua

excelente desempenho e segurança, a compatibilidade com diversas plataformas e

por sua dominância no mercado de servidores web.

2.1- O QUE É JAVASCRIPT.

Apesar do nome, Javascript não tem relação alguma com a plataforma Java.

Enquanto Javascript é uma plataforma client-side, Java é uma linguagem server-side.

Javascript é uma linguagem baseada em objetos, ou seja, sua tecnologia tenta tratar

as aplicações como um conjunto de objetos, ou partes individuais, que executam

22

tarefas distintas.

Criada no ano de 1995 pelo programador Brendan Eich, até então funcionário

da NetScape Communications Corporation, Javascript foi inicialmente projetada para

rodar nos navegadores NetScape, como proposta de oferecer aos desenvolvedores

web solução para tornar as páginas web mais dinâmicas para tornar o uso mais

agradável. Após um ano depois que foi lançada, a empresa Microsoft fez porte da

linguagem, influenciando assim para que ela se tornasse uma das tecnologias mais

importantes e mais utilizadas por desenvolvedores web.

2.1-1. PRINCIPAIS CARACTERÍSTICAS JAVASCRIPT

A linguagem de programação Javascript possui várias características

chave da plataforma. Entre elas temos as seguintes características:

CÓDIGO NO HTML: O código fonte de Javascript pode ser incluso dentro

do próprio código HTML, pois existe uma Tag que serve somente para isso,

separar a marcação do Javascript dentro do seu código.

(MORRISON,2008)

LINGUAGEM INTERPRETADA: Javascript é uma linguagem interpretada,

ou também chamada de linguagem de script, ou seja, os comandos de

Javascript são executados um por um pelo interpretador, dispensando

assim a necessidade de copilar o código, como acontece em outras

linguagens de programação. (MORRISON,2008)

ORIENTADA A OBJETO: o Javascript é uma linguagem orientada a objeto,

ou seja, ela trata seu programa por partes individuais, objetos, e não

sequencialmente. Ela fica agrupando os objetos similares em classe.

(MORRISON,2008)

SINTAXE: A sintaxe desta linguagem é similar a sintaxe de C, C++ e Java,

sendo um facilitador para desenvolvedores que já tem alguma noção

nessas outras tecnologias(MORRISON,2008).

DIRIGIDA POR EVENTOS: Umas das mais importantes características do

Javascript, a linguagem sempre separa em eventos comandos importantes

do código, como por exemplo clicar em um botão ou preencher o campo de

23

um formulário. (MORRISON,2008)

INDEPEDENCIA: Javascript é uma linguagem independente de plataforma,

isso porque os comandos de seu código são processados pelo navegador

do usuário, ou seja, o código pode ser processador por um navegador

instalado no Windows tanto como um navegador instalado no Linux.

(MORRISON,2008)

2.2- NODEJS.

Baseado em redes utilizando Javascript e V8 Javascript Engine, o Node.Js é

uma plataforma para desenvolvimento server-side, onde dá para se criar uma grande

variedade de projetos web utilizando o código Javascript(KROL,2015)

Seu principal objetivo é fornecer de maneira fácil, um método para construção

de aplicações de rede escaláveis. Além de resolver a questão de gerenciamento de

memória que ocorre com outras plataformas, como Java e PHP, porque invés de

criar uma nova tarefa para cada conexão, o NodeJs dispara um evento executando

dentro da engine de processos dele mesmo. Ou seja, ele impede que seja criado

uma fila de tarefas Este método permite afirmar que NodeJs não dará nunca

deadlock, pois não há bloqueios permitidos. .(PEREIRA,2015).

Apesar de ser um servidor web, não se pode comparar o NodeJs com base

no Apache ou Tomcat (servidores webs comuns utilizados até o momento), pois

enquanto estes servidores são ready-to-intall, servidores que instalam as aplicações

imediatamente, o NodeJs tem o conceito de módulos que podem ser adicionados no

seu núcleo. (MOREIRA,2016)

NodeJs também trabalha com o conceito de Orientação a Evento, onde há um

laço de repetição e diversos pequenos tratadores de eventos, fazendo assim que o

servidor nunca deixe ocorrer overlock.(PEREIRA,2015).

A Figura 1 ilustra o Diagrama do Servidor NodeJs:

24

2.3- MONGODB.

MongoDB é um banco de dados NoSql, ou seja, um banco de dados não

relacional (NoRel) que utiliza de documentos para o tratamento de seus dados, além

de escalonar os dados.

Ele é escrito em linguagem C++, seu armazenamento é feito dentro de

documentos muito semelhantes a JSON, utilizando de BSON (uma versão binária de

JSON), que prende seus dados em um esquema de pares de valor, ou chave.

(CHODOROW, 2013)

A grande diferença entre o MongoDB e outros bancos de dados é que o

MongoDB tem uma facilidade significativa na conversão de comandos SQL em

funções de consulta do banco. Ele tem facilidade de instalação e utilização, além de

ter compatibilidade com diversos sistemas operacionais. (CHODOROW, 2013)

Seu projeto é em software livre, com seu banco licenciado pelo GNU AGPL

(Affero General Public License) versão 3.0.

Sua orientação em documentos é bastante diferente da orientação tradicional

como o conhecido MySQL, pois ao invés de armazenar os dados em estruturas

rígidas, ele armazena os dados em documentos definidos de maneira vaga.

Uma diferença importante de um banco de dados orientado a documentos

(NoSql) é que não há relacionamentos estritos entre os documentos, como ocorre em

tabelas, o que auxilia na hora de se manter o design do esquema.(CHODOROW,

2013)

25

O MongoDB tem várias vantagens interessantes, como podemos analisar a

seguir:

Compatibilidade com sistemas operacionais Windows, Linux, MAC OS e

Solaris.

Distribuição de código origem para autoconstrução.

Drivers oficiais para C#, C, C++, Javascript, Ruby, Haskell, Java,

Python, PHP e Scala.

Consultas Javascript ad-hoc para localização de dados usando

qualquer que for o critério de atributo do documento.

Quando houver consulta a suporte para as expressões regulares.

Armazenamento de objetos baseados em coleta.

Escala horizontal com o conceito auto-sharding.

Shell online para teste do MongoDB sem necessitar instalá-lo.

A documentação é detalhada, além do material como livros serem

facilmente encontrados.

2.3 - EXPRESS.JS.

ExpressJs é um framework estruturado para NodeJs inspirado em outro

framework chamado Sinatra, pertencente ao Ruby. Framework, como dito, é uma

técnica orientada a objeto, onde se descreve a arquitetura de um

sistema.(HAVIV,2016)

Algumas das mais interessantes características do Express são:

Ele é focado em alto desempenho.

Sua configuração é baseada no ambiente do sistema operacional.

Possuiu um routing (roteamento) robusto.

Contem o conceito de Dynamic View e Helpers.

Integra o View Template Engine

Renderizador de Views

Suporte a Partials

Foi desenvolvido com a base do Middleware Connect.

26

Com este framework existe a liberdade de se desenvolver aplicações

complexas com total controle do programador.

2.4 – ANGULARJS

É um framework Model View Controller (MVC) até então mantido pelo Google.

Seu maior objetivo é simplificar as aplicações que são desenvolvidas para web. Seu

modo de funcionamento basicamente é otimizar o front-end de sistemas online,

quebrando o código em partes e separando suas principais funções. Ele também

conta com o Two-Way Data Binding e incentiva o uso de Dependency Injection.

O AngularJs tem os seguintes componentes:

Módulos: são componentes que realizam a inicialização e o

encapsulamento dos controllers, das diretivas, das routes e services da

aplicação. São definidas pela diretiva ng-app.

Diretivas: são os elementos do framework que otimizam o HTML. Elas

são definidas dentro de um documento HTML e serão utilizadas para

manipular o DOM de forma mais transparente e adicionar, se

necessário, novos comportamentos às tags existentes no código.

Controlers: é um comportamento que age por detrás do DOM, também é

responsável pela inicialização e adição, se necessário, dos

comportamentos do objeto $scope. Tal que permite a comunicação que

há entre o View e Controller. Para definir em qual parte do documento

HTML será utilizado um controller, a diretiva ng-controller é utilizada.

Services: São objetos Singletons (Padrão de Projeto) que instancia

classes. Realizam tarefas específicas comuns de uma aplicação para

web. Podem também ser utilizados para compartilhas informações entre

os controllers e servir como uma comunicação entre o servidor, além de

ser uma camada lógica de negócio, deixando assim o fluxo de aplicação

para o controller administrar.

27

3 – ANÁLISE E ESPECIFICAÇÕES DO SISTEMA

3.1 – INTRODUÇÃO AO UML

Para se construir modelos na tecnologia da informação é necessário que se

tenha uma linguagem com bastante elementos visuais que auxiliam na hora de

expressar os conceitos que serão apresentados. Estes conceitos devem ser simples

para o entendimento, porém eficazes.

Devido essa exigência, por volta de 1970, alguns muitos metodologistas

vieram a desenvolver um método de modelar e especificar sistemas operacionais,

influenciados pelas técnicas convencionais já existentes.(NUNES, 2011)

Em 1994 houve a “guerra dos métodos”, isto porque a popularização dos

métodos foi tão grande que estes já passavam de cinquenta. Algumas linguagens

(métodos) se popularizaram mais que as outras, como por exemplo OMT-2

desenvolvida por Jim Rumbaugh, a linguagem de Ivan Jacobson nomeada como

OOSE, Booch de Grady Booch, entre outras.

Em outubro de 1994, Grady Booch e Jim Rumbaugh foram parceiros de

trabalho na Rational Software Corporation, então diante esta parceria eles decidiram

unificar os métodos Booch e OMT. Um ano depois foi lançada a primeira versão (0.8)

do até então denominado Método Unificado, quando também Jacbson agregou o

OOSE ao projeto. A junção dos três métodos mais utilizados resultou no lançamento

do UML (Unified Modeling Language – Modelos de Linguagem Unificados), que em

geral receberam resposta positiva da comunidade em geral e foi incorporada em

várias grandes empresas, como por exemplo a HP, MCI Systemhouse, Oracle e até

mesmo a Microsoft.(NUNES, 2011).

3.2 – MAPA MENTAL

Para melhor visualizar a ideia da aplicação foi construído um diagrama de

Mind Map, ou em português Mapa Mental, onde o mesmo contém a conceptualização

28

do que será desenvolvido. Essa técnica foi idealizada em meados da década de 70,

por Tony Buzan, e foi aplicado a este projeto com intuito de contribuir na definição

das funcionalidades do sistema proposto a ser desenvolvido.

A Figura 3 ilustra as atividades do sistema SGESC:

Figura 2 – Mapa Mental – Aplicação SGESC

29

O mapa mental anterior está fornecendo uma análise logica sobre a idealização

das funcionalidades do sistema SGESC.

3.2 – LISTA DE REQUISITOS

A seguir serão mostradas as principais funcionalidades do sistema SGESC:

Cadastro e Gerenciamento Funcionários:

o Função;

o Departamento;

o Informações pessoais;

o Formação;

o Período de Trabalho;

o Tipo de contrato;

Cadastro e Gerenciamento Corpo Docente:

o Disciplina lecionada;

o Formação;Carga Horária;

o Quantidades de Turma;


o Tipo de contrato;

Cadastro e Gerenciamento Alunos:


o Nível Escolar;

o Período;

o Ultima Escola;

o Informações do Responsável;

o Download do Contrato, se necessário.

Cadastro e Gerenciamento Disciplina:

o Área da Disciplina;

o Carga Horária;

o Período;

30

o Professores responsáveis;

Cadastro e Gerenciamento Turma:

o Calendário Escolar;

o Período Turma;

o Quantidade de Alunos;

o Quantidade de disciplinas;

o Calendário e Gerenciamento acadêmico:

o Data de feriados; Data de entrega de notas;

o Programação de eventos e campanhas;

o Movimentação de finalização de ano letivo:

o Troca de ano do Aluno;

o Troca de disciplinas;

o Troca de Turma;

o Troca de Período;

o Relatórios Básicos de Movimentações:

o Relatório dos Cadastros;

o Relatório das Movimentações;

3.3 - DIAGRAMA E ESPECIFICAÇÃO DE CASOS DE USO

A seguir serão apresentados alguns diagramas com o intuito de explicar,

seguindo um método de descrição, as funcionalidades do sistema SGESC em

relação da interação do secretário para com o aluno.

O primeiro diagrama usado é o Diagrama de Caso de Uso, seguido de um

Diagrama de Atividade das ações do secretário dentro da aplicação.

A Figura 4 apresenta o Diagrama de Caso de Uso para a entidade “Secretário”:

31

A figura a seguir será um diagrama de caso de uso para interagir com o

aluno no sistema SGESC.

Nome do Caso de uso Efetuar Login

Atores Secretário

Figura 3 – Diagrama de Caso De Uso – Secretário

Figura 4 – Diagrama de Caso de Uso de Login - Secretário

32 Pré-Condições Conexão com Internet

Cenário Principal 1- O sistema solicita os dados para

efetuar login.

2- O secretario informa os dados.

3- O secretario confirma os dados.

4- O sistema recupera os dados

informados.

5- O sistema valida os dados de login.

6- O secretario se conecta no sistema

7 – O secretario busca ou cadastra o

aluno.

Cenário Alternativo Secretario pode cancelar a operação

durante o processo.

O secretario pode imprimir os dados do

aluno.

Casos de Teste 1- Caso os dados estejam corretos

executa a operação.

2- Caso os dados não estejam

Tabela 1 – Efetuar Login

A figura a seguir será um diagrama de caso de uso para interagir com o

funcionário no sistema SGESC.

Figura 5 – Diagrama de Caso de Uso Manter Funcionário

33

Nome do Caso de uso Manter Funcionário

Atores Secretário

Pré-Condições Efetuar Login

Cenário Principal 1 - O sistema solicita os dados para

efetuar Login.

2 - O secretario informa os dados.

3 - O secretario confirma.

4 - O sistema recupera os dados

informados.

5 - O sistema valida os dados de Login.

6 - O secretário se conecta no sistema

7 - O secretário busca ou cadastra o

Cenário Alternativo O secretário pode cancelar a operação

durante o processo.

O secretário pode imprimir os dados.

Caso os campos informados estejam

corretos , finaliza-se a interação.

Caso os campos não estejam corretos,

emite-se uma mensagem de erro

Tabela 3 – Manter Secretário

Casos de Testes

34

Agora iremos analisar os diagramas de caso do uso do usuário coordenador. Este

usuário é o que tem mais acesso as funcionalidades de administração da escola. O

primeiro diagrama irá apresentar essas relações.

A figura a seguir é o diagrama de caso de uso do usuário coordenador:

O diagrama de caso a seguir mostra a relação de administração de período do

usuário coordenador no sistema SGESC:

Figura 6 - Diagrama de Caso de Uso do Usuário Coordenador.

Figura 7 – Diagrama de Caso de Uso de Manter Período

35

Nome do Caso de uso Manter Período

Atores Coordenador


Cenário Principal 1- O sistema solicita os dados de Login.

2- O coordenador informa os dados de

Login.

3- O coordenador confirma os dados.


informados.

5- O sistema valida os dados informados.

6- O coordenador se conecta ao sistema.

7- O coordenador cadastra ou busca por

Período.

Cenário Alternativo O coordenador cancela a ação do

sistema.

O coordenador altera e imprimi os dados

Casos de Teste 1- Caso os dados informados estejam

corretos o coordenador finaliza a

operação.

2- Caso os dados estejam incorretos o

Tabela 3 – Manter Período

O diagrama a seguir irá demonstrar a relação do coordenador com o manter

turma no sistema SGESC:

Figura 8 -– Diagrama de Caso de Uso de Manter Turma

36

Nome do Caso de uso Manter Turma

Atores Coordenador




Login.



informados.




turma.


sistema.




operação.


sistema aponta a divergência.

Tabela 5 – Manter Turma

O diagrama a seguir irá apresentar a relação do coordenador com o Manter

Boletim no sistema SGESC:

Figura 9 - – Diagrama de Caso de Uso de Manter Boletim

37

Nome do Caso de uso Manter Boletim

Atores Coordenador




Login.



informados.




boletim.


sistema.


Casos de Testes 1- Caso os dados informados estejam


operação.


Tabela 6 – Manter Boletim

38

O diagrama a seguir irá apresentar a relação do coordenador com Manter

Calendário no sistema SGESC:

Figura 11 – Diagrama de Caso de Uso Manter Calendário

Nome do Caso de uso Manter Calendário

Atores Coordenador




Login.



informados.




calendário.


sistema.




operação.


Tabela 7 – Manter Calendário

39

O diagrama a seguir irá apresentar a relação do coordenador com o

Manter Matéria no sistema SGESC:

Figura 12 – Diagrama de Caso de Uso Manter Matéria

Nome do Caso de uso Manter Matéria

Atores Coordenador




Login.



informados.




matéria.


sistema.




operação.


Tabela 8 – Manter Matéria

40

O diagrama a seguir irá apresentar a relação do coordenador com o Manter

Fórum no sistema SGESC:

Figura 13 – Diagrama de Caso de Uso de Manter Fórum

Nome do Caso de uso Manter Fórum

Atores Coordenador




Login.



informados.




fórum.


sistema.




operação.


Tabela 9 – Manter Fórum

41

O diagrama a seguir irá apresentar a relação entre o coordenador e o Manter

Chat no sistema SGESC:

Figura 14 – Diagrama de Caso de Uso de Manter Chat

42

Nome do Caso de uso Manter Chat

Atores Coordenador




Login.



informados.




chat.


sistema.




operação.


Tabela 10 – Manter Chat.

Agora iremos analisar os diagramas de caso do uso do usuário diretor. Este

usuário tem acesso para visualização dos cadastros no sistema e emitir os relatórios

necessários. O primeiro diagrama irá apresentar essas relações. A figura a seguir é o diagrama de caso de uso do usuário Diretor:

43

Figura 15 – Diagrama de Caso de Uso Diretor Os diagramas a seguir servirão para analisar individualmente os relacionamentos do

diretor com suas funcionalidades. O primeiro a ser analisado será o diagrama de caso

de uso do relacionamento do Diretor com Visualizar Aluno.

Figura 16 – Diagrama de Caso de Uso Visualizar Aluno

44

Nome do Caso de uso Visualizar Aluno

Atores Diretor



2- O diretor informa os dados de Login.

3- O diretor confirma os dados.


informados.


6- O diretor se conecta ao sistema.

7- Diretor busca e visualiza todos os

dados do aluno.

Cenário Alternativo O diretor cancela a ação do sistema.

O diretor pode imprimir um relatório com

os dados do aluno

Casos de Testes 1- Caso os dados os dados estejam

incorretos o diretor solicita correção.

Tabela 11 – Visualizar Aluno

O diagrama a seguir irá apresentar a relação do Diretor com o Visualizar Responsável

no sistema SGESC:

Figura 17 – Diagrama de Caso de Uso Visualizar Responsável

45

Nome do Caso de uso Visualizar Responsável

Atores Diretor






informados.




dados do responsável.



Casos de Teste Caso os dados os dados estejam

incorretos o diretor solicita correção

Tabela 12 – Visualizar Responsável

O diagrama a seguir irá apresentar a relação do diretor com o Visualizar Funcionário no

sistema SGESC:

Figura 18 – Diagrama de Caso de Uso Visualizar Funcionário

46

Nome do Caso de uso Visualizar Funcionário

Atores Diretor






informados.




dados do funcionário.



os dados do funcionário.

Casos de Teste Caso os dados os dados estejam


Tabela 13 – Visualizar Funcionário

O diagrama a seguir irá apresentar a relação do diretor com o Emitir Relatórios no

sistema SGESC:

Figura 19 – Diagrama de Caso de Uso Emitir Relatório

47

Nome do Caso de uso Emitir relatório

Atores Diretor






informados.



7- Diretor informa os dados do relatório.

8- O sistema busca os dados.

9- O sistema monta o relatório e exibe

na tela

10- O diretor pode imprimir o relatório.

Cenário Alternativo O diretor pode cancela a ação do sistema. Casos de Teste 1- Caso os dados os dados estejam


2- Caso não seja mosdados

necessários o diretor pode cancelar e

Tabela 14 – Emitir Relatório

O diagrama a seguir irá apresentar as relações do professor com suas

funcionalidades dentro do sistema. Este usuário é responsável pela parte administrativa

relacionada aos alunos. O diagrama a seguir é um estudo do Caso de Uso das funcionalidades do

professor:

48

Figura 20 – Diagrama de Caso de Uso Professor

O diagrama a seguir irá apresentar a relação do professor com o Manter Nota no

sistema SGESC:

Figura 21 – Diagrama de Caso de Uso Manter Nota

49

Nome do Caso de uso Manter Nota

Atores Professor



2- O professor informa os dados de

Login.

3- O professor confirma os dados.


informados.


6- O professor se conecta ao sistema.

7- O professor cadastra ou busca por

nota.

Cenário Alternativo O professor cancela a ação do sistema.

Casos de Teste 1- Caso os dados estejam incorretos o

professor pode alterar.

2- Casos os dados estejam incorretos o

Tabela 15 – Manter Nota

O diagrama a seguir irá apresentar a relação do professor com o Manter Falta no

sistema SGESC:

Figura 22 – Diagrama de Caso de Uso Manter Falta

50

Nome do Caso de uso Manter Falta

Atores Professor




Login.



informados.



7- O professor cadastra falta ou

presença.




2- Casos os dados estejam incorretos o professor pode cancelar o processo.

Tabela 16 – Manter Falta

O diagrama a seguir irá apresentar a relação do professor com o Manter Matéria no

sistema SGESC:

51

Figura 23 – Diagrama de Caso de Uso Manter Matéria

52

Nome do Caso de uso Manter Matéria

Atores Professor




Login.



informados.




matéria.




2- Casos os dados estejam incorretos o

Tabela 17 – Manter Matéria

O diagrama a seguir irá apresentar a relação do professor com o Manter Chat no

sistema SGESC:

Figura 24 - Diagrama de Caso de Uso Manter Chat

53


Atores Professor




Login.



informados.




chat.





professor pode cancelar o processo.

Tabela 18 – Manter Chat

O diagrama a seguir irá apresentar a relação do professor com o Manter fórum no

sistema SGESC:

Figura 25 – Diagrama de Caso de Uso Manter Fórum

54


Atores Professor




Login.



informados.




fórum.






Os diagramas a seguir irão apresentar a relação do aluno com suas

funcionalidades dentro do sistema SGESC. O primeiro diagrama será uma análise de

Caso de Uso do aluno.

55

Figura 26 – Diagrama de Caso de Uso Aluno O diagrama a seguir irá apresentar a relação do aluno com o Visualizar Nota dentro de

sistema SGESC:

Figura 27 – Diagrama de Caso de Uso Visualizar Nota

56

Nome do Caso de uso Visualizar Nota

Atores Aluno



2- O aluno informa os dados de Login.

3- O aluno confirma os dados.


informados.


6- Aluno se conecta ao sistema.

7- Aluno visualiza as notas pelo sistema.

Cenário Alternativo Não existe


sistema informa o erro.

2- Caso a nota esteja incorreta o aluno

solicita revisão de nota ao professor.

Tabela 20 – Visualizar Nota

O diagrama a seguir irá apresentar a relação do aluno com o Visualizar Falta no

sistema SGESC:

Figura 28 – Diagrama de Caso de Uso Visualizar Falta

57

Nome do Caso de uso Visualizar Falta

Atores Aluno






informados.



7- Aluno visualiza as faltas pelo sistema.

Cenário Alternativo Não existe




solicita revisão de falta ao professor.

Tabela 21 – Visualizar Falta

O diagrama a seguir irá apresentar a relação do aluno com o Visualizar Matéria no

sistema SGESC:

Figura 29 – Diagrama de Caso de Uso Visualizar Matéria

58

Nome do Caso de uso Visualizar Matéria

Atores Aluno






informados.



7- Aluno visualiza e faz download das

matérias pelo sistema.

Cenário Alternativo O aluno cancela a ação do sistema.




solicita revisão de matéria ao

Tabela 22 – Visualizar Matérias

O diagrama a seguir irá apresentar a relação do Aluno com Manter Chat no

sistema SGESC:

Figura 30 – Diagrama de Caso de Uso Manter Chat

59


Atores Aluno






informados.



7- Aluno visualizar ou cria um novo chat

no sistema.

Cenário Alternativo O aluno cancela a ação.



Tabela 23 – Manter Chat

O diagrama a seguir irá apresentar a relação do Aluno com o Manter Fórum no sistema

SGESC:

Figura 31 – Diagrama de Caso de Uso Manter Fórum

60


Atores Aluno






informados.



7- Aluno visualizar ou cria um novo

fórum no sistema.

Cenário Alternativo O aluno cancela a ação.




Os diagramas a seguir serão um estudo das funcionalidades da entidade

Responsáveis. O primeiro diagrama é um diagrama de Caso de Uso que apresenta as

relações do Responsável para com suas ações.

Figura 32 – Diagrama de Caso de Uso Responsável

61

O diagrama a seguir irá apresentar a relação do Responsável com o Visualizar nota no

sistema SGESC:

Figura 33 – Diagrama de Caso de Uso Visualizar Nota

Nome do Caso de uso Visualizar Nota

Atores Responsável



2- O responsável informa os dados de

Login.

3- O responsável confirma os dados.


informados.


6- Responsável se conecta ao sistema.

7- Responsável visualiza as notas pelo

sistema.

Cenário Alternativo O responsável visualiza o relatório para

imprimir



Tabela 25 – Visualizar Nota

62

O diagrama a seguir irá apresentar a relação do responsável com o Visualizar Falta no

sistema SGESC:

Figura 34 – Diagrama de Caso de Visualizar Falta

Nome do Caso de uso Visualizar Falta

Atores Responsável



2- O responsável informa os dados de

Login.

3- O responsável confirma os dados.


informados.


6- Responsável se conecta ao sistema.

7- Responsável visualiza as faltas pelo

sistema.

Cenário Alternativo O responsável visualiza o relatório para

imprimir



63

Tabela 26 – Visualizar Faltas

Todos os diagramas que foram apresentados representaram as funcionalidades

com suas respectivas narrativas do sistema de gerenciamento escolar SGESC,

sendo tratado individualmente cada usuário, que são Secretário, Coordenador,

Diretor, Professor, Aluno e Responsável.

3.4 – DIAGRAMA DE ATIVIDADES

Um diagrama de atividade, método vindo da linguagem UML, vem de um conceito

de gráfico de fluxo cujo qual o maior objetivo é demonstrar o fluxo de atividades em um

único processo, ou seja, em um diagrama de atividade é mostrado como uma ação

depende da outra para o funcionamento do sistema. (NUNES, 2011)

Essas ações, ou atividades, são coligadas através de transições (arcos) que

mostram as dependências entre si. Em sua maior parte, há um envolvimento da

modelagem das etapas sequências em um processo computacional. (NUNES, 2011)

O diagrama a seguir irá apresentar o fluxo de atividade do Secretário para com o

Aluno para exemplificar um cadastro ou busca no sistema SGESC, sendo que qualquer

entidade com relacionamento na ação Cadastrar/Buscar terá o mesmo fluxo de

atividade:

64

Figura 35 – Diagrama de Atividade de Secretário O diagrama a seguir irá apresentar o fluxo de atividade do Coordenador para com o

Período para exemplificar um cadastro ou busca no sistema:

65

Figura 36 – Diagrama de Atividade Coordenador para Busca e/ou Cadastro O diagrama a seguir irá apresentar o fluxo de atividade do Coordenador para com o

Boletim:

66

Figura 37 – Diagrama de Atividade Coordenador para Boletim

O diagrama a seguir irá apresentar o fluxo de atividade do Aluno para com o

Fórum, sendo que qualquer entidade terá o mesmo fluxo de atividade quando for

relacionado às ações de Fórum:

Figura 38 – Diagrama de Atividade Aluno para Fórum

67

Esses diagramas apresentam o exemplo do fluxo de atividades mais importantes

do sistema SGESC.

68

4 – ORÇAMENTO

Os recursos necessários para o desenvolvimento do sistema escolar SGESC serão:

Equipamentos:

01 Notebook Valor Unitário = R$ 1.400,00.

Depreciação (2 anos) = R$1.400,00 / 24 = R$58,33 /mês Custo por dia = R$58,33/ 26 (dias)

= R$2,24 (ao dia) Custo do computador = R$2,24

* 223 = R$500,32.

01 Impressora jato de tinta Valor = R$300,00.

Depreciação = R$300,00 / 24 = R$12,50

Custo do dia = R$12,50 / 26(dias) = R$0,49

Custo impressora = R$0,49 *223 = R$109,27.

Custo Total dos equipamentos R$500,32 + R$109,27 = R$1.019,91

Recurso Valor Total

Equipamentos R$1.019,91

Valor Total do Projeto R$1.019,91

Tabela 29 – Orçamento Valor Total

69

5 – IMPLEMENTAÇÃO DO PROJETO

Para que o SGESC fosse implementado foi utilizado a IDE NetBeans 8.1 com a

linguagem de programação Javascript junto aos frameworks AngularJs e ExpressJs.

Para que se tivesse uma organização no código será utilizado o conceito MVC

(Model-View-Control) para separação em camadas do projeto como será

apresentado na imagem a seguir:

Figura 39 – Camadas MVC

O projeto utiliza o auxílio do documento package.jason para fazer ligação com

outras tecnologias como o NodeJs, ExpressJs e Mongo, que é representado pelo

comando mongoose. Assim que aplicados no projeto, pode-se fazer a atualizado pelo

“npm-install” e depois os módulos dos respectivos serão implementados no sistema.

A imagem a seguir demostra o código que contém dentro do arquivo package.json.

70

80

Figura 40 – Arquivo Package.json

Na imagem a cima pode-se notar o comando “dependencies”. Essa classe é

responsável por buscar as dependências que o sistema vai utilizar e trazer para o

projeto. Como se pode ver, por exemplo, no caso do “mongodb” que é a

dependência, e sua versão que é “1.3.23”.

A conexão com o banco de dados é bem simples, feita por meio de um arquivo

js chamado Schema. Nele você informa os dados que vai colocar no documento, ou

seja, o que sera enviado de dados do usuário por meio de um pacote json para o

banco de dados. Veja a imagem a seguir, que uma variável chamada alunoShema foi

criada para receber os dados, enquando uma variável Schema recebe as regras do

mongoose:

71

Figura 41 – Arquivo Schema.js

Assim que o arquivo Schema.js é criado, um arquivo chamado Index.js contem

as instruções para a futura construção do CRUD (Create, Read, Update e Delete).

72

Figura 42 – Arquivo Index.js

Dentro da construção do formulário é onde o AngularJS entra, ele que vai ser

responsável pela comunicação do View com o Controller. Vejamos primeiramente o

que o Controller é responsável.

Dentro da pasta controller também tem que estar arquivos para a criação, e a

listagem dos dados. Na criação, como por exemplo, aluno-create-controller, será

informado às funções para que os seguintes dados sejam tratados e enviados para o

banco de dados. Nele também onde ocorrem as instruções para a utilização do

angular, e as informações que serão passadas para o banco de dados. A variável

“vm” é o grande comunicador, ela é responsável por instanciar os objetos.

73

Figura 43 – Arquivo aluno-create-controller.js

Já no arquivo HTML, onde será colocados os input (caixa de texto

onde o usuário digita), deve-se por os comandos reservados do angular

para a definição do scope , cujo qual será responsável por ligar o View

com as funções do controller:

74

Figura 44 – Arquivo aluno-create.html

Repare que novamente a variável definida como “vm” aparece,

seguido da especificações dos dados. Será nesse comando que os dados

serão coletados para serem tratados pelo controller.

Para que seja feita a listagem desse dados, basta informalo com

sua variável angular dentro de dois coxetes, como por exemplo

{{a.nome}}:

75

Figura 45 – Arquivo aluno-list.html

5.2 – INTERFACES DA APLICAÇÃO

Ao se entrar no site do sistema SGESC, primeiro se encontrará a Home

Page do site, com informações sobre os ideais do sistema. Ao canto superior

direito terá as opções de páginas que poderão ser acessados, entre eles a opção

SGESC, onde será redirecionado para o Login do sistema.

76

Figura 47 – Página Inicial

Ao fazer a validação do sistema, de acordo com o usuário e senha, cada usuário

é encaminhado para sua própria área do sistema, ou seja, o aluno terá a Área do

aluno com as funcionalidades específicas dele, o professor terá uma área diferente, a

área do professor, onde as suas funcionalidades irão atender melhor o que ele precisa

e assim sucessivamente para cada tipo de usuário do sistema.

77

Figura 48 – Página de Login

78

6 – CONCLUSÃO

Com a escassez de sistemas de informação no meio escolar, há uma

crescente dificuldade em controlar e administrar as funções dentro de uma instituição

de ensino, principalmente quando se diz a respeito ao controle de notas, faltas e

calendário escolar, além do acúmulo desnecessário de papéis e gastos que se tem

com funcionários para cumprir com as atividades dentro de um prazo

Este trabalho tem como proposta desenvolver um sistema de gerenciamento

escolar que facilite escolas particulares e/ou de estudo de línguas a gerenciar suas

funções administrativas, além de proporcionar transparência para os alunos e

responsável dos alunos. Com o intuito de desenvolver um sistema que seja de fácil

acesso ao usuário, optou-se por uma plataforma web, que devido à interatividade, foi

escolhida a linguagem Javascript que juntamente com um conjunto de frameworks,

servidor web e banco de dados não relacional se fez uso da tecnologia, até então

nova, MEAN. Além de, que para se manter boas práticas de programação e ter um

código fonte limpo e organizado temos a utilização da separação com camada MVC,

pois é a escolha mais sensata.

O sistema de gerenciamento escolar SGESC oferece muitas funcionalidades

para a administração de escolas, pois em sua idealização há um ambiente para cada

tipo de usuário diferente dentro de uma escola, dividindo assim as atividades de

forma organizada. Além de um canal de comunicação pensando no melhor jeito de

se ter uma boa relação dos os alunos entre si e entre os funcionários da escola, com

a utilização de fóruns para as dúvidas e chat para a conversação cotidiana.

Assim podemos concluir que o sistema SGESC é um sistema de muitas

opções administrativas que melhor visa a gestão de uma escola particular e/ou

escola de ensino de línguas.

79

7 – TRABALHOS FUTUROS

Como objetivos de trabalhos futuros pretende-se aprimorar o SGESC para

abranger instituições maiores como universidades, e acrescentar mais

funcionalidades como redes sócias corporativas e troca de mensagens por e-mail,

além de uma agenda interativa que poderá ser montada por todos os alunos e

professores de uma instituição.

80

83

8- REFERÊNCIA

CHODOROW, Kristina. MongoDB. The Definitive Guide. 2º edição. O’REILLY, 2013.

VOHRA, Deepak. Pro MongoDB Development. 1a edição. Apress, 2015. PEREIRA, Caio Ribeiro. Aplicações web real-time com Noje.js. 1ª edição. Casa do

Código, 2015.

MORRISON, Michael. Use a Cabeça! JavaScript. 1a edição. O’REILLY, 2008.

HAVIV, Amos Q. MEAN Web Development. 1a edição. Packt Publishing, 2016.

NUNES, Marcio; O’Neill, Henrique. Fundamental de UML. 7ª edição. Editora FCA,

2011.

KROL, Mithun Satheesh; D’MELLO, Bruno Joseph; KROL, Jason. Web Development

with MongoDB and NodeJs. 2a edição. Packt Publishing, 2015.

PEREIRA, Jonathas Bitencourt; SOUZA, Marta Alves de; COSTA, Helder Rodrigues

da. Segurança da informação em ambientes corporativos. Disponível em

<http://revistapensar.com.br/tecnologia/pasta_upload/artigos/a29.pdf>. Acesso em

14/10/2015.

ALMEIDA, Octávio Waldomiro de. Introdução à Orientação a Objetos em PHP.

Disponível em < http://www.devmedia.com.br/introducao-a-orientacao-a-objetos-em-

php/26762>. Acesso em 30/10/2015.

81

84

MOREIRA, Rafael Henrique. O que é Nodejs?. Disponível em <

http://www.nodebr.com/o-que-e-node-js/>. Acesso em 25/02/2016.

NAKAMASHI, Diego. Introdução ao AngularJS. Disponível em:

<http://www.vizir.com.br/2013/09/introducao-ao-angularjs/> . Acesso em 25/02/2016.

ALECRIM, Emerson. Conhecendo o Servidor Apache (HTTP Server Project). Disponível em: <http://www.infowester.com/servapach.php>. Acesso em 25/02/2016. SILVA, Giancarlo. O que é e como funciona a linguagem JavaScript?. Disponível

em< http://www.canaltech.com.br/materia/internet/O-que-e-e-como-funciona-a-

linguagem-JavaScript/ >. Acesso em: 25/02/2016.

SOUZA, Ranieri Marinho de. O que é o MongoDB?. Disponível em<

http://blog.segr.com.br/o-que-e-o-mongodb/>. Acesso em: 08/03/2016.

LANNI, Vinicius. Introdução aos Bancos de Dados NoSql. Disponível em<

http://www.devmedia.com.br/introducao-aos-bancos-de-dados-nosql/26044>. Acesso

em: 08/03/2016.

http://www.nodebr.com/o-que-e-node-js/

http://www.nodebr.com/o-que-e-node-js/

http://www.canaltech.com.br/materia/internet/O-que-e-e-como-funciona-a-linguagem-JavaScript/



http://blog.segr.com.br/o-que-e-o-mongodb/

http://blog.segr.com.br/o-que-e-o-mongodb/

http://www.devmedia.com.br/introducao-aos-bancos-de-dados-nosql/26044

http://www.devmedia.com.br/introducao-aos-bancos-de-dados-nosql/26044

SGEC: DESENVOLVIMENTO WEB COM TECNOLOGIA MEAN · Com o uso do framework Angular e Express é...

Documents

Transcript of SGEC: DESENVOLVIMENTO WEB COM TECNOLOGIA MEAN · Com o uso do framework Angular e Express é...