Você está na página 1de 7

Relatório de Estágio do Curso de Engenharia da

Computação
Letícia Colombo Cardozo
Faculdade SATC - Rua Pascoal Meller, 73 - Bairro Universitário - CEP 88805-380 - CP 232

Resumo  Este documento apresenta as atividades II. FUNDAMENTAÇÃO TEÓRICA


desenvolvidas durante o período de estágio obrigatório do
curso de Engenharia da Computação na área de A. HTML e CSS
desenvolvimento WEB. As atividades descritas foram
desenvolvidas no setor de informática da Associação
Independente do conteúdo que os documentos disponíveis
Beneficente da Indústria Carbonífera de Santa Catarina
(SATC), uma instituição educacional desde o nível infantil até
na Internet abordam, eles são formados através de uma
pós-graduação na cidade de Criciúma - SC. linguagem de marcação, que serve para adicionar marcas
com algum significado a um texto, conhecida como HTML
(HyperText Markup Language). [1]
Palavras-chave  Estágio, Desenvolvimento WEB, Banco de
Navegar através de hipertexto é umas das funcionalidades
dados. da web, Theodore Nelson criou o termo hipertexto, ou
I. INTRODUÇÃO hypertext, “(...) para denominar a forma de escrita/leitura
não linear. Pode ser entendido como uma espécie de texto
Criciúma enfrentava um problema na década de 1950 onde alguns trechos se intercalam com referências a outros
caracterizado pela falta de mão de obra qualificada nas textos” [1]
minas de carvão juntamente com o cenário político social, A Figura 1 representa a estrutura básica de uma página
que, sem o apoio necessário do governo as minas sentiam- HTML que, de acordo com a referência [1], ao salvar o
se impotentes por poder oferecer pouco para contornar os arquivo com a extensão *.html e rodar no navegador, o
problemas sociais provenientes da instabilidade da época. mesmo se encarrega de interpretar as tags do arquivo que
Diante disso, no dia 2 de maio de 1959 a Indústria são formadas por um comando escrito entre os símbolos de
Carbonífera de Santa Catarina teve iniciativa de fundar uma maior e menor [2], que nesse caso são: <html>, <head>,
escola técnica focada em preparar mão de obra qualificada <title> e <body>.
e especializada para as minas da região, assim foi fundada a
SATC, Sociedade de Assistência aos Trabalhadores do
Carvão.
Atualmente, a SATC é chamada de Associação
Beneficente da Indústria Carbonífera de Santa Catarina e é
estruturada em Colégio SATC, composto pela educação
infantil, ensinos fundamental, médio e técnico, pós-técnico
e ensino técnico à distância; Faculdade SATC, composta
pelos cursos de graduação, pós-graduação e mestrado;
Cursos Livres SATC, que consiste em disponibilizar cursos Figura 1- Estrutura básica de uma página HTML (Autor, 2017).
de rápida duração que capacite os trabalhadores da
indústria; e o Centro Tecnológico de Carvão Limpo O arquivo HTML é interpretado pelo navegador sem a
(CTCL), que reúne a pesquisa e prestação de serviços. necessidade de compilação e seu conteúdo é exibido para o
O setor de informática da SATC é responsável pelo usuário como na Figura 2. [2]
desenvolvimento do site e dos sistemas internos da
instituição. Atualmente é subdividido em dois setores
menores onde um é encarregado das demandas do sistema
desktop e o outro dos sistemas web.
Os sistemas web, setor aonde foi cumprido o período de
estágio é responsável por atender toda a instituição, desde o
Colégio SATC até o CTCL. Atuar no setor de informática
consiste em dar suporte aos usuários, que são os próprios
colaboradores e alunos, analisar e desenvolver novos
sistemas ou realizar melhorias daqueles que já existem.
Figura 4 - Estrutura básica CSS (Autor, 2017)

Estre trecho de código representa uma regra que


especifica a cor dos parágrafos como vermelha onde o uso
do ‘p’ especifica que o estilo será atribuído aos parágrafos,
a propriedade alterada será a ‘color’, nesse caso, para a cor
vermelha, representada por ‘red’. [10]
Após construir e estilizar a página é necessário fazer com
Figura 2 - Página HTML no navegador (Autor, 2017). que ela se comporte de determinada forma conforme o
usuário a está utilizando, esse controle é feito por meio da
Por não ter necessidade de compilação, os arquivos linguagem JavaScript. [2]
*.html não precisam ser desenvolvidos em uma IDE
(Integrated Development Environment), ou, ambiente de
B. JavaScript
desenvolvimento integrado, mas sim num editor de texto
simples como o que vem instalado no sistema operacional.
A linguagem JavaScript é considerada uma linguagem
Apesar de parecer simples, existem algumas regras que
fácil até para aqueles que não tem muita experiência com
precisam ser seguidas para que o navegador interprete o
programação, mas também é considerada excêntrica porque
documento como um arquivo HTML além da sua extensão,
com ela é capaz de construir um software que foi
uma destas regras é que o mesmo deve começar com a tag
desenvolvido utilizando conceitos muito avançados de
<html> que indica que o arquivo está nessa linguagem. [2]
C/C++, por exemplo, conhecendo não muito dela. [11]
Cada elemento que se deseja colocar na página possui
É importante citar que a linguagem JavaScript não tem
uma tag específica, por exemplo, o título da janela deve
relação com a linguagem Java e é considerada de alto nível
estar escrito entre a tag <title>TÍTULO</title> e os
conveniente com programação orientada a objetos, além de
parágrafos entre a tag <p>Parágrafo</p>. Depois de
ser dinâmica. [2]
interpretadas pelo navegador as tags mencionadas se
Muito se fala que esta linguagem é considerada uma
comportam como na Figura 3. [2]
linguagem interpretada, que é quando o código é processado
cada vez que a aplicação roda, mas ela é considerada uma
linguagem compilada pois no momento em que é dado o
comando para rodar a aplicação o seu código é compilado
antes. [11]
Assim como em HTML e CSS, para programar em
JavaScript não é necessário uma IDE em específico, apenas
um editor de texto comum e sua sintaxe pode ser inserida
no próprio arquivo HTML entre a tag <script
type="text/javascript"></script> ou o arquivo com a
extensão *.js pode ser importado também dentro do código
Figura 3 - Representação do título e parágrafo [2]
HTML. [2]
O HTML por si só é responsável por encaixar cada Desde sua criação por volta de 1995 a linguagem
elemento na página de forma básica, o que as tornam muito JavaScript vem evoluindo de tal maneira que novos
parecidas. O CSS (Cascading Style Sheets) surgiu para dar frameworks são criados muito rapidamente e dentre eles
um estilo a estas páginas, sendo possível definir cor, posição pode-se citar o AngularJS. [12]
e tamanho, por exemplo, de cada elemento contido nelas. O AngularJS atualmente é mantido pela Google e é
Pode-se explicar o funcionamento do CSS fazendo uma considerado um framework bastante poderoso devido as
analogia com uma casa, por exemplo, onde as cortinas do suas funcionalidades e particularidades. Uma das
quarto de hóspedes serão azuis, nesse sentido o local é o particularidades que tornam estre framework ser o que ele
quarto, como propriedade deste local são as cortinas e um é, é ele se comportar como uma extensão do arquivo HTML
estilo a ser aplicado a estas propriedades é a cor azul. [10] por meio de diretivas. [12]
O estilo da página pode ser incorporado a ela através do Esse conceito é conhecido como DataBind e um exemplo
uso da tag <style type=”text/css”></style> dentro do disso pode ser visto na Figura 5.
elemento <head> ou então importando o arquivo *.css no
código HTML e tem sua estrutura básica como na Figura 4.
[10]
 A classe de controle não deve manipular registro
do banco de dados pois esta é uma função para a
classe de modelo;
 A classe de visualização não deve ter em seus
trechos regras de negócio e nem interações com os
modelos pois isso é responsabilidade da classe de
controle. [13]
O protocolo HTTP é a base sobre a qual a Web é
construída, onde cada transação consiste em uma requisição
Figura 5 - Trecho de código HTML usando AngularJS. [12] e uma resposta, ou seja, um request e response. Ao fazer
uma requisição para o servidor existem muitas informações
Neste trecho de código o AngularJS está sendo usado para sendo transportadas que não são mostradas explicitamente
ligar a caixa de texto da página, <input>, com o código aos usuários. É a partir deste protocolo que são feitas as
Javascript por meio do ng-model, que seta a variável requisições para o servidor, também chamado, neste caso,
yourName para o que for digitado na caixa de texto de Web Service. [3]
instantaneamente, pois este é um conceito dinâmico, e a Os Web Services servem para a comunicação entre
mesma é exibida na página quando colocada entre as chaves aplicações, além de que “permite invocar ou reutilizar um
{{yourName}}. [12] serviço sem a necessidade de conhecer a plataforma ou
linguagem de programação usada na sua construção”. [4]
C. PHP Existe um grande número de tecnologias disponíveis
quando se fala em desenvolvimento web, duas delas são o
A linguagem PHP teve sua primeira versão lançada em REST e o SOAP. As duas possuem vantagens e
1994, no início significava Personal Home Page Tools, e desvantagens, ficando a critério do desenvolvedor escolher
era formada por um conjunto de scripts em linguagem C qual usar em cada caso. Atualmente uma grande parte dos
com a finalidade de criar páginas dinâmicas que desenvolvedores tem escolhido utilizar REST. Esta
monitoravam o acesso a uma página da Internet do criador tecnologia faz uso de um padrão chamado URI ao qual faz
da linguagem. [13] uma chamada para um serviço web como em:
Ao longo dos anos o PHP foi se desenvolvendo e se http://www.site.com /programa/metodo?Parâmetros=xx.
consolidando como uma das linguagens de programação [5]
orientada a objetos que mais cresce no mundo pois estima- Além disso, os clientes e servidores, neste caso, podem ser
se que 80% dos servidores web existentes o utilizam. [13] desenvolvidos independentes um do outro, sendo que os
O arquivo php tem sua extensão como *.php e seu código clientes não se preocupam com o armazenamento dos
deve sempre iniciar com <?php. Além disso recomenda-se dados, pois eles devem ficar no servidor. E os servidores,
utilizar o PHP juntamente com o conceito MVC (Model, como não se preocupam com a interface ou estado do
View, Controller), que é um design pattern que serve para usuário, tendem a ser mais simples e escaláveis. Apesar de
organizar seus arquivos de forma que cada arquivo é faltar padrões para esta tecnologia, ela é considerada uma
responsável por alguma coisa. A Figura 6 mostra como abordagem arquitetural extremamente acessível e, de
funciona o padrão MVC. [13] acordo com o autor, funciona bem em situações em que há
limitação de recursos e de largura de banda, operações
totalmente sem estrado, como CRUDs e situações que
exigem cache. [6]
O SOAP, em comparação com o REST, é considerado um
padrão da indústria contendo protocolos bem definidos e um
conjunto de regras bem estabelecidas. Tem como base o
XML, e o uso de um método de transporte genérico, ou seja,
ao contrário do REST, que só faz requisições através do
protocolo HTTP/HTTPS, o SOAP é capaz de utilizar
qualquer meio de transporte existente para fazer sua
requisição. [5]
Figura 6 - Modelo MVC [13]
O SOAP funciona a partir de um service provider, um
Quando se trabalha com este tipo de modelo, deve-se ter service registry e um service consumer. O service provider
em mente que algumas regras tem que ser seguidas, como é o que aceita a requisição do cliente e executa, o service
por exemplo: registry pode ser um aplicativo, serviço ou módulo de um
 A classe de modelo, ou model, não pode exibir software que faz a requisição do serviço e o service
mensagens aos usuários ou ter trechos de códigos consumer é responsável por localizar a descrição do serviço
HTML, isto é responsabilidade da camada de no registro e interagir com o serviço. Os autores
visualização; complementam que essa comunicação é baseada no
protocolo XML. [7]
O SOAP pode ser considerado uma ótima solução quando  Relacionamento tipo dependência: É quando uma
se faz necessário o processamento e chamada assíncronos, entidade do tipo forte é relacionada com uma
contratos formais e operações stateful. Como cada aplicação entidade do tipo fraca que seja dependente dela.
é construída com uma finalidade diferente, a tecnologia a  Relacionamento tipo associativo: Este tipo de
ser utilizada fica a critério do programador. [5] relacionamento acontece quando uma nova
entidade é gerada a partir do relacionamento de
D. Banco de dados duas ou mais entidades conforme a Figura 7 onde
a entidade “ALOCACAO” surgiu a partir da
Um banco de dados pode ser definido como uma coleção associação entre as tabelas “PROJETO” e
de dados armazenados e organizados para atender as “PROFISSIONAL”.
necessidades de seus usuários e, além disso, podem ser
classificados em dois modelos: relacional e não relacional.
O primeiro tem como principal característica a
possibilidade de relacionar várias tabelas, evitando assim,
redundância dos dados enquanto o no segundo não existe Figura 7 - Relacionamento do tipo associativo [8]
esquemas de tabelas. [8]
Nos bancos relacionais, um registro é um conjunto desses  Relacionamento tipo categoria: São classificadas
dados, podendo ser visualizado como uma linha de qualquer neste tipo de relacionamento quando existe uma
uma das tabelas onde cada coluna corresponde a um atributo superclasse, chamada de entidade primária, se
diferente daquele registro, podendo ser melhor visualizado relacionando com uma subclasse, onde a primeira
na Tabela 1 onde a primeira coluna é um identificador único contém informações comuns para todas as
e sequencial, conhecido como chave primária e as colunas categorias e a segunda informações específicas de
nome, idade e nome da mãe. [9] cada categoria. Um exemplo é a entidade
“EMPREGADOS”, nela pode conter informações
Código Nome Idade Nome da mãe referentes aos motoristas e as secretárias, o
1 Julia 20 Maria motorista deve possuir registro de sua CNH
2 Carlos 25 Luciana enquanto no registro da secretária precisa ser
3 Marcos 22 Carmem informado quais os idiomas ela fala, assim, os
Tabela 1 - Exemplo de tabela do banco de dados (Autor, 2017) dados comuns a eles como nome e CPF são
guardados na superclasse enquanto que as
Essas tabelas são chamadas de entidades e podem ser informações específicas de cada um são
classificadas em três tipos: [8] armazenados nas subclasses.
 Entidade primária (ou forte): Ela tem essa  Relacionamento tipo normal: Este tipo de
classificação quando para formar seu conceito ela relacionamento acontece quando duas entidades
não tenha dependência de nenhuma outra entidade fortes, ou seja, que não dependam uma da outra, se
e contenha os dados que são considerados relacionam entre si.
fundamentais para a ocorrência dos processos do
negócio em questão como, por exemplo, uma No modelo relacional, o esquema da entidades
entidade “ALUNOS” contendo os dados de cada relacionadas entre si formam o diagrama de relacionamento
aluno de uma escola. (DER) que pode ser visto na Figura 8.
 Entidade dependente (ou fraca): Ao contrário da
entidade primária as tabelas deste tipo são
consideradas fracas por dependerem da existência
de uma outra única entidade, um exemplo deste
caso é a entidade de “NOTAS” que dependem
exclusivamente da entidade “ALUNOS” para
saber a quem pertence a nota.
 Entidade associativa: Esta classificação é usada
para aquelas entidades que dependem de duas ou
mais entidades como por exemplo a entidade
“PROFESSOR_DISCIPLINA” que para
relacionar as disciplinas que o professor ministra
precisa das entidades “PROFESSORES” e
“DISCIPLINAS”.

Além de serem classificadas quanto ao seu tipo, o


relacionamento entre elas pode ser classificado em: [8]
Figura 8 - Diagrama de relacionamento [8]
É a partir do diagrama de relacionamento que o banco de e gera um certificado de calibração de cada um. A tela de
dados é gerado, dando início a base da aplicação a ser cadastro dos instrumentos do cliente, pode ser vista na
desenvolvida. É imprescindível a presença desta Figura 10 e o certificado de calibração gerado na Figura 11.
modelagem para manter o controle do funcionamento do
software. [8]

III. ATIVIDADES DESENVOLVIDAS

As atividades desenvolvidas durante o período de estágio


são o desenvolvimento de sistemas em linguagens WEB
além de auxiliar na análise e projeto de novos sistemas e
funcionalidades conforme a demanda da instituição. A
modelagem e manutenção de banco de incluindo criação de
triggers e funções utilizando a linguagem SQL também é
uma das atividades a ser realizada bem como prestar suporte
aos usuários dos sistemas já existentes e apresentar aos Figura 10 - Tela de cadastro de instrumentos (Autor, 2017)
envolvidos os novos projetos depois de implementados.

A. Desenvolvimento de sistemas em linguagens WEB

Essa é a principal atividade desenvolvida durante o


período de estágio. Contemplando toda a instituição, a
Figura 9 mostra a tela de acesso aos portais, desde os alunos
até os fornecedores.

Figura 9 - Tela de acesso aos sistemas WEB da instituição (Autor, 2017).

O setor de desenvolvimento WEB é o responsável por


desenvolver e dar manutenção para todos estes portais que
são: portal do aluno e responsável, onde ficam as Figura 11 - Certificado de calibração (Autor, 2017)
informações escolares de cada aluno como notas e
chamadas, por exemplo; portal do professor, que é onde são Esta atividade pode ser facilmente relacionada com a
feitas as chamadas, postagens de notas e materiais para os disciplina de tecnologias WEB do curso pois toda a ementa
alunos acessarem, dentre outras atividades disponíveis; é utilizada para desempenhá-la, desde os mais básicos
portal do colaborador, que é onde todo o colaborador da comandos de HTML aprendidos até a utilização do
instituição deve entrar para acessar suas informações framework AngularJS, envolvendo toda a parte de front-
cadastrais, folha de pagamento e também desempenhar suas end, porém o desenvolvimento do back-end foi pouco visto
atividades conforme seu setor; portal do fornecedor, onde durante a disciplina, sendo necessário estudo durante o
existe a interação entre os fornecedores da SATC e o setor estágio para o desenvolvimento das atividades necessárias.
de compras e portal do cliente, que é onde os clientes tem Como é uma equipe composta por vários membros, o
acesso a todos os seus serviços prestados pela instituição controle das alterações é feito por meio do Git, onde as
como notas fiscais e certificados. alterações feitas são enviadas da máquina local para o
Além disso, existe um outro sistema, também web, servidor do setor do desenvolvimento por meio de linhas de
desenvolvido durante o período de estágio e apenas para um comando, como visto na Figura 12.
laboratório da instituição. Este sistema é utilizado pelo
LAMETRO, Laboratório de metrologia da SATC, onde tem
como função calibrar diferentes instrumentos de diversos
clientes. Esse sistema auxilia no controle da entrada e saída
destes instrumentos no laboratório bem como faz o cálculo
Figura 14 - Sistema do laboratório em Excel (Autor, 2017)
Figura 12 - Controle de versão (Autor, 2017)
A disciplina de Engenharia de Software I e II tem relação
Todas as alterações enviadas para o servidor são direta com essa atividade que consiste em analisar a real
registradas e podem ser consultadas por meio de um necessidade dos usuários quando existe a solicitação de
software chamado Git Extensions que mostra quais os novos sistemas ou funcionalidades, bem como a
arquivos e quais parte deles foram alterados e quem os organização do desenvolvimento do projeto em questão. Em
alterou, visto na Figura 13. partes da disciplina foi aprendido a forma correta de coletar
os requisitos do sistema e em outra foi visto como alcançar
o objetivo no prazo previsto que consistiu no estudo de
metodologias ágeis para desenvolvimento de software.

C. Manutenção de banco de dados

Após a análise citada na etapa anterior, o próximo passo é


a montagem e manutenção do banco de dados, na SATC, os
colabores utilizam basicamente duas ferramentas para isso,
o SQL yog, Figura 15, para o desenvolvimento de triggers,
functions e trabalhar com a linguagem SQL em geral e o
MySQL Workbench, visto na Figura 16, para trabalhar com
as modelagens.
Figura 13 - Histórico de atualizações (Autor, 2017)

Antes de desenvolver qualquer coisa, é preciso saber o que


será desenvolvido bem como o real problema e necessidade
do usuário, a explicação de como essa atividade é realizada
pode ser vista no próximo tópico.

B. Análise e projetos de novos sistemas

Durante o período de estágio, esta atividade foi


desenvolvida também no sistema do laboratório, onde
atualmente eles utilizam como “sistema” uma planilha feita Figura 15 - Interface SQL yog (Autor, 2017)
no Excel, que possui desde o cadastro dos cliente até a
emissão do certificado de calibração citado no tópico
anterior.
Uma parte do arquivo do Excel pode ser vista na Figura
14 e as atividades diárias consistem em entender como os
funcionários do laboratório trabalham e utilizam esta
planilha bem como definir maneiras de colocar estas
funcionalidades e regras de negócio no sistema WEB em
desenvolvimento.

Figura 16 - Parte da modelagem do sistema do laboratório (Autor, 2017)


No curso são ministradas as disciplinas de Banco de IN INFORMAL ENVIRONMENTS, 1., 2011, Ithaca,
Dados I e II bem como a de Estrutura de Dados, são nestas 2011. p. 1 - 6.
disciplinas que o acadêmico aprende a forma correta de
montar e manipular o banco de dados conforme a [7] MUMBAIKAR, Snehal; PADIYA, Puja. Web Services
necessidade do projeto. No decorrer destas disciplinas os Based On SOAP and REST Principles. International
acadêmicos praticaram bastante análise e modelagem de Journal Of Scientific And Research Publications,
banco, o que é bastante importante ter conhecimento, mas [s.i], v. 3, n. 5, p.1-4, maio 2013.
tiveram pouca interação com a linguagem SQL como a
criação de triggers, procedures e functions. [8] PUGA, Sandra; FRANÇA, Edson; GOYA, Milton.
Banco de dados: Implementação em SQL, PL/SQL e
V. CONCLUSÃO Oracle 11g. São Paulo: Pearson, 2014.

Durante o período de estágio foi possível relacionar as [9] MEDEIROS, Luciano Frontino de. Banco de dados:
diversas disciplinas e conceitos aprendidos ao longo desses Princípios e Prática. Curitiba: Intersaberes, 2013.
cinco anos de faculdade como uma coisa única, deixando
evidente a existência da interdisciplinaridade entre as [10] FREEMAN, Elisabeth; FREEMAN, Eric. Use a
matérias estudadas. cabeça!: HTML com CSS e XHTML. 2. ed. [s.i]: Alta
Além disso, as apresentações de trabalhos durante a Books, 2008.
graduação ajudaram para que ao apresentar novas ideias e
soluções para a equipe não existisse medo ou vergonha de [11] SIMPSON, Kyle. You Don't Know JS: Up & Going.
se expressar. [s.i]: O'reilly Media, 2017. 88 p.
Foi possível também analisar e dar manutenção no banco
de dados e na própria aplicação respeitando prazos que na [12] SCHMITZ, Daniel; LIRA, Douglas. AngularJS na
maioria das vezes não eram levados em consideração prática: Crie aplicações Web com AngularJS. [s.i]:
quando se falava em desenvolvimento de software. Leanpub, 2016.

REFERÊNCIAS [13] DALL’OGLIO, Pablo. PHP Programando com


Orientação a Objetos. 3. ed. São Paulo: Novatec
[1] BONIATI, Bruno Batista; SILVA, Teresinha Letícia da. Editora Ltda., 2015.
Fundamentos de Desenvolvimento Web. [s.i]: Rede
E-tec Brasil, 2013. 105 p.

[2] SEGURADO, Valquíria Santos. Projeto de Interface


com o Usuário. São Paulo: Pearson Education do
Brasil, 2015.

[3] MITCHELL, Lorna Jane. PHP Web Services: APIs for


the modern web. 2. ed. Sebastopol, Ca: O'reilly Media,
2016. 167 p.

[4] HANSEN, Roseli P.; PINTO, Sérgio Crespo. S. C..


Construindo Ambientes de Educação Baseada na
Web Através de Web Services Educacionais. In:
SIMPÓSIO BRASILEIRO DE INFORMÁTICA NA
EDUCAÇÃO, 14., 2003, Rio de Janeiro. Anais. Rio de
Janeiro: Sbie, 2003. p. 61 - 70.

[5] ROZLOG, Mike. REST and SOAP: When Should I


Use Each (or Both)? 2010. Disponível em:
<https://www.infoq.com/articles/rest-soap-when-to-
use-
each?utm_source=infoq&utm_campaign=user_page&u
tm_medium=link>. Acesso em: 14 nov. 2017.

[6] CASTILLO, Pedro A. et al. SOAP vs REST:


Comparing a master-slave GA implementation. In:
FIRST INTERNATIONAL WORKSHOP OF
DISTRIBUTED EVOLUTIONARY COMPUTATION