INSTITUTO FEDERAL CATARINENSE

REITORA

Sônia Regina de Souza Fernandes

PRÓ-REITORA DE ENSINO

Josefa Surek de Souza

PRÓ-REITOR DE EXTENSÃO

Fernando José Taques

PRÓ-REITORA DE PESQUISA, PÓS-GRADUAÇÃO E INOVAÇÃO

Fátima Peres Zago de Oliveira

PRÓ-REITORA DE DESENVOLVIMENTO INSTITUCIONAL

Jamile Delagnelo Fagundes da Silva

PRÓ-REITOR DE ADMINISTRAÇÃO

Stefano Moraes Demarco

EDITORA IFC

COORDENADORA

Leila de Sena Cavalcante

CONSELHO EDITORIAL

Claudecir Alberto Schenkel

Fernando José Garbuio

Josefa Surek de Souza

Copyright © Hylson Vescovi Netto.

Todos os direitos reservados. Proibida a venda.

As informações contidas no livro são de inteira responsabilidade do autor.

Sumário

1  Introdução

Este livro trata sobre lógica de programação, assunto cujo desenvolvimento provê um raciocínio que pode ser útil em diversos contextos. No mundo prático do trabalho, existem locais nos quais as ações do trabalhador precisam ser realizadas com maior detalhamento. Nesses casos, é preciso criar um procedimento operacional padronizado (POP), um documento que descreve em passos como realizar tarefas. Considerando o contexto de pandemia no qual se encontra o mundo no momento da escrita deste livro, considere como exemplo a atividade de limpeza, desinfeção e sanitização dos ambientes escolares, a fim de preparar tais ambientes para o retorno gradual das aulas, no momento em que isso for possível. Esse trabalho requer uma série de ações que devem ser realizadas com atenção. No IFC, por exemplo, foram criadas instruções detalhadas sobre como devem ser as instalações, a frequência das ações a serem realizadas, os procedimentos a serem realizados e quem são os responsáveis pela realização dessas ações (Figura 1.1). Nesse POP as instruções se encontram de forma textual, organizadas sob a forma de itens a serem observados e cumpridos.

Outro exemplo é a descrição de procedimentos visando garantir a higiene em ambientes de manipulação de alimentos. Essas instruções são tão precisas que há cursos específicos sobre como esses passos devem ser realizados (por exemplo: escolavirtual.gov.br/curso/287). As instrução são detalhadas, informando o local, o que fazer, qual a frequência da ação, como fazer o procedimento, quem é o responsável pela ação e outras observações (Figura 1.2).

Pode-se, assim, tentar expressar a relação entre a lógica de programação e a definição de instruções para se realizar um trabalho por meio da seguinte hipótese: a definição de uma sequência de passos necessários para cumprir uma tarefa contém em si raciocínios e estratégias similares àqueles necessários à construção de um programa. O que essa hipótese afirma é que aprender lógica de programação ajuda a organizar o pensamento, analisar problemas e propor soluções em termos de sequência de passos para se alcançar um objetivo. Para verificar se essa hipótese é verdadeira, cabe ao leitor seguir os conceitos e exemplos descritos neste livro, realizando também a experimentação prática proposta por meio dos programas apresentados. Ao fim do consumo deste material, será possível verificar se surgiram melhoramentos e novos pensamentos nas suas habilidades de sistematização e organização de passos e etapas necessários para a realização de tarefas.

1.1  Motivação para aprender

Quando houver dúvida sobre a utilidade em aprender lógica de programação, ou como tal assunto será útil para os anseios profissionais, dê a si próprio o benefício da dúvida sobre quais são as possibilidades de aplicação da lógica de programação nas futuras atuações profissionais que porventura você pretenda. Não busque invalidar o conhecimento contido neste material por julgar que talvez essas informações não sejam necessárias para você. Às vezes gastamos mais tempo pensando em motivos para não fazer ou aprender algo, quando tal tempo e esforço seria muito mais produtivo alimentando a imaginação em possibilidades de ação e realização:

Aprender a programar, assim como aprender outros assuntos, é uma tarefa que fica mais fácil quando há interesse do aprendiz em desenvolver tal habilidade. Há muitas possibilidades de aplicar a programação no cotidiano de várias profissões, ou mesmo para resolver muitos tipos de problemas. Portanto, tente alinhar os seus desejos e gostos com os inúmeros problemas que podem ser resolvidos com apoio da programação. Este documento traz, além de referências à programação, situações nas quais a programação pode ajudar a resolver problemas práticos. Este livro busca a redação dos textos segundo a norma culta, a fim de oportunizar ao estudante o contato com bons textos em português, por meio da leitura, enquanto estuda programação.

1.2  Materiais do livro

Sugere-se ao aprendiz que sempre observe o programa citado no texto e digite-o em seu computador, a fim de compreender cada linha do programa, enquanto a mesma está sendo transferida do “papel” para o computador. A impressão deste livro em meio físico é permitida e recomendada, e pode fornecer a experiência multimídia, quando se realiza a leitura em papel e a prática no computador. Um livro tem potencial enorme de aprendizagem com profundidade (youtu.be/gbOM8n9omUE?t=337). Entretanto, caso seja de interesse testar primeiramente se o programa que você vai estudar realmente funciona, o código do programa pode ser obtido diretamente da internet para o seu computador, a fim de testar seu funcionamento. Todo código-fonte citado neste material advém de um programa armazenado no github. Cada endereço é fornecido após a listagem do respectivo código-fonte. Algumas seções estão acompanhadas de vídeos explicativos sobre o conteúdo da seção. Os endereços desses vídeos se localizam no começo da respectiva seção que possui o vídeo, e está sinalizado com o logotipo do site youtube. Neste livro foram também consideradas algumas premissas:

1.

Códigos funcionais fidedignos. Todo código exibido no livro é obtido diretamente do arquivo de programa, que está armazenado na pasta-repositório do github.

2.

Fontes de tamanho generoso. Desenvolvedores permanecem muitas horas em frente a computadores. Esse material tenta facilitar a leitura com um tamanho de letra generoso, para facilitar a experiência de aprendizagem.

3.

Uso de hífens. É usado preferencialmente o hífen, em vez de traço baixo, para nomear arquivos cujos nomes consistem de palavras diferentes.

a)

A Google sugere o uso de hifen em substituição ao traço baixo, ou underline

(developers.google.com/style/filenames).

b)

Recomenda-se hífens no lugar de traços baixos também para URLs

(x-equals.com/dashes-versus-underscores).

1.3  Personagens

Quatro personagens eventualmente aparecem nesse documento em interações nos conteúdos apresentados. O objetivo desses diálogos é passar, por meio dessas figuras fictícias, algumas dinâmicas que advém da experiência vivenciada em situações reais. Os personagens são Túlio, Pedro, Gabriela e Agnes. Quatro amigos que estudam informática e possuem características bem diferentes. Ao longo do texto será possível conhecê-los melhor. Sigamos suas aventuras!

1.4  Agradecimentos

Agradeço ao discente Leonardo Habitzreuter por ter me confrontado com a realidade da construção de sistemas usando a arquitetura front-end e back-end (em vez da arquitetura integrada), o que provocou uma mudança positiva na minha prática docente para adequar tal fato. Agradeço também aos pareceristas contactados pela editora do IFC, que forneceram valiosas sugestões para o aprimoramento desta obra. Várias sugestões foram realizadas nesta obra, enquanto outras começaram a ser executadas na segunda edição deste livro, ainda por vir.

1.5  Organização do livro

Este livro contém nove (9) capítulos que estão organizados em uma sequência, com exceção do último capítulo que foi criado para fins de consulta sob demanda (Figura 1.3). O primeiro assunto a ser abordado é a manipulação de repositórios (Capítulo 2), pois o armazenamento de código feito em repositórios públicos cria um “portfólio” de programação. Esse portfólio pode ser útil tanto para apreciação em oportunidades de trabalho tanto para o professor que deseja avaliar os códigos produzidos pelo aluno. A seguir, são introduzidos elementos de apresentação (Capítulo 3), pois todo sistema deve possui uma boa aparência. Sendo assim, é importante conhecer os elementos mais básicos dos quais uma tela de sistema web é feita. Na sequência, encontra-se o conteúdo sobre orientação ao objetos (Capítulo 4), pois essa maneira de desenvolver programas possui grandes vantagens como reutilização e encapsulamento, dentre outras. Uma breve abordagem sobre persistência de dados (Capítulo 5) menciona formas de armazenar os dados, a fim de que eles não se percam e permaneçam gravados.

Após conhecer os elementos básicos de um sistema, inicia-se a construção de um sistema web, utilizando as linguagens python e javascript. Primeiramente, constrói-se uma aplicação monolítica que abriga todos os elementos do sistema (Capítulo 6), para conhecer as potencialidades do python na construção de um sistema web. Essa aplicação apenas lista informações que são previamente cadastradas no sistema como dados de exemplo. A seguir, a aplicação é separada em duas partes: front-end e back-end (Seção 6.2). Ambas as partes continuam desenvolvidas em python, trocando informações por meio textual em formato json. Inicia-se, então, o desenvolvimento da aplicação com o back-end sendo codificado em python e o front-end escrito em javascript (Capítulo 7). O uso de javascript é bastante comum para a construção de front-ends, enquanto o python pode ser utilizado com sucesso na construção de um back-end. O sistema é incrementado gradualmente com funcionalidades que permitem realizar inclusão de dados (Seção 7.2) e exclusão de dados (Seção 7.3). Outra expansão do sistema se refere a criar novas classes para armazenar mais informações, crescendo assim o tamanho do sistema (Capítulo 8). São adicionadas classes por meio de agregação e composição, além de uma classe que possui relacionamento múltiplo com outras classes (N x N). O sistema é concluído com um formulário de inclusão de dados que traz informações de classes relacionadas, para que o dado composto possa ser gravado com dados dessas outras classes (Seção 8.2).

O livro traz também informações básicas sobre o uso de dicionários na linguagem python (Capítulo 9), além de informações adicionais (suplementos) sobre operações que envolvem o uso dessa linguagem. O capítulo de orientação a objetos, chamado “Dados em objetos”, apresenta diversos exemplos de conceitos utilizando as linguagens java e python: classes introdutórias, agregação e uso de construtores (Tabela 1.1). Alguns conceitos permanecem apenas implementados na linguagem python (generalização) ou java (polimorfismo). Edições futuras deste livro pretendem completar as lacunas que existem no presente material, em relação à implementação dos conceitos em ambas as linguagens.

1.5.1  Arquitetura em camadas

A aplicação desenvolvida a partir do Capítulo 6 deste livro obedece uma organização em camadas (Figura 1.4). Na camada superior (Apresentação) encontram-se elementos que são expostos para exibição e interação com o usuário final do sistema (componentes do front-end): páginas HTML, elementos visuais de estilo (Folhas de estilo - Cascade Style Sheet (CSS)) e programas em javascript. Na camada intermediária se encontra a aplicação, que contém toda a inteligência do sistema: ações, regras de negócio e modelos dos dados. Neste livro é utilizada a linguagem python para a construção da aplicação (back-end). Na última camada, a persistência de dados é realizada com uso do banco de dados SQLite.

É possível representar a arquitetura do sistema desenvolvido neste livro sob outra perspectiva (Figura 1.5). O cliente utiliza um navegador (front-end), que renderiza componentes de interface hospedados no servidor web. A aplicação (back-end) é executada em um servidor web, e contém componentes de negócio e de dados que se comunicam com um servidor de banco de dados, no qual a persistência dos dados é efetivada.

1.5.2  Público-alvo

Este livro retrata o conteúdo apresentado ao longo de um ano para uma turma de terceiro ano de um curso técnico em informática integrado ao ensino médio. Porém, o percurso descrito no livro pode ser utilizado também por quem possui conhecimentos de lógica de programação e deseja aprimorar sua habilidade de criação de sistemas de cadastro web para, por exemplo, estar melhor preparado em processos seletivos de trabalho. Nesse caso, basta seguir a construção de sistema proposta a partir do Capítulo 6. Edições futuras deste livro pretendem colocar lado a lado os fundamentos de java e os fundamentos da linguagem python, para assim prover uma aprendizagem por comparação. Essas duas linguagens foram escolhidas para utilização neste livro pois são linguagens praticadas nos cursos de nível médio e superior do IFC Campus Blumenau. São linguagens que foram escolhidas, portanto, também pela instituição de ensino, na elaboração de seus cursos. Além disso, a linguagem java está presente em sistemas atuais e legados, desenvolvidos globalmente e em empresas na região de Blumenau. Já a linguagem python possui grande potencial de realização de atividades com uma quantidade modesta de linhas de código, possuindo também uma curva de aprendizagem que fornece resultados rapidamente.

Este livro está disponível no site da editora do IFC: editora.ifc.edu.br. Ele foi escrito com a ferramenta LATE X e está também disponível no formato HTML de forma online em hylson.com/programar. Se você encontrar erros neste material ou quiser fornecer comentários e sugestões, envie email para hylson.vescovi@ifc.edu.br. Sua mensagem será apreciada e poderá contribuir para futuras edições deste livro.

2  Usando repositórios

Como início dos trabalhos, nossos amigos Túlio, Pedro, Gabriela e Agnes decidiram utilizar uma ferramenta para gerenciar seus programas. Não foi mais possível aceitar aquela situação de ficar enviando códigos por email, salvando pastas inteiras em pen-drives. Agnes lembra que muitas vezes ela salvava a mesma pasta várias vezes no pen-drive, apenas inserindo um número de versão (por exemplo: cadpessoa1, cadpessoa2, ...). Essa situação tinha que acabar. Iniciaram os amigos então o estudo de uma ferramenta de versão denominada git (https://git-scm.com/). Com essa ferramenta eles poderiam ter o seu código disponível sempre (Supondo que haja internet para a atualização dos programas), em qualquer lugar.

2.1  Criando e atualizando um repositório

Agnes iniciou os estudos dizendo que achou um tutorial na internet no qual os passos para utilizar um repositório estavam dispostos e explicados (http://rogerdudler.github.io/git-guide/). Pedro sugeriu, porém, ler mais um pouco sobre o git antes de sair executando comandos com base nas poucas explicações fornecidas. Após leituras e alguma conversa entre os colegas, Agnes resolve formalizar o processo de um “uso feliz” de repositórios usando algumas palavras-chave:

cadastrar ! criar ! clonar ! modificar ! atualizar

Como primeira ação, eles verificaram que é necessário cadastrar uma conta no github. Túlio rapidamente acessou o site http://www.github.com e realizou o cadastro das informações necessárias. O nome de usuário utilizado pelos amigos foi criado com bastante critério, a fim de facilitar sua utilização (Tabela 2.1). O nome completo de Pedro não é um nome incomum, logo ele adicionou um número significativo para ele, a fim de diferenciar seu logins dos demais já existentes (já havia um psoliveira cadastrado).

Após cadastrar as contas no github, todos partiram para criar o primeiro repositório. Gabriela estava interessada em armazenar programas de uma disciplina chamada “Programação 2”, logo criou um repositório chamado “programacao2”. Essas tarefas de cadastro e criação de repositório foram executadas no navegador web, no endereço github.com. A seguir, os estudantes abriram os terminais de comando para iniciar a operação de repositórios em modo texto, pois a operação via terminal é simples para a maioria dos comandos comumente utilizados. Túlio foi o primeiro a clonar o repositório vazio que acabara de criar na internet, executando este comando no terminal:

$ git clone https://github.com/tsjunior/pgm2.git

Você consegue descobrir o nome do repositório que Túlio clonou, certo? (O repositório chama-se pgm2) Agnes achou por bem clonar o repositório na página do github, em um botão no canto superior direito que permite efetuar o download do repositório em formato compactado (zip). Túlio advertiu-a, mencionando que repositórios baixados via arquivo ZIP não mantém controle do histórico de alterações! Gabriela clonou o repositório via linha de comando da seguinte forma:

$ git clone https://github.com/ghfardin/programacao2.git

Após executar o comando de clonagem, Túlio observou que foi criada uma pasta chamada “pgm2” no diretório atual. Sendo assim, ele acessou o diretório (ele utilizou o comando $ cd pgm2) para iniciar a construção de seus programas, ou seja, modificar o conteúdo do repositório. Ele, assim como os demais, criou arquivos com programas, pastas, arquivos pdf, etc. Túlio foi o primeiro que terminou de fazer os programas do repositório, e assim seguiu para atualizar o repositório remoto. Afinal, era preciso salvar os programas construídos com tanto afinco naquele momento. Não estava bem claro para ele como seria realizada essa atualização, sendo útil então a ajuda de Pedro, que iniciou um diálogo com Túlio:

$ git add *

Após adicionar os arquivos a serem alterados na lista de alterações, é preciso confirmar as alterações, informando uma mensagem que descreve, em termos gerais, o que significam as alterações que foram realizadas. Iniciou-se assim outro diálogo interessante:

$ git commit -m ’Consegui inserir uma folha de estilo na página HTML, mesmo com muito barulho na sala’

Inesperadamente, ocorre um erro que deixa todos perplexos. Como poderia toda a teoria discutida e compreendida ter falhado naquele momento? Agnes então entra em cena:

Após todos confirmarem as alterações feitas em seus respectivos repositórios, partiram para o terceiro passo: enviar as alterações adicionadas e confirmadas para o repositório remoto. Túlio rapidamente executa o comando: $ git push e inicia o diálogo:

2.2  Sincronizando um repositório local

O segundo passo na manipulação de repositórios é a atualização de seu repositório local a partir do repositório remoto. Essa necessidade pode ocorrer, por exemplo, na sequência de eventos descrita a seguir:

• Você cria e atualiza um repositório (Seção 2.1) a partir de um computador que se encontra em sua casa;
• Em outro dia, você clona o repositório em um computador do laboratório de informática, modifica arquivos do repositório e atualiza o repositório remoto (do GitHub);
• Novamente em sua casa, você agora possui uma cópia desatualizada do repositório.

O cenário descrito pode ser resolvido apagando-se o repositório existente no computador de sua casa e efetuando-se a nova clonagem. Existe, porém, uma atitude mais apropriada para esse caso: pode-se verificar a situação de atualização do repositório local e, a partir da constatação de que você possui uma versão desatualizada, realizar a atualização. Antes de verificar o estado do repositório local, porém, é preciso atualizar o repositório local com informações do repositório remoto. Acompanhe o diálogo a seguir:

Tarefa sugerida: execute as ações a seguir para experimentar a situação de sincronizar seu repositório local.

1.

Clone na sua máquina um repositório que você possui no site github.com

2.

Vá ao site github.com e altere, via site, o conteúdo de algum arquivo. Existe um ícone de um pequeno lápis que aparece no canto superior direito, quando o conteúdo de um arquivo é exibido. Esse ícone permite editar um arquivo.

3.

No repositório local do computador, verifique a situação de atualização do repositório (comandos $ git remote update e $ git status).

4.

Execute o comando para realizar a atualização do repositório local ($ git pull)

________________________________________________________________________________________________________________________________________________________

2.3  Resolvendo conflitos entre as cópias local e remoto do repositório

É possível acontecer uma situação na qual haja informações atualizadas mas diferentes nos repositórios local e remoto. Isso pode ocorrer, por exemplo, ao modificar um repositório desatualizado localmente. Nesse caso, para não perder as alterações, deve-se fazer uma operação de junção (mesclar = fundir = merge). Essa necessidade pode ocorrer em um cenário descrito a seguir:

1.

Você criou um repositório no computador de sua casa, modificou seu conteúdo e atualizou o repositório remoto;

2.

No dia seguinte, o repositório foi clonado em um computador do laboratório de informática e seu conteúdo foi modificado. Ao término da operação, você atualizou o repositório remoto;

3.

Novamente em sua casa, você iniciou modificações no repositório local sem antes verificar o estado de atualização do repositório (que se encontrava desatualizado).

Alguns conflitos podem ser resolvidos automaticamente e outros não. Acompanhe o diálogo a seguir para descobrir como agir em situações de conflito:

Tarefa sugerida: experimente uma situação de fusão com alterações sem conflito (i.e., que pode ser resolvida de maneira automática). Neste caso, serão alteradas linhas diferentes de um mesmo arquivo. Execute a seguinte sequência de ações:

1.

Clone na sua máquina um repositório que você possui no site github.com.

2.

Vá ao site github.com e altere, via site, o conteúdo de algum arquivo: insira uma nova linha no COMEÇO do arquivo. Existe um ícone de um pequeno lápis que aparece no canto superior direito, quando o conteúdo de um arquivo é exibido. Esse ícone permite editar um arquivo.

3.

No repositório local do computador, edite o mesmo arquivo que foi editado via site e faça uma alteração diferente daquela que foi realizada no passo anterior: insira uma nova linha NO FINAL do arquivo.

4.

Efetive as alterações realizadas localmente (add, commit, push). Verifique que não será possível enviar as atualizações (o comando $ git push vai falhar).

5.

Atualize o estado do repositório local (comando $ git remote update).

6.

Execute o comando de fusão: $ git merge.

7.

Será aberto um editor de textos, no qual você deve descreve um comentário sobre a fusão que está realizando. O comentário pode ser algo como “fazendo mesclagem automática”. Após fazer o comentário, salve o texto e saia o editor.

8.

Verifique a situação dos conflitos com o comando $ git status.

9.

Atualize o repositório remoto com o comando $ git push.

________________________________________________________________________________________________________________________________________________________

2.3.1  Resolução manual de conflitos

Quando as alterações em um mesmo arquivo não podem ser resolvidas automaticamente, é preciso intervir para fazer a mesclagem. É o caso, por exemplo, de uma mesma linha de um arquivo ser alterada de duas formas diferentes (de uma forma no repositório remoto e de outra forma no repositório local). Nesse caso, após a execução do comando de fusão, o arquivo local é alterado e as duas diferentes versões da linha são exibidas no mesmo arquivo, que deve ser editado para definir quais alterações devem prevalecer. As alterações são sinalizadas com caracteres <<<<<<, ====== e >>>>>>. No arquivo local, o conteúdo discrepante que se encontra no repositório local será delimitado pelos caracteres <<<<<< e ======. O conteúdo discrepante existente no repositório remoto será localizado entre os caracteres ====== e >>>>>>. É preciso apagar os caracteres delimitadores, eliminar o conteúdo duplicado e decidir qual conteúdo deve prevalecer, dentre as diferenças. Pode-se optar por um dos conteúdos discrepantes, ou criar um terceiro conteúdo, resultante da fusão dos conteúdos anteriores.

Um de nossos amigos, o Pedro, vivenciou essa situação emocionante de não conseguir atualizar seu repositório remoto devido a conflitos cuja resolução não era automática. Veja a conversa dele com Agnes:

Tarefa sugerida: será des crita uma situação de fusão com alterações conflitantes, com alteração de informações da mesma linha (i.e., do mesmo número de linha) nos arquivos local e remoto. Para realizar a mesclagem com conflitos, execute a seguinte sequência de ações:

1.

Clone locamente na sua máquina um repositório que você possui no site github.com.

2.

Vá ao site github.com e altere, via site, o conteúdo de algum arquivo: insira um texto NO FINAL DA PRIMEIRA LINHA do arquivo. Existe um ícone de um pequeno lápis que aparece no canto superior direito, quando o conteúdo de um arquivo é exibido. Esse ícone permite editar um arquivo.

3.

No repositório local do computador, edite o mesmo arquivo que foi editado via site e faça uma alteração diferente daquela que foi realizada no passo anterior: insira um texto no COMEÇO DA PRIMEIRA LINHA do arquivo.

4.

Efetive as alterações realizadas localmente (add, commit, push). Verifique que não será possível efetivar o envio das atualizações (o comando $ git push vai falhar).

5.

Atualize o estado do repositório local (comando $ git remote update).

6.

Execute o comando de fusão: $ git merge.

7.

Será exibida uma mensagem de advertência, mencionando que não foi possível realizar a fusão automática. A mensagem é similar a esta: “Automatic merge failed; fix conflicts and then commit the result”.

8.

Abra o arquivo com conteúdo conflitante em um editor de textos e resolva o conflito. É preciso remover os delimitadores (<<<<<<, ====== e >>>>>>), eliminar conteúdo duplicado e selecionar qual deve ser o conteúdo final a ser considerado para a fusão. Ao concluir as alterações, salve o arquivo e feche-o.

9.

Adicione o arquivo modificado na lista de alterações a ser enviada para o repositório remoto: execute o comando git add <nome-do-arquivo>, de maneira a substituir <nome-do-arquivo> pelo nome do arquivo cujo conteúdo foi fixado.

10.

Faça a confirmação das alterações ($ git commit -m ’mensagem’).

11.

Verifique o estado do repositório, com o comando $ git status e perceba que o repositório local está atualizado. O comando de verificação sugere que o repositório remoto seja atualizado, pois o repositório local está “à frente” do repositório remoto. São exibidas mensagens como estas: “Your branch is ahead of ’origin/master’ [...] (use "git push"to publish your local commits)”.

12.

Atualize o repositório remoto ($ git push).

________________________________________________________________________________________________________________________________________________________

2.4  Excluir arquivos ou pastas

Quando se remove um arquivo de um repositório local, é preciso informar ao git que esse arquivo foi removido. Assim como existe a operação de adicionar arquivos no repositório ($ git add arquivo), existe também um comando para excluir um arquivo do repositório:

$ git rm nome-do-arquivo

Após remover o arquivo, é necessário confirmar essa ação junto ao repositório:

$ git commit -m ’removendo arquivo’

Por fim, deve-se enviar as alterações para o repositório:

$ git push

Caso seja necessário remover uma pasta, pode-se utilizar o parâmetro -r:

$ git rm -r nome-da-pasta

Nesse caso, será removida a pasta e todos os arquivos e subpastas contidas na pasta.

2.5  Renomear arquivos ou pastas

Existe um comando do git para que se possa informar ao git sobre mudanças nos nomes de arquivos e pastas. O comando $ git mv velho novo informa ao git que o arquivo chamado velho passou a se chamar novo. Esse comando pode ser utilizado também para alterar o nome de pastas. A alteração de nome pode ser feita diretamente com o comando mv do git, em vez de renomear o arquivo ou pasta via sistema operacional ou via gerenciador de arquivos.

2.6  Persistir configurações de login e senha

Quando usar o git em seu computador pessoal no sistema operacional Linux, você pode solicitar que o login e a senha sejam armazenados, para que não seja necessário informar essas informações a cada atualização do repositório remoto. O comando que pode realizar essa ação é este:

git config --global credential.helper store

2.7  Acesso compartilhado a um repositório

É possível permitir que outras pessoas tenham acesso de escrita a um repositório, o que pode ser útil em pequenos projetos desenvolvidos em grupo. No site do github, para compartilhar um repositório deve-se acessar o menu de configurações de um repositório, acessar o submenu “Colaboradores” e então adicionar uma informação do colaborador (login do github ou email) (Figura 2.1).

2.8  Conclusões

Este capítulo apresentou o uso da ferramenta git para criar e sincronizar repositórios remotos hospedados no site github.com. Foi também abordado como solucionar conflitos entre repositórios (local e remoto), excluir e renomear arquivos. Por fim, tratou-se do compartilhamento de repositórios, para permitir de forma básica que mais de um usuário possa atuar sobre um mesmo repositório.

3  Páginas Web

O desenvolvimento de sistemas pode ser modularizado de forma geral em duas partes: a interface com o usuário e o sistema de processamento e armazenamento de dados. Ao primeiro denominamos front-end, enquanto o segundo é conhecido como back-end. As tecnologias envolvidas no desenvolvimento do frontend incluem HTML, javascript e CSS, e serão abordadas neste capítulo.

3.1  HTML

Os amigos Tulio, Pedro, Gabriela e Agnes iniciaram seus estudos nos elementos básicos de um front-end para a web: os comandos da HTML (HyperText Markup Language). Toda página HTML é delimitada pelas tags <html> e </html> (Código 3.1, linhas 2 e 14). A página é divida em duas partes principais: o cabeçalho da página, delimitada pelas tags <head> e </head> (linhas 4 e 6), e o corpo da página, delimitada pelas tags <body> e </body> (linhas 8 e 11). No cabeçalho da página considerada, existe a tag title, que define a frase a ser exibida na barra superior do navegador web (é o “título” da página). A tag h1 (linha 9) exibe uma mensagem em formato grande, enquanto a tag p exibe o texto contido na tag em forma de parágrafo (linha 10).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/01-html-css/01-pagina-basica.html#L1

Alguns dos componentes mais comuns que fazem parte de uma página HTML são os links, os estilos de formatação, as imagens e as estruturas de agrupamento conhecidas como div. Esse componentes estão descritos nas próximas seções.

3.1.1  links

Considere um link para o site do Google. Para criar esse link pode-se utilizar o seguinte código HTML:

<a href=“http://www.google.com”>Google</a>

A tag que especifica links chama-se a e possui o parâmetro href, que especifica o endereço para qual o link aponta. Entre a abertura e o fechamento da tag se encontra o texto que será exibido no link.

3.1.2  CSS

As páginas HTML em geral possuem o conteúdo a ser exibido ao usuário. A maneira como as informações serão exibidas é definida pela forma e pode ser especificada em um arquivo de folhas de estilo (Cascade Style Sheet), que possui extensão “.css”. Os principais especificadores de estilos são compostos pelos caracteres # e o ponto (.). O primeiro referencia elementos específicos que possuem identificadores. O segundo referencia grupos de elementos que aplicam uma determinada classe.

Considere o exemplo de um parágrafo que deve ser exibido na cor azul (Código 3.2, linha 12). Uma forma de definir essa formatação é identificar o parágrafo a ser formatado. O parágrafo em questão e então identificado pelo nome primeiro, por meio do parâmetro id. O próximo passo consiste em “ligar” a página a um arquivo de folha de estilo. Essa ação pode ser feita com a tag link (linha 6). Especifica-se, nessa tag, por meio do parâmetro rel, que será feito um vínculo com um arquivo de folha de estilo. O nome do arquivo é fornecido no parâmetro href. Uma formatação pode ser também definida com uso do caracter ponto. Por exemplo, pode-se aplicar uma formatação chamada “amarelo” a um parágrafo (linha 13) e à tag genérica denominada span (linhas 14 e 15), para aplicar a cor amarela ao fundo desses textos. Essa aplicação ocorre com uso do parâmetro class.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/01-html-css/02-pagina-com-estilo.html#L1

O arquivo de estilo é composto pela formatação desejada nos componentes da página HTML (Código 3.3). Define-se que para um elemento identificado por “primeiro” (linha 1) a cor de fundo será igual a azul claro (linha 2). Um estilo chamado “amarelo” é definido como tendo a cor de fundo amarela (linhas 5 a 7).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/01-html-css/03-estilo.css#L1

3.1.3  Imagem

Imagens são inseridas em páginas HTML por meio da tag img. Uma foto de uma casa pode ser inserida da seguinte maneira:

<img src=“casa.png” />

3.1.4  Div

Uma página pode ser dividida em seções, ou blocos. O componente div pode ser utilizado para construir layouts. Como exemplo, considere seletores de estilo chamados linha e coluna (Código 3.4). Neste material não há interesse em detalhar o conteúdo da configuração de linhas em colunas, mas apenas utilizar esses seletores para construir layouts tabulares.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/01-html-css/05-estilo-flexbox.css#L1

Com os seletores de linha e coluna pode-se, por exemplo, criar um layout simples com duas colunas (Figura 3.1). Essa configuração pode ser expressa especificando-se que haverá uma div de linha, e em seu interior haverá duas divs de coluna (Código 3.5).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/01-html-css/04-layout-com-flexbox.html#L1

3.2  Bootstrap

Bootstrap é um conjunto de ferramentas disponibilizado em forma de código livre, para o desenvolvimento de aplicações com uso de HTML, CSS, and Javascript (TEAM, 2020a). A versão atual do bootstrap utilizada durante a escrita deste texto é 4.4.1. O bootstrap faz uso de outras bibliotecas, especificamente: jQuery (biblioteca Javascript) e Popper (biblioteca para facilitar o posicionamento de elementos). Um conjunto de definições denominada Reboot também é utilizado, nas quais diversas configurações visuais são eliminadas e redefinidas pelo bootstrap. Dessa maneira, a exibição de elementos se torna mais similar quando o sistema é acessado por diferentes navegadores web.

Diante dos inúmeros recursos disponíveis pelo bootstrap, forma reunidos aqueles mais relevantes para o desenvolvimento de uma aplicação geral em três tabelas que organizam os elementos principais de conteúdo (Tabelas 3.1), componentes (Tabela 3.2) e alguns utilitários (Tabela 3.3). Cada tabela lista: i) a localização do recurso (caminho), partindo-se da página de documentação do bootstrap; ii) o nome da classe ou tag que implementa o recurso; iii) a descrição do recurso.

3.2.1  Grades

O boostrap também possui classes quem facilitam a criação de grades. Considere como exemplo uma página que existe uma grade com uma linha, duas colunas na segunda linha e duas colunas na terceira linha (Figura 3.2).

Pode-se observar no código dessa página as tags que definem a utilização do bootstrap (Código 3.6). Inicialmente, são definidas tags para especificar a codificação dos caracteres usados na página (linha 6). A tag seguinte torna possível ao navegador exibir diferentes tamanhos da página conforme o dispositivo utilizado para exibição (linha 7). Na sequência, se inclui a folha de estilos utilizada pelo bootstrap (linha 10).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/02-bootstrap/grade.html#L6

O corpo da página se inicia com a classe container, que abriga todo o conteúdo da página (Código 3.7, linha 16). São definidas as três linhas, com uso da classe row (linhas 17, 20 e 24) e a seguir são feitas as divisões em colunas (linhas 18, 21, 22, 25 e 26). O bootstrap disponiliza a possibilidade de especificar a largura de colunas, considerando-se uma largura máxima de 12 (doze) colunas. Na terceira linha do exemplo, a primeira coluna ocupa uma largura de tamanho igual a 1 (um), enquanto a segunda coluna ocupa uma largura de tamanho 11 (onze). Ambas medidas são relativas à largura de tamanho igual a 12.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/02-bootstrap/grade.html#L16

Por fim, são incluidas nas páginas as bibliotecas javascript (Código 3.8, linhas 32 a 34). Há uma sequência correta na importação das bibliotecas. Além disso, a carga do javascript deve ser feito ao final da página, para que ela possa antes ser exibida e somente depois apresentar qualquer tipo de comportamento dinâmico provido pelo javascript.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/02-bootstrap/grade.html#L32

3.3  Javascript

Os navegadores web são dotados da capacidade de executar programas. Isso ocorre porque há vantagens em se realizar processamento no próprio navegador, em vez de ir até o servidor web buscar informações que poderiam ser realizadas no próprio navegador web. A linguagem adotada como padrão para a execução de programas no navegador web é a Javascript.

Observe a seguir uma página HTML (Figura 3.3) que possui exemplos simples de ações que podem ser realizadas com o javascript (adaptados de (WILSON, 2020)). Essa página e as demais que fazem uso do javascript estão disponíveis para que você possa acessá-las e experimentar seus recursos no seguinte endereço: http://www.hylson.com/javascript. Primeiramente, encontra-se uma caixa de texto que possui um valor inicial em seu conteúdo (Código 3.9, linha 10). Na caixa de texto existe uma definição de evento: se um valor for alterado na caixa de texto (onChange), será emitida uma mensagem de alerta (linha 11). O comando alerté um comando da linguagem javascript e exibe uma caixa de diálogo na tela, com uma mensagem.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/02-basico-puro-javascript.html#L1

Outra ação javascript da página é a obtenção da data atual (Código 3.10, linhas 15 a 17). O comando new Date() retorna a data atual, que é armazenada na variável hoje (linha 16). Esse comando de atribuição é envolvido pelas tags <script> e < nscript>. Quando um certo botão é clicado (linha 18), uma mensagem é exibida por meio da caixa de diálogo (comando alert).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/02-basico-puro-javascript.html#L15

Na sequência, encontra-se definida uma função chamada mudar_fundo (Código 3.11, linha 23). Diversas execuções do comando setTimeout são responsáveis por alterar a cor de fundo do documento (linhas 24 a 30). O comando setTimeout executa uma ação (primeiro parâmetro) após esperar um certo tempo especificado em milisegundos (segundo parâmetro). Após a definição da função, ela é associada ao clique de um botão (linha 33).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/02-basico-puro-javascript.html#L22

O quarto exemplo de comando javascript é o simples preenchimento de um texto na página quando a mesma é aberta (Código 3.12, linhas 37 a 39). O comando document.write exibe na página o texto informado como parâmetro. Esse texto é inserido na posição em que se encontra o comando.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/02-basico-puro-javascript.html#L37

Por fim, é apresentado outro código javascript que realiza prenchimento de um texto na página (Código 3.13, linhas 43 a 52). Porém, desta vez o texto é inserido em um local específico: um elemento da página identificado como “caixa” (linha 45). O comando document.getElementById localiza um elemento na página por meio de seu “id”. Uma vez localizado o elemento, ele pode ser manipulado, por exemplo, inserindo-se código HTML em seu interior. No caso, foi utilizada a propriedade innerHTML para inserir um novo texto que possui formatação HTML para exibição com letras grandes (tag H1, linha 46). O código javascript está encapsulado em uma função (linha 44), que é associada ao clique de um botão (linhas 49 e 50). Concluindo o código da página, o elemento chamado “caixa” é uma div (linha 51), que possui atualmente um texto sendo exibido em cor de fundo amarela. Após o acionamento do botão, apenas o texto será alterado (em seu conteúdo e tamanho).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/02-basico-puro-javascript.html#L43

Ação adicional javascript 1: confira um exemplo lúdico de javascript, no qual uma figura é alterada para simular o efeito de apagar e acender uma lâmpada: https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb. Após a leitura desta seção, será que você consegue explicar o funcionamento desse código da lâmpada?

Ação adicional javascript 2: verifique o funcionamento dos exemplos “divertidos” de páginas com javascript neste endereço: http://www.hylson.com/javascript. Essas páginas foram criadas por alunos que cursaram a disciplina de Programação 2 no curso técnico em informática integrado ao ensino médio, do IFC Campus Blumenau, no ano de 2019. Verifique o código-fonte dessas páginas no link: https://github.com/hvescovi/programar2020/tree/master/02-front-end/03-javascript, dentro da pasta 01-divertidos. Os códigos desta seção usam, em geral, javascript puro. Teremos muito mais poder de programação com uso da biblioteca jQuery, descrita na seção a seguir.

3.3.1  jQuery

A biblioteca jQuery consiste de um grande conjunto de funções escritas em javascript, e tem por objetivo facilitar o uso de javascript nas páginas HTML. Com jQuery, os comandos javascript podem ser utilizados de uma forma mais sucinta e fácil.

3.3.1.1 Exemplo 1: inserindo texto e ocultando imagem

Considere como exemplo uma página HTML que possui uma caixa de texto e uma imagem (Figura 3.4). Acima da caixa de texto existe também uma div, cujo conteúdo será manipulado dinamicamente por linhas de código em javascript. Esses elementos podem ser identificados no código HTML da página (Código 3.14): a div (linha 12), a caixa de entrada (linha 14), um botão (linha 15) e a imagem (linha 16).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/03-basico-jquery/index.html#L1

Para fornecer comportamento dinâmico à página, com uso das facilidades providas pela biblioteca jQuery, realiza-se a importação da biblioteca com o comando script (Código 3.15, linha 20). No exemplo, a importação é feita diretamente do site do jQuery.

Os comportamentos que estão programados para a página são os seguintes:

1.

Quando a página for carregada, um texto será inserido na div (linhas 25 e 26);

2.

Quando o botão for acionado, o conteúdo da caixa de texto será copiado para a div (linhas 29 a 34);

3.

Quando ocorrer um clique na imagem, ela desaparecerá (linhas 37 a 42).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/03-basico-jquery/index.html#L20

A execução correta do código javascript que utilizada a biblioteca jQuery na página é condicionada ao documento estar “pronto”, carregado com todos os seus elementos HTML. Para garantir isso, é comum embutir todo o script que faz uso da jQuery sob um comando que verifica se a página está carregada. Na versão mais recente da jQuery existe uma recomendação pelo uso da expressão reduzida $(function(){ (JQUERY, 2019), em detrimento do uso extendido $(document).ready(function(){. Porém, o fato de localizar os scripts ao final da página HTML dispensa a necessidade de se fazer a verificação de carregamento da página.

Exemplificando: se desejarmos proteger o nosso código javascript para que ele seja executado apenas quando a página estiver carregada, devemos localizar esse código conforme segue:

Outra forma de se utilizar esse comando seria assim:

Porém, como mencionamos, se o nosso código javascript estiver localizado ao final da página, o comando ready (ou sua forma reduzida) não é necessário, pois o código javascript será carregado naturalmente apenas depois que toda a página for carregada.

3.3.1.2 Exemplo 2: alterando estilo da página

Desejamos agora fazer uma página que possa alterar dinamicamente a folha de estilos que é utilizada na página. Sendo assim, vamos criar três links para que cada um deles possa acionar uma folha de estilo diferente (Figura 3.5).

Na página HTML o link para o arquivo de folha de estilo deve ser criado possuindo um identificador (Código 3.16, linha 7), que será alterado conforme o usuário clica nos links. Deve haver três arquivos de estilo, sendo que inicialmente a página é exibida com o arquivo de estilo chamado “azul.css”. Cada link que altera o estilo possui em seu identificador o nome do arquivo de estilo a ser carregado quando o link for clicado (linhas 11 a 13).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/04-altera-css-jquery/index.html#L1

A parte de código javascript inicia importando a biblioteca jQuery (Código 3.17, linha 16). A seguir, o evento de clique de mouse é capturado e associado a qualquer elemento que utilize a classe de estilos chamada “mudar” (linha 19). Note que os links que mudam o estilo da página estão utilizando esse estilo. Quando o link for acionado, a folha de estilos da página é alterada (linha 22).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/04-altera-css-jquery/index.html#L1

Vamos detalhar a linha de comando 22:

1.

A expressão $(this) identifica qual foi o link clicado. Por exemplo, se o link amarelo foi clicado, então essa expressão “aponta” para o componente link amarelo.

2.

O método attr retorna um valor de um atributo de um componente. Se o link amarelo foi clicado, e deseja-se obter o “id” desse link, então utiliza-se a expressão $(this).attr(’id’). Essa expressão vai retornar o texto “amarelo”, se for clicado o link amarelo.

3.

Ao somar o texto “.css” no “id retornado”, mapeamos o nome do arquivo de estilo desejado. Se clicamos no link amarelo, a expressão $(this).attr(’id’) + ’.css’ vai retornar o texto “amarelo.css”.

4.

Vamos aplicar a expressão que contém o nome do arquivo de estilos à propriedade “href” de um componente chamado “estilo”. Assim, utilizamos o método attr para definir o valor do atributo “href” do componente “estilo”. Note que o método attr pode ser utilizado para obter o valor de um atributo ou para definir o valor de um atributo. Por exemplo, obteve-se o valor do “id” com o método attr, e com o mesmo método definiu-se um valor para o atributo “href”. Essas duas operações ocorreram na mesma linha de comando. No caso, para definir o valor do atributo esse método possui dois parâmetros: o nome do atributo e o valor. O seletor # é usado para referenciar diretamente o componente identificado como “estilo”. Esse comando completo está na linha 22 do Código 3.17.

Após clicar no link amarelo, será exibida a página fazendo uso da folha de estilos “amarelo.css” (Figura 3.6). As folhas de estilo azul e amarelo variam apenas a cor de fundo e o tipo de letra utilizados (Códigos 3.18 e 3.19).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/04-altera-css-jquery/azul.css#L1

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/04-altera-css-jquery/amarelo.css#L1

3.3.1.3 Exemplo 3: movendo imagem com o mouse

No terceiro exemplo, vamos apresentar uma página que contém uma figura que se move de acordo com a movimentação do mouse (Figura 3.7). O código HTML desta página contém a imagem do carro (Código 3.20, linha 12). Essa imagem é identificada pelo nome “carro” e possui um estilo de posicionamento absoluto, para que a mesma possa ter suas coordenadas alteradas dinamicamente. A biblioteca jQuery é importada (linha 14), seguido pela importação também do nosso código javascript (linha 15). Esse exemplo apresenta uma organização de arquivos na qual a imagem fica em uma pasta chamada “img” e os códigos javascript personalizados se encontram dentro de um arquivo externo, em uma pasta chamada “js”.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/05-mouse-com-figura-jquery/index.html#L1

O código javascript inicia com a criação de uma variável local chamada mover (Código 3.21, linha 4). Essa variável indica se o carro deve se mover (valor igual a 1) ou se o carro deve ficar parado (valor igual a 0). A seguir, captura-se o evento de movimentação do mouse na tela (linha 7). Quando esse evento ocorrer (mousemove), serão realizadas diversas ações. É preciso, assim, embutir as ações no interior de uma função, e por isso existe a expressão funcion(event). Essa função, entretanto, não possui um nome e existe apenas para agrupar os comandos que estão em seu interior. A função inicia verificando se a movimentação do carro está ativada (linha 10). Em caso positivo, obtém-se as coordenadas atuais do mouse (event.pageX e event.pageY), que são atribuídas às propriedades top e left do elemento chamado “carro” (linhas 12 a 14). Essas propriedades são manipuladas por meio de estilos (por isso a propriedade se chama css), ainda que não haja um arquivo de folhas de estilo sendo utilizado no exemplo. Por fim, se ocorrer um clique de mouse (linha 20), esse evento muda a situação da variável mover (linha 22). Essa expressão de linha única significa que caso o valor da variável seja igual a 1, então deve-se atribuir zero à variável; caso contrário, deve-se atribuir 1 à variável. Assim, o valor é sempre alternado entre os valores zero e um.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
02-front-end/03-javascript/05-mouse-com-figura-jquery/js/meuscript.js#L1

AÇÃO ADICIONAL JQUERY: verifique o funcionamento dos exemplos de páginas com javascript que utiliza jQuery neste endereço: http://www.hylson.com/javascript. Verifique o código-fonte dessas páginas, disponíveis neste link: https://github.com/hvescovi/programar2020/tree/master/02-front-end/03-javascript/

3.4  Conclusões

Este capítulo abordou elementos que integram um front-end. Foram descritos fundamentos de código HTML e folhas de estilo CSS, essenciais na criação de páginas web. Introduziu também o framework bootstrap para fornecer uma melhor aparência e responsividade às páginas. Por fim, apresentou a linguagem javascript, que provê comportamento dinâmico às páginas, e incluiu exemplos de uso da biblioteca jQuery, a fim de simplificar o código necessário à execução de programas nas páginas web.

4  Dados em objetos

Os quatro amigos Pedro, Túlio, Gabriela e Agnes começaram a criar programas que manipulam uma quantidade maior de dados. Tornou-se, assim, necessário fazer um agrupamento de dados coerente. Pedro é o aluno mais metódico do grupo, e como pessoa prevenida que é fez uma leitura sobre um assunto que propõe uma forma viável de agrupar dados: o paradigma de orientação a objetos. Nesse paradigma, os dados são agrupados por analogia a objetos do mundo real. Por exemplo, os dados de uma pessoa são reunidos em um objeto do tipo “Pessoa”. As informações de um automóvel são reunidas em um objeto do tipo “Automovel”. Podem ser criadas várias pessoas e vários automóveis. Essas instâncias de pessoas e automóveis são denominados Objetos. A generalização de um objeto é denominada Classe. Portanto, da classe Pessoa pode-se instanciar uma pessoa com nome igual a “Joao da Silva”, telefone igual a “47 9923 3434” e email igual a “jsilva@gmail.com”. Essa organização de informações em uma classe é a base da orientação a objetos.

Túlio, que é ávido por resultados, complementa a apresentação desse conceito aos colegas, mencionando que existem também as ações que podem ser realizadas sobre os dados. Comportamentos ou ações são processamentos sobre os dados e podem ser vinculados, portanto, às classes. Por exemplo, um automóvel pode possuir uma ação chamada “ligar”, que provoca o acionamento do carro. Outra ação possível de um automóvel pode ser a ação “frear”. Cada ação definida em uma classe é denominada método da classe. Após uma discussão inicial sobre esses conceitos, os amigos buscaram na literatura algumas definições sobre o termo classe:

Obtém-se também desse autor definições objetivas sobre a declaração de métodos de uma classe, bem como detalhamentos sobre os métodos nas classes concreta e abstrata:

Após a observação teórica dos conceitos, surgiu a necessidade de conhecer a aplicação prática dessas definições.

4.1  A primeira classe

Como início dos estudos, Gabriela tomou a palavra e sugeriu aos amigos fazer um programa abordando apenas informações básicas e conhecidas por todos. Recomendou, assim, armazenar apenas as informações sobre uma pessoa: nome, email e telefone.

4.1.1  Java

Pedro apresentou a seus amigos a forma mais básica de implementar um classe Pessoa (Código 4.1). Foi criado um módulo (pacote) denominado modelo (linha 1) para agrupar as classes, que são modelos de objetos do mundo real. O nome da classe foi definida como “Pessoa” (linha 3), e os atributos de nome, email e telefone foram definidos como sendo do tipo texto (tipo String; linhas 5 a 7). Após a criação da classe, é preciso fazer um “teste” do programa, criando objetos. Toda classe no Java possui um método executável denominado “main” (linha 9). Esse método permite ao programa Java tornar-se um programa “executável”. Sendo assim, como primeira ação criou-se um objeto do tipo pessoa (linha 11). A seguir, foram definidos valores para o objeto (linhas 13 a 15). Por fim, foram exibidos os valores do objeto, para fins de teste da classe (linha 17).

Fonte: https://github.com/hvescovi/programar2020/blob/master/
01-oo/01-pessoa/java/Pessoa1/src/modelo/Pessoa.java#L1

4.1.1.1 Segunda versão: separação entre definição e teste

Pedro, que é o rapaz “certinho” e adora seguir os padrões, observou a primeira versão do programa e sugeriu a primeira mudança: separar o programa em duas partes. A primeira parte vai conter apenas o código do programa de “definição da pessoa” (Código 4.2). Nesse programa temos apenas as informações que serão armazenadas pela classe (Código 4.2, linhas 5 a 7). Esse código pode ser utilizado posteriormente por outros programas para “criar” pessoas, definir os valores dos dados dessas pessoas e utilizar essas informações.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
01-oo/01-pessoa/java/Pessoa2/src/modelo/Pessoa.java#L1

O segundo programa será um código apenas para fazer um “teste” da classe Pessoa (Código 4.3). Em outras palavras, esse programa de teste serve para verificar se a classe funciona da forma esperada.

Fonte: https://github.com/hvescovi/programar2020/blob/master/
01-oo/01-pessoa/java/Pessoa2/src/teste/TestarPessoa.java#L1

Após a leitura cuidadosa dos códigos por todos, inicia-se um diálogo entre os amigos:

4.1.1.2 Terceira versão: construtores

Em determinado momento que os amigos estavam programando, alguém se deu conta de que já havia visto em algum exemplo de programação um comando que criava objetos no qual os valores do objeto eram informados todos de uma só vez, juntamente com o comando de instanciação. Agnes não se conteve com esse comentário e procurou na internet algo sobre isso. Encontrou, assim, informações sobre o termo “construtor”. E inicia-se um diálogo:

Fonte: https://github.com/hvescovi/programar2020/blob/master/
01-oo/01-pessoa/java/Pessoa3/src/modelo/Pessoa.java#L1

Nesse momento de leitura do código, Gabriela tem uma dúvida e não se demora a pergunta: