Portifólio Individual | Projeto Integrado III - Cursos da Area de TI - ADS - Elisa de Almeida Chaves - Faculdade Anhanguera | Amalise e Desenvolvimento de Sistemas - 2 Semestre

Prévia do material em texto

Faculdade Anhanguera de Campinas
Centro Fac 1(22470)AC
Análise e Desenvolvimento de Sistemas
Elisa de Almeida Chaves
PROJETO INTEGRADO III
Cursos da Area de TI
Tutor a Distancia: Jobson Yonaha Gimenez
Campinas
2022
1
Elisa de Almeida Chaves
PROJETO INTEGRADO III
Cursos da Area de TI
Trabalho apresentado à Anhanguera, como
requisito parcial à aprovação no Portfólio - Projeto
Integrado III do curso de Análise e Desenvolvimento
de Sistemas.
Disciplinas: Análise Orientada a Objetos
Linguagem de Programação
Programação e Desenvolvimento De Banco de Dados
Interface e Usabilidade
Optativa 1
Linguagem Orientada a Objetos
Ed - Design Thinking
Professores: Adriane Aparecida Loper,
Gilberto Fernandes Junior,
Leonardo Santiago Sidon da Rocha,
Suzi Bueno de Almeida,
Vanessa Matias Leite,
Wesley Viana Pereira.
Tutor a Distancia: Jobson Yonaha Gimenez.
Campinas
2022
2
SUMÁRIO
INTRODUÇÃO…………………………………………………………………………………………… 3
DESENVOLVIMENTO…………………………………………………………………………………... 4
1 - DIAGRAMA ESTRUTURAL E COMPORTAMENTAL…………………………..……. 4
Diagrama de Classes…………………………………………………………………4
Diagrama Estrutural..…………………………………………………………………5
Diagrama Comportamental….……….………………………………………………6
Diagrama Sequência..…………..……………………………………………………6
2 - DESIGN DE INTERFACES I MINISTÉRIO DA EDUCAÇÃO I MAPA DE
FACULDADES EM TECNOLOGIA NO BRASIL ………………………………….……. 7
3 - FRAGMENTO DE CÓDIGO EM PYTHON……………………………………………11
4 - O PHP É MAIS FÁCIL DO QUE O ESPERADO …………………………………….12
5 - BANCO DE DADOS (RELACIONAL E NÃO RELACIONAL) …………………… 14
CONCLUSÃO 16
REFERÊNCIAS 17
https://docs.google.com/document/d/1VRJTWfAlSbW3Zjk242gqS7wStFLQZlq6OFGTUp_CPnw/edit#heading=h.3znysh7
https://docs.google.com/document/d/10XMRY1QIipYQX4js7I-c_J9b0ffaN3txiZdGRba4how/edit#heading=h.3dy6vkm
INTRODUÇÃO
Neste Projeto Integrado eu falo um pouco sobre assuntos que abrangem a área
de programação e alguns assuntos nos quais um programador, ou, desenvolvedor
passa no seu dia a dia .
Coloquei minha percepção sobre cada assunto do projeto pois criando este
conteúdo tive expectativas, surpresas, aprendizado, e dúvidas sobre os assuntos em si
que coloquei de forma científica para a compreensão de como cheguei ou não na
resposta.
Os assuntos são ligados de certa forma e se você ler com atenção entenderá o
fator que interliga todos. Nele você pode notar que falo sobre diferentes tipos de
diagramas, tipos de bancos de dados; coloco a mão no código e na criação de design e
usabilidade de um site, entre outros assuntos.
Espero ajudar com a visão que passei neste projeto e espero que fique tão
animado e ansioso quanto eu fiquei no processo de criação.
4
1 - Diagrama Estrutural e Comportamental
No mundo da Programação existe algo fundamental, que inicia o processo de
interação homem e máquina, que são os Algoritmos. Os algoritmos fornecem dados, e
para armazenar esses dados precisamos de um Banco de Dados. Os Banco de Dados
Não-Relacionais têm duas características que aprecio muito particularmente, que são
as classes e os objetos.
No processo de criação de modelagem de classes existe a UML (Linguagem de
Modelagem Unificada ou Unified Modeling Language), que é nada mais nada menos do
que uma ferramenta auxiliadora de modelagem de sistemas orientados a objeto, mas
também utilizada para notação de projetos em bancos de dados.
Diagrama de Classes
Entre muitos Diagramas que compõem a UML, o mais interessante na minha
opinião é o Diagrama de Classes, que representa o processo lógico de um Banco de
Dados com soluções orientadas a objetos. Neste tipo de Diagrama você pode observar
as Classes e seus atributos, relações entre as Classes e as operações. Muito parecida
com um modelo de Entidade-Relacionamento.
Sua cardinalidade também é parecida com este modelo, podemos determinar o
número de ocorrências exato, de no mínimo uma e de no máximo cinco (1..5) e o N que
e representado pelo Asterisco (*). Em cada Classe (podendo visualizar na imagem
abaixo) podemos entender que temos 3 características: o nome (no topo), os atributos
(no meio) e no final podemos notar que temos operações ou métodos.
5
Quando se cria uma classe, devemos entender que ela é preenchida por um
objeto, e quando você cria uma classe na memória do computador você possui um
objeto, no caso você possua um Diagrama de Objetos, para armazenar as informações
que colocamos na classe. Um Diagrama de Classes é considerado um Diagrama de
Estrutura. Aprecio particularmente por ele me trazer uma ideia mais operacional de um
banco de dados, como por exemplo criar um banco de dados para visão de
funcionamento de um projeto, como um diagramas para uma escola, por exemplo, um
diagrama de professores, um diagrama para alunos dentro de uma sala ou de uma
disciplina.
Diagrama Estrutural
A melhor forma de explicar um Diagrama de Estrutura é de uma forma mais
macro, e depois afunilar até chegar em detalhes. Em que você modela, ou, o Diagrama
mostra a organização e a estrutura de dados e diferentes objetos que estão
processados no sistema.
6
Diagrama Comportamental
Outro tipo de Diagrama que se encaixa muito bem dentro do nosso assunto seria
os Diagramas Comportamentais. Este tipo de Diagrama mostra como e, o que deve
acontecer em um sistema, descrevendo como um objeto interage com outro,
basicamente mostrando um comportamento dinâmico entre eles, e como eles reagem
aos eventos para criar a funcionalidade do sistema. Um dos Diagramas
Comportamentais que mais gosto é o Diagrama de Sequência por conta da sua
estrutura.
Diagrama de Sequência
Como sendo um Diagrama
Comportamental ele mostra sua estrutura, e
na imagem podemos notar que a estrutura de
suas operações são verticais, como os objetos
interagem um com o outro e em que ordem
eles ocorrem, onde você consegue notar as
suas interações com as setas e a ordem em
que elas ocorrem por quase parecer uma linha
de tempo.
É importante frisar que um Diagrama de
Sequência só mostra as interações em
determinado cenário.
Na minha visão sobre este tipo de
diagrama eu consigo enxergar um potencial fora do processo de desenvolvedor, mas
consigo enxergá-la como a equipe de negócios de uma empresa usando esses
diagramas para comunicar exatamente como o negócio está funcionando atualmente,
ilustrando como diferentes objetos de negócios interagem.
7
2 - Design de Interfaces I Ministério da Educação I Mapa de Faculdades em
Tecnologia no Brasil.
Como a proposta desta parte do meu Portfólio é um design de interfaces, eu me
preocupei apenas com a parte UI/UX. Mesmo querendo ter mais tempo para especificar
como gostaria de fazer a parte back-end, como os bancos de dados, tanto para o
armazenamento de login e cadastro, como para a parte onde armazenamos as
informações sobre estados, cidades e faculdades. Porém foquei mais no meu principal
objetivo que seria o Design em si.
Para conseguir desenvolver o protótipo dessa tela, desenhar todas as telas e
pensar na experiência do usuário, acabei optando por utilizar um aplicativo de
navegador que se chama Figma, ele tem várias ferramentas, onde você pode ver o
fluxo do seu trabalho, ferramentas que ajudam desenvolvedores front-end. Acredito que
esta ferramenta ajuda no processo de criação e na comunicação entre usuário, cliente,
projeto, desenvolvedor e equipe.
Para a criação da tela inicial eu usei uma das telas que desenvolvi em um evento
chamado NLW (Next Level Week) da Rocketseat no ano de 2021, que era uma página
inicial de um projeto que se chama LetmeAsk, e decidi utilizar essa tela como base a
minha tela inicial pelo fato de ela ter um UI/UX perfeito para o usuário, ter uma opção
de entrada com o perfil Google e por saber como linkar essa entrada com o Google com
uma outra ferramenta que é o Firebase.
8
Utilizei o Firebase para a criação de um Login de entrada com o Google e um
cadastro disso, obviamente utilizei um código pronto para isso, o código que aprendi no
NLW de 2021, mas achei válido pois meu processo decriação seria apenas para o
Design de Interface.
9
Na tela de cadastro tentei criar algo confortável para o usuário, que não pedisse
tantas informações pessoais, mas que tivesse o básico para a criação de cadastro e
perfil, sem deixar o usuário desconfortável e sem deixar o cliente sem informações de
quem está utilizando sua ferramenta. Também pensei em minimizar o número de
informações para não precisar de uma criação de Banco de dados muito complexa e
ampla.
Na criação da tela de pesquisa de mapa tentei criar algo objetivo e simples para
que o usuário não se perca com tantas funcionalidades, onde o processo racional
possa trabalhar sozinho sem uma explicação de como funciona a página. Também
pensei no processo de banco de dados nesta parte e de como seria o processo de
facilitar a pesquisa sendo separado por Estado e Cidade, quando utilizado o botão de
pesquisa o usuário obtém uma lista com as faculdades com o curso de tecnologia
podendo ser vista no mapa e ser selecionada na lista.
10
Escolhi a opção de lista pois o usuário só poderá selecionar a opção que se
obtém dentro do banco de dados, diferente de uma área de inserção, onde você tem a
opção de escrever e obter obstáculos na pesquisa do usuário, por escrever de forma
errada, por não obter estados e cidades escritos, e desta forma tentei melhorar a
experiência do usuário dentro da plataforma, sendo listas mais fáceis, pois já se tem
uma opção pronta de escolha, onde só é preciso a ação escolher selecionar.
Esta foi a parte mais divertida do Projeto Integrado em si, pois pude utilizar de
forma mais "profissional" meus conhecimentos sobre a área, até mesmo por obter mais
experiência, mas também por ter a parte prática do processo. Gostaria de ter tido tempo
e a oportunidade de ter feito as partes de back-end, e ter desenvolvido os bancos de
dados, mas não achei necessário pois a proposta é apenas o Design de Interface.
Você pode ver meu trabalho no Figma:
https://www.figma.com/file/jwdK4RoNn5BK9qDpMBwkfc/Projeto-Intergrado-III---Cursos-Da-Area
-de-TI---Anhanguera?node-id=0%3A1
https://www.figma.com/file/jwdK4RoNn5BK9qDpMBwkfc/Projeto-Intergrado-III---Cursos-Da-Area-de-TI---Anhanguera?node-id=0%3A1
https://www.figma.com/file/jwdK4RoNn5BK9qDpMBwkfc/Projeto-Intergrado-III---Cursos-Da-Area-de-TI---Anhanguera?node-id=0%3A1
11
3 - Fragmento de Código em Python.
Essa parte de código escrita em Python foi passada para mim para que eu
pudesse encontrar elementos chave, e pudesse descrever os elementos e sua
funcionalidade. Basicamente tinha que buscar o método e como ele recebe o valor,
saber como seria a busca sem um método e quais seriam as alterações de lista. Acabei
ficando um pouco confusa com o código, porém cheguei em uma resposta.
Percebi que o pedaço de código busca a
função através do método, e os objetos
(nextItem e data) acessam os valores
através do atributo.
Não sendo o método, ele receberá os
valores através do parâmetro da função,
onde self deve ser declarado.
Entendi este que trecho de código vai
acrescentando até que ele encontre o item,
como um incrementador, em um laço de
repetição até que ele encontre o valor ou o
item desejado.
Apesar de conseguir chegar em uma resposta esse código me deixou
extremamente confusa, porque pelo que me pareceu o nextItem seria um objeto, e na
linha 9 está sendo passado o endereço do objeto navegar(antigo).nextItem para a
variável navegar, e na linha 11 está chamando o navegar(antigo).nextItem.nextItem,
logo ele nao tera esse atributo preenchido acessando duas hierarquias a mais. A
menos que o nextItem tenha um nextItem dentro dele o que daria erro ao acessar a
chave do dicionário.
Basicamente como se a linha 9 e a linha 11 chamasse a mesma função em
pontos diferentes sendo que chamam instâncias diferentes, ou seja, o código daria erro
no final das contas. Isso dificultou minha leitura do código, obviamente não me impediu
de chegar na resposta, porém me deixou bastante confusa durante o projeto.
12
4 - O PHP é mais Fácil do que o Esperado.
Achei a tarefa de completar o código um tanto fácil, que até fiquei em dúvida se o
que eu estava fazendo estava certo de alguma forma. Tanto que consultei duas
pessoas que eu tinha mais acesso, que são programadores, para saber se minha
resposta estava certa; algo que eu gostei bastante pois os dois me perguntaram o
porquê da minha resposta, e tivemos uma conversa produtiva sobre o assunto.
A imagem e um print que tirei do meu Visual Studio Code, eu coloquei o código
dentro do programa para que eu pudesse aprender umas coisas com o próprio código,
com o objetivo de tirar o máximo de informações possíveis. Uma das minhas ideias foi
comentar o código para que eu tivesse uma visão de fluxo de funcionamento.
Uma das minhas outras ideias, pelo qual acabei usando o VSCode
especificamente, foi porque eu poderia usar uma extensão chamada Copilot, que e uma
IA (Inteligência Artificial) que lê o código, ou o pedaço de código que eu selecionar e me
fala o que está acontecendo ali em forma de texto.
Grande parte das ferramentas que usei no código foi mais por uma dúvida de
achar que o que eu tinha feito estava errado e que pudesse ter algo que eu não estava
enxergando ali, mas que na verdade estava tudo certo.
13
Olhando o código já pronto podemos notar que minha decisão sobre a linha 3 foi
chamar o arquivo conectar em php, assim como o usuário, eu notei a falta de chamar o
arquivo fazendo a linha 9 onde a propria questao ja me dava a resposta do que eu
precisaria colocar ali e logo em seguida me veio (era impossível não pensar ou notar) a
resposta da linha 3.
14
5 - Banco de Dados (Relacionais e Não Relacionais).
Meu objetivo nesta parte do trabalho seria explicar a diferença entre bancos de
dados relacionais e não relacionais, mais acredito que se eu passo somente essa
informação como forma de texto sem contextualizar a informação, dizer da onde ela
vem e para onde vai e qual objetivo e significado atribuído a ela, tudo isso se torna uma
informação vazia.
Então para explicar de melhor forma os bancos de dados relacionais e não
relacionais eu vou voltar um pouco na linha de tempo de raciocínio para que, tanto eu
quanto você, possamos absorver melhor sobre o conteúdo. Observando isso vamos
para o Banco de Dados.
Os Bancos de Dados tem como objetivo geral armazenar e centralizar
informações em um computador ou servidor (em alguns casos mais de um servidor),
para permitir que esses dados sejam compartilhados em diversos sistemas. Sabendo
disso, vamos para o Primeiro tópico os Bancos de Dados Relacionais.
Bancos de Dados Relacionais
Os Bancos de Dados Relacionais possuem uma estrutura que os caracteriza,
onde as informações são atribuídas ao formato de tabela, onde os dados são inseridos.
Um dos aspectos dessas tabelas são as restrições de integridade e como as operações
são realizadas (selecionar, juntar, excluir, etc…). As tabelas de um Banco de Dados
Relacional possui o modelo linhas na horizontal e de colunas na vertical. Como uma
tabela de banco de dados tradicional.
Bancos de Dados Não Relacionais
Um banco de Dados Não Relacional é caracterizado por não precisar de um
esquema, diferentemente de um Banco de Dados Relacional. E eles foram criados
exatamente para Bancos de Dados que possuem uma capacidade muito grande de
15
dados onde uma estruturação por tabelas não ajudaria ou se tornaria algo
extremamente difícil.
Cada tipo de Banco de Dados possui uma característica primordial para a
criação e a fundamentação dos Bancos de Dados, ao saber suas características e suas
funcionalidades, como profissional, você saberá lidar com os projetos e suas
necessidades visando o melhor para sua equipe, para o cliente e para o usuário.
16
CONCLUSÃO
No final de tudo concluo que por mais que eu tenha encontrado muitas
dificuldades no processo de criação deste trabalho, tive várias oportunidades de
aprendizado, principalmente buscando informações com pessoasque trabalham na
área, nas quais eu pedi ajuda e pude ter uma visão mais ampla do processo
profissional da área.
Também fui desafiada a ir atrás de assuntos que eu não tinha uma
compreensão tão boa, e as quais nem sabia que não tinha um entendimento tão bom
sobre.
Contudo exerci partes nas quais gostei muito de poder demonstrar meu
conhecimento sobre tal e mostrar meu potencial como profissional em formação e
agregar conhecimento.
17
REFERÊNCIAS
Sommerville, Ian. Engenharia de Software / Ian Sommerville ; tradução Ivan Bosnic e
Kalinka G. de O. Gonçalves ; revisão técnica Kechi Hirama. — 9. ed. — São Paulo :
Pearson Prentice Hall, 2011. Disponível em: *Engenharia de software (ufu.br) Acesso
em: 10 de Maio de 2022.
Creately. Guia de tipos de diagramas UML: aprenda sobre todos os tipos de
diagramas UML com exemplos. Atualizado em 23 de Dezembro de 2021. Disponível
em:https://creately.com/blog/pt/diagrama/guia-de-tipos-de-diagramas-uml-aprenda-sobr
e-todos-os-tipos-de-diagramas-uml-com-exemplos/#:~:text=Os%20diagramas%20de%2
0estrutura%20mostram,para%20criar%20um%20sistema%20funcional Acesso em: 10
de Maio de 2022.
Creately. O básico e o propósito dos diagramas de sequência ~ Parte 1 Atualizado
em 11 de Maio de 2022. Disponível em:
https://creately.com/blog/diagrams/the-basics-the-purpose-of-sequence-diagrams-part-1/
Acesso em: 10 de Maio de 2022.
FACULDADE ANHANGUERA, ANÁLISE E DESENVOLVIMENTO DE SISTEMAS.
Modelagem de Interações, Unidade 3 - Seção 2. Disponível
em:https://www.passeidireto.com/arquivo/108356167/modelagem-de-interacoes-i-unida
de-3-secao-2-i-anhanguera Acesso em: 10 de Maio de 2022.
FACULDADE ANHANGUERA, ANÁLISE E DESENVOLVIMENTO DE SISTEMAS.
Modelagem de Dados, Unidade 3 - Seção 2. Disponível
em:https://www.passeidireto.com/arquivo/108356377/modelagem-de-dados-atraves-do-
modelo-entidade-relacionamento-usando-uml-i-unidad Acesso em: 11 de Maio de 2022.
http://www.facom.ufu.br/~william/Disciplinas%202018-2/BSI-GSI030-EngenhariaSoftware/Livro/engenhariaSoftwareSommerville.pdf
https://creately.com/blog/pt/diagrama/guia-de-tipos-de-diagramas-uml-aprenda-sobre-todos-os-tipos-de-diagramas-uml-com-exemplos/#:~:text=Os%20diagramas%20de%20estrutura%20mostram,para%20criar%20um%20sistema%20funcional
https://creately.com/blog/pt/diagrama/guia-de-tipos-de-diagramas-uml-aprenda-sobre-todos-os-tipos-de-diagramas-uml-com-exemplos/#:~:text=Os%20diagramas%20de%20estrutura%20mostram,para%20criar%20um%20sistema%20funcional
https://creately.com/blog/pt/diagrama/guia-de-tipos-de-diagramas-uml-aprenda-sobre-todos-os-tipos-de-diagramas-uml-com-exemplos/#:~:text=Os%20diagramas%20de%20estrutura%20mostram,para%20criar%20um%20sistema%20funcional
https://creately.com/blog/diagrams/the-basics-the-purpose-of-sequence-diagrams-part-1/
https://www.passeidireto.com/arquivo/108356167/modelagem-de-interacoes-i-unidade-3-secao-2-i-anhanguera
https://www.passeidireto.com/arquivo/108356167/modelagem-de-interacoes-i-unidade-3-secao-2-i-anhanguera
https://www.passeidireto.com/arquivo/108356377/modelagem-de-dados-atraves-do-modelo-entidade-relacionamento-usando-uml-i-unidad
https://www.passeidireto.com/arquivo/108356377/modelagem-de-dados-atraves-do-modelo-entidade-relacionamento-usando-uml-i-unidad
18
FACULDADE ANHANGUERA, ANÁLISE E DESENVOLVIMENTO DE SISTEMAS.
Modelagem de Dados, Unidade 1 - Seção 1. Disponível
em:https://www.passeidireto.com/arquivo/108397409/modelagem-de-dados-i-unidade-1-
secao-1-i-anhanguera Acesso em: 11 de Maio de 2022.
FACULDADE ANHANGUERA, ANÁLISE E DESENVOLVIMENTO DE SISTEMAS.
Modelagem de Dados, Unidade 1 - Seção 2. Disponível
em:https://www.passeidireto.com/arquivo/108397682/modelagem-de-dados-banco-relac
ional-i-unidade-1-secao-2-i-anhanguera Acesso em: 11 de Maio de 2022.
Digital House. Banco de dados: entenda o que é um banco de dados relacional e
não relacional Atualizado em 01 de Março de 2021. Disponível em:
https://www.digitalhouse.com/br/blog/banco-de-dados-relacional-e-nao-relacional/
Acesso em: 11 de Maio de 2022.
Rocketseat. NLW (Next Level Week), 26 de Abril de 2022 / 08 de Junho de 2020. Disponível
em: https://blog.rocketseat.com.br/tag/nlw/ Acesso em: 13 de Maio de 2022.
Sites Utilizados para criação dos Projetos:
Figma:https://www.figma.com/file/jwdK4RoNn5BK9qDpMBwkfc/Projeto-Intergrado-III---C
ursos-Da-Area-de-TI---Anhanguera?node-id=0%3A1
Firebase: https://firebase.google.com/
https://www.passeidireto.com/arquivo/108397409/modelagem-de-dados-i-unidade-1-secao-1-i-anhanguera
https://www.passeidireto.com/arquivo/108397409/modelagem-de-dados-i-unidade-1-secao-1-i-anhanguera
https://www.passeidireto.com/arquivo/108397682/modelagem-de-dados-banco-relacional-i-unidade-1-secao-2-i-anhanguera
https://www.passeidireto.com/arquivo/108397682/modelagem-de-dados-banco-relacional-i-unidade-1-secao-2-i-anhanguera
https://www.digitalhouse.com/br/blog/banco-de-dados-relacional-e-nao-relacional/
https://blog.rocketseat.com.br/tag/nlw/
https://www.figma.com/file/jwdK4RoNn5BK9qDpMBwkfc/Projeto-Intergrado-III---Cursos-Da-Area-de-TI---Anhanguera?node-id=0%3A1
https://www.figma.com/file/jwdK4RoNn5BK9qDpMBwkfc/Projeto-Intergrado-III---Cursos-Da-Area-de-TI---Anhanguera?node-id=0%3A1
https://firebase.google.com/