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

PARA CRIAÇÃO DE AGENDAMENTO DE ATIVIDADES DIÁRIAS

Sumário

1 Tema..........................................................................................................................1
1- Introdução................................................................................................................2
Não confunda com o Visual Studio:..........................................................................2
VS Code é customizável.............................................................................................3
Vantagens....................................................................................................................6
2- Fundamentação teórica..........................................................................................7
3- Pesquisa...................................................................................................................8
4- Estado da arte.........................................................................................................9
1
Projeto de Pesquisa – Trabalho de Conclusão de Curso

O que é Figma?...........................................................................................................9
5 Objetivo geral.........................................................................................................10
5.1 Objetivos específicos.........................................................................................10
6 Histórico do Javascript.........................................................................................10
ECMAScript................................................................................................................12
6.1 O que é o javascript............................................................................................12
7 Referências.............................................................................................................12

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 VSCode é 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.

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

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.
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,

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

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
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.

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

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.

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,

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

facilmente você pode construir o segundo front-end React e usar o mesmo backend.
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
8
Projeto de Pesquisa – Trabalho de Conclusão de Curso

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.

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

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

trouxesse colaboração entre pessoas e times, permitindo criar um produto para

as mais diversas plataformas, mantendo a acessibilidade do sistema.

Desenvolvimento:
Comunicação entre Reactjs, API.Json, entrando em contato com o NodeJs que
obtem a requisição do banco de dados MongoDb para retornar as mesmas ao
cliente.

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 test), Figma(aplicativo on line onde funcionará 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

JavaScript é uma Linguagem de Programação criada por Brendan Eich, a

pedido da empresa Netscape, em meados de 1995, inicialmente, com o nome
Live Script
No início, o JavaScript foi batizado com outro nome: LiveScript. No entanto, a
Netscape não ficou sozinha com o desenvolvimento do JavaScript. A empresa SUN

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

Microsystems interessou-se por ela e entrou de cabeça no desenvolvimento desta

nova linguagem, uma vez que acreditava na ideia inovadora que era o JavaScript.

Inicialmente, o JavaScript tinha a função de validar formulários HTML

O JavaScript, a princípio, foi criado com o objetivo principal de validar formulários

HTML. Na verdade, o JavaScript foi concebido para rodar no servidor. No entanto,
com o passar do tempo isso foi modificado e, hoje, o JavaScript é uma  linguagem
Client-side.

O JavaScript possui uma tipagem mutável

Da mesma forma, o JavaScript foi criado também pensando em ser uma Linguagem
de Programação fraca, pois a sua tipagem é mutável, ou seja, uma variável pode
conter, por exemplo, um valor do tipo float e depois mudar para um valor do tipo
string.
As variáveis do JavaScript são declaradas sem tipo.
Além disso, as variáveis não necessariamente necessitam ser declaradas, além de
serem sempre não tipificadas, ou seja, são declaradas sem tipo.

Nos anos 90, a Microsoft criou o JScript, uma dor de cabeça aos
desenvolvedores WEB

A Microsoft, vendo tudo isso que estava acontecendo com o JavaScript, percebeu
que era uma boa ideia e, em vez de ajudar no desenvolvimento do JavaScript e se
tornar parceira desta linguagem, resolveu seguir um caminho paralelo ao JavaScript
e criou o JScript para rodar somente no Internet Explorer, o que causou uma grande
dor de
Cabeça aos desenvolvedores WEB por volta de 1997.
Como o JScript só rodava no Internet Explorer, a ECMA criou O ECMAScript
Não obstante, ao perceber este problema, uma empresa chamada ECMA
resolveu padronizar a linguagem de modo que pudesse funcionar em todos os
navegadores. Desta ideia, nasceu um padrão chamado ECMA, e a linguagem foi
batizada de ECMAScript.
11
Projeto de Pesquisa – Trabalho de Conclusão de Curso

Atualmente, o ECMAScript adotou o nome JavaScript, por motivos de

marketing

Na verdade, atualmente, todos os programas desenvolvidos em JavaScript são, na

realidade, programas em ECMAScript. No entanto, por motivos de marketing e como
o nome JavaScript já estava muito bem consolidado, o nome permaneceu
JavaScript,
em todos os lugares, como livros, revistas, sites e outros.

O ECMAScript é uma uniformização das linguagens de scripts

ECMAScript é uma linguagem de scripts padronizada, ou seja, uma uniformização

das linguagens de scripts. Isso acontece para que todos os
navegadores consigam interpretar os códigos de scripts de forma idêntica, seja ele o
JavaScript ou o JScript. Além destes, o ActionScript do Flash também é compatível
com ECMAScript .

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..

12
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.
Riordan, Rebecca M. Use a Cabeça! Ajax. Editora Alta Books. 2009.
13
Projeto de Pesquisa – Trabalho de Conclusão de Curso

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 _________

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

__________________________________________________________
Nome completo do orientador (Assinatura)

__________________________________________________________
Nome complete do aluno (Assinatura)

15