Buscar

Trabalho PROJETO INTEGRADO MULTIDISCIPLINAR VIII


Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 3, do total de 43 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 6, do total de 43 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 9, do total de 43 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Continue navegando


Prévia do material em texto

1 
 
UNIVERSIDADE PAULISTA - UNIP EaD 
Projeto Integrado Multidisciplinar 
Curso Superior de Tecnologia 
 
 
 
 
 
 
 
Gabriel Cardoso Da Silva - 0594517 
 
 
 
 
 
 
 
CODIFICAÇÃO EM C# DO MECANISMO DE ACESSO A UM TRECHO DE BANCO 
DE DADOS, COM PRÓTOTIPOS DE INTERFACE GRÁFICA COM 
USUÁRIO ASP .NET E ANDROID 
 
 
 
 
 
 
 
 
 
 
 
 
Belo Horizonte 
2021 
2 
 
 
Gabriel Cardoso Da Silva - 0594517 
 
 
 
 
 
 
 
CODIFICAÇÃO EM C# DO MECANISMO DE ACESSO A UM TRECHO DE BANCO 
DE DADOS, COM PRÓTOTIPOS DE INTERFACE GRÁFICA COM 
USUÁRIO ASP .NET E ANDROID 
 
 
 
 
 
 
 
Projeto Integrado Multidisciplinar para 
obtenção do título de graduação em 
(Análise e Desenvolvimento de Sistemas) 
apresentado à Universidade Paulista – UNIP EaD. 
Orientador(a): Cassiano Gunji. 
 
 
 
 
 
 
 
 
 
Belo Horizonte 
2021 
3 
 
RESUMO 
 
 
Este trabalho apresenta uma solução digital que visa o desenvolvimento de uma codificação em C# 
do mecanismo de acesso a um trecho de banco de dados, assim como os protótipos de interface 
gráfica com o usuário em ASP .Net e Android. Seguindo o contexto de desenvolvimento, foi atribuído 
uma tarefa de desenvolver alguns aspectos de um sistema que já está em desenvolvimento, e a equipe 
foi responsabilizada pelos aspectos de desenvolver um estrutura responsável por possibilitar o acesso 
as informações do banco de informações, ou seja, do banco de dados, criando um protótipo de 
interface gráfica com o usuário em ASP .NET permitindo que o usuário tenha interação com os dados 
modelados, e levando em conta o desenvolvimento de outra interface gráfica com o usuário em 
Android. Para o desenvolvimento do projeto foram aplicados conceitos, conhecimentos e práticas 
adquiridos no curso, com complemento de pesquisas, de tal modo, possibilitando a aplicação e 
implantação da tecnologia back end. Contudo, para o desenvolvimento do projeto foi necessário 
analisar, desenvolver diagramas de funcionamento, instalação e estruturação do banco de dados e 
desenvolvimento das interfaces solicitadas, permitindo a finalização do primeiro versionamento do 
sistema de acesso ao banco de dados. 
 
Palavras-chave: C#, ASP NET, Android, Desenvolvimento, Modelagem e Banco de Dados. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4 
 
ABSTRACT 
 
This work presents a digital solution that aims to develop a C# encoding of the access mechanism to 
a database snippet, as well as the prototypes of graphical user interface in ASP .Net and Android. 
Following the development context, a task was assigned to develop some aspects of a system that is 
already under development, and the team was responsible for the aspects of developing a structure 
responsible for enabling access to information from the database, that is, from the database, creating 
a prototype graphical interface with the user in ASP .NET allowing the user to have interaction with 
the modeled data, and taking into account the development of another graphical interface with the 
user on Android. For the development of the project, concepts, knowledge, and practices acquired in 
the course were applied, complementing research, thus enabling the application and implementation 
of back end technology. However, for the development of the project it was necessary to analyze, 
develop diagrams of operation, installation and structuring of the database and development of the 
requested interfaces, allowing the completion of the first versioning of the database access system. 
Keywords: C#, ASP NET, Android, Development, Modeling and Database. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5 
 
SUMÁRIO 
 
1. INTRODUÇÃO .................................................................................................................. 7 
2. SOFTWARE E A SUA CARACTERIZAÇÃO ................................................................ 8 
2.1. CONCEITO PROJETO ................................................................................................... 8 
2.2. CONTEXTUALIZAÇÃO DO CASO ............................................................................. 8 
2.3. ELABORAÇÃO .............................................................................................................. 9 
2.4. FRONT-END E BACK-END .......................................................................................... 10 
3. INTERFACE DE DESENVOLVIMENTO ................................................................. 11 
3.1. IDE (AMBIENTE DE DESENVOLVIMENTO INTEGRADO) ................................. 11 
3.2. PLATAFORMA ASP .NET .......................................................................................... 12 
3.3. ANDROID STUDIO ..................................................................................................... 12 
3.4. SISTEMA GERENCIADOR DE BANCO DE DADOS MYSQL ............................... 13 
4. CONDIÇÕES DO BANCO DE DADOS ..................................................................... 14 
4.1. DIAGRAMA ENTIDADE–RELACIONAMENTO (DER) ........................................ 14 
4.2. DIAGRAMA DE CLASSE .......................................................................................... 14 
4.3. DIAGRAMA CASO DE USO ..................................................................................... 15 
4.4. CONSULTANDO O BANCO DE DADOS ................................................................ 16 
5. PROJETO ........................................................................................................................ 19 
5.1. WIREFRAME DO SISTEMA EM ANDROID ........................................................... 19 
5.2. INTERFACE GRÁFICA DO SISTEMA EM ANDROID .......................................... 20 
5.3. WIREFRAME DO SISTEMA EM ASP .NET ............................................................ 21 
5.4. INTERFACE GRÁFICA DO SISTEMA EM ASP .NET ........................................... 22 
5.4.1. Mecanismos ASP .NET – PAINEL PRINCIPAL ..................................................... 22 
5.4.2. Mecanismos ASP .NET – CRIAR NOVO USUÁRIO ............................................. 23 
5.4.3. Mecanismos ASP .NET – EDITAR USUÁRIO EXISTENTE................................. 25 
5.4.4. Mecanismos ASP .NET – CONSULTAR USUÁRIO EXISTENTE ........................ 26 
6. CÓDIGO FONTE DAS VIEWS .................................................................................... 28 
6.1. CÓDIGO FONTE – VIEW INDEX (PÁGINA PRINCIPAL) ..................................... 28 
6.4. CÓDIGO FONTE – VIEW DETAILS (PÁGINA DETALHES DE USUÁRIO) ........ 33 
6.5. CÓDIGO FONTE – VIEW DELETE (PÁGINA EXCLUIR USUÁRIO) ................... 34 
7. PADRÃO DO PROJETO – MVC ................................................................................. 36 
8. IDENTIFICAÇÃO DE BUGS NO SISTEMA ASP .NET .......................................... 37 
8.1. ERRO DE PREENCHIMENTO ................................................................................... 37 
6 
 
8.2. SALVANDO INFORMAÇÕES COM FORMULARIOS VAZIOS ............................ 39 
8.3. EXCLUINDO USUÁRIOS COM CAMPOS VAZIOS ................................................ 40 
8.4. CONCLUSÃO DA IDENTIFICAÇÃO DE BUGS ...................................................... 41 
9. CONCLUSÃO ................................................................................................................. 42 
REFERÊNCIAS .................................................................................................................. 43 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7 
 
1. INTRODUÇÃO 
 
A sociedade moderna tem como base no momento a aceleração do ritmo de mudanças e o 
aumento de competições dos mercados globais,que tem contribuído para um procedimento de 
questionamento de fatores que são fundamentais para o sucesso de organizações e empresas. 
Para a sobrevivência no mercado, muitas empresas e organizações tem que elaborar um plano 
de negócio para diferenciar o seu serviço ou produto, maximizando a produtividade e 
minimizando os custos. Segundo PRUSAK e DAVENPORT neste novo contexto de negócios, 
as organizações estão reconhecendo que o conhecimento é a única fonte capaz de gerar uma 
vantagem competitiva sustentável. É fácil ter em mente que os softwares são ferramentas 
capazes de aprimorar centenas de outras ferramentas e dar um novo sentido ao uso da 
tecnologia. Graças ao desenvolvimento de softwares, milhares de organizações estão 
aperfeiçoando a sua qualidade de produção, podendo ser um grande exemplo, a comunicação 
instantânea entre os diversos setores, ajudando a resolução de problemas de produção entre 
filiais. No atual momento é possível analisar que as empresas não estão apenas adquirindo 
aplicações de aprimorando de produção, mas está melhorando as suas próprias aplicações do 
seu âmbito de trabalho. Segundo Sommerville (2007), uma métrica de software é qualquer tipo 
de medição que se refira a um sistema de software, processo ou documentação relacionada. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8 
 
2. SOFTWARE E A SUA CARACTERIZAÇÃO 
 
No atual cenário pode observar que a tecnologia está sendo utilizada como base da sociedade 
moderna, utilizando a tecnologia como meio de comunicação, transporte, investimentos e 
utiliza até mesmo para fins profissionais e comerciais. Essa mudança foi brusca na virada do 
século XX para o século XXI, transformando totalmente a visão e as necessidades da sociedade, 
independente do seu âmbito social sendo capital ou interior, zona urbana ou zona rural. Com 
essa transformação digital, um dispositivo que se destacou desde o início da comunicação são 
os computadores, é fácil reconhecer que o computador pessoal ou PC, é totalmente irracional, 
incapaz de executar qualquer tipo de comando ou tarefa se não houver alguém ou algo que 
possa instruir para excitar determinado comandos. Observando por outro lado, pode se dizer 
que PC é extremamente fiel ao usuário, pois obedecerá aos comandos exatamente da maneira 
que foi instruída. 
 
2.1. CONCEITO PROJETO 
 
Para desenvolver ou executar uma planta de um prédio, desenvolver determinada estrutura de 
um ar condicionado, elaborar o plano de um curso de graduação ou até mesmo desenvolver um 
projeto de um sistema desktop ou web é necessário ter em mente o escopo carece ter começo, 
meio e fim. Esse escopo pode ser denominado de projeto. Pode se entender um projeto como 
um esforço temporário que tem como finalidade um resultado único, podendo ser considerada 
inclusa na classe social, pessoal, cultural, pesquisa ou empresarial. 
 
2.2. CONTEXTUALIZAÇÃO DO CASO 
 
Segundo o contexto deste projeto, o grupo de DEVs, que faz parte da equipe de uma empresa 
de desenvolvimento de software, terá que elaborar alguns aspectos de um sistema que já está 
em desenvolvimento, a equipe de DEVs deverá desenvolver os seguintes aspectos: 
 
 
 
 
 
9 
 
• Desenvolva o mecanismo de acesso ao banco de dados em linguagem C#. Esse 
mecanismo será o responsável por oferecer acesso a um trecho do banco de dados por 
parte do resto do sistema. Sempre que um trecho do sistema precisar acessar esse 24 
Manual de Estágio trecho do banco de dados, deverá fazê-lo por meio desse mecanismo 
desenvolvido por sua equipe; 
 
• Crie um protótipo de interface gráfica com o usuário em ASP .Net que permita que o 
usuário interaja com os dados modelados por esse trecho do banco de dados. Nota: o 
protótipo não precisa ser funcional; 
 
• Crie um protótipo de interface gráfica com o usuário em Android que permita que o usuário 
interaja com os dados modelados por esse trecho do banco de dados. Nota: o protótipo não 
precisa ser funcional. 
 
 
2.3. ELABORAÇÃO 
 
O objetivo do projeto é apresentar uma codificação em C#, que será desenvolvido um 
mecanismo de acesso a um trecho de banco de dados, assim os protótipos de interface gráfica 
com usuário em ASP .NET e Android. 
 
 
 
10 
 
Observando os principais aspectos do projeto, pode se analisar os objetivos específicos desse 
esforço temporário, constituindo em fomentar o hábito de executar projetos envolvendo 
múltiplas disciplinas, desenvolver a capacidade de identificar necessidades e propor soluções 
técnicas, elencar, argumentar e justificar metodologias referentes à prototipação e à codificação 
de sistemas de computação e aplicar as normas ABNT para a produção de trabalhos 
acadêmicos. 
 
 
2.4. FRONT-END E BACK-END 
 
Developer Front–End e Back–End são termos para diferenciar a especialidade de uma pessoa 
na programação. No mundo do desenvolvimento esses termos são bem comuns em uma equipe 
de projeto, pois ambos está presente no desenvolvimento de um único sistema. Pode se dizer 
que uma pessoa que tem especialidades em Front–End é responsável por desenvolver por meios 
de códigos uma interface gráfica, com bases tecnológicas web sendo HTML, CSS, JavaScript 
e Frameworks. Já o Back–End, vem da ideia do que tem por trás de um sistema. Logo de cara, 
o entendimento pode ficar meio abstrato, mas pode se dizer que o Back–End é responsável pelo 
o funcionamento do banco de dados (local de armazenamento de dados), sempre se 
preocupando em garantir a máxima funcionalidade na interface de cadastro e consultas por 
exemplo. É comum desenvolvedores Back–End utilizarem ferramentas de linha de comandos. 
Tudo isso pode ser feito com uma série de linguagens diferentes como PHP, C#, Ruby, Java e 
Clojure. 
 
 
11 
 
3. INTERFACE DE DESENVOLVIMENTO 
 
Quando a criação dos sistemas operacionais para computadores é comentado sobre uma sigla 
chamada GUI que se refere a denominação de “Graphical User Interface” (Interface Gráfica do 
Usuário, em português), que acaba baseando em um modelo de interface do um utilizador que 
permite a interação com os dispositivos através dos elementos gráficos. Segundo o portal de 
notícias CanalTech a empresa Xerox foi a pioneira a utilizar a interface gráfica pela primeira 
vez, utilizando como produto, a interface gráfica do usuário pela empresa Apple. 
 
3.1. IDE (AMBIENTE DE DESENVOLVIMENTO INTEGRADO). 
 
Pode se entender a IDE como um ambiente de desenvolvimento integrado, capacitando como 
um software que combina ferramenta comuns de desenvolvimento em uma única interface 
gráfica de usuário, podendo promover o desenvolvimento em aplicações. A Interface de 
Desenvolvimento Integrado baseasse em um editor de código – fonte, debugger e compilação 
local. Na IDE é possível observar a capacidade de ajudar a programar novas aplicações com 
uma configuração rápida e prática. Para quem trabalha com um ambiente de desenvolvimento 
integrado não necessita gastar tempo e nem recursos aprendendo a utilizar cada uma das 
ferramentas, por conta de estar no mesmo workbenck. 
 
 
FIGURA 3 – FONTE: Autoria própria 
 
 
12 
 
3.2. PLATAFORMA ASP .NET 
 
A tecnologia ASP .NET é uma alternativa de desenvolvimento consolidada no âmbito dos 
programadores. Essa tecnologia é do tipo scripting do lado do servidor, permitindo colocar 
numa página web, scripts que serão executados por um servidor. A ASP .NET se divide em 
dois subtipos: o ASP.NET Web Forms e o ASP.NET MVC. O subtipo ASP .NET MVC utiliza 
um padrão de design, o MVC, um tipo de framework com uma boa base de recursos, sendo o 
grande responsável pela criação de extraordinárias aplicações web. O ASP.NET é baseado no 
Framework .NET herdando todas as suas características, por isso, como qualquer aplicação 
.NET, as aplicações para essa plataforma podem ser escritas em várias linguagens, como C#, 
F# e Visual Basic.NET. 
 
FIGURA4 – FONTE: https://volaresystems.com/ 
 
 
3.3. ANDROID STUDIO 
O conceito de aplicativos móveis já é conhecido entre todas as pessoas, independentemente da 
idade ou nível de conhecimento em tecnologia. O uso e a necessidade da utilização de 
aplicações para dispositivos móveis está presente no dia a dia da sociedade permitindo a 
comunicação entre pessoas, compras em lojas e-commerce, aplicativos de transporte e estudos 
através de apps. Para desenvolver uma aplicação, independente se for uma aplicação web, 
desktop ou mobile, é necessário utilizar uma IDE de desenvolvimento próprio para a aplicação 
selecionada. E uma IDE que tem um grande destaque no âmbito de desenvolvimento de 
aplicações mobile é o Android Studio. O Android Studio é uma ferramenta lançada pela 
empresa Google e é uma plataforma de desenvolvimento Android baseado no IntelliJ. 
13 
 
 
FIGURA 5 – FONTE: https://developer.android.com/ 
 
 
 
3.4. SISTEMA GERENCIADOR DE BANCO DE DADOS MYSQL 
 
A ferramenta MySQL é um sistema gerenciador de banco de dados relacional de código aberto 
utilizado em aplicações de BD. O serviço de banco de dados utiliza a linguagem SQL (Structure 
Query Language – Linguagem de Consulta Estruturada), que é um tipo de linguagem utilizada 
para inserir, gerenciar, acessar o conteúdo armazenado num banco de dados. O sistema foi 
desenvolvido pela empresa sueca MySQL AB e publicado, originalmente, em maio de 1995. 
Após, a empresa foi comprada pela Sun Microsystems e, em janeiro de 2010, integrou a 
transação bilionária da compra da Sun pela Oracle Corporation. 
 
 
 
 
 
14 
 
4. CONDIÇÕES DO BANCO DE DADOS 
 
Segundo o blog de notícias da TOTVS, o banco de dados tem uma grande importância e tem 
um crescimento exponencial, e a cada interação ente empresas e clientes, é gerado milhares de 
registro no banco de dados. Esse crescimento pode ser de grande impacto, que a análise de todos 
esses dados pode ser considerada extremamente complexa. 
 
4.1. DIAGRAMA ENTIDADE–RELACIONAMENTO (DER) 
 
O modelo do trecho do banco de dados que será usado nesse projeto está representado pelo 
seguinte Diagrama Entidade-Relacionamento (DER): 
 
FIGURA 6 – FONTE: Autoria própria 
 
 
4.2. DIAGRAMA DE CLASSE 
 
O mecanismo de acesso ao banco de dados que deve ser desenvolvido deve seguir o diagrama 
de classes a seguir. Esse diagrama apresenta quatro entidades: Pessoa, Endereço, Telefone e 
Tipo Telefone que mapeiam as principais tabelas do banco de dados, exceto a tabela associativa 
PESSOA_TELEFONE, a qual é uma tabela associativa e não é relevante para o sistema, apenas 
para o mecanismo de persistência do banco de dados. Mesmo assim, essa tabela deve ser 
manipulada pelo mecanismo de acesso. 
 
 
15 
 
 
FIGURA 7 – FONTE: Autoria própria 
 
 
 
 
 
4.3. DIAGRAMA CASO DE USO 
 
Pode se definir caso de uso como uma sequência de ações executadas pelo sistema que pode 
gerar um resultado de valor observável para um ator em particular. Essa definição pode ser 
entendida também como a sequência de ações referenciada na definição é na realidade um fluxo 
específico de eventos no sistema. A utilização do sistema de mecanismo de acesso ao banco de 
dados necessita de acesso aos recursos que permite modificar a base de dados. Pensando neste 
problema foi elaborado um plano de caso de uso para demostrar como ficará o acesso do ator 
com os recursos. 
16 
 
 
FIGURA 8 – FONTE: Autoria própria 
 
 
 
4.4. CONSULTANDO O BANCO DE DADOS 
 
A base de dados SQL escolhida foi o MySql, essa ferramenta é um sistema gerenciador de banco 
de dados (SGBD), código livre. Esse sistema gerenciador de banco de dados utiliza o SQL 
(Structured Query Language), que se trata de uma linguagem universal para consultas e 
operações em banco dados. Após obter a diagrama de classe do mecanismo de acesso do BD, 
foi necessário elaborar e implantar essas informações aplicadas no Mysql. Já com a base dados 
desenvolvidos, será necessário consultar e exibir para checar se a estrutura está correta. 
 
 
 
 
 
17 
 
 
FIGURA 9 – FONTE: Autoria própria 
 
 
Na figura 9 é fácil notar que está exibindo todas as databases que consta no computador, ou 
seja, pode se perceber que o banco de dados “bd_pim” está criada e através do comando use 
bd_pim foi requisito o uso do banco de dados. 
 
 
FIGURA 10 – FONTE: Autoria própria 
 
18 
 
Após utilizar o comando para selecionar a base de dados, foi aplicado o comando show tables, 
que irá mostrar todas as tabelas criadas dentro do bando de dados bd_pim. E após mostrar todas 
as tabelas, foi utilizado o comando show COLUMNS from para exibir a estrutura da tabela 
selecionada. 
 
 
FIGURA 11 – FONTE: Autoria própria 
 
 
 
FIGURA 12 – FONTE: Autoria própria 
19 
 
5. PROJETO 
 
O objetivo do projeto é apresentar a codificação em C# do mecanismo de acesso a um trecho 
de banco de dados, assim como os protótipos de interface gráfica com o usuário em ASP .Net 
e Android seguindo e respeitando os seguintes pontos: 
 
• Desenvolva o mecanismo de acesso ao banco de dados em linguagem C#. Esse 
mecanismo será o responsável por oferecer acesso a um trecho do banco de dados por 
parte do resto do sistema. Sempre que um trecho do sistema precisar acessar esse trecho 
do banco de dados, deverá fazê-lo por meio desse mecanismo desenvolvido por sua 
equipe; 
 
• Crie um protótipo de interface gráfica com o usuário em ASP .Net que permita que o 
usuário interaja com os dados modelados por esse trecho do banco de dados. Nota: o 
protótipo não precisa ser funcional; 
 
• Crie um protótipo de interface gráfica com o usuário em Android que permita que o 
usuário interaja com os dados modelados por esse trecho do banco de dados. Nota: o 
protótipo não precisa ser funcional. 
 
 
 5.1. WIREFRAME DO SISTEMA EM ANDROID 
 
Pode-se entender o wireframe como um aspecto visual de objetos, geralmente são aplicados no 
desenvolvimento e concepção de soluções digitais. Quando se trata de desenvolvimento web, 
uma representação em wireframe é uma representação em escala de cinza da estrutura e 
funcionalidade de aplicação web. O principal objetivo dos wireframes é organizar e integrar os 
participantes no desenvolvimento da solução web. Os desenhos são desenvolvidos de forma 
mais cuidadosa, ajudando na criação de conteúdo mais objetiva. Contudo, pode se concluir que 
os wireframes são utilizados no início do processo de desenvolvimento para estabelecer a 
estrutura básica de uma página web antes de acrescentar os códigos. 
 
 
 
20 
 
 WIREFRAME ANDROID – TRECHO DE ACESSO AO BANCO DE DADOS 
 
FIGURA 13 – FONTE: Autoria própria 
 
 
5.2. INTERFACE GRÁFICA DO SISTEMA EM ANDROID 
 
Para desenvolver a aplicação para o sistema operacional Android, foi necessário utilizar a IDE 
Android Studio. O objetivo do projeto é desenvolver um mecanismo de acesso ao banco de 
dados, para isso foi necessário codificar um app que tivesse a capacidade de consultar, atualizar, 
inserir e até mesmo excluir pessoas no banco de dados. 
 
A aplicação contém uma interface única dinâmica, possibilitando o usuário acessar todas as 
funcionalidades em uma única tela que sendo acessível. O aplicativo em Android, como citado, 
pode consultar pessoas pelo CPF, atualizar as informações de uma pessoa pelo campo de busca, 
excluir uma pessoa selecionada pela busca e também inserir uma pessoa cadastrando o nome, 
CPF, telefone e tipos de telefones, endereço, CEP, bairro, cidade e estado. 
21 
 
 
FIGURA 14 – FONTE: Autoria própria 
 
 
5.3. WIREFRAME DO SISTEMA EM ASP .NET 
 
Como citado anteriormente, os wireframes podem permitir o desenvolvimento de layouts 
tentando manter a perspectiva do design aplicado no site. Esse tipo de aplicação pode ser 
utilizado por desenvolvedores apenas como base, entregando o primeiro contato do usuário final 
como sistema. 
O wireframe desenvolvimento foi pensando no site que tem como funcionalidade um 
mecanismo de acesso ao banco de dados, podendo ser composto pelas as funcionalidades de 
inserir, editar, consultar e excluir pessoas do sistema em relação ao banco de dados. 
22 
 
 
FIGURA 15 – FONTE: Autoria própria 
 
 
 
5.4. INTERFACE GRÁFICA DO SISTEMA EM ASP .NET 
 
O desenvolvimento do mecanismo de acesso ao banco de dados em ASP .NET teve como base 
o mecanismo do CRUD (Inserir, Atualizar, Consultar e Deletar). O sistema é composto pelas 
ações de inserir novo usuário, editar usuário existente, exibir detalhes do usuário e excluir 
usuário selecionado. 
 
 
5.4.1. Mecanismos ASP .NET – PAINEL PRINCIPAL 
 
No painel principal do sistema designado ao grupo, é possível observar a lista de usuário 
cadastrado de acordo com suas informações que são: 
 
 
 
 
23 
 
Nessas colunas serão inseridos os usuários de acordo com as suas informações cadastradas, 
contendo também alguns botões de CRIAR NOVO USUÁRIO, EDITAR USÁRIO, 
DETALHES DO USÁRIO E EXCLUIR USUÁRIO. 
 
FIGURA 16 – FONTE: Autoria própria 
 
 
5.4.2. Mecanismos ASP .NET – CRIAR NOVO USUÁRIO 
 
Na interface de criar um usuário é fácil observar os formulários vazios prontos para serem 
preenchidos com as informações do usuário. 
 
FIGURA 17 – FONTE: Autoria própria 
24 
 
Após preencher os formulários com as informações do usuário é possível criar essas 
informações na base de dados pelo botão CRIAR USUÁRIO. 
 
FIGURA 18 – FONTE: Autoria própria 
 
Em seguida é possível retornar na página inicial e localizar a pessoa que foi cadastrada na lista 
de usuários. 
 
 
FIGURA 19 – FONTE: Autoria própria 
 
25 
 
5.4.3. Mecanismos ASP .NET – EDITAR USUÁRIO EXISTENTE 
 
No sistema existe um recurso que poderá editar um usuário cadastrado no sistema, essa 
funcionalidade tem como objetivo atualizar o registro da pessoa. Quando é requisitado a função 
editar, o sistema irá “puxar” todas as informações do usuário permitindo que os campos sejam 
modificados. 
 
 
 
FIGURA 20 – FONTE: Autoria própria 
 
 
 
FIGURA 21 – FONTE: Autoria própria 
 
26 
 
5.4.4. Mecanismos ASP .NET – CONSULTAR USUÁRIO EXISTENTE 
 
No painel principal podemos contar com a opção Detalhes em cada usuário cadastrado, podendo 
chamar a função de consultar a pessoa selecionada. Quando a função é requisitada, o sistema 
irá mostrar as informações do usuário e exibindo duas opções na barra superior, sendo: 
 
 
• Editar Pessoa 
• Voltar para a lista 
 
 
FIGURA 22 – FONTE: Autoria própria 
 
 
 
5.4.5. Mecanismos ASP .NET – EXCLUIR USUÁRIO EXISTENTE 
 
O sistema além de permitir criar um usuário, editar usuário, consultar usuário, a aplicação 
também irá permitir excluir usuário da base de dados. Quando selecionado, o sistema irá 
redirecionar a pessoa para uma nova interface de exclusão. 
 
Nessa interface o sistema irá perguntar se a pessoa tem certeza dessa ação, em seguida mostrará 
os detalhes do cadastro do usuário e permitirá a exclusão através de um botão chamado 
EXCLUIR PESSOA. 
27 
 
 
FIGURA 23 – FONTE: Autoria própria 
 
 
Após confirmar a exclusão do usuário da base de dados, pode se observar que o sistema levou 
novamente para o painel principal e ali não consta mais a pessoa cadastrada que se chama 
“Joana Maria Pontes” do CPF “999.999.999-99”. 
 
 
FIGURA 24 – FONTE: Autoria própria 
28 
 
6. CÓDIGO FONTE DAS VIEWS 
 
Essa etapa do documento visa apresentar o código fonte das interfaces da aplicação web 
(mecanismo de acesso ao banco de dados). O objetivo é apresentar as funcionalidades a 
estrutura de cada tela, podendo observar desde o menu superior até os métodos de cada 
formulários. 
 
 
6.1. CÓDIGO FONTE – VIEW INDEX (PÁGINA PRINCIPAL) 
 
FIGURA 25 – FONTE: Autoria própria 
 
29 
 
 
FIGURA 26 – FONTE: Autoria própria 
 
 
6.2.CÓDIGO FONTE – VIEW CREATE (PÁGINA CRIAR USUÁRIO) 
 
 
30 
 
31 
 
 
FIGURA 29 – FONTE: Autoria própria 
 
 
6.3. CÓDIGO FONTE – VIEW EDIT (PÁGINA EDITAR USUÁRIO) 
 
FIGURA 30 – FONTE: Autoria própria 
 
32 
 
 
FIGURA 31 – FONTE: Autoria própria 
 
33 
 
 
FIGURA 32 – FONTE: Autoria própria 
 
 
6.4. CÓDIGO FONTE – VIEW DETAILS (PÁGINA DETALHES DE USUÁRIO) 
 
 
FIGURA 33 – FONTE: Autoria própria 
 
34 
 
 
FIGURA 34 – FONTE: Autoria própria 
 
 
6.5.CÓDIGO FONTE – VIEW DELETE (PÁGINA EXCLUIR USUÁRIO) 
 
 
FIGURA 35 – FONTE: Autoria própria 
35 
 
 
 
FIGURA 36 – FONTE: Autoria própria 
 
36 
 
7. PADRÃO DO PROJETO – MVC 
 
A arquitetura de uma aplicação tem algumas variações de elementos, como os elementos 
persistência, elementos de conexão, elementos de interação e elementos utilitários. Toda via, 
na arquitetura pode sempre definir os seus elementos que precisarão ser utilizados no sistema e 
como eles irão se conectar. Normalmente uma arquitetura complexa pode exigir uma adição de 
tempo no desenvolvimento. Por isso algumas equipes definem um framework para uma 
determinada aplicação, assim podemos utilizar muitas coisas pré-prontas que facilitam o 
desenvolvimento. Alguns projetos ou organizações combinam esses padrões arquiteturais, pois 
atendem melhor às suas necessidades ou deram certo para o seu tipo de aplicação. Entre as 
arquiteturas existentes temos: Cliente-servidor, P2P - Peer to Peer, Dados compartilhados, 
Máquina virtual, Camadas, MVC e muitos outros. 
 
 
 
FIGURA 37 – FONTE: Autoria própria 
 
 
 
O MVC é utilizado em muitos projetos devido à arquitetura que possui, o que aprova a divisão 
do projeto em camadas muito bem definidas. Cada uma delas, o Model, o Controller e a View, 
executa o que lhe é definido e nada mais do que isso. A aplicação do padrão MVC pode traz o 
benefício de isolar as regras de negócios da lógica de apresentação, a interface com o usuário. 
Isto possibilita a existência de várias interfaces com o usuário que podem ser alteradas sem que 
haja a necessidade da adulteração das regras de negócios. 
 
37 
 
8. IDENTIFICAÇÃO DE BUGS NO SISTEMA ASP .NET 
 
Pode se entender um bug como temidas falhas inesperadas que ocorrem ao executar um 
software ou um hardware. Esses tipos de erros normalmente são imprevisíveis e pode prejudicar 
o funcionamento de algum sistema, desencadeando problemas e incomodando o usuário final, 
sem contar que pode travar o dispositivo e deixar brechas de informações sigilosas. Geralmente, 
essas falhas são uma grande porta de entrada para os crimes cibernéticos. No sistema de 
mecanismo de acesso ao banco de dados foi aplicado uma sequência de testes para a 
identificação de bugs no funcionamento, podendo ser corrigida em uma próxima versão do 
sistema. 
 
 
8.1. ERRO DE PREENCHIMENTO 
 
Para realizar o primeiro teste no sistema, foi necessário criar um usuário, e na hora de cadastrar 
uma pessoa nova, trocar as informações de lugar, substituindo o nome de uma pessoa por 
número, e no campo de idade por letras, por exemplo: 
 
• NOME: 8526655 
• CPF: Cinco quatro oito dois 
 
 
FIGURA 38 – FONTE: Autoria própria 
38 
 
Logo após preencher todos os campos com as informações direcionadas invertidas, foi possível 
digitar normalmente os campos CPF, NOME, TELEFONE, TIPO, CEP, RUA, BAIRRO, 
CIDADE e ESTADO, já nos campos DDD e NÚMERO DA CASA foi impossível digitar 
qualquer informação que o formulário não esperava, aceitando apenas caracteres do tipo 
número. 
 
O formulário o DDD e NÚMERO DA CASA tem um problema em relação ao preenchimento. 
É verdade que ele aceita apenas números, mas a falha está no ponto que o formulário ainda 
aceita números negativos. 
 
 
 
FIGURA 39 – FONTE: Autoria própria 
 
 
 
FIGURA 40 – FONTE: Autoria própria 
 
 
Após a realizado do cadastro, o sistema aceitou normalmente as informações fornecidas 
trocadas, podendo ser um passo para a correção no próximo versionamento39 
 
8.2. SALVANDO INFORMAÇÕES COM FORMULARIOS VAZIOS 
 
Uma característica muito importante no desenvolvimento de software é a localização de erros 
na utilização da aplicação. Localizar esses erros é muito importante para prever possíveis 
problemas e corrigir antes de lançar para o usuário final que são os usuários/clientes. 
 
O objetivo deste tópico é tentar identificar problemas ao cadastrar ou editar usuários com 
formulários vazios, e para isso será necessário editar uma pessoa cadastrada na base de dados 
e deixar o campo CPF e DDD vazios, e logo após salvar as alterações. 
 
 
FIGURA 41 – FONTE: Autoria própria 
 
 
 
É possível identificar um grande problema na hora de cadastrar um usuário, onde foi deixado o 
campo CPF e DDD vazios, e na hora de salvar as alterações, o sistema mostrou que apenas o 
campo deixado em branco do DDD é obrigatório, ou seja, se o usuário preencher o DDD será 
possível salvar as informações mesmo com o formulário do CPF vazio. 
 
 
FIGURA 42 – FONTE: Autoria própria 
 
40 
 
A figura 29 mostra que o sistema aceitou normalmente a alteração mesmo com o campo do 
CPF vazio, podendo ser uma grande urgência a ser alterado. 
 
 
FIGURA 43 – FONTE: Autoria própria 
 
 
 
8.3. EXCLUINDO USUÁRIOS COM CAMPOS VAZIOS 
 
Essa etapa de teste de exclusão tem como objetivo excluir um usuário que foi cadastrado com 
os campos vazios, processo de grande importância na modificação do banco de dados. 
 
FIGURA 44 – FONTE: Autoria própria 
 
 
41 
 
Como é possível analisar na figura 31 a pessoa cujo as informações foram cadastradas com 
caracteres errados e um outro usuário com as informações corretas (Usuário: Gabriel Carvalho 
da primeira linha), não teve nenhum problema em relação a exclusão da base de dados. 
 
 
FIGURA 45 – FONTE: Autoria própria 
 
 
8.4. CONCLUSÃO DA IDENTIFICAÇÃO DE BUGS 
 
Esse tópico teve como finalidade a identificação de bugs no sistema do mecanismo de acesso 
ao banco de dados, e foi citado em 3 (três) pontos: ERRO DE PREENCHIMENTO, 
SALVANDO INFORMAÇÕES COM FORMULÁRIOS VAZIOS E EXCLUINDO 
USUÁRIOS COM CAMPOS VAZIOS. Entretanto é fácil chegar à conclusão que será 
necessário com grande urgência a revisão e a correção dos erros de preenchimento, podendo 
adicionar os campos de PLACEHOLDER e adicionando uma MÁSCARA nos formulários, 
ajudando um provável usuário leigo. Outra questão que necessita ser revisada é em relação ao 
tópico SALVANDO INFORMAÇÕES COM FORMULÁRIOS VAZIOS, permitindo o 
usuário a salvar as alterações mesmo com caracteres não permitidos. E por último o tópico 
EXCLINDO USUÁRIOS COM CAMPOS VAZIOS, foi um grande sucesso ao realizar e 
“puxar” a função de exclusão do usuário da base de dados. 
 
42 
 
9. CONCLUSÃO 
 
Este trabalho apresentou a fundamentação teórica e prática para o desenvolvimento do projeto, 
as tecnologias e os sistemas relacionados. Foi aplicado descrições e os requisitos e a modelagem 
do sistema, podendo observar ainda a apresentação da aplicação, funcionalidades e até mesmo 
as metodologias. 
 
Com a aplicação desenvolvido por este projeto, espera-se que ele seja utilizado pela equipe de 
desenvolvimento. O sistema proposto conseguiu cumprir exatamente as exigências e objetivos 
estabelecidos. Embora algumas das suas funcionalidades ainda necessitem de correções e 
melhorias, e o sistema demostrou eficiência nos testes de usabilidade. 
 
Essa aplicação foi desenvolvida utilizando as tecnologias e padrões de projeto para 
desenvolvimento web em MVC, visando facilitar a sua manutenção e a sua evolução. 
 
Todavia, foi possível que o projeto evoluísse constantemente em todas as etapas. Com isso, é 
fácil concluir que o projeto cujo tema é um mecanismo de acesso ao banco de dados foi um 
sucesso e realiza as operações básicas de CRUD em um sistema único, permitindo que o usuário 
crie usuário, edite usuário, exiba detalhes do usuário e até mesmo permita a exclusão do mesmo. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43 
 
REFERÊNCIAS 
 
DAVENPORT, Thomas, PRUSAK Laurence, Conhecimento Empresarial: como as 
organizações gerenciam seu capital intelectual. Rio de Janeiro: Campus, 1998. 
 
LOTAR, Alfredo. Como Programar com ASP. NET e C#, 2º edição. São Paulo: Editora 
Novatec, 2010 
 
SOMMERVILLE, Ian. Engenharia de software, 8. ed. São Paulo: Pearson, 2007. 
 
FILHO, W. de P. P. Engenharia de software. [S.l.]: LTC, 2003. v. 2 
 
MYSQL, A. Mysql: THE WORLD’S MOST POPULAR OPEN SOURCE DATABASE. 
Disponível em: . Acesso em: 15 de outubro de 2020. 
 
PRADO, Chico Dal Santo. Linguagem de Programação C#. Acesso em 26 de outubro de 2020 
 
O QUE É INTERFACE GUI. Disponivel em: . Acesso em: 03 outubro de 2020 
	UNIVERSIDADE PAULISTA - UNIP EaD
	RESUMO
	ABSTRACT
	1. INTRODUÇÃO
	2. SOFTWARE E A SUA CARACTERIZAÇÃO
	2.2. CONTEXTUALIZAÇÃO DO CASO
	2.3. ELABORAÇÃO
	2.4. FRONT-END E BACK-END
	3.2. PLATAFORMA ASP .NET
	3.4. SISTEMA GERENCIADOR DE BANCO DE DADOS MYSQL
	4.2. DIAGRAMA DE CLASSE
	4.3. DIAGRAMA CASO DE USO
	4.4. CONSULTANDO O BANCO DE DADOS
	5. PROJETO