CENTRO PAULA SOUZA

ETEC DE EMBU

CURSO TÉCNICO DE DESENVOLVIMENTO DE SISTEMAS

Erick Caique Santos Souza

Estevão Lima dos Santos Alencar

Francielly Espinhosa

Henrique Silva de Andrade

Isaac Martins de Jesus

Lucas Alcântara Rabello

Rosalina Teixeira Oliveira

IDUC: App de tutoriais

Embu das Artes

2023
 Erick Caique Santos Souza

Estevão Lima dos Santos Alencar

Francielly Espinhosa

Henrique Silva de Andrade

Isaac Martins de Jesus

Lucas Alcântara Rabello

Rosalina Teixeira Pereira

IDUC: App de tutoriais

Projeto de Pesquisa apresentado à disciplina

Trabalho de Conclusão de Curso, como requisito
parcial para elaboração da monografia ou projeto
experimental de conclusão do curso de técnico
em Desenvolvimento de Sistemas.

Orientador: Francalino

Embu das Artes

2023
 RESUMO
O Iduc é um aplicativo inovador que visa ajudar pessoas sem experiência em
tecnologia a aprenderem a utilizar aplicativos e seus celulares de forma fácil e intuitiva. Com
uma abordagem passo a passo, o Iduc oferece tutoriais interativos e práticos,
proporcionando um ambiente de aprendizagem amigável. Os usuários do Iduc terão acesso
a uma ampla variedade de tutoriais, abrangendo desde os conceitos básicos até
funcionalidades mais avançadas. Cada tutorial é cuidadosamente elaborado, com instruções
claras e ilustrações úteis, garantindo que até mesmo os iniciantes consigam acompanhar e
entender. Este aplicativo revolucionário busca eliminar a barreira entre as pessoas e a
tecnologia, permitindo que todos possam aproveitar ao máximo seus dispositivos móveis.
Com o Iduc, qualquer um poderá aprender a enviar mensagens, configurar contas de e-mail,
utilizar redes sociais, baixar aplicativos e muito mais.

Palavras-chave: Aplicativo Inovador. Ambiente de Aprendizagem Amigável. Ampla

variedade de tutoriais. Aplicativo Revolucionário.
 ABSTRACT
The Iduc is an innovative application aimed at helping technology novices learn to
use applications and their smartphones through step-by-step tutorials. With a user-friendly
approach, Iduc provides interactive and practical tutorials, creating a friendly learning
environment. Iduc users will have access to a wide range of tutorials, covering everything
from basic concepts to more advanced features. Each tutorial is carefully crafted, with clear
instructions and helpful illustrations, ensuring that even beginners can follow along and
understand. This groundbreaking application aims to bridge the gap between people and
technology, enabling everyone to make the most of their mobile devices. With Iduc, anyone
can learn how to send messages, set up email accounts, use social networks, download
applications, and much more.

Keywords: Innovative Application. User-Friendly Learning Environment. Wide Variety

of Tutorials. Revolutionary Application.
 SUMÁRIO

1. Introdução......................................................................................................................................5
1.1. Objetivo......................................................................................................................................6
1.1.1. Objetivo geral.....................................................................................................................7
1.1.2. Objetivos específicos..........................................................................................................7
1.2. Justificativa.................................................................................................................................7
1.3. Problemática..............................................................................................................................8
1.4. Hipótese.....................................................................................................................................9
1.5. Requisitos.................................................................................................................................10
1.1.1. Requisitos funcionais........................................................................................................11
1.1.2. Requisitos não funcionais.................................................................................................12
METODOLOGIA (a fazer).......................................................................................................................13
2. GRÁFICO DE GANTT(a fazer).........................................................................................................14
3. LINGUAGEM DE DESENVOLVIMENTO...........................................................................................15
3.1. JavaScript..................................................................................................................................16
3.2. React Native(Front-end)...........................................................................................................16
3.3. Node.js(Back-end)....................................................................................................................17
3.4. MySQL......................................................................................................................................18
3.5. CSS............................................................................................................................................18
4. DIAGRAMA DE CASO DE USO...................................................................................................19
5. REVISÃO TEÓRICA.........................................................................................................................20
Espaços vagos*.................................................................................................................................21
*.......................................................................................................................................................21
*.......................................................................................................................................................21
6. DIAGRAMA DE ENTIDADE E RELACIONAMENTO ( DER )...............................................................21
7. PROTOTIPAGEM(a editar).............................................................................................................22
7.1. Tela de login.............................................................................................................................23
7.2. Tela de menu............................................................................................................................23
7.3. Tela das Dúvidas.......................................................................................................................24
7.4. Tela de Configurações..............................................................................................................26
7.5. Tela dos....................................................................................................................................28
7.6. Tela dos....................................................................................................................................31
 7.7. Tela dos....................................................................................................................................32
8. REFERÊNCIAS BIBLIOGRAFICAS (a editar).................................................................................34
9. ANEXOS (a editar).........................................................................................................................35
9.1. Anexo A - Pesquisa de campo...................................................................................................36
9.2. Anexo B - Plano de negócio (canva)..........................................................................................38
9.3. Anexo C – Mapa de Empatia.....................................................................................................39
 4

1. INTRODUÇÃO

O aplicativo Iduc tem como objetivo facilitar a vida do usuário ao reunir os

principais e mais procurados tópicos dos sites de buscas e ajudas, permitindo que o
usuário encontre soluções para suas dúvidas sem precisar vasculhar a internet em

busca de ajuda. O usuário poderá fazer buscas em nosso aplicativo com apenas
alguns toques na tela, priorizando a acessibilidade a aplicação será adaptativa de
acordo com a idade do usuário, assim trazendo um layout de fácil leitura e
compreensão. A motivação que nos levou a desenvolver esse aplicativo foi a
vontade de auxiliar o cidadão leigo em tecnologia a realizar tarefas básicas do dia a
dia através de nossos tutoriais.
 5

1.1. Objetivo

1.1.1. Objetivo geral

Trazer a união de diversos tutoriais de ajuda referentes a tecnologia e demais

dúvidas em um mesmo App, facilitando e otimizando a busca do usuário.

1.1.2. Objetivos específicos

•Desenvolver o conhecimento do usuário em relação à tecnologia digital;

•Ampliar o conhecimento técnico dos usuários em relação a tecnologia;

•Otimizar a busca de tutoriais e veracidade de informações;

•Fornecer tutoriais detalhados sobre o uso de softwares e aplicativos;

•Oferecer dicas e truques para resolver problemas comuns do usuário;

•Disponibilizar vídeos explicativos para demonstrar o uso correto das

funcionalidades de diversos serviços;
 6

1.2. Justificativa

É notável a dificuldade de pessoas com mais idade ou leigas em tecnologia

na resolução de tarefas comuns através de softwares e dispositivos moveis. Onde
este fato as leva a muita desinformação e dificuldade para realizar seus objetivos.

Com o intuito de atender uma grande massa de usuários que desejam

aprender como realizar suas tarefas comuns e seus processos, o projeto proposto
visa dar suporte a essas massas nas atividades relacionadas ao uso do aparelho
smartphone pessoal delas, para que possam utilizar de forma rápida e fácil, fazendo
assim com que estes usuários se tornem cada vez mais independentes.

Com a grande demanda em relação ao uso do aparelho telefônico, ainda mais

com a pandemia da covid-19, onde mais pessoas começaram a se informar e utilizar
cada vez mais tecnologia, muitas pessoas apesar de terem a disposição delas a
internet para procurar como fazer tal coisa, muitas vezes deixa de procurar como
realizar aquele certo processo pelo fato do tal chamado excesso de informação. E
poucas são as opções do usuário para procurar de forma fácil e com uma linguagem
padrão encontrar tutorias para aprender a utilizar mais e melhor a tecnologia, e é aí
que entramos.

Com o intuito de padronizar a maneira como as informações são

disponibilizadas ao usuário o projeto proposto visa ajudar o usuário com qualquer
que seja o problema. O sistema possibilita o usuário a apender e se informar melhor
com tutoriais que vão desde os conceitos básicos até funcionalidades mais
avançadas.
 7

1.3. Problemática

Muitas pessoas ainda hoje possuem dificuldades em algum ou em vários

aspectos tecnológicos, seja por falta de costume com os novos aparelhos e com
suas funcionalidades ou por não saber onde procurar as informações que desejam
saber sobre qualquer assunto, além de muitas vezes terem medo de entrar em
algum site que não seja confiável contraindo um vírus em seus aparelhos, ou
acabarem perdendo os seus dados bancários e/ou pessoais.

E por conta desses problemas muitas pessoas ainda não conseguem

aproveitar os benefícios que a tecnologia traz para nossas vidas, e com isso muitos
momentos inconvenientes e desconfortáveis acontecem nas vidas dos mesmos,
como por exemplo, quando é necessário resolver algum problema bancário, com os
documentos de identificação ou até da habilitação de veículo entre outros, nesses
quais é necessário a locomoção do indivíduo até o local da sede de algum órgão
governamental ou empresa, pra que seja resolvido ou tirado dúvidas sobre algo
especifico, mas então como poderíamos resolver essa situação? E de que forma?
 8

1.4. Hipótese

Com o nosso aplicativo poderíamos facilitar o acesso as informações

necessárias para que o usuário possa resolver os seus problemas de maneira mais
fácil e intuitiva.

Por meio de tutoriais e guias em formato de passo a passo, mostrando em

detalhes cada ação que o usuário deve realizar para resolver o seu problema
independente de qual seja.
 9

1.5. Requisitos

1.1.1. Requisitos funcionais

Acessar Conteúdo: Todo e qualquer usuário do aplicativo poderá pular a

etapa de cadastro e acessar o conteúdo, porém sem as vantagens de ter conteúdo e
sugestão de conteúdo personalizado, não poderá personalizar a interface para
utilização do próprio usuário conforme seu gosto, não poderá avaliar o conteúdo e
existiram outras funções que não poderão ser utilizadas sem cadastro na plataforma.

Efetuar cadastro: A interface de cadastro tem como função realizar a entrada

de dados do usuário dentro do sistema, para permitir que o mesmo faça o login,
sendo assim, será necessário fornecer o seu Email, Nome, Senha e Data de
Nascimento.

Efetuar login: A funcionalidade de login, por sua vez tem como objetivo fazer
com que o usuário através do seu Email e Senha cadastrados anteriormente,
acessar sua conta e ter a possibilidade de utilizar de recursos dentro do aplicativo
exclusivo para quem realizou o cadastro, como o histórico, personalização, e outros
recursos mais úteis.

Manter cadastro: O intuído desta funcionalidade é proporcionar melhor

gerenciamento dos dados cadastrados no sistema, onde todo usuário pode alterar
seus próprios dados, assim, todos irão poder alterar seu Nome, Senha e Data de
Nascimento.

Avaliar conteúdo: Tem como função, certificar que o conteúdo da plataforma

estará atualizado, avaliando e sugerindo edições dentro de suas avaliações.

Criar conteúdo: Tem como função, certificar que teremos muito conteúdo
dentro da plataforma, onde todos os colaboradores e administradores poderão
postar tutoriais para os usuários comuns.

Manter conteúdo: Tem como função, para todos os colaboradores e

administradores poderem editar as informações dos conteúdos garantindo sempre
um conteúdo atualizado.

Manter Usuários: O requisito é responsável por toda a parte de gerir os

usuários.
 10

Manter Colaboradores: O requisito é responsável por toda a parte de gerir

os colaboradores, podendo bloquear colaboradores por exemplo.

1.1.2. Requisitos não funcionais

Desempenho: O aplicativo deve responder de forma rápida e fornecer uma

experiência fluida ao usuário, minimizando tempos de carregamento e atrasos.

Usabilidade: O aplicativo deve ser intuitivo e de fácil navegação, com uma

interface amigável para pessoas leigas em tecnologia. Os tutoriais devem ser
apresentados de forma clara e compreensível.

Segurança: O aplicativo deve garantir a segurança dos dados dos usuários,

protegendo informações pessoais e evitando acesso não autorizado.

Confiabilidade: O aplicativo deve ser confiável, evitando falhas frequentes e

garantindo que os tutoriais estejam sempre acessíveis aos usuários.

Portabilidade: O aplicativo deve ser compatível com diferentes dispositivos

móveis, sistemas operacionais e versões, permitindo que os usuários aprendam a
utilizar seu celular independentemente do modelo ou plataforma.

Manutenção: O código do aplicativo deve ser bem estruturado e

documentado, facilitando futuras atualizações, correções de bugs e melhorias.

Acessibilidade: O aplicativo deve ser acessível para pessoas com

deficiências visuais, auditivas ou motoras, fornecendo recursos adequados, como
suporte a leitores de tela e legendas em vídeos.
 11

Integração: O aplicativo deve permitir a integração com outros aplicativos ou

serviços relevantes, facilitando o compartilhamento de conteúdo ou a sincronização
de dados.
 12

METODOLOGIA (A FAZER)

*
 13

2. GRÁFICO DE GANTT(A FAZER)

*
 14

3. LINGUAGEM DE DESENVOLVIMENTO

3.1. JavaScript

O JavaScript é a principal linguagem do nosso projeto, ela é uma linguagem

de programação que utilizaremos com os frameworks React Native e Node.js, ela é
interpretada, estruturada, de script em alto nível com tipagem dinâmica fraca e
multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das três
principais tecnologias da World Wide Web.

A escolha dessa linguagem foi por conta do nosso aprendizado em sala de

aula e por ela ser a principal linguagem de programação para aplicações.

Figura 1 - Logo JavaScript

Fonte: medium.com (2019)

3.2. React Native(Front-end)

React Native é um framework de desenvolvimento mobile que permite criar

aplicativos nativos para iOS e Android usando a linguagem JavaScript e a biblioteca
React. Com ele, é possível economizar tempo e recursos criando aplicativos para
ambas as plataformas com um único código-base. Ele utiliza uma abordagem de
programação declarativa, permitindo que os desenvolvedores se concentrem mais
na lógica do aplicativo do que na aparência. Além disso, é altamente personalizável,
permitindo que os desenvolvedores usem módulos nativos e componentes de
 15

terceiros para estender as funcionalidades do aplicativo. Em resumo, o React Native

é uma ferramenta poderosa para criar aplicativos móveis nativos com eficiência e
flexibilidade.

Figura 2 - Logo React Native

Fonte: uds.com.br (2022)

3.3. Node.js(Back-end)

Node.js é uma tecnologia que usa JavaScript como linguagem de programação no

desenvolvimento. Ele interpreta e executa os scripts de forma autônoma,
baseada na Maquina Virtual V8, criado pelo Google que foi desenvolvido para o
navegador Chrome. O Node possui o comportamento de Thread única não
bloqueante, Por conta disso o utilizar o node faz com que seu projeto tenha mais
desempenho. O comportamento de um garçon exemplifica como funciona uma
Arquitetura não-bloqueante de Thread única.
 16

Figura 3 - Logo Node.js

3.4. MySQL

MySQL é um sistema de gerenciamento de banco de dados relacional de

código aberto amplamente utilizado em aplicações web. Ele é altamente escalável e
possui recursos avançados de segurança. Além disso, é altamente customizável e
possui uma grande comunidade de desenvolvedores. Em resumo, MySQL é um
sistema de gerenciamento de banco de dados confiável e flexível.

Figura 4 - Logo MySQL

Fonte: devtools.com.br(2021)
 17

3.5. CSS

O css (Cascading Style Sheets) é uma tecnologia voltada para a

programação web utilizada para estilizar e formatar alguma linguagem de marcação
como o JavaScript. Utilizamos essa linguagem por vir integrada dentro da
ferramenta OracleApex.

Figura 5 - Logo Css

Fonte: logospng.org
 18

4. DIAGRAMA DE CASO DE USO

Figura 6 - Diagrama

Fonte: Autoria própria

 19

5. REVISÃO TEÓRICA

Espaços vagos*

*
 20

6. DIAGRAMA DE ENTIDADE E RELACIONAMENTO ( DER )

Figura 7 - Banco de dados do sistema

Fonte: Autoria própria

 21

7. PROTOTIPAGEM(A EDITAR)

7.1. Tela de login

Figura 8 - Login

Fonte: Autoria própria

Figura 9 - Login

Fonte: Autoria própria

 22

7.2. Tela de menu

Figura 10 - Menu

Fonte: Autoria própria

Figura 11 - Menu

Fonte: Autoria própria

 23

7.3. Tela das Dúvidas

Figura 12 - Produtos

Fonte: Autoria própria

Figura 13 - Produtos

Fonte: Autoria própria

 24

Figura 14 – Adicionar Produto

Fonte: Autoria própria

 25

7.4. Tela de Configurações

Figura 15 - Cliente

Fonte: Autoria própria

Figura 16 - Adicionar Cliente

Fonte: Autoria própria

 26

Figura 17 - Cliente

Fonte: Autoria própria

Figura 18 - Histórico do Cliente

Fonte: Autoria própria

 27

7.5. Tela dos...

Figura 19 - Pedidos

Fonte: Autoria própria

Figura 20 – Pedidos

Fonte: Autoria própria

 28

Figura 21 - Visualizar Pedidos

Fonte: Autoria própria

Figura 22 - Adicionar Pedido I

Fonte: Autoria própria

 29

Figura 23 - Adicionar Pedido II

Fonte: Autoria própria

 30

7.6. Tela dos...

Figura 24 - Contas

Fonte: Autoria própria

Figura 25 - Contas

Fonte: Autoria própria

 31

7.7. Tela dos...

Figura 26 - Relatório de Vendas

Fonte: Autoria própria

Figura 27 - Relatório de Vendas I

Fonte: Autoria própria

 32

Figura 28 - Relatório de Vendas II

Fonte: Autoria própria

Figura 29 - Filtro do Relatório de Vendas

Fonte: Autoria própria

 33

8. REFERÊNCIAS BIBLIOGRAFICAS (a editar)

 34

9. ANEXOS (A EDITAR)

9.1. Anexo A - Pesquisa de campo

Figura 30 - 1° Pergunta

Fonte: Autoria própria

Figura 31 - 2° Pergunta

Fonte: Autoria própria

 35

Figura 32 - 3° Pergunta

Fonte: Autoria própria

Figura 33 - 4° Pergunta

Fonte: Autoria própria

 36

Figura 34 - 5° Pergunta

Fonte: Autoria própria

 37

9.2. Anexo B - Plano de negócio (canva)

Figura 35 - Plano de negócio

Fonte: Autoria própria

 38

9.3. Anexo C – Mapa de Empatia

Figura 36 – Mapa de Empatia

Fonte: Autoria própria