Editorial

Caro amigo,

É muito satisfatório poder apresentar mais um mês de artigos desta querida e respeitada revista de programação.

Neste mês de abril teremos diversos assuntos, com o intuito de agradar todo tipo de desenvolvedor.

Nosso colunista mensal Ricardo Barbosa Crivelli redigiu o artigo “Customizando o serviço de autenticação do Laravel”,

atendendo a pedidos, no artigo deste mês ele nos apresentará seis formas de se modificar o sistema de registro e autenticação do

“Laravel”, incluindo novas funcionalidades e desativando outras já existentes por padrão. Já nosso consultor técnico Thiago Cavalheiro

Montebugnoli escreveu o artigo “Instalando o Microsoft Visual Studio Community 2019”, o qual aborda as principais características

do mesmo junto com o download e instalação.

Esta nova IDE de desenvolvimento além de estar muito robusta também pode ser adquirida gratuitamente, uma boa

opção para pequenas empresas e programadores individuais. Para fechar a série de artigos, nosso outro colaborador Luciano

Pimenta nos preparou a sexta parte do artigo “Xamarin Forms”. Neste artigo, ele aborda brevemente o Microsoft Visual Studio

2019 e suas mudanças para criação de projeto Mobile. Continua também a série sobre Xamarin Forms e ensina sobre a

navegação de telas, criando páginas modais e que possuam abas, para uma melhor organização dos controles dos aplicativos.

Desejo uma ótima leitura e até o mês que vem!

Marcos César Silva

Diretor Técnico

Customizando o serviço de autenticação do

Laravel

Introdução

O Laravel possui um sistema de registro e autenticação pronto de fábrica muito completo e seguro que pode

ser instalado com apenas alguns passos e recentemente um leitor me pediu para que eu o auxiliasse na alteração o login

trocando o e-mail por um usuário. Pensando nisso, o artigo de hoje, será como alterar alguns pontos principais de

autenticação e registro de usuários.

Adicionando mais campos ao formulário de registro

Antes de explicar como trocar o endereço de e-mail pelo nome do usuário vamos começar adicionando novos

campos ao formulário, até mesmo porque essa etapa será necessária para realizar a troca. Para exemplificar, vamos

adicionar o campo sobrenome e usuário que serão chamados de surname e username, respectivamente, para

mantermos o padrão do Laravel que é o Inglês.

O primeiro passo é adicionar o campo à nossa tabela através de uma migration. Vamos criar uma nova

migration com o comando abaixo:

php artisan make:migration --table users adicionar_campos_em_users_migration

Veja que foi criado um arquivo em database/migrations/{data}_adicionar_campos_em_users_migration.php

com a classe AdicionarCamposEmUsersMigration. Altere o método up() para que ele adicione um novo campo à

tabela:

public function up()

{

Schema::table('users', function (Blueprint $table) {

$table->string('surname');

$table->string('username');

});

}

Agora execute a migration para que ela altere de fato a tabela:

php artisan migrate

O segundo passo é declarar os novos campos como “preenchíveis” no modelo User encontrado em

app/User.php (alteração em destaque):

$fillable = [

'name',

'email',

'surname',

'username’,

];

Feito isso, a última etapa é adicionar os campos no formulário de registro. Vamos editar o arquivo

resources/views/auth/register.blade.php:

<div class="form-group row">

<label for="surname" class="col-md-4 col-form-label text-md-right">

{{ ('Surname') }} </label>

<div class="col-md-6">

<input

id="surname"

type="text"

class="form-control{{ $errors->has('surname') ? ' is-invalid' :

'' }}"

name="surname"

value="{{ old('surname') }}"

required

>

@if ($errors->has('surname'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('surname') }}</strong>

</span>

@endif

</div>

</div>

<div class="form-group row">

<label for="username" class="col-md-4 col-form-label text-md-right">

{{__('Username') }} </label>

<div class="col-md-6">

<input

id="username"

type="text"

class="form-control{{ $errors->has('username') ? ' is-

invalid' : '' }}"

name="username"

value="{{ old('username') }}"

required autofocus

>

@if ($errors->has('username'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('username') }}</strong>

</span>

@endif

</div>

</div>

Para finalizar basta alterar o método create() da classe RegisterController

(app/Http/Controllers/Auth/RegisterController.php) e adicionar os novos campos:

protected function create(array $data) {

return User::create([

'name' => $data['name'],

'email' => $data['email'],

'password' => Hash::make($ data['password']),

'surname' => $data['surname'],

'username' => $data['username'],

]);

}

Logando com usuário ao invés de e-mail

Por padrão o Laravel utiliza o endereço de e-mail por ele ser uma informação já conhecida pelo usuário e pelo

fato de ser único, mas se você quiser alterar essa informação basta seguir o exemplo acima e adicionar o campo na

tabela, no modelo e na view e depois sobrescrever o método username() na classe LoginController

(app/Http/Controllers/Auth/LoginController.php), pois se você analisar o código, verá que a classe LoginController

importa a classe AuthenticatesUsers:

class LoginController extends Controller { use AuthenticatesUsers; ...

Ao verificar a classe AuthenticatesUsers nós podemos encontrar um método chamado username() que retorna

o campo que será utilizado para autenticação:

public function username() { return 'email'; }

Como não podemos alterar o método direto na classe, basta redeclará-la na classe LoginController e alterar o

retorno para o nome do campo, no caso, username:

public function username() { return 'username'; }

Alterar a validação dos campos

Por padrão todos os quatro campos do formulário de registro são obrigatórios, mas se você quiser alterar ou

adicionar qualquer validação ou até mesmo adicionar alguma validação para os campos que você adicionou no

formulário de registro basta alterar o método validator() da classe RegisterController

(app/Http/Controllers/Auth/RegisterController.php):

protected function validator(array $data)

{

return Validator::make($data, [

'name' => ['required', 'string', 'max:255'],

'email' => ['required', 'string', 'email', 'max:255',

'unique:users'],

'password' => ['required', 'string', 'min:6', 'max:255',

'confirmed'],

'type' => ['required', 'string'],

'username' => ['required', 'string', 'max:255', 'min:6',

'unique:users'],

]);

}

No código acima eu defini que o campo password pode ter no máximo 255 caracteres, e que o campo

username deve ser obrigatório, do tipo texto, com no máximo 255 caracteres, no mínimo 6 caracteres e único, ou seja,

ninguém mais pode ter o mesmo valor coluna username na tabela users.

Habilitar a verificação de e-mail

Esta é uma função que vem desabilitada por padrão no Laravel 5.7 mas todas as rotas e campos já estão

implementados, somente inativos. Para habilitar a verificação basta alterar a rota passando a verificação como true no

arquivo routes/web.php:

Auth::routes(['verify' => true]);

Agora para proteger uma rota e garantir que ela seja acessada somente por pessoas verificadas utilize o

middleware verified, como nos exemplos abaixo:

Route::get('profile', function () { // ... })->middleware

('verified');

Route::resource('/imagens', 'ImagemController') ->middleware

('verified');

Desabilitar a redefinição de senha

Aproveitando o gancho do item anterior, é possível desabilitar a função de redefinir a senha praticamente da

mesma forma que passo anterior, basta alterar a rota com o parâmetro reset como falso:

Auth::routes(['reset' => false]);

Se você estiver como se perguntando como fazer para que o seu sistema tenha uma verificação de e-mail e

não permita a redefinição de senha, fique tranquilo! É possível passar todos os parâmetros,visto que estamos

passando na verdade um array:

Auth::routes([ 'reset' => false, 'verify' => true, ]);

Desabilitar a redefinição de senha

No iOS Como você deve adivinhar para desabilitar os novos registros é muito simples e feito da mesma forma

que as dicas anteriores, basta adicionar o parâmetro register e defini-lo como falso.

Mas para fins de organização, podemos criar um arquivo XAML para cada aba e carregá-los quando o usuário

escolher a aba. O arquivo XAML fica mais organizado e fica melhor para dar manutenção. Adicione no TabbedPage:

Auth::routes(['register' => false]);

Conclusão

No artigo de hoje vimos como é simples alterar as configurações do sistema de registro e autenticação do

Laravel. Você deve ter percebido que grande parte das funcionalidades podem ser ativadas, desativas ou alteradas nos

controllers ou diretamente na declaração da rota. Espero muito que tenha gostado e até a próxima!

Sobre o Autor

Ricardo Barbosa Crivelli, mais conhecido como Rico Crivelli, é formado como Bacharel em Sistemas de

Informação e Licenciado em Computação pela Universidade Estadual do Norte do Paraná e pós-graduando em Informática na Educação. Atualmente é Técnico em TI no Instituto Federal de São Paulo – Câmpus Avaré. Tem como especialidade a linguagem PHP e o framework Symfony, apesar de adorar trabalhar com front-end e desenvolvimento mobile. Possuir as certificações COBiT 4.1 Foundation e Delphi 2006 Developer.

E-mail: rico@capim.art.br

Instalando o Microsoft Visual Studio

Community 2019

Caro amigo leitor,

No artigo deste mês de Abril vou trazer alguns detalhes desta nova versão gratuita do Microsoft Visual Studio.

Posso dizer que esta versão possui funcionalidades similares ao da versão “Professional”, dando suporte a múltiplas

linguagens e extensões (assim como a 2017) e recomendado tanto para programadores individuais quanto para

pequenas empresas.

É importante também lembrar que esta nova versão é totalmente compatível com a 2017, incluindo recursos

adicionais que serão explicados no item “Características gerais”.

Abordarei também o download e instalação do mesmo contendo todos os principais detalhes, utilizando o

Windows 7 Ultimate 64 bits, sendo o Sistema Operacional mais usado dentre nossos associados.

Características gerais

De acordo com o site oficial da Microsoft, “o Visual Studio 2019 fornece os melhores serviços e ferramentas do

mercado para desenvolvedores, aplicativos e plataformas”. Temos inúmeras novidades em relação a alguns itens,

como:

- Desenvolvimento: Economia de tempo devido a novos recursos como pesquisa de dados aprimorada,

refatorações facilitando a organização do código fonte, bastando invocá-las pressionando a tecla “CTRL +” para

selecionar a ação desejada. Outro recurso que pode se encaixar neste quesito seria o “IntelliCode”, fornecendo

conclusões de códigos com percepção de contexto, orientação aos desenvolvedores a aderir aos padrões e estilos de

sua equipe, facilidade para encontrar problemas de códigos, entre outras coisas.

- Colaboração: Pode-se entender colaboração o trabalho em equipe para resolução de problemas. O recurso

para trabalhar na nuvem está presente nesta versão, assim como o “Live Share”, sendo um serviço para desenvolvedores

que permite compartilhar uma base de código e seu contexto com um membro da equipe e ter uma colaboração

bidirecional instantânea diretamente no Visual Studio. Com o Live Share, um membro da equipe pode ler, navegar, editar

e depurar um projeto compartilhado com ele de forma fácil e segura.

- Depuração: Nesta versão o modo de depuração ficou mais robusto incluindo a pesquisa durante a

depuração, facilitando a localização de objetos e os valores da pesquisa.

Download e Instalação

Para realizarmos o download deveremos acessar o link:

https://visualstudio.microsoft.com/pt-br/downloads/

E clicar no botão “Download gratuito” no item “Comunidade”. Confira todos os detalhes na figura 01.

Figura 01. Realizando o download.

Após clicar no botão acima automaticamente irá baixar um pequeno arquivo executável idêntico ao

(vs_community__977798752.1549581728.exe), o qual irá redirecionar a instalação. Teremos a tela inicial denominada

“Visual Studio Installer”. Ver Figura 02.

Figura 02. Pré requisitos.

Clique no botão “Continuar” para prosseguirmos com a instalação. Ao baixar automaticamente os recursos

necessários do Visual Studio Installer teremos a tela a seguir. Verificar Imagem 03.

Figura 03. Visual Studio Installer.

- Cargas de trabalho: especificar os pacotes que serão instalados.

- Componentes individuais: com este recurso podemos especificar qual pacote instalar, por exemplo a versão

do SDK do .NET Framework.

- Pacotes de Idiomas: como o próprio nome já diz, podemos instalar quais idiomas precisarmos.

- Locais de instalação: local no Windows onde será instalado a IDE, o cache de download e os componentes.

Figura 04. Detalhes da instalação.

No nosso caso iremos clicar na aba “Cargas de trabalho” e escolher os pacotes “ASP. NET e desenvolvimento

Web”, “Desenvolvimento para Desktop com .NET” e “Desenvolvimento com a plataforma Universal do Windows”. Ao

arrastar a barra de rolagem podemos conferir muitos pacotes úteis que esta versão nos traz, como por exemplo

desenvolvimento para celular, jogos, entre outras ferramentas diversas. Clique no botão instalar para continuar.

Na figura 05 conferimos o andamento da instalação.

Figura 05. Andamento da Instalação.

Notem que no meu caso específico tenho o “Microsoft Visual Studio Community 2017” já instalado em meu

computador, podemos conferir na Imagem 06. Isto não afetará a nossa instalação. (Este processo poderá demorar um

pouco, pois a instalação é totalmente via internet)

Figura 06. Instalação.

Após executar as etapas acima deveremos reiniciar o sistema operacional. No primeiro acesso encontramos a

tela de bem-vindo -vindo permitindo sincronizar com a conta da Microsoft ou não. No meu caso cliquei no link “Agora

não, talvez mais tarde”, conforme ilustra a Figura 07.

Figura 07. Tela inicial de acesso.

Podemos iniciar o ambiente de desenvolvimento com algumas configurações iniciais, como por exemplo em

qual plataforma iremos programas ou até mesmo o tema de cores que melhor nos agradar. Clique no botão “Iniciar o

Visual Studio” para prosseguir. Imagem 08.

Figura 08. Configurações iniciais.

A IDE de desenvolvimento é intuitiva e precisa, contendo no primeiro momento a possibilidade de abrir projetos

recentes, assim como clonar o código fonte a partir do GIT ou Azure, abrir um projeto através de um arquivo de solução

(.sln), abrir uma pasta local ou criar um novo projeto. Podemos conferir estes recursos na Figura 09.

Figura 09. Tela inicial do MVS 2019.

Conclusões

A intenção principal deste artigo foi a de demonstrar e instalar de uma forma sucinta esta nova ferramenta da

Microsoft, o MVS 2019. A minha opinião é que a cada versão temos uma IDE mais robusta e completa de

desenvolvimento de sistemas, envolvendo todos os tipos de plataformas (mobile, desktop, web e nuvem). Não podemos

esquecer também um detalhe importante, que a versão “Community” é gratuita, sendo livre para ser utilizada por toda

comunidade.

Desejo uma ótima leitura e até o mês que vem!

Referências

https://visualstudio.microsoft.com

https://docs.microsoft.com/pt-br/visualstudio/ide/whats-new-visual-studio-2019?view=vs-2019

Sobre o Autor

Thiago Cavalheiro Montebugnoli adora aprender novas tecnologias. Formado pela Faculdade de Tecnologia de Botucatu – SP (FATEC), já desenvolveu softwares utilizando a plataforma .NET, Delphi junto com Banco de Dados SQL Server e Firebird.

Como experiências profissionais mais recentes, possui em seu currículo sua atuação no Centro de Processamento de Dados da Prefeitura

Municipal de Itaí-SP e atualmente compõe a equipe da Coordenadoria Tecnologia da Informação no IFSP – Instituto Federal do Estado de

São Paulo em Avaré. Além disso, é colunista mensal da Revista The Club Megazine e é consultor Técnico do The Club. Possui as seguintes

certificações: MCP - Microsoft Certified Professional, MCTS - Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application Developer e MCSD - Microsoft Certified Solution Developer.

E-mail: suporte@theclub.com.br

Xamarin Forms - Navegação

Nessa série de artigos sobre Xamarin Forms, criamos projetos com apenas uma página ou navegando em

apenas uma página principal. Vamos mostrar nesse artigo, como podemos navegar entre páginas e as características

pertinentes aos tipos de projetos. A partir desse artigo, vamos usar a versão 2019 do Visual Studio.

Criação de projetos no Visual Studio 2019

Tivemos uma mudança significativa nessa nova versão do Visual Studio para criação de projetos. Na tela inicial

podemos abrir ou criar um projeto (Figura 1).

Figura 01. Tela inicial do Visual Studio 2019

Ao criar um novo projeto, temos a imagem da Figura 2.

Figura 02. Escolhendo o tipo de projeto no Visual Studio

Na parte superior existem filtros pela linguagem, plataforma e tipo de projeto. Escolha a linguagem C# e no

tipo (Project type) e selecione Mobile. Selecione a opção Mobile App (Xamarin Forms) e clique em Next.

Não confunda com a criação de projetos Xamarin para as plataformas especificas: Android, iOS ou UWP

(Windows Phone). Precisamos dar um nome para o projeto e onde vamos salvar os arquivos (Figura 3).

Figura 03. Configurando o projeto Xamarin Forms

Após criar, devemos escolher o tipo de template para o projeto (Figura 4).

Figura 04. Escolhendo o tipo de template para o projeto Xamarin Forms

Navegação entre as páginas

Dependendo das funcionalidades do aplicativo, precisamos alternar entre as páginas (telas). No projeto recém-

criado, coloque um Button:

<Button Text="Segunda página" Clicked="Button_Clicked" />

Crie mais duas páginas: “SegundaPage.xaml” e “TerceiraPage.xaml”. Na SegundaPage coloque um botão e na

terceira, deixe o Label adicionado por padrão. Na segunda página, coloque um botão semelhante a primeira, onde

chamaremos a terceira tela. O código que usamos para chamar uma tela é o seguinte:

Navigation.PushAsync(new SegundaPage());

Ao clicar no botão da página inicial, vamos navegar para a segunda, até a terceira (faça o mesmo código

usando como parâmetro a terceira página). Para testar, precisamos modificar o arquivo App.xaml.cs:

MainPage = new NavigationPage(new MainPage());

O projeto vai trabalhar com navegação de páginas, então, o código anterior altera o formato do aplicativo,

onde teremos uma barra superior (Figura 5).

Figura 05. Barra no projeto Android e iOS

Configuramos o título dessa barra em cada página. O valor deve ser colocado no C# (propriedade Title) ou no

ContentPage do arquivo XAML (também chamado Title). Ao chamar uma página, o Xamarin, automaticamente, coloca um

botão na barra para voltarmos a anterior (Figura 6).

Figura 06. Botão voltar e título da página

No iOS o texto ao lado do botão refere-se ao título da página anterior. As telas trabalham com uma pilha, e

vamos colocando uma sobre as outras. O PushAsync ainda tem um parâmetro indicando se queremos animação na

abertura da página.

Barra de itens

Criamos a barra quando indicamos que a navegação seria de páginas no projeto. Podemos adicionar botões

para essa barra, como vemos em quase todo projeto mobile. No XAML, use o código a seguir para criar botão na

barra:

<ContentPage.ToolbarItems>

<ToolbarItem Order="Primary" Icon="ic_logo.png" Priority="0"

Clicked="ToolbarItem_Clicked" />

</ContentPage.ToolbarItems>

Cada ToolbarItem é um botão, com suas propriedades Text, Icon, evento Clicked etc, facilitando a código de

cada botão que adicionarmos. A Order indica se o botão será visível ou se estará dentro de um menu com outros

botões. Priority indica a ordem de exibição do botão, da esquerda para a direita.

Dica: coloque a quantidade necessária de botões, pois muitos pode criar uma confusão para o usuário do

aplicativo.

Veja na Figura 7 o projeto rodando.

Figura 07. Botões na barra do projeto

Quem faz a exibição do ícone, é a plataforma, então, procure imagens de boa qualidade, principalmente para

o iOS.

Nota: No exemplo, usei imagens diferentes para cada plataforma.

Modais

Páginas modais servem para forçar o usuário a realizar determinada tarefa antes de retornar a página

chamadora. Uma modal no Xamarin Forms é muito simples de ser implementada, basta usar o seguinte código:

Navigation.PushModalAsync(new ModalPage());

A página passada por parâmetro é um arquivo XAML normal, sem nenhuma configuração a mais. A diferença é

de que não temos o voltar na barra superior (igual a telas que usamos nos primeiros exemplos), pois estamos usando

uma modal, tela fora da navegação de páginas do nosso projeto.

Para voltarmos a tela que chamou a modal, usamos o código:

Navigation.PopModalAsync();

Abas

Como os dispositivos possuem uma limitação de tamanho de tela, uma boa prática é criar abas para

organização dos controles em tela. No Xamarin Forms podemos criar uma página com abas usando o template do

Visual Studio. Adicione um novo item e escolha o TabbedPage (Figura 8).

Figura 08. Criando uma página com abas

O template adiciona três abas:

<ContentPage Title="Tab 1" />

<ContentPage Title="Tab 2" />

<ContentPage Title="Tab 3" />

Dentro de cada ContentPage vamos adicionar os controles individuais de cada aba. Na Listagem 1

configuramos um Label para cada aba.

<ContentPage Title="Tab 1">

<Label Text="Aba 1" HorizontalOptions="Center"

VerticalOptions="Center" />

</ContentPage>

<ContentPage Title="Tab 2"> <Label Text="Aba 2" HorizontalOptions="Center"

VerticalOptions="Center" />

</ContentPage>

<ContentPage Title="Tab 3"> <Label Text="Aba 3" HorizontalOptions="Center"

VerticalOptions="Center" />

</ContentPage>

Listagem 1. Adicionando controle as abas

Veja na Figura 9 o projeto com a tela com abas.

Figura 09. Página com guias no Xamarin Forms

No iOS as abas ficam na parte inferior e no Android na parte superior. Além disso, no Android, o título das

abas sempre será em maiúsculo. Nesse exemplo, adicionamos aos controles dentro de um mesmo XAML.

Mas para fins de organização, podemos criar um arquivo XAML para cada aba e carregá-los quando o usuário

escolher a aba. O arquivo XAML fica mais organizado e fica melhor para dar manutenção. Adicione no TabbedPage:

xmlns:local="clr-namespace:TheClubXamarin;assembly=TheClubXamarin "

Nota: TheClubXamarin é o nome do projeto.

Vamos adicionar o código da Listagem 2 (comente o código da Listagem 1 para não ficar com muitas abas

na tela).

<local:Aba1 />

<NavigationPage Title="Segunda aba">

<x:Arguments>

<local:Aba2 />

</x:Arguments> </NavigationPage>

Listagem 2.Carregando páginas (XAML) nas abas

Criei duas páginas (Aba1 e Aba2) e configurei o título da segunda. Ainda na configuração do NavigationPage

podemos colocar um ícone (propriedade Icon). Ao rodar o projeto, teremos a mesma funcionalidade de abas, mas

cada uma com um XAML separado

Conclusão

Vimos neste artigo, como trabalhar com navegação de páginas dentro de aplicações mobile no Xamarin

Forms. Também aprendemos como é fácil usar páginas modais e telas com abas para facilitar a organização e uma tela

de um aplicativo.

No próximo artigo, veremos como trabalhar com estilos para aplicações Xamarin Forms, onde vamos

concentrar as características visuais de um controle e usar a mesma em toda a aplicação. Aprenderemos também

como criar um aplicativo multi-idioma.

Sobre o Autor

Luciano Pimenta (NOVO DOMINIO: www.lucianopimenta.com) é desenvolvedor Delphi/C# para aplicaÇÕes

Web com ASP.NET, Windows com Win32 e Windows Forms com .NET. Palestrante da 4° edição da Borland Conference (BorCon) e da 1° Delphi Conference. É MVP Embarcadero, grupo de profissionais que ajudam a divulgar o Delphi no mundo. Atualmente é desenvolvedor da SoftDesign fábrica de softwares em Porto Alegre-RS. Autor de mais de 80 artigos e de mais de 600 vídeos aulas publicadas em revistas e sites especializados, além de treinamentos presenciais e multimídias. É consultor da FP2 Tecnologia (www.fp2.com.br) onde ministra cursos de programação e banco de dados.

E-mail: www.lucianopimenta.net