Conversor de moeda iônica

Vamos aprender iônico criando uma aplicação simples no mundo real.

Thivagar Mahendran Segue 12 de fev · 6 min ler Créditos: Pexels

Eu tenho desenvolvido aplicações web usando Angular recentemente. Desde que decidi expandir meus conhecimentos não apenas no desenvolvimento da web, mas também no desenvolvimento de aplicativos móveis, decidi criar um aplicativo com o framework iônico.

A razão que eu queria usar o Ionic é tudo sobre JavaScript (eu amo JavaScript). Também Ionic segue os mesmos conceitos que em Angular.

  • Tem sua própria estrutura de componentes de interface do usuário como em Angular.
  • Ele usa o TypeScript, que é um superconjunto do JavaScript.
  • Ele contém os recursos do Angular.

Agora vamos pular para o tópico. Você não pode aprender nada lendo ou seguindo tutoriais. Para aprender qualquer linguagem de programação ou framework, você deve experimentá-lo no mundo real. É assim que eu aprendo os fundamentos de qualquer linguagem de programação. Com tudo isso dito, vou levar você através de um aplicativo que escrevi usando o framework iônico.

Vamos construir um conversor de moedas simples.

Suposições

Este artigo pressupõe que você tenha conhecimento prévio sobre

  • Estrutura angular.
  • Datilografado.

Eu não estarei cobrindo todos os fundamentos supondo que você tenha algum conhecimento básico nessas tecnologias.

Começando

Primeiras coisas primeiro, vamos criar um aplicativo iônico em branco. Na sua linha de comando:

 npm instalar -g cordova ionic 

Este comando irá instalar o Ionic CLI, que é uma ferramenta de linha de comando para o Ionic. Com isso, você pode criar um aplicativo iônico com guias com todos os arquivos necessários na sua pasta de espaço de trabalho. Crie uma pasta onde você deseja manter o espaço de trabalho e abra a linha de comando a partir do local e execute ( eu estarei criando com guias para futuros aprimoramentos do aplicativo ):

 início iônico <nome do aplicativo> guias 

Criando um Layout

Vamos colocar um layout primeiro para que possamos começar a escrever a funcionalidade e os serviços para buscar valores de uma API gratuita que fornece taxas de câmbio instantaneamente. Navegue até o seguinte local na área de trabalho do projeto e copie o código no arquivo.

 src / pages / home / home.html 

Então vamos adicionar algum estilo a isso! Vamos para:

 src / pages / home / home.scss 

E copie o código abaixo em seu arquivo.

Para adicionar ícones à barra de abas, vamos adicionar a seguinte tag no index.html na pasta src ( 'src / index.html' )

 <link rel = ”stylesheet” href = ”https://use.fontawesome.com/releases/v5.6.3/css/all.css“ integrity = ”sha384-UHRtZLI + pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s /” crossorigin = ”anônimo”> 

Em seguida, adicione

 <ion-tabs> 
<ion-tab [root] = ”tab1Root” tabIcon = ”logo-usd”> </ ion-tab>
<ion-tab [root] = ”tab2Root” tabIcon = ”logo-bitcoin”> </ ion-tab>
</ ion-tabs>

em tabs.html que está localizado em 'src / pages / tabs / tabs.html' e, em seguida, vamos excluir uma guia extra.

Criando classe de serviço

Depois de criar o esqueleto, vamos ao trabalho real. Precisamos de uma maneira de obter taxas de câmbio. Não precisa se preocupar, existem APIs que fornece a você gratuitamente em certos limites. Aqui está o que estou usando para este projeto.

 https://free.currencyconverterapi.com 

Se você acessar este URL, poderá encontrar instruções sobre como buscar vários tipos de dados no formato JSON. Então, como vamos buscar os valores é a verdadeira questão. Você pode escrever o código para isso diretamente no arquivo home.ts, mas isso não é uma boa prática. Nós temos uma solução para o que é serviços.

Os serviços são uma boa prática porque reduzem muito a capacidade de reutilização do código e tornam o código mais genérico e acessível de qualquer lugar. Então, vamos criar uma classe de serviço agora. Na pasta de páginas, crie uma pasta chamada services e crie um arquivo typescript com o nome que quiser. Neste projeto, eu o nomeei como cu-service.ts.

Uma classe de serviço deve ser sempre exportável e injetável. Agora você pode se perguntar o que é @Injectable . Não é nada, mas uma injeção de dependência comumente usada em Angular. O trabalho do @Injectable é identificá-lo como uma classe de serviço e essa classe CurrencyService específica estará disponível em qualquer lugar em que a classe for importada.

Resumo: Podemos usar classes de serviço em qualquer parte do código, tornando a classe Injetável . Se dermos uma olhada dentro da classe, implementamos duas novas funções chamadas getCountries() e getExchangeRate() . Nestas duas funções, retornamos os dados JSON dessas APIs específicas e também as retornamos como promessas usando toPromise() método. Por padrão, o HttpClient retorna observables das chamadas de métodos HTTP, mas a razão para retorná-los como promessas é que as promessas podem fazer uso da funcionalidade assíncrona / aguardar. O que nos ajuda a escrever código assíncrono em javascript.

  • getCountries() : Retorna a lista de países com seu CurrencyCode.
  • getExchangeRate() : Retorna a taxa de câmbio de dois países específicos.

Quando você terminar de criar a classe de serviço, certifique-se de incluí-la nos provedores no arquivo app.module.ts na pasta do aplicativo .

Usando a promessa de retornarmos à classe de serviço, podemos buscar os dados necessários. Para buscá-los pacificamente, vamos usar async / await.

Implementação

Async / Await

Usando as funções assíncronas, você pode manipular os erros não tratados das promessas sem problemas usando blocos try / catch. A palavra-chave async pode ser escrita antes de uma função, async garante que a função retorne uma promessa e a função seja executada de forma assíncrona no loop de eventos. Usando a palavra-chave await dentro da função, podemos fazer com que o javascript espere até que a promessa de que a função retorne seja resolvida.

Deixe-me explicar o código dentro do arquivo home.ts.

fetchCountries() : Esta função obtém a lista de países do serviço e esperará até que a promessa seja resolvida, já que usamos a palavra-chave await nela. Usando um loop for estou empurrando cada valor individual do objeto JSON que é retornado e também estou empurrando os nomes de moeda para um mapa. Ao usar um mapa, podemos ter pares de valores-chave. Mais tarde, podemos obter os nomes das moedas usando o código da moeda, que é a chave no mapa.

getCurrencyRate() : Usando essa função específica, podemos buscar a taxa de câmbio para duas moedas específicas.

No lançamento do aplicativo, a fim de buscar a taxa de câmbio e a lista de códigos de moeda, devemos chamar as duas funções acima dentro da função ngOnInit() .

Estamos quase terminando agora! Tudo o que resta a fazer é calcular o resultado final, que é o valor da moeda. Para fazer isso, precisamos adicionar mais duas funções ao arquivo home.ts.

Duas funções para serem adicionadas ao arquivo home.ts

Com essas duas funções sendo chamadas, podemos calcular instantaneamente o valor do resultado nos dois sentidos. Bem, como fazemos isso? Isso é o que vamos ver a seguir.

Ligação de dados e vinculação de eventos

A ligação de dados é bastante popular em aplicativos da web porque exibe dados dinâmicos, o que significa que altera o valor disparado pelo usuário ou pelo aplicativo.

Vamos usar vinculação de dados e vinculação de evento para implementar um conversor de moeda, conforme mostrado no gif acima. No layout HTML, ligue as variáveis que criamos no arquivo home.ts usando ngModel. Ao fazer isso, qualquer valor que o usuário insira no campo numérico pode ser usado dinamicamente. Também para acionar os eventos quando o usuário insere um valor no campo de entrada, podemos usar a vinculação de eventos. Nesta situação, o keyup evento nos ajudaria. Então, vamos juntar os parênteses e chamar as funções necessárias. Você pode verificar o código abaixo para obter ajuda.

Além disso, incluí um cartão para mostrar a taxa de câmbio e os nomes das moedas. Agora, para executar este aplicativo em um navegador, execute o comando abaixo em seu terminal.

 saque iônico 

Isso criará o aplicativo e será executado no seu navegador padrão. Você pode verificar como esse aplicativo se parece em todas as três plataformas, como iOS, Android e Windows.

Conclusão

Neste artigo, tentamos tornar este tutorial o mais simples possível. Espero que você tenha aprendido algo com este post no blog. Por favor, sinta-se livre para me informar se você encontrar quaisquer problemas ou erros na seção de comentários.

Você pode encontrar o código-fonte para este projeto no meu identificador do Github .

Texto original em inglês.