DEV Community: Lucas

Introdução ao expo-dev-client

Lucas — Tue, 26 Sep 2023 23:19:21 +0000

Introdução

Se você iniciou no desenvolvimento de apps com Expo, deve ter notado que ele facilita muito alguns dos processos do React Native, sendo uma ferramenta conhecida por simplificar o desenvolvimento de aplicativos móveis, atuando desde em configurações do seu ambiente até em deploy dos seus aplicativos.

No entanto, em alguns momentos você provavelmente vai sentir falta de ter um controle maior do seu desenvolvimento ou querer utilizar de algumas bibliotecas que precisam de dependências nativas e não são suportadas diretamente pelo Expo, esse é um problema comum e para resolver ele podemos utilizar da ferramenta expo-dev-client

O que é o expo-dev-client

O expo-dev-client é um package da própria Expo que permite você a utilizar dependências nativas em sua aplicação, não ficando mais limitado apenas as libs do Expo e tendo uma experiência de desenvolvimento "quase nativa".

Alguns exemplos de bibliotecas que requerem de código-fonte nativo personalizado são a React Native Firebase e o Realm, ou seja, caso você queira utilizar algumas delas e ainda continuar utilizando do Expo, o expo-dev-client vai se tornar uma ferramenta útil para você.

Para iniciar o seu uso os passos são bem simples:

Instale o package com o seguinte comando:
```
npm i expo-dev-client
```
Gere então o código-fonte nativo com o comando prebuild:
```
npx expo prebuild
```
Esse comando gera automaticamente o código seguindo alguns fatores, recomendo dar uma olhada no comando prebuild pra ver melhor possíveis especificações, após finalizar serão geradas as pastas android/ e ios/ no seu ambiente de desenvolvimento.
Realize o build da aplicação com os comandos:
```
npx expo run:android
// ou
npx expo run:ios
```
Esse comando vai compilar e iniciar a sua aplicação no dispositivo conectado.

Obs: Após isso, caso tenha compilado e não iniciado seu aplicativo, você pode utilizar o comando npx expo start --dev-client, e vale informar também que esse é um processo fora do aplicativo Expo Go, então você não conseguirá utilizar dele nesse caso.

Essa foi apenas uma pequena introdução sobre a ferramenta até porque eu tinha esquecido dela e pesquisei para relembrar, você pode procurar ver mais sobre na documentação também: Development builds

O que são Lookahead e Lookbehind em Expressões regulares

Lucas — Sun, 21 May 2023 02:25:48 +0000

Introdução

Neste post estarei falando sobre uma possibilidade das expressões regulares que aprendi já tem alguns dias, mas me pareceu bastante interessante o conhecimento, então resolvi compartilhar.

Sendo mais específico, abordarei sobre essas 2 palavras do título, que a primeira vista podem soar meio estranhas e portanto, aqui vai uma tradução inicial sobre elas que talvez te ajudem a entender melhor mais a seguir:

Lookahead = Olhe para frente.
Lookbehind = Olhe para trás.

Bom, para um melhor aproveitamento sobre a leitura a seguir recomendo que já tenha noções básicas sobre as expressões regulares, mas caso não tenha ouvido falar sobre, não se preocupe, deixarei uma definição do assunto e um link de um post (ainda nesse site) que achei uma abordagem legal para se ler:

Expressões Regulares, ou regex, são sequências de caracteres que representam padrões utilizados para identificar caracteres literais em outros dados. As expressões regulares são extremamente úteis em várias situações, como validar formulários, extrair, filtrar e analisar dados, substituir e formatar textos, entre outras aplicações. Com a ajuda das regex, é possível verificar se determinados dados seguem um padrão específico, o que as torna uma ferramenta poderosa no processamento e manipulação de informações.

Post introdutório sobre as regex: Expressões Regulares I - o básico

O que são os lookarounds e para que são úteis

Como você já deve saber, podemos verificar padrões com o básico sobre as regex, mas nem sempre vamos conseguir fazer buscas da maneira mais eficiente se limitando ao básico. Imagine uma cena em que você precisa criar uma regex para receber apenas as quantidades de quilos sobre strings que possuem o seguinte formato:

'2kg - R$45,00 4kg - R$122,00 ...'

A primeira vista você pode estar pensando em usar a seguinte regex:

/\d+kg/g

Nessa regex, você estaria selecionando os caracteres que seguem o padrão de: 1 ou mais números que possuem a seguir os caracteres 'kg'. E sim, ela até funcionaria para retornar os quilos, mas não retornaria apenas a quantidade como desejamos acima já que retornaria também a unidade de medida, ou seja, enquanto desejamos apenas os números 2 e 4 da string, receberiamos 2kg e 4kg.
Então para resolver esse problema, poderiamos utilizar de um lookahead positivo, que ficaria da seguinte forma:

/\d+(?=kg)/g

Com a utilização desse lookahead, estariamos selecionando apenas os caracteres numéricos que possuírem os caracteres 'kg' após eles, mas sem os incluir na nossa busca. Em outras palavras, podemos encarar lookahead e lookbehind como criadores de condições para o que vamos selecionar, sem realizar o consumo dos caracteres utilizados na condição para a nossa correspondência, onde:

Lookahead: Verifica se os caracteres que estão após a nossa seleção possuem o padrão determinado.
Lookbehind: Verifica se os caracteres que estão antes da nossa seleção possuem o padrão determinado.

Bom, agora que você já tem uma ideia sobre para que servem, vamos explorar cada um deles:

Lookahead - olhe para frente

Como citado, com o Lookahead vamos criar uma condição para o que vem após o padrão que queremos consumir, para isso podemos utilizar de dois tipos de lookhead:

?= -> chamado de lookahead positivo, retorna a seleção apenas se o que vier após ela seguir o padrão especificado.
?! -> chamado de lookahead negativo, retorna a seleção apenas se o que vier após ela não seguir o padrão especificado.

Vamos ver um exemplo para cada um deles com JavaScript:

Lookahead positivo (?=)

Para esse exemplo vamos usar o lookahead positivo para retornar apenas o nome anterior das pessoas que possuírem o sobrenome 'Silva':

const nomes = [
    'Lucas Silva', 
    'Maria Silva Rodrigues', 
    'João Guilherme Silva', 
    'Pedro Oliveira',
    'Ana Julia Rodrigues'
    ]

const pattern = /.+(?=\sSilva)/
const primeirosNomes = nomes.reduce((acumulador, nome) => {
        const correspondente = nome.match(pattern);
        correspondente && acumulador.push(correspondente[0]);
        return acumulador
    }, [])

console.log(primeirosNomes); // [ 'Lucas', 'Maria', 'João Guilherme' ]

Regex utilizada: /.+(?=\sSilva)/
Explicação da regex:
- / -> São delimitadores, delimitam inicio e fim da regex.
- .+ -> O ponto . representa qualquer caractere, e o quantificador + indica que o caractere anterior (qualquer caractere) deve ocorrer uma ou mais vezes.
- (?=) -> Agrupa os caracteres para o lookahead positivo.
- \sSilva -> Representa o padrão para o lookahead, onde \s é um metacaractere usado para representar um espaço e o resto é o sobrenome que estamos procurando.
Resultado da operação: [ 'Lucas', 'Maria', 'João Guilherme' ]

Lookahead negativo (?!)

Lembra da string usada no inicio desse artigo? Bom, caso não lembre vou refrescar sua memória:

'2kg - R$45,00 4kg - R$122,00 ...'

Para esse exemplo, irei complicar um pouco mais ela acrescentando uma representação para as gramas e trocando as vírgulas por pontos:

'2.50kg - R$45.00 4.35kg - R$122.00 5.60kg - R$122.00...'

Pronto! Mas... E se agora você quisesse pegar apenas os valores em reais? sem a quantidade de quilos ou a representação da moeda?
Para isso poderiamos utilizar do lookahead negativo, realizando uma lógica inversa ao que fizemos inicialmente:

const string = '2.50kg - R$45.00 4.35kg - R$122.00 5.60kg - R$136.00';
const pattern = /\d+\.\d{2}(?!kg)/g;
const valores = string.match(pattern);
console.log(valores); // [ '45.00', '122.00', '136.00' ]

Regex utilizada: /\d+\.\d{2}(?!kg)/g
Explicação da regex:
- \d+ -> Utiliza do metacaractere \d para representar um caractere numérico e do quantificador + para representar que ele pode aparecer uma ou mais vezes.
- \. -> Representa o . (ponto) como caractere literal.
- \d{2} -> Utiliza do quantificador {n} para insinuar que o caractere numérico deve ocorrer duas vezes.
- (?!) -> Agrupa os caracteres para o lookahead negativo.
- kg -> Representa o conjunto de caracteres que o nosso padrão especificado anteriormente não deve possuir após ele.
- g -> Flag utilizada para fazer uma correspondência global, encontrando todas as ocorrências de um padrão em uma string.
Resultado da operação: [ '45.00', '122.00', '136.00' ]

Lookbehind - olhe para trás

Ao contrário do lookahead, com o lookbehind criamos uma condição que deve vir anteriormente ao padrão que queremos consumir, e assim como ele, também vamos ter dois tipos de uso:

?<= -> chamado de lookbehind positivo, retorna a seleção apenas se o que vier antes dela possuir o padrão especificado.
?<! -> chamado de lookbehind negativo, retorna a seleção apenas se o que vier antes dela não possuir o padrão especificado.

Também vou seguir os exemplos sobre eles com JavaScript, mas gostaria de deixar um aviso que alguns ambientes podem não possuir compatibilidade com o lookbehind ainda.

Lookbehind positivo (?<=)

Como sabemos, nem sempre vai existir apenas uma forma para realizar o que queremos, então para esse exemplo podemos utilizar do mesmo anterior, a diferença é que não olharemos para a frente dos caracteres, e sim para trás. Vou apresenta-lo a string novamente para você não precisar retornar ao exemplo anterior:

'2.50kg - R$45.00 4.35kg - R$122.00 5.60kg - R$122.00...'

Eaí, já pensou em uma forma para retornar apenas os valores em dinheiro com o lookbehind positivo? Vou te dar uma ideia de como seria possível:

const string = '2.50kg - R$45.00 4.35kg - R$122.00 5.60kg - R$136.00';
const pattern = /(?<=R\$)\d+\.\d{2}/g;
const valores = string.match(pattern);
console.log(valores); // [ '45.00', '122.00', '136.00' ]

Regex utilizada: /(?<=R\$)\d+\.\d{2}/g
Explicação da regex:
- (?<=) -> Agrupa os caracteres para o lookbehind positivo.
- R\$ -> Representa os caracteres R$ de forma literal, nesse caso dentro do lookbehind positivo, verificamos se eles estão antes do padrão que queremos selecionar, caso não estejam o padrão não será selecionado.
- \d+ -> Representa que terá a ocorrência de um ou mais caracteres numéricos.
- \. -> Representa o . (ponto) como caractere literal.
- \d{2} -> Indica que terá a ocorrência de dois caracteres numéricos.
- g -> Flag para a correspondência global.
Resultado da operação: [ '45.00', '122.00', '136.00' ]

Lookbehind negativo (?<!)

Confesso que foi um pouco difícil achar um bom e simples exemplo pra utilizar do lookbehind negativo, já que muitos que eu pensava teria uma forma não tão interessante ou o uso ficava um pouco mais complexo do que deveria, mas felizmente achei um que acredito que será de fácil entendimento. Nesse exemplo você possuíra uma string com vários numeros positivos e negativos:

const numeros = '22 -32 43 -522 6 72 311 15 -13 ...';

Enfim, como você pode utilizar do lookbehind negativo para retornar apenas os números positivos? Sinta-se a vontade para pensar em uma resposta antes de ver a resolução.

Como resposta pra isso você poderia utilizar da seguinte regex:

const numeros = '22 -32 43 -522 6 72 311 15 -13 ...';
const numerosPositivos = numeros.match(/(?<!-\d*)\d+/g);
console.log(numerosPositivos); // [ '22', '43', '6', '72', '311', '15' ]

Regex utilizada: /(?<!-\d*)\d+/g
Explicação da regex:
- (?<!) -> Agrupa os caracteres para o lookbehind negativo.
- -\d* -> Indica que os números que queremos não devem ter o sinal - (negativo) anterior a ele, e utilizamos também de \d* para dizer que após o sinal de - vai ter um padrão de números, evitando que ocorra a seleção de unidades numéricas em números maiores que 9.
- \d+ -> Representa que terá a ocorrência de um ou mais caracteres numéricos.
- g -> Flag para a correspondência global.
Resultado da operação: [ '22', '43', '6', '72', '311', '15' ]

Sua vez

Agora que você já sabe como utilizar os termos citados acima, consegue utilizar de lookahead e de lookbehind para retornar apenas os nomes dos provedores dos emails abaixo?

const emails = ['john_doe@gmail.com', 'marilia022@yahoo.com.br', 'gustavo_amado@outlook.com']

Vou deixar abaixo um código que você pode utilizar como base para a sua regex, e lembre-se, nesse desafio queremos apenas os nomes dos provedores, então você deve retornar uma lista com os seguintes valores: [ 'gmail', 'yahoo', 'outlook' ]

const emails = [ 
    'john_doe@gmail.com', 
    'marilia022@yahoo.com.br', 
    'gustavo_amado@outlook.com' 
]

const pattern = defina sua regex aqui;
const provedores = emails.reduce((acumulador, valor) => {
    const provedor = valor.match(pattern)[0];
    acumulador.push(provedor)
    return acumulador
}, [])

console.log(provedores);

Utilizando fontes com Expo

Lucas — Thu, 16 Feb 2023 23:28:03 +0000

Nesse post usaremos de 3 pacotes:

expo-splash-screen: permite-nos manter a SplashScreen (tela de abertura) até terminarmos de carregar os recursos da aplicação;
expo-font: permite que utilizemos de fontes da web ou customizáveis em nossos componentes;
@expo-google-fonts/fonte-desejada: nos oferece cobertura para todas as fontes encontradas no Google Fonts.

vamos seguir então com suas instalações:

1- Iniciando projeto:

npx create-expo-app myProject

2- Instalando expo-splash-screen:

npx expo install expo-splash-screen

3- Instalando expo-font:

npx expo install expo-font

4- Instalando @expo-google-fonts:

npx expo install @expo-google-fonts/poppins

obs: o módulo @expo-google-fonts oferece suporte para várias outras fontes, basta que você coloque o nome da fonte desejada após o nome do pacote, você também pode encontrar uma lista com as fontes suportadas no seguinte repositório: Clique aqui. Nesse exemplo usaremos a Poppins.

Após a instalação dos módulos acrescente o seguinte código a raiz do seu projeto:

import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
  // ...
}

O método SplashScreen.preventAutoHideAsync() chamado acima, faz com que a tela de abertura da aplicação permaneça em execução até chamarmos o outro método SplashScreen.hideAsync() que nesse caso será chamado quando já estivermos com a fonte carregada.

Para organizar melhor nosso projeto podemos criar um Custom Hook que será encarregado de carregar as fontes e chamar o método que esconderá a tela de abertura, vamos chamá-lo de useLoadFonts:

Crie uma pasta para os hooks do seu projeto;
Crie um arquivo chamado useLoadFonts.js;
Copie o seguinte código:

import { useCallback } from "react";
import * as SplashScreen from 'expo-splash-screen';
import { useFonts } from "expo-font";
import { Poppins_400Regular, Poppins_500Medium } from '@expo-google-fonts/poppins';

const useLoadFonts = () => {
    const [fontsLoaded] = useFonts({
        'Poppins_Regular': Poppins_400Regular,   
        'Poppins_Medium': Poppins_500Medium
      });

    const onLayoutRootView = useCallback(async () => {
        if (fontsLoaded) {
          await SplashScreen.hideAsync();
        }
    }, [fontsLoaded]);

    return { fontsLoaded, onLayoutRootView };
}

export default useLoadFonts;

Caso deseje utilizar de fontes customizadas, basta trocar a linha da chamada do hook useFonts para uma estrutura semelhante à seguinte:

const [fontsLoaded] = useFonts({
    'Nome-Fonte': require('caminho_para_a_fonte')
  });

Após isso basta importarmos o hook criado e utilizarmos na raiz do projeto, segue o exemplo:

import { Text, View } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
import useLoadFonts from './src/hooks/useLoadFonts';

SplashScreen.preventAutoHideAsync();

export default function App() {
  const { fontsLoaded, onLayoutRootView } = useLoadFonts();

  if(!fontsLoaded)
    return null;

  return (
    <View
      onLayout={onLayoutRootView}
    >
      // ...
    </View>
  );
}

Agora a sua aplicação já deve ser capaz de utilizar dessa fonte e precisamos apenas passar da chave que colocamos no hook useFonts para o fontFamily do componente, ex:

<View
      onLayout={onLayoutRootView}
    >
      <Text
        style={{
          fontSize: 34,
          fontFamily: 'Poppins_Medium'
        }}
      >
        Hello world!
      </Text>
    </View>

Como enviar email da Hotmail com Typescript usando o nodemailer

Lucas — Sun, 23 Oct 2022 00:10:16 +0000

primeiro iremos instalar o nodemailer e o pacote types, digite os seguintes códigos no terminal:

npm install nodemailer --save

npm install @types/nodemailer --save

após a instalação, no arquivo em que deseja realizar o envio de e-mail, faça os seguintes passos:

1- Importe o nodemailer:

import nodemailer from 'nodemailer';

2- crie um transporter (objeto que vai ser capaz de realizar o envio):

const transporter = nodemailer.createTransport({
    host: 'smtp.office365.com',
    port: 587,
    secure: false,
    auth: {
        user: 'myEmail@outlook.com',
        pass: 'Password'
      }
    });

Para isso usamos o método nodemailer.createTransport() e passamos como argumento um objeto com algumas informações:

host: o endereço do hospedeiro do e-mail, nesse caso passamos o valor 'smtp.office365.com';
port: é a porta em que vamos realizar a conexão, por padrão ela será 587 se secure for false e 465 se verdadeiro, nesse transporter definiremos ela como 587;
secure: recebe true ou false, se receber true a conexão usará TLS ao conectar-se ao servidor, se false o TLS será usado se o servidor suportar a extensão STARTTLS. Como estamos usando a porta 587 manteremos seu valor como false;
auth: vai receber um objeto de autenticação do e-mail, dentro dele definiremos a chave user com seu valor contendo o e-mail que vamos utilizar para o envio, e a chave pass que contém a senha do e-mail;

Com essas informações já podemos testar as nossas configurações SMTP com a chamada de verify(callback), use:

transporter.verify(function (error, success) {
  if (error) {
    console.log(error);
    return
  }

  console.log("Server is ready to take our messages");
});

caso ocorra tudo bem, a mensagem "Server is ready to take our messages" aparecerá no seu servidor, se ocorrer algum erro recomendo olhar o site nodemailer, nele você poderá ver como configurar melhor o seu objeto transporter para atender ao seu caso.

3- Crie um objeto com as informações que serão enviadas:

let mailOptions: nodemailer.SendMailOptions = {
    from: 'username <myEmail@outlook.com>',
    to: 'email@example.com',
    subject: 'hello world!',
    html: '<h1> Hello world </h1>',
    text: 'hello world'
  }

nesse objeto criado definimos seu tipo e passamos as seguintes chaves:

from: vai receber uma string com seu nome de usuário e em seguinda o e-mail que estamos utilizando no transporter entre os símbolos <>;
to: nesse exemplo usamos uma string com o e-mail destinatário que irá receber o e-mail, mas caso deseja enviar para múltiplos e-mails pode ser passado uma lista com eles como seu valor;
subject: recebe o assunto do e-mail que vai ser enviado;
html: recebe o conteúdo do e-mail no padrão html pra ser interpretado;
text: recebe como valor a versão de texto simples da mensagem, tbm necessário caso não seja possível a interpretação do html;
attachments: nesse caso nós não utilizamos dele, mas pode ser utilizado para fazer o envio de anexos, você pode ver um exemplo em: attachments;

4- usar o método para enviar o email:

// sending with callback

transporter.sendMail(mailOptions, (error: Error | null, info: nodemailer.SentMessageInfo): void => {
  // code   
})

// sending with promisse

transporter
  .sendMail(mailOptions)
  .then( (info : SentMessageInfo) => info.messageId)
  .catch( (err : Error) => {})

Para realizar o envio do email usamos o método sendMail() do transporter passando como argumento o objeto criado anteriormente.

e é isso, espero que tenha ajudado! :)