Introdução ao desenvolvimento web

Introdução

Objetivo e escopo

A ideia do projeto nasceu de dois interesses:

• Trazer pessoas para a área
• Indicar um material livre, gratuito e atualizado

Caso tenha interesse em contribuir, seja acrescentando/melhorando/removendo assuntos quanto corrigindo erros de português, acesse o projeto

Mantido com uma linguagem informal, o conteúdo a seguir pretende ensinar de maneira simples assuntos introdutórios para entrar na área de desenvolvimento web. Abordaremos:

• HTML, CSS e Javascript
• Algoritmos com Javascript
• Git
• React
• Laravel
• SQL

Os assuntos serão pouco aprofundados, a proposta desse material é explicar o essencial para que você (leitor) estude tópicos mais avançados por conta própria ou saiba reconhecer cursos/livros interessantes. Não prometo que ao final da leitura você estará apto para a primeira vaga, pois acredito que o ideal é desenvolver e expor projetos pequenos no Github e Linkedin.

Após dominar os assuntos presentes nesse material, recomendo o estudo de:

• Testes automatizados com TDD
• Docker

Dicas iniciais

• Nunca é tarde para começar
• Desenvolvimento web não é fácil, mas também não é tão dificil para conseguir entrar na área e ser um profissional mediano
• Mantenha a paciência, é muita ferramenta e conceito para aprender, não exija tanto de si
• O mais importante é ter um progresso gradual, assim como um quebra cabeça, aos poucos tudo vai fazer mais sentido
• Acredito que a única qualidade essencial para se tornar um desenvolvedor seja a resiliência: corriqueiramente haverá frustração com código, porém não deve deixar isso te desestabilizar
• Dúvidas e sugestões são muito bem vindas em formato de issue

FAQ

1. Preciso fazer faculdade?

Não, algumas empresas maiores podem exigir, porém é muito fácil de encontrar vagas que não se importam com isso. Vale mais a pena focar em conseguir a primeira oportunidade e depois cogitar ir para uma faculdade.

1. Preciso estudar inglês?

Não, mas certamente ajudaria para pesquisar mais tópicos e conteúdos mais especializados.

1. Como devo ler o material?

Recomendo ler 3 vezes: 1) uma primeira leitura rápida para alinhar a expectativa do que será abordado, 2) mais calma fazendo anotações e praticando quando fizer sentido e 3) rápida para entender os conceitos abordados e praticados.

1. Como deve ser o computador?

Acredito que no mínimo um processador i3 e 4gb de RAM.

1. Qual editor de texto usar?

Visual Studio Code, não confundir com Visual Studio. Vai ser a ferramenta que usaremos para escrever nos arquivos.

O que é a web

O desenvolvimento web é uma área específica dentro da área de desenvolvimento de software (programa). De maneira simplificada, a web é o acesso a sites/sistemas online utilizando o protocolo HTTP, onde que é feita uma requisição a um servidor e é retornada uma resposta (podendo ser em HTML, JSON ou outros formatos).

Se tratando de desenvolvimento web existem duas ramificações:

• front-end: foca no lado cliente, podendo ser um aplicativo ou um site que faz a requisição para outro site. Se responsabiliza com a interface e definição de acesso às funcionalidades para o usuário final;
• back-end: foca no lado do servidor. Se responsabiliza com a regras de negócio e acesso ao banco de dados;

HTML + CSS + Javascript

Uma página web normalmente vai ter um conteúdo, estilização e interação (respectivamente: HTML, CSS e Javascript). O navegador/browser lê os arquivos recebidos do back-end (.html, .css e .js) e renderiza de acordo. Porém com ctrlshifti podemos ver como eles realmente são: texto!

HTML

Propósito

Imagine o seuginte cenário: O navegador recebe um arquivo contendo todo o conteúdo do site, como ele sabe o que é título, link, lista e etc? Afinal, é uma informação necessária para delimitar a informação, exemplo:

Lista de compras
Mercado
Farinha
Leite
Ovos

Pode ser lido como

Lista de compras <- titulo
Mercado          <- item da lista
Farinha          <- item da lista
Leite            <- item da lista
Ovos             <- item da lista

ou

Lista de compras <- titulo
Mercado          <- subtitulo
Farinha          <- item da lista
Leite            <- item da lista
Ovos             <- item da lista

Tags

Para isso existem as tags, cujo explicitam a intenção de um grupo de texto. O exemplo anterior ficaria da seguinte forma:

<h1>Lista de compras</h1>
<h2>Mercado</h2>
<ul>
<li>Farinha</li>
<li>Leite</li>
<li>Ovos</li>
</ul>

Tags abrem, envolvem e fecham da seguinte maneira: <nome>conteudo</nome>

Sua vez: Crie um arquivo chamado teste.html, e abra de duas maneiras diferentes: 1) com seu editor de texto e 2) com o navegador. Escreva a lista de compras pelo editor de texto e visualize as alterações no navegador! Lembre de atualizar a página do navegador com F5 a cada mudança.

Todas tags podem possuir classes e um id. Esses artíficios não são visuais, eles servem para registrar de alguma forma essa tag para poder ser utilizada mais facilmente pelo CSS e Javascript.

<h1 class="titulo">Lista de compras</h1>
<h2 id="subtitulo">Mercado</h2>
<ul>
<li class="item-novo importante">Farinha</li>
<li class="">Leite</li>
<li class="importante">Ovos</li>
</ul>

CSS

Não basta especificar um título, link etc, precisamos estilizá-lo também. Tamanho da fonte, cor, alinhamento e outras propriedades são configuráveis.

Essas estilizações são feitas com um arquivo .css, para mudar a cor do título podemos fazer o seguinte:

h1 {
    color: blue;
}

Especificamos com um seletor e em seguida atribuimos alguma de suas propriedades. Os seletores mais comuns são: nome da tag, classe ou id.

.titulo { /* classe */
    color: blue;
}

#subtitulo { /* id */
    color: blue;
}

Para utilizar as definições feitas pelo CSS precisamos importar elas no nosso HTML precisamos alterá-lo com:

 <head>
  <link rel="stylesheet" href="./nome-do-arquivo.css">
</head> 

Javascript

Com conteúdo estruturado e estilizado falta adicionar interação ao site.

Algoritmos com Javascript

Git e Github

Introdução ao desenvolvimento web com React

Introdução ao desenvolvimento web com Laravel

Criaremos um sistema de agendamento chamado Reiserva onde que:

• Teremos 3 tipos de usuários, sendo 1) administrador 2) moderadores 3) cliente
• Teremos ambientes que podem ser reservados
• Dependendo do ambiente as reservas podem:
  • ser por dia, horários específicos ou horário livre
  • restrita a 1 ou mais clientes

Configuração inicial

• Baixe o PHP, e habilite as extensões BCMath Ctype Fileinfo JSON Mbstring OpenSSL PDO Tokenizer XML
• Baixe o Composer

Criação do projeto

Acesse a pasta onde guarda seus projetos, abra um terminal e execute

composer create-project laravel/laravel reiserva

Criando a reserva simplificada

Trabalharemos com TDD, primeiro criamos um teste falho, fazemos ele passar, melhoramos e repetimos.

Crie o teste com php artisan make:test ReservaServiceTest, edite o arquivo alterando o nome da função para testReservaAmbiente. Vamos testar que dado um usuário (User) e um ambiente, podemos criar uma reserva através da classe ReservaService.

Crie as outras classes que usaremos:

• ReservaService como app/Services/ReservaService.test
• As models com php arisan make:model Reserva php arisan make:model Ambiente

<?php

namespace Tests\Unit;

use App\Models\User;
use App\Models\Ambiente;
use App\Models\Reserva;
use App\Services\ReservaService;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class ReservaServiceTest extends TestCase
{
    use RefreshDatabase;
    
    public function testReservaAmbiente(): void
    {
        // Arrange: usuário existente
        $usuario = new User([
            'name' => 'Fulano de tal',
            'email' =>'fulano@tal.com',
            'password'=> '123',
        ]);
        $usuario->save();

        // Arrange: ambiente existente
        $ambiente = new Ambiente();
        $ambiente->nome = 'Salão de festas';
        $ambiente->save();

        // Act: criação da reserva
        $sut = new ReservaService();
        $sut->criar($ambiente, $usuario);

        // Assert: existência da reserva no banco de dados
        $this->assertDatabaseHas(Reserva::class, [
            'id_ambiente'=> $ambiente->id,
            'id_usuario'=> $usuario->id
        ]);
    }
}

Introdução à SQL