Projeto de Pesquisa – Trabalho de Conclusão de Curso

Projeto de Pesquisa e Planejamento de Atividades para o Trabalho de

Conclusão de Curso
Engenharia de Computação

Aluno: Douglas Jose Carvalho Oliveira Data de início do

PCC1:21/03/2023_______

Orientador: Prof. MSc Milton Miranda Neto Provável data de

defesa:

_____ / _____ /
__________
Curso: ENGENHARIA DE COMPUTAÇÃO

1 Tema

CADERNO DE ANOTAÇÕES WEB

UTLIZANDO A INTERNET PARA CRIAÇÃO DE AGENDAMENTO
DE ATIVIDADES

Sumário

1 Introdução .................................................................................................... 1
2 Fundamentação teórica............................................................................... 1
3Pesquisa………………………………………………………………………. …...2

1
Projeto de Pesquisa – Trabalho de Conclusão de Curso

4 Estado da arte .............................................................................................. 3

4.1Objetivosespecíficos…………………………………………………………4
Referências ................................................................................................... 11

1- Introdução

O projeto consiste em criar um caderno de anotações, sendo o mesmo uma

aplicação web, utilizando as ferramentas: Visual Studio Code que é a plataforma de
programação, (a linguagem utilizada será Java Script), O Visual Studio Code (VS
Code) é um editor de código de código aberto desenvolvido pela Microsoft.
A saber, ele está disponível para Windows, Mac e Linux. É criado com Electron,
ferramenta criada pelo GitHub que permite a criação de softwares Desktop
com HTML, CSS e JavaScript.
Não confunda com o Visual Studio:
O Visual Studio é uma IDE desenvolvida pela Microsoft, dedicada ao .NET
Framework e a linguagens como C, C++, C# e F#. Por ser uma solução completa, é
uma ferramenta bem mais pesada.
Já o VS Code é um Editor de Código, o qual possui as funcionalidades mais
simples como:
▪ edição de código com suporte a várias linguagens de
programação;
▪ terminal de comandos integrado;
▪ controle de versão;
Por isso é uma ferramenta bem mais leve.
O VS Code é capaz de fazer muitas coisas que nos ajudam a trabalhar melhor.
A princípio ele é uma ferramenta muito simples, mas ele possui uma loja de
extensões imensa, e que continua crescendo.
Ou seja, com essa enorme coleção de extensões, podemos adicionar diversas
funcionalidades ao VS Code de forma bem simples. Dessa maneira, ele pode
facilmente ser comparado a grandes IDEs pagas.

2
Projeto de Pesquisa – Trabalho de Conclusão de Curso

Qualquer um pode criar uma extensão e publicar na loja. Desse modo, sempre
há novas ferramentas que podem ser interessantes para alguém.
Já fizemos aqui no blog uma série de posts indicando as melhores extensões
de VS Code para desenvolvedores Front-End.
VS Code é customizável
Certamente é mais agradável usar uma ferramenta que atenda ao seu gosto e
necessidades.
As necessidades já são supridas pelo enorme número de extensões
disponíveis. E o gosto também é atendido, já que o VS Code é bem customizável.
Você pode alterar a aparência dele manualmente ou baixar temas na loja de
extensões.
Além disso, cada funcionalidade (tanto do VS Code quanto das extensões)
podem ter seu comportamento alterado na tela de configurações, que é bem simples
e intuitiva.

React.js que faz a função front end, que é a parte que o cliente, ou seja, uma
pessoa vê, Node.Js, que é a parte de programação que o cliente não irá ter acesso,
Json que que é a api utilizada para fazer a comunicação entre o Front end e o Back
end.
O mesmo faz a interatividade entre ambos (React.js front end e Node.js back
end), e retorna as informações as quais foram solicitadas pelo React.js ao Node.js

3
Projeto de Pesquisa – Trabalho de Conclusão de Curso

posteriormente ao Mongo db(Banco de dados) onde essa comunicação possibilitará

a satisfação do cliente, no caso o Front end que irá transferir as informações através
da comunicação feita pelo Json que informará para o Node.js e será retornado ao
Front end após a informação recebida pelo Back.end recebida pelo Mongodb, que é
um banco de dados.
Será utilizado também o Figma que é uma ferramenta de design versátil e
bastante popular entre designers. Apresentamos aqui detalhes sobre a ferramenta,
suas principais características e vantagens.
Hoje em dia o Figma é uma das ferramentas mais avançadas quando o
assunto é construção de interfaces digitais. Mas há muito mais para se descobrir
sobre essa ferramenta completa, como suas funcionalidades de prototipação, sua
capacidade de acessos simultâneos ao mesmo projeto, ou então suas bibliotecas de
componentes compartilháveis.

Para descobrirmos todas as informações necessárias e fundamentais para dar

os primeiros passos com a ferramenta, consultamos Makson Serpa, product
designer na Meta e professor do curso de Figma da EBAC.
Será utilizada também a ferramenta insômnia para fazer simulações do
funcionamento do aplicativo.

4
Projeto de Pesquisa – Trabalho de Conclusão de Curso

O caderno de anotações facilitará o agendamento de atividades do cliente. O

usuário ao acessar a aplicação web, que é uma página da internet ele poderá agendar
as suas atividades, como por exemplo ir ao supermercado, uma vez que é preciso ser
feito o roteiro ir ao supermercado duas ou três vezes no mesmo dia por exemplo.
E o aplicativo permitirá ao usuário fixar prioridade em atividades de preferência
do mesmo

O React, resumidamente, é uma biblioteca para construção de interfaces, muito

utilizado em Single Page Applications (SPA), uma arquitetura de front-end que permite
que, quando você altere de uma página para outra na sua aplicação web, não seja
necessário um carregamento completo da mesma, mas sim apenas o conteúdo que é
diferente. Isso além de proporcionar uma experiência mais suave ao usuário, dá uma
performance muito superior.
E o melhor: tudo isso inteiramente usando JavaScript!
Sim, o HTML, CSS, comportamentos…toda a interface é codificada usando
somente JavaScript.
Eu tive a oportunidade de trabalhar no Banco Topázio, onde tanto o Internet
Banking quanto o Mobile Banking eram feitos usando ReactJS e React Native,
respectivamente, e achei muito legal essa experiência.

5
Projeto de Pesquisa – Trabalho de Conclusão de Curso

Vantagens
A primeira vantagem é a organização do código. O React segue muito forte o
conceito de componentização, ou seja, a gente separa o código da aplicação em
pequenos componentes, semelhante ao que fazemos no backend com micro serviços.
Por exemplo se eu tenho um botão que é utilizado muito na aplicação, eu posso criar
um componente com este botão e utilizá-lo em todos os lugares que ele aparece.
Futuramente, se eu precisar corrigir um bug neste botão, eu corrijo no componente e
todos os lugares terão essa correção.
Outra vantagem é divisão de responsabilidades. Quando usamos React, o
front-end fica somente com a responsabilidade de renderizar a interface corretamente,
enquanto todas as regras de negócio ficam no back-end, que será consumido pelo
React.

O seu navegador vai se abrir na porta 3000 mostrando o projeto-base do React

funcionando, como na imagem abaixo.
E por fim, a última vantagem que eu gostaria de citar é a possibilidade
aceitar múltiplos clientes. Isso porquê o React é uma biblioteca-base, usada pelo
ReactJS para projetos web e com o React Native para projetos mobile. Uma vez que
você faça um back-end para suportar uma aplicação ReactJS ou React Native,
facilmente você pode construir o segundo front-end React e usar o mesmo backend.
6
Projeto de Pesquisa – Trabalho de Conclusão de Curso

Além disso, é bem comum o compartilhamento de componentes e bibliotecas JS entre

projetos web e mobile quando usando a Omnistack do React.

2- Fundamentação teórica
Nesse trabalho será utilizada a linguagem Java Script(Zakas, Nicholas
C. JavaScript de Alto Desempenho. Editora Novatec. 2010), (OLIVEIRA, Andressa
Cruz) que possiblitará criar um caderno de anotações. Além da linguagem Java Script
para criar o mesmo, serão utilizadas as seguintes Frameworks: React.js, Node.js,
Json, Mongodb. O React.js faz a função de front end, que o cliente(pessoa) visualiza
a tela do computador. 1
O Node.js receberá requisições do React.js através da api Json que faz a
transmissão das mesmas ao Mongodb que é o banco de dados(banco de
informações) e as informações requisitadas serão retornadas para o Node.js. e
repassadas ao React.js pela api Json que realiza a interligação entre React.js, Node.js
e Mogodb.

7
Projeto de Pesquisa – Trabalho de Conclusão de Curso

Atualmente a internet constitui-se de uma fonte inesgotável de informação,

disponibilizando uma quantidade enorme de tecnologias que não podem ser
ignoradas, e utilizando do recurso da mesma o trabalho caderno de anotações
proporcinará um agendamento de atividades diárias.

3- Pesquisa

Concluindo-se a pesquisa referida ao projeto mencionado vamos à algumas

disposições que foram resultados da mesma:

JavaScript é uma linguagem de programação que permite a você implementar

itens complexos em páginas web — toda vez que uma página da web faz mais do que
simplesmente mostrar a você informação estática — mostrando conteúdo que se
atualiza em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados,
etc. — você pode apostar que o JavaScript provavelmente está envolvido. É a terceira
camada do bolo das tecnologias padrões da web, duas das quais (HTML e CSS) nós
falamos com muito mais detalhes em outras partes da Área de Aprendizado.O que
pode ser utiçizado em Jva script out agas que não são linguagens mas são web
igualmente.

Criar produtos digitais vem sendo um tópico extremamente relevante nos

últimos anos, principalmente por conta da popularização da área User
experience (ou Experiência do usuário em português), que visa olhar para um
produto de uma empresa, e por meio de análises, pesquisas e testes, fornecer a
melhor experiência durante o uso desse sistema, reduzindo pontos
negativos e solucionando os problemas do público-alvo.
Em paralelo à área de experiência, temos a User interface (ou Interface do
usuário em português), que atua em conjunto com a pessoa que realiza pesquisas
e testes, mas convertendo esses resultados em, muitas vezes, interfaces digitais,
fornecendo um meio dessas pessoas interagirem com o produto, sendo meio pelo
qual irão completar seus objetivos. Para que isso aconteça, das diversas opções pelas
quais isso pode ser produzido, o Figma é um dos caminhos para criação de
telas para produtos como aplicativos, sites ou softwares, permitindo que a pessoa
8
Projeto de Pesquisa – Trabalho de Conclusão de Curso

designer, crie todo o fluxo, estrutura e composição do projeto, e é sobre essa

ferramenta que iremos falar neste artigo.
O que é Figma?
O Figma é uma plataforma colaborativa para construção de design de
interfaces e protótipos, pertencente a empresa Fima, Inc., lançada em 2016 por
Dylan Field e Evan Wallace, com o objetivo de criar uma ferramenta gratuita que
trouxesse colaboração entre pessoas e times, permitindo criar um produto para
as mais diversas plataformas, mantendo a acessibilidade do sistema.

4- Estado da arte

Criar produtos digitais vem sendo um tópico extremamente relevante nos

últimos anos, principalmente por conta da popularização da área User
experience (ou Experiência do usuário em português), que visa olhar para um
produto de uma empresa, e por meio de análises, pesquisas e testes, fornecer a
melhor experiência durante o uso desse sistema, reduzindo pontos
negativos e solucionando os problemas do público-alvo.
Em paralelo à área de experiência, temos a User interface (ou Interface do
usuário em português), que atua em conjunto com a pessoa que realiza pesquisas
e testes, mas convertendo esses resultados em, muitas vezes, interfaces digitais,
fornecendo um meio dessas pessoas interagirem com o produto, sendo meio pelo
qual irão completar seus objetivos. Para que isso aconteça, das diversas opções pelas
quais isso pode ser produzido, o Figma é um dos caminhos para criação de
telas para produtos como aplicativos, sites ou softwares, permitindo que a pessoa
designer, crie todo o fluxo, estrutura e composição do projeto, e é sobre essa
ferramenta que iremos falar neste artigo.
O que é Figma?
O Figma é uma plataforma colaborativa para construção de design de
interfaces e protótipos, pertencente a empresa Fima, Inc., lançada em 2016 por
Dylan Field e Evan Wallace, com o objetivo de criar uma ferramenta gratuita que
trouxesse colaboração entre pessoas e times, permitindo criar um produto para
as mais diversas plataformas, mantendo a acessibilidade do sistema.
9
Projeto de Pesquisa – Trabalho de Conclusão de Curso

5 Objetivo geral

O objetivo do trabalho será a utilização das ferramentas, Node.js(back end,

onde o usuário não tem acesso), React.js(front end, o qual o usuário tem acesso),
Insômnia(para realização de tedted), Figma(aplicativo om line onde funcionatá o
caderno de anotações) e Mongo db(banco de dados), para agendamentos.

5.1 Objetivos específicos

Possibilitar o cliente criar uma agenda utilizando o caderno de anotações

criado, como por exemplo ir ao supermercado, Universidade, trabalho, consulta
médica, compras, dentre outras atividades

6 Histórico do javascript

6.1 O que é o javascript

É uma linguagem de programação destinada a soluções web. Ela é fácil de ser

executada e roda em navegadores de internet. Atualmente, é uma das linguagens
mais importantes do mundo, fazendo parte do cotidiano dos desenvolvedores.
Vale destacar que ela consegue interagir com as páginas da web de diferentes
maneiras. Assim, permite criar softwares(programas de computador) que simplificam
a vida dos consumidores e reduz bugs(problemas-sistema fora do ar), por exemplo.
Mais do que isso, o JavaScript é um aliado na criação de sites, aplicativos
e programas. Se você fizer uma breve pesquisa, provavelmente descobrirá alguma
solução que surgiu por meio dele — o Node.js é um bom exemplo. E como já foi dito
anteriormente, o java script fez surgir outra solução, o React.js..

10
Projeto de Pesquisa – Trabalho de Conclusão de Curso

7 Referências

OLIVEIRA; Dênis Ricardo Amaral de; SANTOS, Luan Rodrigo de Paulo dos.
Sistema de agendamento para estúdios de tatuagens. 2020. Trabalho de Graduação.
(Curso Superior de Tecnologia em Análise de Desenvolvimento de Sistemas),
“Faculdade de Tecnologia Dr. Thomaz Novelino”, Franca, 2021.
Beighley, Lynn; Morrison, Michael. Use a Cabeça! PHP & MySQL. Editora Alta
Books. 2010.
Junior, Edson. Entendendo float, clear e clearfix de uma vez por todas.
Disponível em: <https://edsonjunior.com/entendendo-float-clear-clearfix/>. Acesso
em: 2 de junho de 2017.
Junior, Elias. Principais tags de HTML. Disponível em:
<http://codigofonte.uol.com.br/artigos/principais-tags-de-html>. Acesso em: 23 de
janeiro de 2017.
Manual do PHP. Disponível em: <http://php.net>. Acesso em: 3 de junho de
2017.
MartinsDev. Unidades de medida px, dpi e dp. Disponível em:
<http://martinsdev.com.br/android/design/unidades-de-medida-px-dpi-e-dp>. Acesso
em: 2 de junho de 2017.
Gilmore, Jason W. PHP e MySQL: do Iniciante ao Profissional. Editora Alta
Books. 2008.
Mariano, D. C. B. et al. Introdução à programação para Bioinformática com
Biopython. Amazon: CreateSpace (Independently published). 2015.
Mariano, D. C. B.; de Melo-Minardi, R. C. Introdução à programação para
Bioinformática com Perl. Amazon: CreateSpace (Independently published). 2016.
Online syntax highlighter like TextMate. Disponível em:
<http://markup.su/highlighter/>. Acesso em: 6 de junho de 2017.
11
Projeto de Pesquisa – Trabalho de Conclusão de Curso

Riordan, Rebecca M. Use a Cabeça! Ajax. Editora Alta Books. 2009.

Silva, Maurício Samy. Fundamentos de HTML5 e CSS3. Editora Novatec.
2015.
Tableless. Qual unidade utilizar – Pixel, EM ou REM. Disponível em:
<https://tableless.com.br/unidade-pixels-em-rem/>. Acesso em: 2 de junho de 2017.
W3. Folhas de Estilo WebDicas & truques CSS. Disponível em:
<https://www.w3.org/Style/Examples/007/units.pt_BR.html>. Acesso em: 2 de junho
de 2017.
W3Schools. Disponível em: <https://www.w3schools.com/>. Acesso em: 23 de
janeiro de 2017.
Zakas, Nicholas C. JavaScript de Alto Desempenho. Editora Novatec. 2010.

Ituiutaba, _____ de _________________ de _________

12
Projeto de Pesquisa – Trabalho de Conclusão de Curso

__________________________________________________________
Nome completo do orientador (Assinatura)

__________________________________________________________
Nome complete do aluno (Assinatura)

13