Categorias
Tecnologia

Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade

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.

Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade 2

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

Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade

Resultado quando vamos para o App clicamos no botão Feed

Tutorial Ionic 3 Como Criar Uma Função e Sua Utilidade 3

 

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

Deixe uma resposta