Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade. Para que serve as funções e como criar uma função para usar em várias partes do aplicativo. Leia:
Este artigo parte do ponto que já tem uma base criada, e nela, também já criou uma página com o nome “feed”.
Se você quiser, também poderá ler o artigo Como Criar e Indexar Uma Página Ionic 3
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: Que São Funções?
São pequenos trechos de códigos que nós queremos reaproveitar em toda a aplicação sem necessidade de estar criando ele repetidamente.
Digamos que nós temos um ação necessária para somar dois valores.
E que meu App vai precisar dessa ação em outras partes do aplicativo, então, eu vou otimizar para não encher demais meu App de códigos.
O inteligente é criar uma função de forma que possa ser usada quando necessário.
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: A Página Feed
Quando criamos uma página, na verdade o ionic cria uma “pasta” com o nome que escolhemos e dentro cria ao todo 4 arquivos. (tratamos disso no artigo linkado acima.
Voltando para nossa pagina de “feed”, vamos usar o arquivo com o sobrenome “TS” para criar nossa função.
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: Entendendo o Tipo e o Nome
Vamos entender a síntese de uma função dessa forma:
1. Definir qual o perfil dessa função. Já que ela poderá ser aproveitada em outras parte do App, ela será pública
> public
2. É lógico – toda função deve ter um nome, e essa vamos colocar um nome já condizente com o que desejamos que ela faça.
Sempre use um nome na função já equivalente com o que ela faz. Assim você entenderá melhor o seu código quando for dar manutenção:
> public somaDoisNumeros
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: Entendendo os Sinais
3. Depois de escolher o seu perfil (publica), dar um nome a ela (somaDoisNumeros), precisamos definir seu corpo ou seu escopo.
Por isso precisamos agora dos “parênteses, : e chaves” que receberão os nomes dos comandos que a função vai executar. Até agora temos o seguinte:
> public somaDoisNumeros(): {
}
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: Entendo o Tipo Number, Void ou Any
4. Anteriormente eu já determinei que essa função tem um perfil ou tipo público. Agora eu posso também adicionar um tipo ou qual o tipo ou natureza da função.
Neste exemplo eu quero que ela seja do tipo de número, já que ela é feita para somar dois valores. Veja a baixo:
> public somaDoisNumeros(): number{
}
Quando você acrescentar a palavra “number” no seu editor de código ela possivelmente vai ficar riscada em baixo com uma linha vermelha.
Com o mouse em cima teremos uma janelinha avisando que ela precisa de um valor já que o tipo dela é número.
Se ela fosse do tipo “void” ou “any”, ela não pediria.
Tudo bem até aqui. Agora eu preciso então de dar uma “instrução” à esse pedido com a palavra “return”. Veja como fica:
> public somaDoisNumeros(): number{
return 3;
}
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: Tipo Void
5. Eu posso alterar o tipo da função para ela não pedir o returno.
Então ela não vai ser mais do tipo número “number”, e sim “void”.
Observe que se eu apenas tirar a palavra “number” e substituir por “void”, é a palavra “return” anteriormente colocada vai ficar com o o riscado de vermelho.
O tipo “void” não pede retorno, ela resolve tudo dentro dela mesma.
> public somaDoisNumeros(): void{
}
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: Funcionalidades
6. Eu posso acrescentar um comando se eu quiser alertar o usuário de alguma coisa.
Isso pode ser feito fazendo com que o App abra uma caixinha de aviso ou algo do tipo.
Uma vez que “void” não pede retorno, eu posso adicionar funcionalidades a ela. Veja como ficou agora:
> public somaDoisNumeros(): void{
alert(“Minha Função Ficou Ok”)
}
Observe uma aparente contradição nesta função. Ela é uma função de “somar dois valores”, porém vai aparecer é um texto na tela.
Calma, o texto, nós colocamos apenas para ver se ela está funcionando – por isso ele está entre aspas (“”).
Quando definirmos os números vamos retirar as aspas e o texto.
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: O Comando CLI
7. Até este ponto, se você executar o comando na CLI “ionic serve”, para ele subir ao navegador, não teremos nada ainda.
Isso por que a função foi apenas criada no arquivo feed.ts. Agora temos que mandar que a App execute ela.
Observe que criamos a função dentro da parte do “Construtor”. Para ela funcionar, devemos colocar ela dentro do ionView.
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: Entendendo o IonView
8. Olhando para nosso arquivo feed.ts aberto, observamos o comando na parte inferior a linha:
> ionViewDidLoad() {
console.log(‘ionViewDidLoad FeedPage’):
}
Veja na imagem a baixo.
Toda página tem algumas etapas, partes que chamamos de “Ciclo de Vida”. Não precisa ser um expert para aceitar isso.
Uma página inicia, executa, finaliza – essas são suas etapas, seus “Ciclos de Vida” – simples assim
Dentro desse comando “ionViewDidLoad” e que o nome já sugere o que ele faz, que é algo como “Carregue a parte visual”.
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade: Alterando o IonView
9. Então vamos apagar a linha “console.log(‘ionViewDidLoad FeedPage’) para colocar nossa função que precisamos.
>ionViewDidLoad() {
this.somaDoisNumeros();
}
Observamos a linha “this.somaDoisNumeros():”:
A palavra “this.” está dizendo algo do tipo: Eu no sentido da página toda. Eu estou aqui e quero fazer tudo que está depois do ponto (.) final – que é “somar dois números”.
Uma vez que a o this está dentro do IonView, ele vai mostrar aquilo que você declarou público dentro de “alert”
Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade:
10. Se você fez tudo certo, quando você clicar lá no botão “feed” no seu App, ele vai mostrar o que você escreveu entre os aspas (“”) no comando “Alert”.
No nosso exemplo ela vai mostrar a frase:
Minha Função Ficou Ok
Nós colocamos dentro dos aspas para aparecer no App apenas para ver se a função está funcionando.
Mas vamos lá agora, no nosso editor de código onde escrevemos “minha função Ok” e limpe tudo e escreva entre os parênteses assim:
> public somaDoisNumeros(): void{
alert(7 + 10)
}
Veja agora a imagem com o código completo
Resultado quando vamos para o App clicamos no botão Feed
Este foi o artigo Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade e esperamos ter contribuído com o seu aprendizado. Ionic