DEV Community: Rodrigo Martins

Como Configurar Anúncios do AdMob em um Aplicativo React Native Usando Expo

Rodrigo Martins — Tue, 26 Nov 2024 14:45:34 +0000

Configurar anúncios do AdMob em um aplicativo React Native usando Expo é um processo direto, mas envolve alguns passos importantes. Aqui, irei demonstrar esse processo com base nas informações disponíveis no React Native Google Mobile Ads.

Passo 1: Instalação das Dependências

Primeiro, vamos instalar as dependências necessárias. Abra seu terminal e execute os seguintes comandos:

npx expo install react-native-google-mobile-ads

Passo 2: Configuração do AdMob no Expo

Antes de poder exibir anúncios para seus usuários, você precisa ter uma conta do Google AdMob . No item de menu Apps, crie ou escolha um aplicativo Android/iOS existente. Cada plataforma de aplicativo expõe um ID de conta exclusivo que precisa ser adicionado ao projeto.

No item de menu Configurações do aplicativo, você pode encontrar o ID do aplicativo:

Abra seu arquivo app.json ou app.config.js e adicione a configuração do Google Mobile Ads:

{
  "expo": {
    "react-native-google-mobile-ads": {
      "android_app_id": "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX",
      "ios_app_id": "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"
    }
  }
}

Certifique-se de substituir ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX pelo seu próprio ID de aplicativo do AdMob.

Antes de carregar anúncios, faça com que seu aplicativo inicialize o Google Mobile Ads SDK chamando initialize, que inicializa o SDK e retorna uma promisse assim que a inicialização for concluída (ou após um tempo limite de 30 segundos). Isso precisa ser feito apenas uma vez, de preferência no carregamento do aplicativo.

import mobileAds from 'react-native-google-mobile-ads';

mobileAds()
  .initialize()
  .then(adapterStatuses => {
    // Inicialização completa!
  });

Passo 3: Implementação dos Anúncios
Agora, vamos implementar os anúncios no seu aplicativo. Importe e configure o AdMob no seu código React Native:

Banner Ad

import { BannerAd, BannerAdSize } from 'react-native-google-mobile-ads';
import React, { useEffect } from 'react';
import { View } from 'react-native';

export default function App() {
    return (
    <View>
      <BannerAd
        adUnitID="ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX" // Substitua pelo seu próprio ID de unidade de anúncio
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </View>
  );
}

Intersticial Ad

import { InterstitialAd, AdEventType } from 'react-native-google-mobile-ads';
import React, { useEffect } from 'react';
import { Button } from 'react-native';

export default function App() {
  useEffect(() => {
    const unsubscribe = interstitial.addAdEventListener(
      AdEventType.LOADED,
      () => {}
    );
    interstitial.load();
    return unsubscribe;
  }, []);

  const showInterstitialAd = () => {
    interstitial.loaded && interstitial.show();
  };

  return (
    <Button
      title="Mostrar Anúncio Intersticial"
      onPress={showInterstitialAd}
    />
  );
}

Conclusão
E pronto! Você configurou com sucesso anúncios do AdMob, incluindo anúncios de banner e intersticiais, no seu aplicativo React Native usando Expo. Este guia foi feito para te dar uma introdução básica; consulte a documentação oficial para detalhes mais avançados e opções de configuração.

Se precisar de mais ajuda, sinta-se à vontade para perguntar. Boa sorte com seu aplicativo!

SDK simples com Node e Typescript

Rodrigo Martins — Mon, 24 Jul 2023 19:52:49 +0000

Olá pessoal, nos últimos meses precisei construir um sdk para uma demanda interna do trabalho e percebi que havia pouco conteúdo a respeito em português, então resolvi criar este tutorial para ajudar a disseminar conteúdo, espero que gostem 🤗.

Iniciando o projeto node

Para iniciar o projeto, execute o comando abaixo dentro do repositório onde deseja iniciar o projeto.

npm init -y

Após a execução do comando ele deve gerar um arquivo package.json, fique a vontade para complementar o arquivo com as informações que precisar, mas abaixo deixo um exemplo de como deixei o meu

{
  "name": "sdk-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "prepare": "npm run build",
    "build": "tsc"
  },
  "keywords": [
    "typescript",
    "sdk"
  ],
  "author": "Rodrigo Martins",
  "license": "ISC"
}

Instalando as dependências

Como utilizaremos o typescript no projeto, precisamos instalar o mesmo

npm install -D typescript

Com a utilização do typescript, e necessário um arquivo chamamo tsconfig.json no mesmo caminho do package.json, para gerar um você pode executar o comando abaixo.

./node_modules/.bin/tsc --init

ou então pode copiar o exemplo abaixo que estou utilizando no meu projeto.

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "outDir": "./dist",
    "resolveJsonModule": true
  }
  "include": ["./*"],
  "exclude": ["node_modules", "dist"]
}

Configurando o package.json

Como definimos no tsconfig.json que o outDir será a pasta dist precisamos ajustar algumas informações no package.json

{
  "name": "sdk-node",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "npm run build",
    "build": "tsc"
  },
  "keywords": [
    "typescript",
    "sdk"
  ],
  "author": "Rodrigo Martins",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.9.7"
  }
}

Pronto, tendo tudo configurado, já podemos partir para o desenvolvimento.

criando uma função do SDK

Precisamos de um arquivo chamado index.ts na raiz do projeto, e iremos criar uma função que retorna um simples Hello, World! no console.
Deixarei o exemplo abaixo:

export function getMessage(): string {
    const message: string = 'Hello, World!'
    console.log(message)
}

export default { getMessage };

Pronto! Com isto já e possível compilar e testar o nosso SDK.

Testando a aplicação

Após todas as configurações feitas no nosso SDK, tentaremos usá-lo em um outro projeto, também simples, para isto podemos criar um novo projeto dentro deste projeto atual, abaixo vou deixar a lista de comandos necessários.

npm run build
mkdir node-test
cd node-test
npm init -y
npm install ..

Pronto! Por fim, basta realizar o import da dependência e executar a função. Meu teste ficou exatamente assim:

const sdkNode = require('sdk-node');

sdkNode.getMessage();
// deve mostrar no console a frase 'Hello, World!'

Realizando a Publicação

Precisaremos de um novo arquivo chamado .npmignore para impedir que a pasta de teste "node-test" seja enviada junto com o SDK

// .npmignore
node-test/

Os comandos para publicação são ligeiramente simples.

npm login 
npm publish

Isto e tudo ❤️.

Conteúdo bônus

Caso queira um único arquivo sdk, que pode ser adicionado via tag script <script type="module"></script> em qualquer projeto html.

Instale as dependencias ts-loader, webpack-cli.
Crie um arquivo webpack.config.js

const path = require('path');

module.exports = {
  mode: "production",
  devtool: "inline-source-map",
  entry: {
    main: "./index.ts",
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "sdk-node-file.js",
    library: 'sdk-node',
    libraryTarget: "umd",
    libraryExport: "default"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ]
  }
};

E por fim adicione o script para build no seu package.json:

  "scripts": {
    "prepare": "npm run build",
    "build": "tsc",
    "build:script": "webpack--config webpack.config.js"
  },

Pronto! com isto você será capaz de criar um SDK que seja compativel com praticamente qualquer projeto.

Espero que eu tenha contribuido de alguma forma para o seu trabalho e até o proximo tutorial 🤯