00:00:01
Olá muito boa noite e me chamo Felipe
00:00:03
Felipe schafranski sou estudante do
00:00:06
quarto período de análise
00:00:08
desenvolvimento de sistemas na
00:00:09
universidade Positivo e hoje nesse vídeo
00:00:12
venho apresentar fazer apresentação do
00:00:15
nosso projeto né da finalização e de
00:00:17
todo o nosso projeto da matéria de ti
00:00:20
sociedade
00:00:21
e onde basicamente ficou encarregado a
00:00:24
nós é atendermos a empresa amigo né uma
00:00:27
empresa voltada ali à área de marketing
00:00:29
design e design gráfico né Eh criação de
00:00:32
posters posts para Instagram flyers e
00:00:35
tudo toda essa essa essa área mais de
00:00:39
marketing né então basicamente no início
00:00:41
do projeto nós fizemos um levantamento
00:00:43
com a Sônia que foi a responsável da
00:00:46
empresa que que que que que que a gente
00:00:49
teve contato né e assim decidimos que
00:00:52
seria feito mesmo
00:00:54
uma uma interface gráfica né em primeiro
00:00:58
momento o o pedido era um sistema
00:01:00
totalmente completo com integrações até
00:01:02
mesmo com inteligência artificial né mas
00:01:05
depois gente conversando apresentando
00:01:07
todos os poréns todas as os impecilhos
00:01:09
né E todas as dificuldades que ia ter
00:01:12
entregar todo esse projeto aqui que o
00:01:14
pessoal esperava até o final do semestre
00:01:17
a gente acabou ali tendo um acordo mútuo
00:01:20
tanto entre a equipe quanto com a a
00:01:23
empresa com a Sônia né representante e
00:01:26
assim ficou decidido que nós
00:01:28
desenvolveremos apenas a parte visual a
00:01:30
interface a interface do usuário
00:01:33
interface do gráfico do sistema para
00:01:35
Possivelmente se a Sonia quiser se se se
00:01:38
a empresa se amigo quiser e em algum dia
00:01:41
fazer integração com um api com uma API
00:01:43
deles ou com qualquer outro tipo de
00:01:46
sistema qualquer outro tipo de de
00:01:48
ferramenta que traga essas informações
00:01:50
via código eh seria seria possível né
00:01:55
então basicamente fazendo uma uma uma
00:01:57
breve explicação do que nós fizemos
00:02:00
eh a gente desenvolveu uma interface
00:02:03
visual do MIG ui foi o nome que a gente
00:02:05
deu né migo Ui que faz referência a Migo
00:02:08
e user interface né interface de usuário
00:02:11
e ele é um software de gerenciamento de
00:02:14
fluxos de criações de marketing
00:02:15
projetado para ser simples acessível E
00:02:17
altamente funcional n o migo ui ele
00:02:20
permite que os usuários realizem todas
00:02:21
as etapas do processo criativo de forma
00:02:23
intuitiva desde a criação e
00:02:25
acompanhamento de briefings até a
00:02:26
visualização e aprovação de solicitações
00:02:28
do conteúdo o nosso objetivo principal
00:02:31
objetivo da equipe Foi criar uma solução
00:02:32
que proporcionasse uma comunicação
00:02:34
direta e ágil entre as áreas ali da
00:02:36
amigo
00:02:37
né facilitando o fluxo de trabalho
00:02:40
reduzindo os retrabalhos e garantindo
00:02:42
entregas dentro do prazo estipulado sem
00:02:43
comprometer o padrão de qualidade
00:02:45
esperado o mi ui foi pensado para
00:02:47
otimizar processos conectar todas as
00:02:49
partes envolvidas no fluxo criativo e
00:02:51
promover a colaboração eficiência e
00:02:53
alinhamento estratégico nos
00:02:55
gerenciamento das demandas de marketing
00:02:58
né então Então realmente a gente por
00:03:01
mais que a gente não tenha desenvolvido
00:03:02
a parte a parte bruta mesmo a parte
00:03:05
funcional do sistema e nós já pensamos
00:03:07
em todo o fluxo do sistema então nós já
00:03:10
fizemos o nós já pensamos em como esse
00:03:12
sistema funcionaria eh pelo menos a
00:03:14
primeira versão dele né então nós
00:03:16
tivemos ali um total de cinco cinco
00:03:20
funcionalidades
00:03:21
eh Pais vamos dizer assim né cinco
00:03:24
principais funcionalidades dentre elas
00:03:27
algumas sub subrotinas né subf alidades
00:03:30
agora as principais informações que eu
00:03:33
acho interessante apresentar aqui é o
00:03:36
Framework que a gente utilizou a
00:03:38
linguagem de programação basicamente que
00:03:39
a gente utilizou para desenvolver e essa
00:03:42
interface visual
00:03:43
e e alguns outros componentes e formas
00:03:46
que a gente desenvolveu
00:03:48
o essa interface basicamente o principal
00:03:51
o Framework que a gente utilizou né a
00:03:54
linguagem né o que no que que essa
00:03:56
interface ela tá baseada e a gente
00:03:58
utilizou o blazer server que é uma
00:04:00
linguagem propriamente da Microsoft que
00:04:02
permite criar interfaces modernas e
00:04:04
interativas em csharp sem depender do
00:04:07
uso eh eh especificamente do JavaScript
00:04:10
né Hoje é a a a base do desenvolvimento
00:04:14
web é o JavaScript porque ele ele
00:04:17
proporciona
00:04:18
eh questões como eh manipulação de
00:04:21
componente visualização totalmente
00:04:24
moderna né
00:04:25
Eh vou dar um exemplo componentes pulano
00:04:28
né aquela aquela coisa bonita o blaz o
00:04:31
blazer ele disponibiliza tudo isso sem o
00:04:33
uso eh tão tão tão a fundo do JavaScript
00:04:37
claramente algumas coisas não tem como
00:04:38
tem que ser utilizado o JavaScript mas o
00:04:40
blazer ele mata muitas das coisas que a
00:04:42
gente ficaria preso ao
00:04:44
JavaScript utilizando uma linguagem
00:04:47
sólida uma linguagem completa e uma
00:04:50
linguagem da própria Microsoft o que
00:04:52
facilita a integração Possivelmente com
00:04:54
apis em csharp né apis em dnet hoje que
00:04:58
ao lado de Java ali
00:05:00
são as as linguagens com mais com mais
00:05:02
desenvolvimento e mais mais mais mais
00:05:05
demandas né então seria tranquilamente
00:05:08
fácil de de fazer integração com uma API
00:05:10
por exemplo da amigo Inc Sharp
00:05:13
e além desse o Framework principal a
00:05:16
gente utilizou o Bootstrap que o
00:05:19
Bootstrap ele é basicamente um um um
00:05:23
pacote de componentes visuais e que a
00:05:26
gente importa de fora e facilita muito o
00:05:28
desenvolvimento da interface não
00:05:30
precisando a gente manipular e definir
00:05:32
por exemplo cores e posição eh estilo de
00:05:35
botão e cada vez que a gente for criar
00:05:38
um componente assim esses componentes
00:05:40
repetitivos a gente utilizando Bootstrap
00:05:41
a gente facilita e minimiza e padroniza
00:05:44
na verdade
00:05:45
eh todos eles então basicamente a gente
00:05:48
usou um template gratuito então o amigo
00:05:50
não vai precisar se preocupar com essa
00:05:51
questão de
00:05:53
licenciamento né é um Bootstrap
00:05:55
totalmente gratuito e também fácil a
00:05:57
documentação é simples é vai est no no
00:06:00
no no arquivo no arquivo texto né da
00:06:05
documentação do projeto eh o link da
00:06:07
documentação desse Bootstrap e também
00:06:09
dos principais componentes que a gente
00:06:11
utilizou
00:06:11
eh um outro tópico que a gente se baseou
00:06:15
bastante para desenvolver é a facilidade
00:06:17
que seria de fazer integrações com apis
00:06:19
futuramente como eu já comentei no
00:06:21
início né as conexões com dados e
00:06:23
serviços externos eh utilizando essa
00:06:26
interface visual a Sonia o pessoal da
00:06:28
amigo não vai ter problema fazer nenhuma
00:06:30
integração alguns métodos já estão
00:06:32
prontos então basicamente os métodos a
00:06:34
gente só precisaria consumir da api e
00:06:36
depois montar os objetos né montar
00:06:39
trazer esses dados ali pra interface
00:06:41
visual né Toda a parte de jogar para o
00:06:44
Fronte né mostrar isso já tá pronta a
00:06:47
gente só precisaria receber esses dados
00:06:49
e para finalizar a gente utilizou o
00:06:52
Clean code como base do nosso projeto né
00:06:55
porque a gente visando que Possivelmente
00:06:57
outras pessoas vão vão pegar esse
00:06:59
projeto vamos pegar essa essa essa
00:07:00
documentação vão ler vão mexer nesse
00:07:03
sistema em si e a gente focou bastante
00:07:05
no Clean code para não se tornar um
00:07:07
código maçante um código complexo de se
00:07:09
entender e de se compreender né então
00:07:12
aqui vamos para o que interessa vamos
00:07:14
pra apresentação do sistema aqui a gente
00:07:17
tem a parte de login e anteriormente já
00:07:19
foi apresentado pro para amigo pro
00:07:21
pessoal da Sônia mas a gente já vou
00:07:22
fazer toda apresentação novamente um
00:07:24
pouco mais resumida né aqui a gente
00:07:27
teria a tela de login onde se sim teria
00:07:29
integração com uma API de controle de
00:07:31
acesso Possivelmente que faria a gestão
00:07:33
de de usuários e senhas e tudo mais e
00:07:35
até mesmo é Protocolos de segurança como
00:07:39
autenticação de dois fatores capt e tudo
00:07:42
mais essa seria a tela inicial
00:07:45
anteriormente tínhamos apenas a logo da
00:07:47
amigo aqui fizemos um contato com a
00:07:49
Sônia conversamos um pouco ela disse que
00:07:51
talvez essa logo não seria tão
00:07:53
interessante ela pediu Talvez um
00:07:55
possível dashboard então a gente
00:07:56
conseguiu colocar aqui esse esse
00:07:58
dashboard ele mostra as solicitações
00:08:01
entregues as solicitações recusadas as
00:08:03
solicitações em andamento hoje a
00:08:05
solicitações entregues dos últimos 7
00:08:06
dias solicitações recusadas dos últimos
00:08:08
S Dias solicitações em andamentos de
00:08:11
hoje e solicitações para entregar hoje
00:08:13
aí as solicitações para integrar para
00:08:15
entregar nós teríamos um detalhamento
00:08:17
aqui né de quem era o cliente qual que
00:08:20
era o título para ter uma base do que
00:08:21
que seria essa solicitação a data a data
00:08:25
da da da da criação e o status que essa
00:08:28
solicitação tá né e a data para entrega
00:08:31
que no caso aqui sempre vai ser a data
00:08:33
de hoje né aqui a gente colocou dados
00:08:35
totalmente superficiais Então se a gente
00:08:37
se eu mostrar aqui são Dados totalmente
00:08:39
superficiais para apenas ter uma
00:08:41
visualização facilitada aqui então a
00:08:43
gente teria esses status aqui E esse
00:08:45
mini dashboard aqui todos os métodos
00:08:47
desse dashboard deixa eu mostrar aqui
00:08:49
eles estão prontos seriam somente
00:08:51
consumir api e retornar né claramente
00:08:55
não vai dar para utilizar
00:08:56
especificamente Isso aqui vai ter coisa
00:08:58
a mais vai ter coisa que vai ter que ser
00:09:00
retirada numa possível integração mas
00:09:02
pelo menos a base do do do do dashboard
00:09:05
está aqui e a parte visual também está
00:09:07
consumindo todos esses dados né fazer
00:09:09
uma uma alteração de consumir esses
00:09:11
dados de outro lugar não vai ser uma
00:09:13
algo impossível então aqui nós
00:09:15
entraríamos na parte de solicitação onde
00:09:17
todas as nossas telas a gente segue um
00:09:19
padrão de ter um filtro ter uma index Na
00:09:21
verdade tem uma tela mãe primeiramente
00:09:23
mostrando toda uma tabela com com por
00:09:26
exemplo com as solicitações com as
00:09:28
criações com as aprovações
00:09:29
com os clientes e com os usuários né
00:09:32
então nós temos um filtro de acordo com
00:09:34
a tela que a gente tá utilizando com o
00:09:36
objeto com a entidade que a gente tá
00:09:37
usando que nesse caso é a solicitação
00:09:39
nós teríamos um um preview aqui né uma
00:09:42
pré-visualização Da solicitação nós
00:09:44
poderíamos ver essa os dados dessa
00:09:46
solicitação e da mesma forma nós
00:09:48
poderíamos criar uma nova solicitação né
00:09:51
todos esses campos Aqui foram
00:09:52
homologados e passados anteriormente
00:09:54
pela Sônia no vídeo de apresentação dela
00:09:56
então os dados são os mesmos que ela
00:09:59
passou
00:10:00
só mudamos a questão visual do template
00:10:02
que ela tinha passado né então após as a
00:10:06
solicitação nós teremos o segundo passo
00:10:08
passo do fluxo que são as novas criações
00:10:09
né as novas criações que que são o
00:10:12
processo de criação mesmo então uma
00:10:14
solicitação assim que ela é aprovada
00:10:17
basicamente ela já vem para criação né
00:10:20
quando ela visualiza Essa é a tela aqui
00:10:22
a tela também copiada e o template
00:10:24
totalmente retirado da da da solação da
00:10:29
Sonia então nós teremos aqui todo o
00:10:31
briefing Da solicitação que foi feito
00:10:34
anteriormente aqui nós teremos uma parte
00:10:37
onde a gente I fazer faria o upload do
00:10:39
Design então aqui nós faríamos o upload
00:10:42
né e possivelmente se se quiser fazer
00:10:45
uma integração com a com alguma
00:10:46
Inteligência Artificial poderia também
00:10:48
através desse botão né então nós teremos
00:10:51
aqui a visualização do do do preview que
00:10:53
tá do do do Design que tá sendo
00:10:56
importado e a partir do momento que
00:10:58
fosse importado
00:11:00
nós teremos a visualização aqui nesse
00:11:01
template de celular nesse template de
00:11:03
Instagram que
00:11:05
foi um dos dos Tópicos que foi
00:11:07
apresentado pela Sônia assim como a
00:11:10
legenda n a legenda que
00:11:13
seria que tá aqui embaixo né que foi que
00:11:16
foi definida anteriormente que seria
00:11:19
gerada aqui embaixo basicamente aqui
00:11:21
enviaria para aprovação a ação foi
00:11:24
realizada com sucesso então basicamente
00:11:26
essa criação já estaria nessa tela
00:11:29
aprovação né onde a pessoa responsável
00:11:31
por aprovar as criações poderia ver toda
00:11:34
o a solicitação o briefing Da
00:11:36
solicitação e o design a legenda e de
00:11:39
acordo com com com a análise dela ela
00:11:43
aprovaria recusaria ou devolveria né
00:11:47
recusaria esse projeto essa solicitação
00:11:49
essa criação na verdade seria descartada
00:11:51
teria que haver o o desenvolvimento de
00:11:53
uma nova e o devolver apenas alguma
00:11:55
modificação Possivelmente né então nessa
00:11:58
nessas do nesses dois dois tópicos a
00:12:00
gente coloca um feedback então na parte
00:12:02
de devolver ele há um feedback e na
00:12:04
parte de recusa também há um feedback na
00:12:06
parte de aprovar ele Seria somente
00:12:08
aprovado e essa criação essa solicitação
00:12:11
já estaria finalizada e pronta para ser
00:12:13
entregue ao cliente aqui é um pouco das
00:12:16
criações retornadas enquando então
00:12:18
quando uma criação for devolvida ou
00:12:20
recusada a gente tem uma
00:12:22
pré-visualização dela aqui e poderíamos
00:12:24
consultar e ver o motivo de Porque ela
00:12:27
foi foi recusada né aqui como diz as
00:12:30
cores não oraram muito bem Tente Outra
00:12:32
paleta né então clicando aqui em cima do
00:12:34
status ele mostraria isso aqui beleza aí
00:12:38
a parte de cliente nós teremos a parte
00:12:40
de cliente onde nós primeiramente
00:12:42
informar o nome um e-mail colocar aqui
00:12:47
[Música]
00:12:49
@gmail e um telefone
00:12:52
celular né enviaríamos escolheríamos
00:12:55
entre pessoa física ou jurídica se fosse
00:12:57
pessoa física vai pedir o CPF a data de
00:13:00
nascimento e o endereço
00:13:03
né E se for uma pessoa jurídica ele pede
00:13:07
o CNPJ razão social nome fantasia e
00:13:10
inscrição estadual e também um endereço
00:13:12
né porque o cliente ele pode ser tanto
00:13:15
uma pessoa jurídica quanto uma pessoa
00:13:17
física e a parte do usuário não seria
00:13:19
uma parte seria a parte mais fácil que
00:13:21
seria basicamente um nome completo um
00:13:23
código de identificação uma matrícula
00:13:25
Possivelmente uma senha e uma função né
00:13:28
só varia esse usuário esse seria o nosso
00:13:30
basicamente o nosso controle de acesso
00:13:32
obviamente posteriormente Caso for
00:13:35
integrado uma API de backend e essa
00:13:37
parte de gerenciamento de usuários com
00:13:39
certeza vai ser alterada né porque
00:13:41
quando você faz o desenvolvimento de um
00:13:43
controle de acesso um controle de
00:13:44
usuários é você realmente um nível de
00:13:47
segurança é um pouco maior então a parte
00:13:49
de redefinição de senha a parte de
00:13:50
exclusão tudo haveria logs tudo haveria
00:13:52
motivo né então isso Possivelmente seria
00:13:55
mudado mas o principal template
00:13:59
focando mais na parte de de código né só
00:14:02
explicando aqui o código por mais que
00:14:04
ele pareça ter bastante arquivos a parte
00:14:06
visual mesmo a parte da interface
00:14:08
gráfica
00:14:09
eh que nós desenvolvemos ela se
00:14:12
concentra basicamente em uma pasta que é
00:14:14
a pasta pages né então dentro da pasta
00:14:16
pages nós temos cinco pastas que são as
00:14:19
nossas rotinas todas essas rotinas estão
00:14:22
muito bem separadas muito bem
00:14:24
organizadas então todas elas nós temos
00:14:26
uma tela principal uma um arquivo
00:14:28
princip que é a index que é aquela tela
00:14:30
principal quando você acessa e dentro
00:14:32
dela os componentes por exemplo na de
00:14:35
criação de usuários nós temos uma modal
00:14:37
que é aquela telinha que abre uma modal
00:14:39
de editar uma modal de excluir uma modal
00:14:41
de criar né Tudo bem organizado Aqui nós
00:14:44
temos as nossas índex que é aonde é o
00:14:46
nosso dashboard então no dashboard a
00:14:48
gente tem todos os métodos para
00:14:51
possíveis integrações com as apis tudo
00:14:52
certinho Basta apenas fazer a coleta dos
00:14:55
dados e mostrar no nosso Fronte que nós
00:14:57
já estruturamos aqui na pasta ww root é
00:15:00
onde na dentro dela tem a pasta CSS e
00:15:03
dentro dela temos os três arquivos que
00:15:05
se concentram o Bootstrap que eu
00:15:06
expliquei no início né que que é
00:15:10
basicamente o padrão visual que nós
00:15:11
utilizamos no sistema eh o código está
00:15:14
muito simples o código está muito fácil
00:15:16
de ler Então não é não vai ser algo
00:15:18
complexo nós nós tentamos e enxuta o
00:15:21
máximo deixar o mais simples possível
00:15:23
para qualquer pessoa né com com uma
00:15:27
noção consiga fazer uma uma possível
00:15:29
integração e até mesmo consiga melhorar
00:15:31
para amigo né o nosso objetivo realmente
00:15:34
foi foi foi buscar ajudar foi buscar
00:15:36
melhorar
00:15:37
eh o esse sistema né e fazer acontecer
00:15:41
pelo menos a parte visual né para ter um
00:15:44
um um início nesse sistema nesse sistema
00:15:47
que Possivelmente pode se tornar um
00:15:49
grande sistema né um grande sistema de
00:15:50
gestão de de fluxos né
00:15:53
de sistema de de workflow basicamente
00:15:59
bom acredito que é isso
00:16:01
e esse projeto o nosso objetivo foi
00:16:04
fazer uma interface visual bem simples
00:16:06
bem compreensível e muito fácil de se
00:16:09
mexer posteriormente caso alguém queira
00:16:11
dar alguém precise da
00:16:14
manutenção né nosso a gente trabalhou
00:16:17
muito na na questão de pensando em como
00:16:19
como um um um funcionário da amigo uma
00:16:22
pessoa um usuário da da amigo né veria
00:16:25
esse sistema né como um designer veria a
00:16:28
parte da
00:16:29
da da criação como que uma um
00:16:32
coordenador um supervisor veria a parte
00:16:33
da aprovação né a parte dos dashboards a
00:16:37
gente pensou em algo muito simples algo
00:16:39
o mais eh e Tranquilo possível né sem
00:16:45
deixar de lado a qualidade do código e
00:16:48
a a comunicação entre todas as
00:16:51
funcionalidades do sistema todos os
00:16:53
dados todas as telas todos os
00:16:55
componentes também né E também sem
00:16:57
perder a a qualidade visual do sistema
00:17:01
em si acredito que é isso é só dando um
00:17:06
um um feedback dos participantes aqui e
00:17:10
eu sou o Felipe schafranski mas também
00:17:12
junto comigo tivemos mais nove nove nove
00:17:14
alunos que que estiveram envolvidos
00:17:16
nesse projeto o Gabriel Zanela Gabriele
00:17:18
Bonato João Pedro Luan Henrique o Luiz
00:17:21
Gustavo o Luca o Brian o Gabriel Souza
00:17:24
dessa vez e o Marcelo né todos nós 10
00:17:28
integrantes estivemos envolvidos nesse
00:17:30
projeto e trabalhando nesse semestre
00:17:32
para entregar eh o máximo que nós
00:17:35
conseguimos com todo o nosso
00:17:36
conhecimento até agora na faculdade e
00:17:39
acredito que espero na verdade que tenha
00:17:42
atendido
00:17:43
a a o objetivo por mais que não 100% mas
00:17:48
um pouco né que isso possa ajudar que
00:17:50
isso possa dar pelo menos uma luz uma
00:17:52
ideia e que pode possa ser de grande de
00:17:55
grande contribuição ali para para amigo
00:17:57
paraa empresa e para você Sônia Muito
00:18:00
obrigado e eu acho que é isso
