DEV Community: Pato

Build a Docs‑Aware Chatbot with React, Vite, Node, and OpenAI (plus fun DALL·E avatars)

Pato — Wed, 17 Sep 2025 17:57:11 +0000

What you’ll build

A chat UI that streams answers from your own examples/context
A Node/Express API that calls OpenAI for text and image generation
Two cute, auto‑generated avatars (user & assistant)

Demo question shown here: “How do I use the Cloudinary React SDK?”

Repo (reference): Cloudinary-Chatbot-OpenAI-Demo

Prereqs

Node 18+
An OpenAI API key stored server‑side (never in the browser). How to create/manage keys: see the official docs. (OpenAI Platform)

1) Create the React app (Vite)

# New project
npm create vite@latest cloudinary-chatbot -- --template react
cd cloudinary-chatbot
npm i

Vite proxy (avoid CORS while developing)

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:6000',
        changeOrigin: true,
        secure: false,
      },
    },
  },
})

Chatbot UI

Create a src/App.jsx file. You can file the full code of this file in the repo.

The Chat functionality

  const sendMessage = async () => {
    if (!inputMessage.trim()) return;
    const newMessages = [...messages, { role: "user", content: inputMessage.trim() }];
    setMessages(newMessages);
    setInputMessage("");
    setStatus("loading");

    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ messages: newMessages }),
      });
      const data = await res.json();
      setMessages([...newMessages, { role: "assistant", content: data.content }]);
    } catch (e) {
      setMessages([...newMessages, { role: "assistant", content: "Server error. Try again." }]);
    } finally {
      setStatus("idle");
    }
  };

This function sends the user’s message to the backend and updates the chat UI. It first adds the user’s message to the conversation, clears the input, and sets a loading state. Then it POSTs the full message history to /api/chat and appends the assistant’s reply when the server responds. If the request fails, it adds an error message instead. Finally, it resets the status to idle.

Generating avatars

  useEffect(() => {
    const makeAvatars = async () => {
      try {
        const res = await fetch("/api/avatar", { method: "POST" });
        const data = await res.json(); // [{url}, {url}]
        setUserImage(data[0].url);
        setAssistantImage(data[1].url);
      } catch {
        // silently ignore; UI still works without avatars
      }
    };
    makeAvatars();
  }, []);

To make a more realistic chatBot, we are going to generate 2 avatars. In our backend, we have the endpoint /api/avatar. We call that endpoint, and we assign the avatars one for the user and one for the bot/assistant.

Add your own CSS or use our existing App.css.

2) Add the backend (Express + OpenAI)

Inside the project root, create a folder named backend and a file server.js. We’ll reuse the root package.json for simplicity.

Install deps

npm i express dotenv openai
# optional: nodemon for dev
npm i -D nodemon

Environment variables

Create .env in the project root:

OPENAI_API_KEY=sk-...

Server code (Responses API + Images API)

Why Responses API? It’s the recommended, modern way to generate text and stream outputs going forward; if you’re coming from Chat Completions, see the official migration guide. (OpenAI Platform)
Why SDK over raw fetch? Cleaner code, types, and built‑ins for images. (OpenAI Platform). You can find the full code to the backend in the repo.

backend/server.js

Training the chatBot

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const demoModel = [
  {
    role: "user",
    content: "Where is the Cloudinary React SDK documentation?"
  },
  {
    role: "assistant",
    content: "See: https://cloudinary.com/documentation/react_integration"
  },
  {
    role: "user",
    content: "Where can I read about Cloudinary image transformations in React?"
  },
  {
    role: "assistant",
    content: "See: https://cloudinary.com/documentation/react_image_transformations"
  },
  {
    role: "user",
    content: "How do I display an image using the Cloudinary React SDK?"
  },
  {
    role: "assistant",
    content:
`Use @cloudinary/react and @cloudinary/url-gen. Example:

import { AdvancedImage } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';
import { sepia } from '@cloudinary/url-gen/actions/effect';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('front_face').effect(sepia());

<AdvancedImage cldImg={img} />`
  }
];

This code initializes the OpenAI client on the server using an API key from environment variables, ensuring all AI calls are authenticated. It also defines a demoModel array containing a series of example question-and-answer pairs. These serve as “conversation seeds” that help guide the AI toward Cloudinary-specific knowledge by showing it how the assistant should respond. Each entry mimics a real chat message, with a role (user or assistant) and content. Together, these samples act as contextual training data, steering the model to provide accurate Cloudinary documentation links and example React code when similar questions are asked.

Creating the chatBot with OpenAI

app.post("/api/chat", async (req, res) => {
  try {
    const { messages = [] } = req.body;

    // System prompt keeps the bot scoped to your docs
    const system = {
      role: "system",
      content:
        "You are a helpful developer docs assistant. Prefer official Cloudinary docs. Include links when helpful."
    };

    const input = [system, ...demoModel, ...messages]
      .map(m => ({ role: m.role, content: m.content }));

    const r = await openai.responses.create({
      model: "gpt-4o-mini",
      input
    });

    // Convenience: return plain text
    res.json({ content: r.output_text });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

This endpoint takes the user’s chat messages, prepends a system prompt, and mixes in example Q&A pairs to guide the model toward Cloudinary-focused answers. It sends this combined conversation to OpenAI using the gpt-4o-mini model, then returns the assistant’s plain-text reply to the client. If an error occurs, it logs the issue and responds with a 500 error.

Creating the Avatars with DALL-E

app.post("/api/avatar", async (_req, res) => {
  try {
    const r = await openai.images.generate({
      model: "gpt-image-1",
      prompt:
        "minimal, cute round animal avatar on flat background, high contrast, centered, no text",
      n: 2,
      size: "256x256"
    });

    // Return {url} objects for the UI
    res.json(r.data.map(d => ({ url: d.url })));
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

This endpoint generates simple AI-created avatars. When called, it sends a prompt to OpenAI’s image generation model (gpt-image-1) requesting two minimal, cute, round animal avatars at 256×256 resolution. The OpenAI API returns image objects containing URLs, which the server maps into a clean { url } format for the frontend. If generation fails, the server logs the error and responds with a 500 status code.

Responses API reference (Node): see Responses docs. (OpenAI Platform)
Images API reference: see Images docs. (OpenAI Platform)

3) Dev scripts

Add these to your root package.json:

{
  "scripts": {
    "dev": "vite",
    "server": "node backend/server.js",
    "server:dev": "nodemon backend/server.js"
  }
}

4) Run it

# terminal 1
npm run server:dev

# terminal 2
npm run dev
# open http://localhost:3000

Type:
“How do I use the Cloudinary React SDK?”
You should get a helpful, linked answer pulled in the spirit of your seed examples.

Production notes (important)

Never expose your API key in client code or public repos. Use env vars and a server. (OpenAI Platform)
Prefer Responses API for new builds and streaming; see migration notes if you used Chat Completions before. (OpenAI Platform)
If you want retrieval over your actual docs (beyond hardcoded examples), look at the Assistants API with tools or Retrieval. (OpenAI Platform)

Wrap‑up

You now have a lightweight, dev‑friendly chatbot that answers from your docs and greets users with generated avatars. From here you can:

Swap the seed examples for real retrieval.
Add streaming UI for token‑by‑token responses. (OpenAI Platform)
Validate outputs with structured JSON. (OpenAI Platform)

Further reading:

OpenAI Quickstart (Node) (OpenAI Platform)
Responses API (text generation) (OpenAI Platform)
Images API (generation & sizes) (OpenAI Platform)

Repo: Cloudinary-Chatbot-OpenAI-Demo

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

Turn Any Image into a Blog Post with AI (React, Cloudinary & OpenAI)

Pato — Mon, 08 Sep 2025 13:11:47 +0000

Why this is cool

Give your content team a superpower: drop in any image → get a well‑formed, vertical‑specific blog post plus audio playback. We’ll combine Cloudinary AI (image captioning) with OpenAI (blog generation + TTS) inside a Vite + React app with an Express backend.

What you’ll build

Upload an image → Cloudinary generates a caption describing it
Send that caption to OpenAI → get a 300‑word marketing blog post tailored to the image’s vertical (auto, travel, fashion, etc.)
Generate an MP3 narration of the post with OpenAI TTS

Demo idea: a red Ferrari image becomes a short, punchy automotive blog post with a play button for audio.

Full repo: Cloudinary-React-Image-to-Blog-AI

Prereqs

Node 18+
Free accounts: Cloudinary and OpenAI
Basic React/JS/Node skills

⚠️ OpenAI billing: add a small credit (\$5–\$10) and a spending cap to avoid surprises.

1) Cloudinary setup

Create/login → Settings → Product Environments
Note your Cloud name (e.g. demo)
API Keys: Settings → Product Environments → API Keys → Generate New API Key

Keep these handy:

CLOUDINARY_CLOUD_NAME
CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET

We’ll also use the public cloud name on the client (via Vite env).

2) OpenAI setup

Create/login at platform.openai.com
Billing → add payment details + monthly limit
API Keys → Create new secret key

Save your OPENAI_API_KEY in .env (server only).

3) Scaffold the project (Vite + React)

npm create vite@latest image-to-blog-ai -- --template react-swc
cd image-to-blog-ai
npm i

Install deps for client & server:

# client deps
npm i axios react-markdown @cloudinary/react @cloudinary/url-gen

# server deps
npm i express cors cloudinary multer streamifier openai dotenv

# (optional in dev)
npm i -D nodemon

Project layout (single repo, both client + server):

image-to-blog-ai/
├─ index.html
├─ src/
├─ server.js            # Express API
├─ public/              # serves speech.mp3
├─ .env                 # server secrets
├─ vite.config.js
├─ package.json
└─ ...

4) Vite dev proxy (no CORS headaches)

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:6000', // Express port
        changeOrigin: true,
        secure: false,
      },
    },
  },
})

5) React UI

Create src/App.jsx. You can find the explanation of the main parts of the code below and the full code example here.

Creating the story

  const handleSubmit = async () => {
    if (!image) return

    const formData = new FormData()
    formData.append('image', image)

    try {
      setLoading(true)
      const { data } = await axios.post('/api/caption', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      })

      setCaption(data.caption)
      setStory(data.story.content)

      const cldImg = cld.image(data.public_id)
      cldImg.resize(fill().width(500).height(500))
      setImage(cldImg)
      setError('')
    } catch (err) {
      console.error(err)
      setError(err?.response?.data?.error || err.message)
    } finally {
      setShouldSubmit(false)
      setLoading(false)
    }
  }

We are going to break the code snippet above to have a better idea of what's going on.

const { data } = await axios.post('/api/caption', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
})

We make a POST call to /api/caption with multipart/form-data. The backend is responsible for uploading the image to Cloudinary, generating a caption of that image using Cloudinary AI technologies, and generating a story via OpenAI.

We set the caption and the story in the state:

setCaption(data.caption)
setStory(data.story.content)

Now let's work with the image uploaded.

const cldImg = cld.image(data.public_id)
cldImg.resize(fill().width(500).height(500))
setImage(cldImg)

The code snippet above shows cld.image(publicId) which creates a CloudinaryImage instance. .resize(fill().width(500).height(500)) applies a fill resize, cropping to maintain aspect ratio while fitting the 500×500 frame. Then we overwrite the image state with the CloudinaryImage instance. This is key: image now stops being a File and becomes a Cloudinary object.

      {story && (
        <div>
          <AudioPlayer text={story} setLoading={setLoading} />
          {!loading && <ReactMarkdown>{story}</ReactMarkdown>}
        </div>
      )}
    </div>
  )
}

Now the image is shown with the code snippet above. This block renders only when a story exists. The AudioPlayer component receives the full story, generates audio (text-to-speech API from OpenAI), and uses setLoading to pause UI updates while processing. Meanwhile, ReactMarkdown converts the story’s Markdown into formatted HTML, displaying it only when the app isn’t busy (!loading). Together, these pieces let the user upload an image and immediately get a caption, hear the story read aloud, and view it as a polished blog-style post.

The AudioPlayer component

Time to create the AudioPlayer component src/AudioPlayer.jsx. Here's the complete code of the AudioPlayer.jsx file.

The most importat functio of this file is the generate function.

  const generate = async () => {
    try {
      setLoading(true)
      const { data } = await axios.post('/api/generate-audio', { text })
      setUrl(data.audioUrl)
    } finally {
      setLoading(false)
    }
  }

This function sends the story text to the backend to generate audio. When generate runs, it first sets loading to true to indicate processing. It then makes a POST request to /api/generate-audio, passing the text payload. The server responds with an audioUrl, which the component stores in state so the audio player can use it. Finally, in a finally block—ensuring it runs whether the request succeeds or fails—it resets loading to false, keeping the UI state consistent.

src/App.css (grab your own styles, e.g. a centered column, spinner, and a .custom-file-upload button). Here's the complete code of the App.css file.

Tip: Store only the Cloud Name on the client via VITE_CLOUD_NAME. Keep all secrets on the server.

6) Express backend (Cloudinary + OpenAI)

Create .env in project root:

VITE_CLOUD_NAME=YOUR_CLOUD_NAME
CLOUDINARY_CLOUD_NAME=YOUR_CLOUD_NAME
CLOUDINARY_API_KEY=YOUR_CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET=YOUR_CLOUDINARY_API_SECRET
OPENAI_API_KEY=YOUR_OPENAI_API_KEY

Create server.js in project root:

Here you can find the full code of the server.js file. Now, let's deep dive into the different parts of the server.js.

OpenAI Initialization

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })

Creates a reusable OpenAI client for generating text (blog posts) and audio (text-to-speech).

Multer Upload Handling

const storage = multer.memoryStorage()
const upload = multer({
  storage,
  limits: { fileSize: 8 * 1024 * 1024 },
  fileFilter: (_req, file, cb) => {
    const ok = /image\/(jpeg|png|webp|gif|bmp|tiff)/i.test(file.mimetype)
    cb(ok ? null : new Error('Unsupported file type'), ok)
  },
})

This setup configures Multer to store uploaded images directly in memory rather than on disk, while enforcing a maximum file size of 8MB to prevent oversized uploads. It also filters incoming files to allow only valid image MIME types, ensuring users can't upload unsupported formats. With this configuration, the /api/caption endpoint receives the image as req.file.buffer, ready to be processed or uploaded to Cloudinary without ever touching the filesystem.

Helper Function: Upload Image Buffer to Cloudinary

function uploadBufferToCloudinary(buffer) {
  return new Promise((resolve, reject) => {
    const stream = cloudinary.uploader.upload_stream(
      { detection: 'captioning' },
      (error, result) => (error ? reject(error) : resolve(result))
    )
    streamifier.createReadStream(buffer).pipe(stream)
  })
}

This helper function wraps Cloudinary’s upload_stream in a Promise so it can be used with await, making the upload flow cleaner and fully async. It streams the in-memory file buffer into Cloudinary using streamifier, enabling AI caption detection through the detection: 'captioning' option. Once the upload completes, it returns the full Cloudinary response with the public_id, and the automatically generated caption found in info.detection.captioning.data.caption.

Generating the caption

app.post('/api/caption', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: 'Image file is required' });
  }

  const uploadStream = cloudinary.uploader.upload_stream(
    { detection: 'captioning' },
     async (error, result) => {
      if (error) {
        console.error('Cloudinary error:', error);
        return res.status(500).json({ error: error.message });
      }
      const story = await generateBlog(result.info.detection.captioning.data.caption)
      const resObj = {
        public_id: result.public_id,
        caption: result.info.detection.captioning.data.caption,
        story
      }
      res.json(resObj);
    }
  );

  streamifier.createReadStream(req.file.buffer).pipe(uploadStream);
});

This endpoint is reponsabile for uploading the image to Cloudinary via the multer stream and using the captioning AI mechanism to analyze the image and generate a caption. Then this caption gets sent to the generateBlog function to create a blog post using OpenAI APIs.

Generating the blog content

const generateBlog = async(caption) => {

  const message = {
    role: "user",
    content: `create an 300 world blog post to be used as part of a marketing campaign from a business-- the blog must focused on the vertical industry of that image based on the following caption of the image: ${caption}. This blog is not for the business but for the person interested in the vetical industry of the image`
  }

  try {
    const response = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: [message], // pass the new message and the previous messages
    });
    console.log('open ai response', response.choices[0].message);
    return response.choices[0].message;
  } catch (error) {
    console.error(error);
    return `error: Internal Server Error`;
  }
};

This functions generates the blog based on the instructions passed in the content property of the message object. Then we use the NodeJS OpenAI SDk completion to generate the blog based on the instructions we set and the caption we got from the image we uploaded to Cloudinary.

Generating audio

app.post("/api/generate-audio", async (req, res) => {
  try {
    const mp3 = await openai.audio.speech.create({
      model: "tts-1",
      voice: "alloy",
      input: req.body.text,
    });
    const buffer = Buffer.from(await mp3.arrayBuffer());
    const filePath = path.resolve(__dirname, "public", "speech.mp3");
    await fs.writeFile(filePath, buffer);
    res.json({ audioUrl: `/speech.mp3` });
  } catch (error) {
    console.error("Error generating audio:", error);
    res.status(500).json({ error: "Error generating audio" });
  }
});

In this endpoint, we are using the OpenAI SDK text-to-speech to generate the audio based on the request text. This text is blog text generated in the generateBlog() function. Once the audio has been generated, we store the audio in the speech.mp3 file, to be used in the front end.

package.json (scripts for both dev servers):

{
  "name": "image-to-blog-ai",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "start": "node server.js",
    "dev:api": "nodemon server.js"
  }
}

7) Run it

# Terminal A (API)
npm run dev:api
# API → http://localhost:6000

# Terminal B (Vite)
npm run dev
# Web → http://localhost:3000

Upload an image → watch the caption + blog appear → click Generate Audio to get an MP3.

8) Production & security notes

Keep secrets server‑side only; never expose API keys in the client
Add rate limiting (e.g. express-rate-limit) and basic auth or tokens on /api routes
Validate file types and size (shown above); consider virus scanning for public apps
Cache TTS results per post hash to avoid re‑billing
Consider the Responses API for future‑proof OpenAI calls; swap chat.completions when you’re ready

Troubleshooting

CORS in dev: use the Vite proxy as shown (don’t call http://localhost:6000 directly from the client)
Cloudinary caption is undefined: ensure the detection: 'captioning' add‑on is enabled for your account/plan
MP3 not found: verify public/ exists and the server has write permissions

Wrap‑up

You now have an image‑to‑blog pipeline with Cloudinary + OpenAI: caption → post → audio. Drop it into your content workflow to turn static visuals into dynamic marketing assets.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

I went to the Firebase Summit 2022 -NYC

Pato — Mon, 30 Jan 2023 19:11:13 +0000

Hi friends! I recently had the fantastic opportunity to attend the Firebase Summit 2022 in New York City! I’m here to tell you how it went and share some fantastic moments of this great event.

First of all, if you don’t know what Firebase is, that’s okay!

What is Firebase?
A lot of you have heard of Firebase, which is way more than just a database.

Firebase is a web and mobile development platform. It has 19 products and is used by millions of apps. Also, it is backed by our friends at Google.

I have been a longtime fan of Firebase and have been using the platform for nearly 5 years. I’m still in shock with all the different use cases of the product that helps build amazing applications in a one-stop dashboard.

A few months ago, I saw a Tweet about registering for the Firebase Summit in NYC, which turned out to be just a few blocks away from my house so I had to go! I immediately messaged my friend David East (Developer Advocate at Firebase).

I was super excited not only to learn more about Firebase, but to have the opportunity to meet amazing people from the tech community.

Finally, October 18 came! I didn’t sleep much the night before because I was super excited about this event, but the excitement helped me feel energized. The Firebase Summit took place in the Google offices in NYC where I met members of the community and listened to talks presented by the Firebase team on the latest features.

What’s new with Firebase?

Firebase Hosting
Firebase provides hosting that you can use to deploy fast and secure static web applications. Now you can deploy web apps with your favorite web dynamic frameworks with the help of one single command from the Firebase CLI. With just one command the CLI will detect your framework, build it, and deploy it.

Learn more from this awesome demo David East (Developer Advocate at Firebase) created for the Firebase Summit.

Cloud Firestore New Features
A few changes with Cloud Firestore:

Scalable Baas: The Firebase team has removed hard limits for write throughput & concurrent active connections.
Auto-delete: You can now auto-delete content with Firestore’s time-to-live (TTL) policies. Basically, you set an expiration date for the content that lives in your Firestore database.
The new COUNT() function operation: This operation can help you execute the count in collection group queries without having to retrieve all documents. Take a look at David’s tweet on firebase with a code example showing how to use the COUNT() function. with a code, an example showing how to use the COUNT() function.
Learn more about these Cloud Firestore updates in this YouTube video.

Firestore Cloud Storage security rules
Working with security rules got easier by using firestore.get(). You can use the service side security rules that you have written, and make sure only authorized users have access to a specific file. This will help you only have one set of rules instead of having the same ones in two places (Firestore and Cloud Storage).

Learn more about Firestore Cloud Storage security rules in this YouTube video.

Firebase Extensions
This is one of the things I’m most excited about! You can now create your own extensions and publish them to the Firebase extension marketplace. You can now sign up for the extensions provider alpha program so you can start building your own Firebase extensions.

Learn more about the Firebase Extensions in this YouTube video.

Deliver Personalized Behavior with Remote Config
Have you ever wondered how to create a better and more personalized experience for your app users? Well with this remote config, you can help optimize and personalize the experience of your users automatically.

If you want to learn more about Remote Config personalization look at this YouTube video.
Resources:

Firebase Blog
Firebase YouTube
Firebase Twitter
Watch the entire Firebase Summit Keynote.

PayPal Developer Community

The PayPal Developer community helps you build your career, while also improving PayPal products and the developer experience. You’ll be able to contribute code and documentation, meet new people and learn from the open-source community.

Website: developer.paypal.com
Twitter: @paypaldev
GitHub: @paypal developer

How to add PayPal checkout payments to your React app

Pato — Wed, 02 Nov 2022 17:25:59 +0000

Have you always wondered how to monetize your web applications 🤑? Time to start making those benjamins 💸💸. In this how-to guide, you will learn how to integrate PayPal as your checkout payment solution for your ReactJS app using the react-paypal-js npm package.

What is PayPal? Paypal is a payment processing product that helps you process payments for your mobile and web applications. We provide a fast and easy way to handle online payments, whether it's for a digital media property or an online merchant of any kind in over 100 countries.

Guide Overview

Part 1: PayPal Developer sandbox App
- Creating an app using the PayPal sandbox
Part 2: Adding PayPal to your React App
- Add the PayPal NPM package
- Working with the PayPalScriptProvider
- Loading state with the usePayPalScriptReducer
- Adding the PayPal buttons
Part 3: Testing the PayPal Checkout
- Testing the PayPal Checkout

This tutorial requires the following:

A PayPal Developer Account
A ReactJS application (I'm using create react app for this example).

You can find the source code to this guide in our PayPal React Sample App in our Github Org.

Part 1: PayPal Developer sandbox app

First, we need to create a PayPal app. To do this, navigate to the PayPal Developer Dashboard and login into your PayPal developer account. Once you are inside the PayPal Developer dashboard, make sure you are in the My Apps & Credentials page. Inside this page, click on the blue button Create App.

Enter the name of the PayPal app you are creating. In my case, I named my app React-checkout. Now, select the App Type to be a Merchant, and click on the blue button Create App.

After creating your PayPal app, you will see a screen similar to mine. In this screen, you will see your Client ID. Copy this ID and save it somewhere (We will use it later on in this tutorial).

You can always get this Client ID by navigating to the app you just created inside of the PayPal Developer Dashboard.

Note: Client ID is Class 4 data. Client ID is non-sensitive data, but still be prudent about sharing or posting it. We recommend putting the Client ID in an environment variable in an .env file.

Part 2: Adding PayPal to your React App

Add the PayPal NPM package

To install the react-paypal-js npm package run the following command inside of your project's terminal.

npm install @paypal/react-paypal-js

The PayPal npm package consists of 2 main parts:

The Context Provider, this <PayPalScriptProvider/> is responsible for the PayPal JS SDK script. This provider uses the native React Context API for managing the state and communicating with child components. It also supports reloading the script when parameters change.
The PayPal SDK Components, components like <PayPalButtons/> are used to render the UI for PayPal products served by the JS SDK.

If you have any issues with this npm package, please report them in its GitHub repo.

After you have installed the react-paypal-js npm package, open your root file, in my case my root file is the App.js file.

In this app, the App.js component is responsible for loading the PayPal script and rendering the <Checkout/> component. The <Checkout/> component will be created later in this tutorial.

In this file, you will import the PayPalScriptProvider from the PayPal npm package.

At the top of the file, add the following line of code:

import { PayPalScriptProvider } from "@paypal/react-paypal-js";

In this file we are adding the initialOptions object, these options can be changed with other configuration parameters. To learn more about the other configuration options look at the PayPal SDK docs.

const initialOptions = {
  "client-id": "YOUR-CLIENT-ID-HERE",
  currency: "USD",
  intent: "capture",
};

Now, make sure you replace the text from the client-id property with the Client ID from your PayPal app.

Working with the `PayPalScriptProvider`

Finally, inside the App.js, we add the <PayPalScriptProvider/>. Notice we have inside the provider the <Checkout/> component where we have the PayPal components. We now add the options prop to the PayPalScriptProvider to configure the JS SDK. It accepts an object for passing query parameters and data attributes to the JS SDK script.

<PayPalScriptProvider options={initialOptions}>
        <Checkout/>
</PayPalScriptProvider>

Your App.js component should look like this:

import Checkout from './Checkout';
import { PayPalScriptProvider } from "@paypal/react-paypal-js";

const initialOptions = {
  "client-id": "YOUR-CLIENT-ID-HERE",
  currency: "USD",
  intent: "capture",
};

function App() {
  return (
    <PayPalScriptProvider options={initialOptions}>
        <Checkout/>
    </PayPalScriptProvider>
  );
}

export default App;

In our React app, we are giving the user the option to select between 2 currencies (USD and Euro) to make a payment. When the user changes the currency, the value will be passed to the PayPal script thanks to the usePayPalScriptReducer().

Time to create a new Checkout.js component inside of your React application. This file is responsible for loading the PayPal components such as the PayPal buttons.

At the top of the Checkout.js file, add the following line to include the PayPalButtons and the usePayPalScriptReducer.

import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";

Loading state with the `usePayPalScriptReducer`

The usePayPalScriptReducer will show a spinner when the PayPal script is loading and can be used to change the values of the options of the PayPal script and at the same time reload the script with the updated parameters.

The PayPal script has several loading states and with the usePayPalScriptReducer we can track it in an easier way. This state can be used to show a loading spinner while the script loads or an error message if it fails to load.

Loading states:

isInitial - not started (only used when passing deferLoading={true})
isPending - loading (default)
isResolved - successfully loaded
isRejected - failed to load

In this sample app, we used the isPending state to render the rest of the UI including the PayPalButtons.

Inside your Checkout component add the code below. This code will extract the options, the loading state (isPending), and the dispatch to dispatch an action to our usePayPalScriptReducer();

const [{ options, isPending }, dispatch] = usePayPalScriptReducer();

Adding The Currency Selectors

In the Checkout component, you will add the code to update the state with the new currency the user selects and this will dispatch an action to the usePayPalScriptReducer to update the PayPal script.

const [currency, setCurrency] = useState(options.currency);

    const onCurrencyChange = ({ target: { value } }) => {
        setCurrency(value);
        dispatch({
            type: "resetOptions",
            value: {
                ...options,
                currency: value,
            },
        });
    }

Now, your UI will look like this:

{
isPending ? <p>LOADING...</p> : (
  <>
    <select value={currency} onChange={onCurrencyChange}>
      <option value="USD">💵 USD</option>
      <option value="EUR">💶 Euro</option>
    </select>
  </>
 )
}

Adding the PayPal buttons

To start using the PayPal buttons, all you have to do is add the <PayPalButtons/> component to your JSX. The magic comes when you extend the functionality of the PayPal buttons by passing the following props available:

style: This attribute allows you to style the PayPal button E.g color, shape, layout, and more.
createOrder: This attribute allows you to create the request of your order with the following properties: item_total, purchase_units, and more.
onApprove: This attribute allows doing something with the order details after the order has been created.

Inside of your <Checkout/> component, after the onCurrencyChange function add the following functions to be called with the onCreateOrder and onApprove props of the PayPal button.

const onCreateOrder = (data,actions) => {
        return actions.order.create({
            purchase_units: [
                {
                    amount: {
                        value: "8.99",
                    },
                },
            ],
        });
    }

const onApproveOrder = (data,actions) => {
  return actions.order.capture().then((details) => {
  const name = details.payer.name.given_name;
    alert(`Transaction completed by ${name}`);
  });
}

Now we will add the <PayPalButtons/> component to your <Checkout/> component. Your JSX code should look like this:

<div className="checkout">
  {isPending ? <p>LOADING...</p> : 
    (
      <>
        <select value={currency} onChange={onCurrencyChange}>
          option value="USD">💵 USD</option>
          <option value="EUR">💶 Euro</option>
        </select>
        <PayPalButtons 
          style={{ layout: "vertical" }}
          createOrder={(data, actions) => onCreateOrder(data, actions)}
          onApprove={(data, actions) => onApproveOrder(data, actions)}
        />
     </>
   )}
</div>

The Final code of the Checkout.js file will look like this:

import React, { useState } from 'react';
import './Checkout.css';
import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";

const Checkout = () => {
    const [{ options, isPending }, dispatch] = usePayPalScriptReducer();
    const [currency, setCurrency] = useState(options.currency);

    const onCurrencyChange = ({ target: { value } }) => {
        setCurrency(value);
        dispatch({
            type: "resetOptions",
            value: {
                ...options,
                currency: value,
            },
        });
    }

    const onCreateOrder = (data,actions) => {
        return actions.order.create({
            purchase_units: [
                {
                    amount: {
                        value: "8.99",
                    },
                },
            ],
        });
    }

    const onApproveOrder = (data,actions) => {
        return actions.order.capture().then((details) => {
            const name = details.payer.name.given_name;
            alert(`Transaction completed by ${name}`);
        });
    }

    return (
        <div className="checkout">
            {isPending ? <p>LOADING...</p> : (
                <>
                    <select value={currency} onChange={onCurrencyChange}>
                            <option value="USD">💵 USD</option>
                            <option value="EUR">💶 Euro</option>
                    </select>
                    <PayPalButtons 
                        style={{ layout: "vertical" }}
                        createOrder={(data, actions) => onCreateOrder(data, actions)}
                        onApprove={(data, actions) => onApproveOrder(data, actions)}
                    />
                </>
            )}
        </div>
    );
}

export default Checkout;

Part 3: Testing the PayPal Checkout

Testing the PayPal Checkout

Inside your project run in the terminal the npm start command to run your ReactJS application.

Open http://localhost:3000 to view the app in your browser.

You should see the following:

Finally, click on the Debit or Credit Card button to make a payment! You can use the sample card below to test the guest checkout experience with the credit cards.

Sample Card

You can create sample credit card numbers using the PayPal Credit Card Generator inside of your PayPal Developer Dashboard.
Card Type: Visa

Card Number: 4032039534213337

Expiration Date: 03/2026

CVV: 952

Online payments have grown exponentially in the past years, especially during the COVID-19 pandemic. The number of online payment transactions will continue to grow as the years go by. We know that online payments are not going anywhere, but now it’s up to you to get on this trend so your business continues to make money and PayPal is here to help you with this.

You can find the source code to guide in our PayPal React Sample App in our Github Org.

S/O to Greg Jopa for his content that help me write this how-to guide :)

PayPal Developer Community

How to Add In-App Messages to a Flutter App

Pato — Fri, 03 Jun 2022 20:21:15 +0000

In-app messages (IAM) can help increase user engagement among active users, nudging them towards desired actions with targeted messages and dynamic content. These messages can be automated and personalized based on custom segmentation and trigger criteria. This tutorial will cover how to integrate OneSignal IAM into a Flutter app for both Android and iOS. It will also show you how to use message triggers to automate and customize your messages.

Creating the Flutter Project

Open your terminal and run the following command to create a new Flutter project

flutter create flutter_onesignal_iamcd flutter_onesignal_iam

Now run the following command to add Onesignal SDK to the flutter project

flutter pub add onesignal_flutter

Setting up your OneSignal Account

This tutorial requires a OneSignal account. You can either log in to your existing OneSignal account or create a new account for free. Then, click +New App/Website to begin setting up your OneSignal account.

Android Setup

As Flutter apps can target both Android and iOS, both of these platforms need to be set up individually. Let’s proceed with setting up Android for now — iOS can be added later.

Name your app and select Google Android (FCM) and use the following guide to generate a Firebase Server Key.

After you've input your Firebase Server Key and Firebase Sender ID, click Save & Continue.

On the next screen, select _ Flutter _ as your target SDK.

On the next page, you'll see your App ID — copy it for future reference. Don't click Done just yet. The Flutter app needs to be run on your device first before you complete this step.

The App ID is used to initialize the OneSignal SDK. Add the following code to main.dart:

import 'package:flutter/material.dart';
import 'package:onesignal_flutter/onesignal_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    OneSignal.shared.setAppId("YOUR ONESIGNAL APP ID HERE");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('OneSignal IAM'),
      ),
      body: const Center(child: Text('OneSignal IAM Example')),
    );
  }
}

Now, run the app on your device. Then, return to your OneSignal account and click on Check Subscribed Users. A message showing your device model will be shown.

iOS Setup

In your OneSignal account, navigate _ Settings _ and click on Apple iOS (APNs). In this step, you will be asked for an iOS push certificate and its password.

Check out the linked documentation to learn how to generate an iOS push certificate. The easiest method is to useOneSignal provisionator, which directly generates the p12 file and password without much hassle. Once generated, upload the p12 file and password, and continue to the next screen.

Upload Your APNs Cert

The certificate password is the one used to encrypt the exported certificate. If you left the password empty, do not enter a value for Certificate Password. OneSignal will verify the certificate can be used for push notifications upon clicking the continue button.

Select Flutter SDK on this screen, the next screen is identical to the Android configuration screen. Running the same code for iOS will work without any further modifications.

At the bottom of the Apple iOS (APNs) Configuration screen, a warning will appear saying that your user has not subscribed. This is because we have not yet asked for permission to send push notification. We will be asking for opt-in permission using in app messages later in this article.

Sending an In-App Message

Click on _ Message _ from the main navigation bar and then select _ In-App _ from the submenu that appears.

Onesignal provides default in-app messaging templates which can then be customized according to your use case and preference. From the list of templates, click on [Default Template] Welcome Message.

In the top right corner of the screen, select Actions — a drop-down menu will appear. If you'd like to edit and customize the default welcome message, click Edit to alter the template. If you've finished editing or would simply like to test the default message as is, click _ Resume _ from the drop-down menu. Then, run the app on your device.

In-App Messaging Triggers

You can use Triggers to choose when to show the in-app message to the user. There are some predefined Triggers such as "app open," as well as custom triggers that can be set programmatically using the addTrigger() function. To begin, let's try using a predefined trigger for showing an app rating message.

If you're using a free OneSignal plan, you will only be able to have one in-app message live at a time. Before creating the new message, you'll need to pause the welcome in-app message by clicking _ Actions _ and then _ Pause _ from the drop-down menu. Then, navigate back to the main in-app messages screen and select [Default Template] App Store Rating. Select _ Actions _ > Edit and then scroll down on the editing screen to the section entitled 3. Triggers.

When should users see this message? select _ When certain conditions are satisfied during the session . You should see two form fields for **_session duration** and _ duration since the last in-app . Enter a session duration greater than 10 seconds for demonstration purposes, then scroll down to the bottom of the page and click on the blue **_Update Message** button.

Then, from the list of In-app messages, click _ Actions _ > _ Resume _ for this message and then open the app. After 10 seconds, you should see a rating request message inside your app.

This example demonstrates the power of in-app messaging! Using OneSignal's in-app messaging tool, you can:

Add and remove in-app messages remotely without requiring any app update.
Leverage useful, pre-made triggers such as _ app open , **_session duration** , and _ duration since the last in-app message _, along with the option to club these triggers with an OR operation. This makes implementing a wide range of in-app messaging strategies possible without requiring any code customizations!

Asking for Push Permission (iOS)

In iOS, a user needs to grant permission to an app in order to receive push notifications. As a general rule of thumb, you don’t want to ask a user for push notification permission immediately when they first launch the app because they aren't likely to understand the value of notifications at that early stage of adoption. Onesignal provides a predefined in-app messaging template to help you time your opt-in request and give users more context to inform their opt-in decision.

To try out this prompt, pause the current message (if you're using a free account), then click Action > _ Resume _ to enable the [Default Template] Push Permission Prompt. This prompt has been set to show the user a message asking for permission upon launching the app, but the trigger and message content can be customized to provide a better user experience and increase the likelihood of opt-in.

If the clicks to Allow notifications in the in-app message, it will automatically trigger the native iOS permission prompt. If they click Maybe Later , they will be opted out of notifications but can be prompted again later with an in-app message encouraging them to revisit this decision.

If a user denies permission to receive notifications the first time around, but later clicks _ Allow _ when they are re-prompted, they will be taken to the notification settings where they will have to manually allow the app to show notifications — this is a restriction imposed by iOS.

Using Custom Triggers in In-App Messaging

Custom triggers are key-value pairs of string or integer types to which the SDK responds. Whenever the condition set is satisfied, the trigger is initiated. Custom triggers can be clubbed together with AND and OR to create more complex triggers.

For demonstration purposes, let’s build a button that, when tapped eight times, will trigger a promotional in-app message.

To do so, open main.dart and add a floating action button to the scaffold, along with a variable to save the button tap count.

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return const MaterialApp(
     home: MyHomePage(),
   );
 }
}

class MyHomePage extends StatefulWidget {
 const MyHomePage({Key? key}) : super(key: key);

 @override
 State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 int taps = 0;

 @override
 void initState() {
   super.initState();
   initMessaging();
 }

 Future<void> initMessaging() async {
   await OneSignal.shared.setAppId("f3afbef4-2fe4-452b-a391-b8175c2b65a1");
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('OneSignal IAM'),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () {
         setState(() {
           taps = taps + 1;
         });
         OneSignal.shared.addTrigger('taps', taps);
       },
       child: const Icon(Icons.add),
     ),
     body: const Center(child: Text('IAM')),
   );
 }

Open the OneSignal dashboard, select the [Default Template] 10% Off Promotional template, and click _ Actions _ > _ Edit . On the editing page, scroll down until you see the **_3. Triggers** section. Under the question, When should users see this message? select When certain conditions are satisfied during the session. Click IN-APP TRIGGER and input taps is 8 to the appropriate form fields, as shown below.

Finally, click _ Add Trigger _ and then scroll to the bottom of the page and click Update Message. If you followed along and implemented the previous example, the push permission prompt will still be live. If you are using a free plan, pause that message, navigate back to your promotional message, and click Actions > Resume to set this one live. Now, run the app with the updated code. Tap the button 8 times and the promotional message should pop up on your screen.

This custom trigger was an example of key is value pair. There are other conditions on which the triggers can be set as well.

One of the best things about Onesignal's in-app messaging tool is the ability to overhaul the design of the popup without doing an app update. To demonstrate, let's update the current 10% promotional message to something more appropriate. To do so, first click _ Actions _ > Pause to pause the current message, then click on _ Edit _.

All the UI elements are highly customizable in the OneSignal message builder, as can be seen in the video below. Almost all aspects of text can be formatted to suit the design language of your app.

Messages also do not have to be fixed to a particular type of layout. All the UI elements can be reordered on the fly without requiring an app update.

In-app messages also support GIFs!

Let’s apply all these changes, scroll to the bottom and click _ Update Message _. No need to update any code, just open the app again!

Adding Click Actions in Messages

Onesignal provides a handful of click actions out of the box that can be customized from the dashboard. There is also a Custom Action ID, in which a custom action ID string is sent, which can handle custom cases such as deep-linking, app updates, or any other functionality.

Let’s implement a URL click action first. Implementing an URL means that when a user clicks on the button, they will be taken to the specified URL. To add a link, click Actions > _ Edit _ on the promotional message (if you closed out from the last example) and scroll down to the _ Button 1 _ box and update the URL. Then, scroll down to the bottom of the page and click _ Update Message . Then, click _ Action _ > **_Resume** to resume the message. To test it out, open your app and tap the button 8 times again.

Once the message pops up, press the first button and you should be taken to the website link you provided.

Custom Click Action ( Custom Action ID)

Creating custom click actions requires developer support. All the use cases that may be necessary for the future should be listed beforehand and handled in the code.

In this example let’s try deep linking to a second page when pressing the button. To do so, create a new file called success_screen.dart and add this code.

import 'package:flutter/material.dart';
class SuccessScreen extends StatelessWidget {
  const SuccessScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Success',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 42),
        ),
      ),
    );
  }

Now, go to the initMessaging() in main.dart and add a setInAppMessageClickedHandler to listen to any click actions that happen on the message.

 Future<void> initMessaging() async {
    await OneSignal.shared.setAppId("f3afbef4-2fe4-452b-a391-b8175c2b65a1");
    OneSignal.shared.setInAppMessageClickedHandler((action) {
      if (action.clickName == 'successPage') {
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => const SuccessScreen()));
      }
    });
  }

This works as follows:

set InAppMessageClickedHandler listens to any action event that is emitted by interacting with any UI element.
When a click action is set in the OneSignal console, it means that an action binds to that UI element.
Whenever an interaction occurs with that element, the action is triggered.
If that action is a pre-defined one, such as opening a URL, then while the click handler will listen to the action being emitted, the action to perform is already handled by the SDK and will result in opening the URL in the browser.
For action IDs that you specify, you can build different use cases as shown in the above example to handle different action IDs.
In the above snippet, the action has many properties which can be further leveraged to create better user experiences.

Now, click Action > Pause to pause the current message and then select Edit. Scroll down to the button to which a click action has to be added. Then, select Custom Action ID and give the action a name such as successPage.

Next, scroll down to the bottom of the screen and click Update Message and Resume the message via the Actions menu. Now, run the updated app.

When you click on the button, you should have successfully implemented deep linking!

Share Your Feedback

We'd love to know what you think and answer any additional questions you have. To connect with us, create an issue on GitHub or ping us on the OneSignalDevs Discord server to share your experience. We appreciate any insight you can share to help us better serve Vue.js users!

To stay in the loop with the latest product updates and innovations, follow the OneSignal Developers Twitter. For additional support and dev inspiration, tap into our global developer community.

>> Connect with the OneSignal Developer Community

This guest post was authored by Chinmay Kabi

How to Add In-App Messages in React Native (Expo)

Pato — Fri, 20 May 2022 21:07:27 +0000

In-app messages (IAM) are highly customizable pop-up interstitials that mobile app user receive inside your application. Unlike push notifications, IAM don’t require opt-in permission and they only show when the users are actively using your application.

OneSignal & Your Browser's Push API

It’s no secret that in-app messages can help you engage and retain app users. This tutorial will show you how to integrate with the React Native OneSignal NPM package to leverage IAM in your React app.

Some valuable use cases for IAM include:

User Onboarding: Guide your users through getting started with your application. Use an in-app slide carousel to build an effective onboarding process, introduce them to key application features, and emphasize the value your app will provide.
Announcing New Products & Features: Inform your users when you have added new products and features to the application to improve adoption and enhance the UX.
Requesting Push Permission & Location Access: Provide users with more context to inform their opt-in decision or request location or other access permissions that are vital to your application.
Encouraging Referrals: Allow your users to invite their friends to your application with a single click to grow your active users and build community.

This tutorial will cover how to integrate the React Native Expo OneSignal Plugin (managed workflow) into your app in order to gain in-app messaging functionality. Part one of this guide covers the OneSignal setup process. Part two of this guide covers how to integrate OneSignal with React using our NPM package.

Guide Overview

Part 1: Set up Your OneSignal Account (for free!)
Part 2: Push Notification Setup in React
Send an In-App Message to Your Android Device

This tutorial requires some basic knowledge of React Native (Expo). I'm using the Expo CLI to generate my project and NodeJS version 14.16.

Additional React Setup Resources:

React Native (Expo) plugin Sample Ap

Part 1: Set Up Your OneSignal Account

To begin, login to your OneSignal account or create a free account. Then, click on the blue button entitled _ New App/Website _ to configure your OneSignal account to fit your app or website.

Insert the name of your app or website. Select _ Google Android _ as your platform.

Click on the blue button entitled, _ Next: Configure Your Platform _.

Google Android FCM Configuration

It’s time to configure your Android app using a Firebase Server key. All Android apps require this key and the server ID if you want to send push notifications. If you don’t have the Firebase Server Keys, take a look at our documentation to learn how to generate a Firebase server API key.

Now select your target SDK. We'll take you through the steps to get your first user and send your first test notification.

On the next screen that appears, you will see your app ID — copy that app ID because you will use it inside of your Expo Application. DO NOT click to Check Subscribed Users or Done yet.

Part 2: Push Notification Setup In React Native Expo

Creating Your React App

Inside of your terminal, run the following commands to create a new React project using Create

Expo App:

expo init onesignal-rn-expo

When asked, selec any of the options under the Managed Workflow. In my case, I selected the first option, which is blank.

cd onesignal-rn-expo
expo start

For the official Expo, documentation click here.

Install OneSignal Expo Plugin

Inside of your project folder, open your terminal and run the following command to install the OneSignal Expo Plugin package.

expo install onesignal-expo-plugin

Next, install the React Native OneSignal plugin by running the following command:

yarn add react-native-onesignal

Even though onesignal-expo-plugin defines react-native-onesignal as a dependency and it gets put into the node_module, it will make sure the native parts get built.

If you forgot to run the following command after you have built your project, you can fix this by running expo prebuild --clean. This should delete android and ios and do a clean native build, then run the yarn add react-native-onesignal.

Configuration in app.json / app.config.js

Inside the app.json/app.config.js file, add the plugin to the plugin array:

App.json

{
  "plugins": [
    [
      "onesignal-expo-plugin",
      {
        "mode": "development",
        "devTeam": "91SW8A37CR"
      }
    ]
  ]
}

App.config.js

export default {
...
plugins: [
        [
        "onesignal-expo-plugin",
            {
                mode: process.env.NODE_ENV || "development",
                devTeam: "91SW8A37CR"
            }
        ]
    ]
};

Plugin Options

mode: used to configure APNs environment entitlement.
"development"
"production"
devTeam: *optional* used to configure Apple Team ID. You can find your Apple Team ID by running expo credentials:manager.

Example:

{
    "extra": {
        "oneSignalAppId": "<YOUR APP ID HERE>"
    }
}

You can then access the value to pass to the setAppId function:

import OneSignal from 'react-native-onesignal';
import Constants from "expo-constants";
OneSignal.setAppId(Constants.manifest.extra.oneSignalAppId);

Alternatively, pass the OneSignal app ID directly to the function:

import OneSignal from 'react-native-onesignal';
import Constants from "expo-constants";

OneSignal.setAppId("YOUR-ONESIGNAL-APP-ID");

Run & Build your Application

expo prebuild
# Build your native iOS project
$ expo run:ios
# Build your native Android project
expo run:android

Send an In-App Message to your Android Device

I recommend you run the application on an actual Android device to test the in-app messages. To do so, you will need to connect your Android device and enable developer mode.

Once you have connected to the device and enabled developer mode, run the application on your device by selecting your device as the target device. In my example, I’m running the app on a Google Pixel 5.

Once you have opened the application on your device, the device will be automatically be subscribed to notifications. Now, your device will be able to receive notifications sent by OneSignal.

To complete the setup process, return to your OneSignal dashboard to the point at which you previously left off. Click on the _ Check Subscribed Users _ button and a green message will appear like the one in the image below.

Click on the _ Done _ button.

Create an In-App Message

It’s time to send your first in-app message! To do so, login to your OneSignal account and navigate to the Dashboard tab. On the dashboard page, click on the tab that says Messages and you will be redirected to a new page.

Select the _ In-App _ tab from the submenu.

After clicking on _In-App, _ you will see the In-App Messages dashboard (pictured below). Click on the blue button New In-App button to create your first message.

On this page, you customize the In-App Message, from the content to display, the position, the image, your audience, and more.

Once you have finishing configuring sections one and two, scroll down to the triggers section (Section three. For testing purposes, select the _ On app open _ option. This option will automatically trigger the in-app message to appear when the app is opened.

Lastly, in the Schedule section, make sure your configuration looks like the following:

Under Schedule, select "Immediately," "Show forever," "Show until dismissed," and "Only once."

This configuration will send the message immediately and only once when you open the app.

Now it's time to set your in-app message live! To do so, click on the blue button that says _ Make Message Live _.

Connect With Us

Don’t forget to follow the OneSignal Developers Twitter and join our Discord server to learn more and connect with the OneSignal community of developers around the world.

Want to learn more about the OneSignal community? Visit our official website.

How to Send Push Notifications with the OneSignal NodeJS Client SDK

Pato — Fri, 13 May 2022 16:25:56 +0000

It’s no secret that push notifications can help you engage and retain app users. In this tutorial, we'll show you how to use the OneSignal NodeJS Client SDK to interact with all the OneSignal functionalities that you have available in our REST API but we made it easier for you with this wrapper.

Using the OneSignal NodeJS Client SDK is very useful because it can help you integrate OneSignal into different workflows that your applications may have.

Useful resources:

OneSignal & Your Browser's Push API

The Push API gives applications the ability to receive messages from a server whether or not the app is in the foreground or currently loaded on a user agent. This lets you deliver asynchronous notifications and updates to users who opt-in, resulting in better engagement with timely new content.

This tutorial will cover an overview the usage of our API with the OneSignal NodeJS Client SDK.

Guide Overview

Part 1: OneSignal REST API Overview
Part 2: Push Notification In NodeJS

This tutorial requires some basic knowledge of NodeJS and usage of REST APIs. I'm using the OneSignal Account along with:

App with OneSignal integrated (mobile, web, or game)
NPM (I’m using NPM version v6.14.11)
NodeJS (I’m using NodeJS v16.14.2)

Part 1: OneSignal REST API Overview

Sending Notifications

The OneSignal Push API allows you to programmatically send push notifications. The push notifications can be sent to different segments (by default you send them to all subscribed users) and even specific devices using the User ID. Another cool feature of the OneSignal REST API is the ability to cancel notifications that have been scheduled.

View Notification

One of my favorite endpoints to use with the OneSignal REST API is the view notification endpoint. This endpoint allows you to gather information about the notifications and outcomes associated with them. For example, the returned data can tell you see the number of notifications that have not been sent out, the number of notifications that got delivered, the number of confirmed deliveries, and much more information. If you want to learn more about all the data returned by this endpoint visit our rest API reference .

Our API can do way more than just send a notification and view data from that notification. If you want to learn more about our whole REST API, visit the OneSignal REST API overview page.

The cool thing about the NodeJS client library is that you don’t have to worry about the whole REST API setup in your NodeJS project, we handle all the boilerplate so you don’t have to worry about it ;)

Creating Your NodeJS App

Inside of your terminal run the following commands to create a new NodeJS project using NPM:

npm init

After entering the previous npm command, answer all the questions that will appear on your terminal. These questions will generate the values of your package.json.

Your package.json file will look similar to this:

{
    "name": "myapp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    “type”: “module”
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

Make sure you add the type property.

Part 2: Push Notifications In NodeJS

Setup your NodeJS App

The first thing you need to do is to create an index.js file. This file will contain all code necessary to send and view your notifications.

At the top of this file, add the request npm package. This package will help us make API calls to the OneSignal endpoints in an easier way than doing it with NodeJS natively.

import * as OneSignal from '@onesignal/node-onesignal';

Now, run npm install @onesignal/node-onesignal --save to add the OneSignal NodeJS SDK Client NPM package to your project. After you have installed the OneSignal NPM package, add the following variable to your index.js after the OneSignal import.

const ONE_SIGNAL_APP_ID = 'ONESIGNAL_APP_ID';

How to get the API KEY and the APP ID from OneSignal? Navigate to the OneSignal Dashboard, and navigate to the app you created inside of OneSignal. Once you have selected the app you want to work with during this how-to guide, the dashboard page will open up.

Navigate to the settings page, by clicking the S _ ettings _ tab.

Inside of settings, click on Keys & IDs. On this page, you will see your OneSignal App ID and your API key.

Now that you are in the Settings > Keys & IDs tab, you can copy the OneSignal App ID and the REST API KEY.

Note: Another quick way to access the OneSignal App ID is by copying it from the URL.

Keep in mind that if you want to create an app using the OneSignal NodeJS Client, you will need the User Authentication Key.

Token Builder

To authentificate the app, you will need to use your OneSignal REST API key. Create a key provider object with the function getToken() that returns your key.

Returns: Your key. In the background when you use this variable app_key_provider.getToken() gets executed.

const app_key_provider = {
    getToken() {
        return 'ONESIGNAL_REST_API_KEY';
    }
};

Client Configuration

We can configure the client using the createConfiguration() function. The configuration object can be used to set the app_key_provider properties.

const configuration = OneSignal.createConfiguration({
    authMethods: {
        user_key: {
            tokenProvider: user_key_provider
        },
        app_key: {
            tokenProvider: app_key_provider
        }
    }
});
const client = new OneSignal.DefaultApi(configuration);

Create Notification

Create a push notification and send it to the users of your app.

To send a push notification, you will add the following function that will make a call to the OneSignal REST API. This function takes a body parameter that represents the information that the push notification will contain.

const notification = new OneSignal.Notification();
notification.app_id = ONESIGNAL_APP_ID;
notification.included_segments = ['Subscribed Users'];
notification.contents = {
    en: "Hello OneSignal!"
};
const {id} = await client.createNotification(notification);

Notice we use object destructuring to store the ID of the notification in a variable called ID.

View a Notification

After you have sent a notification, view the notification information and outcomes associated with it using the notification id.

As you can see, I’m passing as the second parameter the id variable that contains the notification id after I have created the notification using the createNotification() method.

const response = await client.getNotification(ONESIGNAL_APP_ID, id);

Run Your Code

Thanks to our package.json, you will be able to run your nodejs code by opening your terminal and typing npm run start. After running this command you should see a notification appearing on your device if and only if you subscribed to notifications from your website, game, or app that you created and registered it in the OneSignal Dashboard.

Feel free to test other methods of the NodeJS Client SDK and let us know what you think!

Want to learn more about the OneSignal products and other technologies? Join our OneSignal Developers Community!

Join the OneSignal Developers Community

The OneSignal Developer community is a group of passionate individuals who work with OneSignal products. Community members have the opportunity to expand their network and knowledge across different technologies.

Connect on Twitter

Follow our OneSignal Developers Twitter to learn more about OneSignal, technical tips, and the latest events from OneSignal developers.

Join Our Discord Server

The OneSignal Developer community gathers on our public chat server, available on Discord. Our Discord server is a safe environment to network with other members, ask questions, and learn from each other. It is also a place to engage with the OneSignal product development team.

GraphQL and Push Notifications with OneSignal and TakeShape

Pato — Mon, 25 Apr 2022 16:05:38 +0000

By Jaden Baptista from TakeShape & Patricio Vargas from OneSignal

We're excited to share a sample project we’ve been working on with TakeShape which leverages our push notification solution with TakeShape’s powerful API mesh. This article explains what we accomplished and the steps we took to get there. If you want to follow along, you can check out the GitHub repo.

Project Goals

Build an app that will look up a country based on its abbreviation and send the user a push notification
Use OneSignal's SDK to do the subscription registration for push notifications
Send the actual notification with OneSignal using an API call from TakeShape
Use TakeShape to set up a pipeline for the data that can be triggered with a single GraphQL API call instead of multiple separate callsIt'll be our app → TakeShape API mesh → Countries API → TakeShape API mesh → OneSignal API → return to our app. All in one request.
Turn this into a starter project to help people get going with TakeShape and OneSignal
Try to make it look pretty so that people don't ridicule us for making something cool without it looking the part

Our Process

This tutorial will cover how to integrate OneSignal push notifications into your app using our typical setup process and how to send push notifications using the OneSignal REST API.

Part 1: Set Up Your OneSignal Account

To begin, login to your OneSignal account or create a free account. Then, click on the blue button entitled _ New App/Website _ to configure your OneSignal account to create your app or website.

Configure the name of your app or website. Select _ Web Push _ as your platform.

Click on the blue button entitled, _ Next: Configure Your Platform _.

Web Configuration

Under Choose Integration, select the _ Typical Site _ option.

In the Site Setup section, enter your chosen web configuration. In my case, the configuration looks like this:

Notice for testing purposes we entered our localhost URL (http://localhost:3000). If you are doing the same, make sure you click on the _ LOCAL TESTING _ option. This will ensure to treat HTTP localhost as HTTPS for testing.

Under _ Permission Prompt Setup _, you will see three vertical blue dots under the _ Actions _ header on the far right side of the screen. Click on the blue dots and select _ Edit _ from the drop-down menu.

A window will open with the configuration of our push notification Slide Prompt. Confirm that Auto-prompt is enabled (toggled to the right).

Under _ Show When _, you can choose how long your slide prompt will delay after a user visits your page. You can leave it as it is, or you can reduce the seconds so that your prompt appears sooner. Once you've chosen your delay time, click the grey _ Done _ button located at the bottom right corner of the window.

After clicking _ Done _, scroll down to the bottom of the page and click Save to save your auto-prompt configurations.

You will be redirected to a different page with an important step: Downloading the SDK files. Click _ DOWNLOAD ONESIGNAL SDK FILES _ and save them on your computer to retrieve later. We'll show you where to put them in a bit after we set up our site's directory.

Under the section entitled _ Add Code to Site _, you will see a grey button that allows you to copy the code snippet. Click the grey _ COPY CODE _ button.

Part 2: Create a New TakeShape Project

To set up that pipeline we mentioned earlier, we needed to find the right API. For this project, we were thinking of using something more fun and quirky like the PokeAPI, but we ended up settling on something a little more useful (well, I suppose that depends on how you spend your free time) with the CountriesAPI designed by Trevor Blades at Apollo. We’ve outlined our steps below so you can follow along.

To get started, go to takeshape.io and started a new project like this:

Make sure you’re making a new blank project instead of following a predefined pattern.

Once that’s done, you can connect your two services. There's a shortcut _ Connect Service _ button on the homepage of the project that will take you to a form that you must fill out once for OneSignal and once for the CountriesAPI. This is what the latter config looked like:

It’s basically Plug’n’Play. The OneSignal's setup is just as easy because the API key is actually sent along with the JSON body — we'll get to that in a bit.

Next, you’ll need to create the GraphQL mutation that will: 1) look up a country's data from the CountriesAPI and 2) ping OneSignal with the country’s data, plus:

Your API key.
The hash that identifies which device to send the notification to.
the country code to insert into the URL of the CountryFlags API so that you can get automatically add an image to the push notification.

Here's the text of the query in the schema's JSON file:

/*
    Obviously JSON doesn't have comments, but I'm going to add a
    few JavaScript-style comments to explain what each line does
*/

"mutations": { // this is the mutations object in the root of our schema JSON file
    "sendPushNotification": { // the name of this mutation
      "description": "Sends a push notification to the given subscribed user with the given image and content.",
      "args": {
        "type": "object",
        "properties": { 
                    /*
                        these are the arguments coming into the mutation
                        usually you'd make a shape for it and just put "args": "NameOfInputShape"
                        here I've opted to list the arguments in the mutation
                        no reason other than that it feels right
                        we have two arguments defined below, both strings
                    */
          "user": {"type": "string"},
          "countryCode": {"type": "string"}
        },
        "required": ["user", "countryCode"] // both arguments are required
      },
      "shape": "OneSignalResult", 
            /* ^^^^^ is the shape of the result, 
            but we don't really care about our output from onesignal here */
      "resolver": { // aka how we fill in the output steps
        "compose": [ // we're going to do that by following this array of steps
          {
            "name": "graphql:query", // use graphql
            "service": "countries", // to send a ping to the countries service
            "options": {
              "fieldName": "country", // to get this type with the following query
              "selectionSet": "{ name native continent { name } capital currency }"
            },
                        // below, map the `countryCode` from our input to `code` so CountriesAPI will understand
            "argsMapping": {"code": [["get", {"path": "args.countryCode"}]]}
          },
          { // after finishing the request to CountriesAPI, start step 2 of the resolver
            "name": "rest:post", // it's a post request
            "service": "onesignal", // to the onesignal service
            "options": {"path": "notifications"}, // specifically to the /notifications endpoint
            "argsMapping": {
              "json.chrome_web_icon": [ // send an argument called "chrome_web_icon" to onesignal
                [
                  "expressionEval",
                  { // "chrome_web_icon" should be a URL to countryflags.io with the original country code in it
                    "expression": "'https://www.countryflags.io/' + args.countryCode + '/flat/64.png'"
                  }
                ]
              ],
              "json.app_id": [ // set our app_id to a constant (redacted here for obvious reasons)
                ["set", {"value": "MY-REDACTED-ONESIGNAL-APP-KEY"}]
              ],
                            // send our original input user id as the only element in an array called "include_player_ids"
              "json.include_player_ids[0]": [["get", {"path": "args.user"}]], 
              "json.contents.en": [ // send along an object called "contents" with a key "en"
                [
                  "expressionEval",
                  { // set the key "en" to this long message with data from the CountriesAPI
                    "expression": "steps[0].native + '(' + steps[0].name + ') is in ' + steps[0].continent.name + '. In the capital, ' + steps[0].capital + ', the people like to spend ' + steps[0].currency + '.'"
                  }
                ]
              ]
            }
          }
        ],
        "resultsMapping": {"id": [["get", {"path": "steps[1].id"}]]} // send the notification id to our output
      }
    }
  }

That JSON without all the comments is uploaded into TakeShape. We actually just did it through the editor in the project, but you can do it through the terminal as well if you prefer.

To summarize, this process allows you to send this GraphQL query to the TakeShape API mesh endpoint:

mutation {
sendPushNotification (
user: "my-onesignal-user-id-from-the-sdk",
countryCode: "US"
) {
id
}
}

Then, TakeShape will:

Go to the Countries API and get some data about the country we've been given using its abbreviation.
Turn that data into a message and send it along with an image of the country's flag and the device's ID to OneSignal.
Return the ID that OneSignal returns.

Although that may seem tough at first, it is actually fairly intuitive. All you have left to do is to make the GraphQL call in JavaScript!

Another feature we wanted to implement was to add a <select> file on the page with a list of all the country codes, because who really remembers the abbreviation of the country they're looking up? Before we get to that, we first finished setting up the OneSignal SDK.

Part 3: Set Up the OneSignal SDK in Your App

In your Web project folder, navigate to the index.html file. Inside of the head HTML tag, paste the code you previously copied from the OneSignal page:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "YOUR-APP-ID",
});
});
</script>

Now, locate the SDK files you downloaded on your computer and insert them inside the root folder of your Web app.

After you have inserted the SDK files into your Web project, you'll need to add a <button> to send the notification to yourself. Inside of the <body> tag, add the following code:

<button onclick="sendPush()" id="send-push">SEND PUSH</button>

This button will now call a function called sendPush() that we will create inside of the index.js file. Add the following code to the top of your file. This code contains the API key, the GraphQL endpoint from TakeShape, and the project ID:

const projectID = "YOUR-PROJECT-ID";
const apiKey = "YOUR_API_KEY";
const takeShapeURL = `https://api.takeshape.io/project/${projectID}/v3/graphql`;

Once you have added the code above, it's time for you to use it inside of our sendPush() function. Create the sendPush() function by adding the following code:

const sendPush = async () => {
await fetch(
takeShapeURL,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${apiKey}`
},
body: JSON.stringify({
query: `
mutation {
sendPushNotification (
user: "${await OneSignal.getUserId()}",
countryCode: "${select.value}"
) {
id
}
}
`
})
}
);
};

As you can see, this code is making a POST call to the TakeShape GraphQL endpoint. The input to our POST request is the mutation containing the information needed to display our push notification. The countryCode property is the value from the <select> dropdown. For testing purposes, the value of the user property is going to be your current userID that you get by calling the getUserId() method for the device you are using to view this web application. In other words, you will send a push notification to your device that has registered with OneSignal. Keep in mind that OneSignal allows sending mass push notifications to all the subscribed users of a website.

Allow Web Push Notifications

Run the app and visit your website. You should see the following prompt appear after your chosen time delay interval:

Click on the blue Allow button to enable push notifications on your browser.

If you want to get started by sending a message or two manually, check out this awesome docs page for help.

Step 4: Add Country Code Data to Your Application

Now it's time to fill that <select> with actual data! If you go back into the homepage of your TakeShape project, right above the Connect Service button I clicked earlier, you should see OneSignal connected!

You can click on the _ Countries _ service to get back to the form you originally filled out to add the service in the first place. At the very bottom of that form, there's a button that will let you select queries from the GraphQL service to duplicate inside TakeShape. In the GraphQL service, select the countries query. Doing this will make it so that the countries query from the CountriesAPI is now the Countries_countries query in your API mesh, which you can then use to get a list of countries. That's a little confusing to explain in text, but it's actually the most intuitive way to go about this because this setup will let you choose what queries should be directly accessible through the API mesh. It also avoids creating any conflicts with query names when you start adding more services because they're all namespaced.

With that out of the way, you can just add this to the JavaScript and load the dropdown with the results:

const loadCountries = async () => {
const resp = await fetch(
`https://api.takeshape.io/project/${projectID}/v3/graphql`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${apiKey}`
},
body: JSON.stringify({
query: `
query {
Countries_countries {
code
}
}
`
})
}
);
const results = await resp.json();
results.data.Countries_countries.map(x => x.code).forEach(code => {
const option = document.createElement("option");
option.innerText = code;
select.insertAdjacentElement("beforeend", option);
});
};

And that's pretty much it! You can take a look at the GitHub repo for the full code. You can also see the finished product in action.

Let's test it out quick! If you go the page, it should ask you for permission to send push notifications. In the background, that loadCountries function is running, which loads up the dropdown. If you choose one and press the _ Send Push _ button like this:

Then this happens:

Success!

Now, you can keep expanding your code to make use of different features of the OneSignal SDK across your web app. To learn more about the Web Push SDK, visit OneSignal's documentation. If you want to check out more of TakeShape's abilities and how it makes working with APIs much easier in the long run, check out the TakeShape's documentation.

How to Send Push Notifications with the OneSignal REST API

Pato — Mon, 18 Apr 2022 13:00:00 +0000

It’s no secret that push notifications can help you engage and retain app users. In this tutorial, we'll show you how to use the OneSignal REST API using NodeJS.

Using the OneSignal REST API is very useful because it can help you integrate OneSignal into different workflows that your applications may have. The OneSignal REST API is friendly with different technologies including front and backend. Basically, if the tech stack you are using supers API calls, then you can use the OneSignal REST API.

OneSignal & Your Browser's Push API

This tutorial will cover an overview of our OneSignal REST API reference and the usage of our API with a NodeJS server.

Guide Overview

Part 1: OneSignal REST API Overview
REST API reference
Part 2: Push Notification In NodeJS
Setup a NodeJS Application
Send Push Notifications
View Notification insights

This tutorial requires some basic knowledge of NodeJS and usage of REST APIs. Below is a list of platforms that I'm using:

App with OneSignal integrated (mobile, web, or game)
NPM
I’m using NPM version v6.14.11
NodeJS
I’m using NodeJS v16.14.2

Part 1: OneSignal REST API Overview

Send Notifications

The OneSignal Push API allows you to programmatically send push notifications. The push notifications can be sent to different segments (by default you send them to all Subscribed Users) and even specific devices using the User ID. Another cool feature of the OneSignal REST API is the ability to cancel notifications that have been scheduled.

View Notification

Method: POST

Endpoint: https://onesignal.com/api/v1/notifications

Our API can do a lot more than just send a notification and view data from that notification. If you want to learn more about our whole REST API, visit the OneSignal REST API overview page.

Creating Your NodeJS App

Inside your terminal run the following commands to create a new NodeJS project using NPM:

npm init

After entering the previous npm command, answer all the questions that will appear on your terminal. These questions will generate the values of your package.json.

Your package.json file will look like similar to this:

{
    "name": "myapp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    “type”: “module”
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

Setup your NodeJS App

The first thing you need to do is to create an index.js file. This file will contain all code necessary to send and view your notifications.

At the top of this file, add the request npm package. This package will help us make API calls to the OneSignal endpoints in an easier way than doing it with NodeJS natively.

import axios from 'axios';

Now, run npm install axios to add the axios npm package into your project. After you have installed the axios NPM package, add the following three variables to your index.js after the axios import:

const API_KEY = "YOUR ONE SIGNAL API KEY";
const ONE_SIGNAL_APP_ID = "YOUR ONE SIGNAL APP ID";
const BASE_URL = "https://onesignal.com/api/v1";

To get the API KEY and the APP ID from OneSignal, navigate to the OneSignal Dashboard and click on the app you created inside of OneSignal. Once you have selected the app you want to work with, click the S _ ettings _ tab.

On this page, click on Keys & IDs.

Copy the OneSignal App ID and the REST API KEY.

Note: Another quick and easy way to access your OneSignal App ID is by copying it from the URL.

Options Builder

This function is not mandatory in order to use the OneSignal REST API. This function will be in charge of creating the options that you will pass to your API calls. This is a generic function that will build the JSON object based on the parameters that you have passed.

Parameters:

@param {string} method
@param {string} path
@param {object} body

Returns:

@returns {object} options

const optionsBuilder = (method, path, body) => {
    return {
        method,
        'url': `${BASE_URL}/${path}`,
        'headers': {
        'Content-Type': 'application/json',
        'Authorization': `Basic ${API_KEY}`,
        },
        body: body ? JSON.stringify(body) : null
    };
}

Create Notification

Create a push notification and send it to the users of your app.

Method: POST

Endpoint: https://onesignal.com/api/v1/notifications

Postman Collection

Parameters:

@param {object} body
@returns {object} response

const createNotication = async (data) => {
const options = optionsBuilder("post","notifications", data);
try {
        const response = await axios(options);
        return response.data;
    } catch (error) {
        console.error(error);
        return error;
    }
}

Here’s a sample body object:

const body = {
    app_id: ONE_SIGNAL_APP_ID,
    included_segments: ['Subscribed Users'],
    data: {
        foo: 'bar',
    },
    contents: {
        en: 'Sample Push Message',
    },
};

View Notification

Create a push notification and send it to the users of your app.

Method: GET

Endpoint: https://onesignal.com/api/v1/notifications

Postman Collection

Parameters:

@param {string} notificationId

const viewNotifcation = async (notificationId) => {
    const path = `notifications/${notificationId}?  app_id=${ONE_SIGNAL_APP_ID}`;
        const options = optionsBuilder("get", path);
    try {
        const response = await axios(options);
        console.log(response.data);
    } catch (error) {
        console.log(error);
    }
}

Run Your Code

At the end of the file, add the following lines of code. The first createNotification() function will return the notification's basic information when you send push notifications. I’m using this function to call the OneSignal API. As you can see, I’m using object destructuring to grab the notification ID from the notification object returned from the createNotification(), that will be used to call the viewNotifcation() function.

const {id} = await createNotication(body);
await viewNotifcation(id);

Feel free to test other OneSignal REST API endpoints and let us know what you think!

Join the OneSignal Developers Community

Want to learn more about the OneSignal products and other technologies? Join our OneSignal Developers Community!

Stay Connected

Follow our OneSignal Developers Twitter to learn more about the OneSignal product, technical tips, and the latest events from our developers.

How to Add Push Notifications into an iOS App

Pato — Mon, 14 Mar 2022 18:36:55 +0000

Push Notifications are a great tool to engage and retain your users. In this tutorial, we’ll show you how to add push notifications to your iOS app for free using OneSignal.

Guide Overview

Creating an Apple iOS Push Certificate
Setting up Your OneSignal Account
Setting up Push Notification in iOS
Linking an External User ID to the OneSignal Player ID
Allowing Notifications
Sending Notificaitons

Getting Started

First off, let’s create an Xcode project as a demo in order to use the SDK. This is going to be an UIKit app, but you can use SwiftUI as well.

Creating an Apple iOS Push Certificate

Before sending push notifications, you'll need to generate an iOS Push Certificate. To do that, you'll need to ask Apple to give you a production certificate. Go to the developer portal, click on Certificates, IDs & Profiles , and then click on Identifiers. Look for the app ID you just created in Xcode. If you can’t find it, click on the + button in order to add it.

Locate your app ID or add it by clicking the "+" button

On the _ Identifiers _ and Profiles page, the App IDs option should already be selected. Simply click on the _ Continue _ button and you’ll be redirected to the type of app you want to create the ID for. Click on Continue once again.

Check that "App IDs" is selected before pressing continue.

Now you’ll land on the App ID registration page where you’ll see two form fields for Description and Bundle ID. Fill them with the correct information, being sure that the Bundle ID exactly matches the one you create previously in Xcode.

Enter an app "Description" and "Bundle ID."

Once you click the _ Continue _ button, you should see a review page. Click on _ Register _ and voilà — you should now see your app in the _ Identifiers _ list.

Click "Register" to register your app.

Your app is now viewable from the Identifiers menu.

Next, you'll need to generate a certificate for OneSignal. To do so, open the Keychain Access app, select Certificate Assistant from the drop-down menu, and click on Request a Certificate From a Certificate Authority. This option just means that your machine is going to be the one with the private key for this particular certificate.

Select "Certificate Assistant" and "Request a Certificate From a Certificate Authority."

A window should appear asking you to provide certificate information. Enter your email address and check the _ Save to disk _ option. You will also be prompted to choose where you want to save the certificate request. Make sure to save it somewhere safe.

Now, you'll need to go back to Apple's developer portal and create a certificate. To do so, click on the + button.

You’ll be redirected to the _ Certificates _ creation page. Scroll down on this page until you see the Services header. Under this header, select the option entitled Apple Push Notification service SSL (Sandbox & Production) and then click the _ Continue _ button.

On the next page, it’ll ask you for the App ID that you want to create the certificate for. Select the one you created earlier from the drop-down menu and click the _ Continue _ button.

Select your App ID to create a new Apple Push Notification certificate.

Next, you’ll be prompted to upload the Certificate Signing Request. Choose the file you saved previously and click _ Continue._

Upload your Certificate Signing Request.

If everything works just fine, you should be redirected to the download page. Click on the _ Download _ button to download it and double-click to open it in the Keychain Access app.

Download your push notification certificate.

In the _ Keychain Access _ app, navigate to the _ My Certificates _ tab and find the certificate you just create which has your app bundle ID in the name. Right-click on it to see the options, then click _ Export _ from the menu that appears_._ It’ll prompt you to provide the location of the certificate. Select somewhere on your machine and type a password for the certificate.

Setting Up Your OneSignal Account

In order to add push notifications to your iOS app, you'll need to have a OneSignal account. If you don't have a OneSignal account, you can easily create a free account or simply log in to an existing account to get started.

iOS Configuration

In the OneSignal dashboard, click on the _ New App/Website _ button.

Configure a new app/website in OneSignal.

On the next page, type the name of your app and select the Apple iOS (APNs) option for the platform and click on the _ Next: Configure Your Platform _ button.

Select Apple iOS (APNs) as your chosen platform.

You’ll be prompted to upload the Apple certificate file you created in the first part of this tutorial. Locate the certificate on your machine, type in the password for the certificate, then click the _ Save & Continue _ button.

Upload your Apple push notification certificate.

Next, you'll be prompted to choose your target SDK. Select Native iOS as the target SDK and click on _ Save & Continue _ button at the bottom of the screen.

Select Native iOS as your target SDK.

In this final step, under 1. Install the SDK, you should see the App ID provided by OneSignal. Copy it somewhere where it's easy to retrieve — you’ll use it in the code later. Once you've saved the ID, you can click on _ Done _.

Congratulations, you’ve successfully configured your OneSignal project and you’re almost ready to send your first push notification 🥳 ! The last step is to go back to our iOS project and configure it so that it can receive notifications from OneSignal.

Setting up Push Notifications in iOS

Go back to the iOS project you created earlier and select the main target. Under the Signing & Capabilities tab, click on the + Capability button, then select Push Notifications. This will enable your app to receive push notifications from OneSignal.

Next, you'll need to add a Notification Extension to the app. Go back to the General tab and click the plus icon at the bottom of the Targets section.

You’ll be prompted to select the template for your new target. Select _ Notification Service Extension _ then click _ Next._

In the next window, use _ OneSignalNotificationServiceExtension _ as the name of the extension (as the docs suggest) and click the _ Finish _ button.

A message will appear asking if you want to activate the scheme. You don’t want to activate the push notification scheme because you just want to run your application (not the notification), so click on the Cancel button.

The notification extension will come with a NotificationService.swift. Open it and replace the content with the code below:

import OneSignal
import UserNotifications

class NotificationService: UNNotificationServiceExtension {
    var contentHandler: ((UNNotificationContent) -> Void)?
    var receivedRequest: UNNotificationRequest!
    var bestAttemptContent: UNMutableNotificationContent?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.receivedRequest = request
        self.contentHandler = contentHandler
        self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)

        if let bestAttemptContent = bestAttemptContent {   
            OneSignal.didReceiveNotificationExtensionRequest(self.receivedRequest, with: bestAttemptContent, withContentHandler: self.contentHandler)
        }
    }

    override func serviceExtensionTimeWillExpire() {
        if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent {
            OneSignal.serviceExtensionTimeWillExpireRequest(self.receivedRequest, with: self.bestAttemptContent)
            contentHandler(bestAttemptContent)
        }
    }  
}

If you build the project, you’ll get a compilation error since the project doesn’t yet know the OneSignal module. To fix that error, you'll need to install the module via Swift Package Manager.

In Xcode, go to _ File _ > _ Add Packages _ and enter the package URL https://github.com/OneSignal/OneSignal-XCFramework and click on Add Package.

Add the OneSignal XCFramework in Xcode.

This will add the OneSignal library to the main target. You also need to add the OneSignal library to the extension target. Select the OneSignalNotificationServiceExtension target. Under the Frameworks and Libraries section, click on the _ + _ button.

_Add the OneSignal library to the extension target in Xcode. _

After clicking on the + button, a menu should appear. The OneSignal library should be one of the choices in this list. Select OneSignal and click _ Add._

If you build and run, the error should have disappeared.

Build Succeeded message in Xcode.

There's one last step you must complete to finish the setup process: configuring the SDK inside your AppDelegate. To do so, open your AppDelegate, import the OneSignal library, and paste the following initialization code to didFinishLaunchingWithOptions:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    OneSignal.setLogLevel(.LL_VERBOSE, visualLevel: .LL_NONE)

    OneSignal.initWithLaunchOptions(launchOptions)
    OneSignal.setAppId("YOUR_ONESIGNAL_APP_ID")

    OneSignal.promptForPushNotifications(userResponse: { accepted in
      print("User accepted notifications: \(accepted)")
    })

    return true
  }

In this code snippet, you'll need to provide the App ID OneSignal generated for you earlier. You can find this information in your project’s dashboard under the _ Keys & IDs _ menu. Because this is sensitive data, make sure to obscure it in some way so that it isn’t visible directly in the source code.

Linking an External User ID to the OneSignal Player ID

OneSignal creates and stores device and channel level data under a unique OneSignal ID called the player_id. A single user can have multiple player_id records based on how many devices, email addresses, and phone numbers they use to interact with your app or website.

Create a method that generates a random string as your external user ID and register it to OneSignal. Your final AppDelegate should look like this:

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    initializeOneSignal()
    setupExternalId()

    return true
  }

  private func initializeOneSignal() {
    OneSignal.setLogLevel(.LL_VERBOSE, visualLevel: .LL_NONE)

    OneSignal.initWithLaunchOptions(launchOptions)
    OneSignal.setAppId("YOUR_ONESIGNAL_APP_ID")

    OneSignal.promptForPushNotifications(userResponse: { accepted in
      print("User accepted notifications: \(accepted)")
    })
  }

  private func setupExternalId() {
    let externalUserId = randomString(of: 10)

    OneSignal.setExternalUserId(externalUserId, withSuccess: { results in
      print("External user id update complete with results: ", results!.description)
      if let pushResults = results!["push"] {
        print("Set external user id push status: ", pushResults)
      }
      if let emailResults = results!["email"] {
        print("Set external user id email status: ", emailResults)
      }
      if let smsResults = results!["sms"] {
        print("Set external user id sms status: ", smsResults)
      }
    }, withFailure: {error in
      print("Set external user id done with error: " + error.debugDescription)
    })
  }


  private func randomString(of length: Int) -> String {
    let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    var s = ""
    for _ in 0 ..< length {
      s.append(letters.randomElement()!)
    }
    return s
  }
}

Allowing Notifications

The moment of truth has arrived — it's time to put your setup work to the test by sending a notification. To begin, launch your app directly on your iOS device. You should see the following prompt appear asking if you would like to receive notifications from your app. Click on the blue Allow button to enable push notifications on your device.

Sending Notifications

It’s now time to send your first push notification! To do so, login to your OneSignal account and navigate to the _ Dashboard _ tab. On the Dashboard page, click on the blue button at the top right corner entitled +_ New Push _.

Click the "+New Push" button to create a new notification.

You will be redirected to a new window that will allow you to create and customize your push notification.

Under the section entitled _ Audience _, make sure that _ Send to Subscribed Users _ is selected. Then, create your message by adding your message title, content, and image. Because this is the first notification your subscribers will receive, you may choose to craft a simple welcome message to confirm that they've been subscribed and reinforce the value that notifications will provide.

Under the _ Delivery Schedule _ section, select _ Immediately _ and _ Send to everyone at the same time _ to send to all your current push subscribers. If you have just finished setting up your OneSignal account, chances are you're the first and only subscriber. If your app is heavily trafficked and other users have already opted in to receive push notifications, you may want to select Send to a particular segment(s) to test your message out on a select audience. When you're ready to send your message, click on the blue _ Review and Send _ button at the bottom of the screen.

A small popup will appear prompting you to review your message. Once you are satisfied, click on the blue _ Send Message _ button.

You should receive a push notification on your iOS device! 🚀

Get Support & Share Your Feedback

To learn more about our iOS mobile push SDK, please visit our iOS push iOS Mobile Push SDK documentation.

We'd love to know what you think and answer any additional questions you have. Ping us on the OneSignalDevs Discord server to share your experience. We appreciate any insight you can share to help us better serve you!

To stay in the loop with the latest product updates and innovations, follow the OneSignal Developers Twitter. For additional support and dev inspiration, tap into our global developer community.

This post was guest authored by Ibrahima Ciss

How To Add Android Push Notifications to a React Native Expo App

Pato — Wed, 22 Dec 2021 21:32:10 +0000

It’s no secret that push notifications can help you engage and retain app users. In this tutorial, we'll show you how to integrate with the React-OneSignal NPM package to leverage push notifications in your React app for free.

OneSignal & Your Browser's Push API

A mobile push API gives mobile applications the ability to receive messages from a server whether or not the app is in the foreground. This lets you deliver asynchronous notifications and updates to users who opt-in, resulting in better engagement with timely new content.

This tutorial will cover how to integrate the new React Native Expo OneSignal Plugin to add mobile push notifications into your application using our typical setup process. Part one of this guide covers the OneSignal setup process. Part two of this guide covers how to integrate OneSignal with React using our npm package.

Guide Overview

Part 1: Set Up Your OneSignal Account
Google Android FCM Configuration
Part 2: Set Up Push Notifications in React Native Expo
Create Your React Native App
Install the OneSignal Expo Plugin
Configure the Plugin
Run and Build Your Application
Send Push Notifications to Android Devices
Connect With Our Developer Community

This tutorial requires some basic knowledge of React Native (Expo). I'm using the Expo CLI to generate my project and NodeJS version 14.16. Additional React

Additional Setup Resources:

React Native (Expo) plugin Sample Ap

Part 1: Set Up Your OneSignal Account

To begin, log in to your OneSignal account or create a free account. Then, click on the blue button entitled _ New App/Website _ to configure your OneSignal account to fit your app or website.

Insert the name of your app or website. Select _ Google Android _ as your platform.

Click on the blue button entitled, _ Next: Configure Your Platform _.

Google Android FCM Configuration

It’s time to configure your Android app using a Firebase Server key. All Android apps require this key and the server ID in order to send push notifications. If you don’t have the Firebase Server API Keys, take a look at our documentation to learn how to generate a Firebase server API key.

Now select your target SDK. We'll take you through the steps to get your first user and send your first test notification later in this guide.

In the next screen that appears, you will see your App ID — copy that App ID because you will use it inside of your Expo Application. DO NOT click to Check Subscribed Users or Done yet.

Part 2: Set Up Push Notification in React Native Expo

Create Your React Native App

Inside of your terminal run the following commands to create a new React project using Create.

Expo App:

expo init onesignal-rn-expo

When asked, select any of the options under the Managed Workflow. In my case, I selected the first option, which is blank .

cd onesignal-rn-expo
expo start

For additional guidance, check out Expo's official documentation on how to create a new Expo App.

Install the OneSignal Expo Plugin

Inside of your project folder, open your terminal and run the following command to install the OneSignal Expo Plugin package.

expo install onesignal-expo-plugin

After installing the signal-expo-plugin, install now the react-native-onesignal plugin by running the following command.

yarn add react-native-onesignal

Even though onesignal-expo-plugin defines react-native-onesignal as a dependency and it gets put into the node_module it will make sure the native parts get built.

If you forgot to run the following command after you have built your project, you can fix this by running expo prebuild — clean. This should delete android and ios and do a clean native build, then run the yarn add react-native-onesignal.

Configure the Plugin

Inside the app.json/app.config.js file, add the plugin to the plugin array:

App.json

{
    "plugins": [
        [
            "onesignal-expo-plugin",
            {
                "mode": "development",
                "devTeam": "91SW8A37CR"
            }
        ]
    ]
}

App.config.js

export default {
...
    plugins: [
        [
            "onesignal-expo-plugin",
            {
                mode: process.env.NODE_ENV || "development",
                devTeam: "91SW8A37CR"
            }
        ]
    ]
};

Plugin Options:

mode: used to configure APNs environment entitlement.
"development"
"production"
devTeam: *optional* — used to configure Apple Team ID. You can find your Apple Team ID by running expo credentials:manager.

Example:

{
    "extra": {
        "oneSignalAppId": "<YOUR APP ID HERE>"
    }
}

You can then access the value to pass to the setAppId function:

import OneSignal from 'react-native-onesignal';
import Constants from "expo-constants";
OneSignal.setAppId(Constants.manifest.extra.oneSignalAppId);

Alternatively, pass the OneSignal App ID directly to the function:

OneSignal.setAppId("YOUR-ONESIGNAL-APP-ID");

Run and Build your Application

expo prebuild
# Build your native iOS project
$ expo run:ios
# Build your native Android project
expo run:android

Send Push Notifications to Android Devices

I recommend you run the application on an actual Android device to test the notifications. To do so, you will need to connect your Android device and enable developer mode.

Once you have opened the application on your device, the device will be automatically subscribed to the notification. Now, your device will be able to receive notifications sent by OneSignal.

To complete the setup process, return to your OneSignal dashboard to the point at which you previously left off. Click on the _ Check Subscribed Users _ and a green message will appear like the one in the image below.

Click on the _ Done _ button.

Send Your First Notification

It’s time to send your first push notification! To do so, log in to your OneSignal account and navigate to the _ Dashboard _ tab. On the dashboard page, click on the blue button that says _ New Push _.

Note: Notifications are enabled on Android devices by default if you have disabled your notifications, make sure you enable them again.

You will be redirected to a new window that will allow you to customize your push notification. Under _ Audience _, make sure that _ Send to Subscribed Users _ is selected. Then, create your message by adding your message title, content, and image. Because this is the first notification your subscribers will receive, you may choose to craft a simple welcome message to confirm that they've been subscribed and reinforce the value that notifications will provide.

Under the _ Delivery Schedule _ section, select _ Immediately _ and _ Send to everyone at the same time _ to send to all your current push subscribers. If you have just finished setting up your OneSignal account, chances are you're the first and only subscriber. If your app or website is heavily trafficked and other users have already opted in to receive push notifications, you may want to select Send to a particular segment(s) to test your message out on a specific audience. When you're ready to send your message, click on the blue _ Review and Send _ button at the bottom of the screen.

A small popup will appear for you to review your message. Once you are satisfied, click on the blue _ Send Message _ button. You should receive a push notification on your device! 🚀

Now, you can keep expanding your code to make use of different features of the OneSignal SDK across your Expo app bypassing the OneSignal variable to different components.

To learn more about the OneSignal Expo plugin, visit our React Native (Expo) push SDK documentation.

Connect with Our Developer Community

To stay in the loop with the latest product updates and innovations, follow the OneSignal Developers Twitter and join our Discord server. Learn more about the OneSignal developer community and how to stay connected by following the link below.

>> Learn About the OneSignal Developer Community

How to add push notifications In Android using Ionic + Capacitor (React)

Pato — Thu, 02 Sep 2021 20:15:31 +0000

Push notifications can help you engage and retain app users. This tutorial will show you how to integrate with OneSignal to leverage push notifications in your Android app.

OneSignal & Your Browser's Push API

The browser's Push API gives web applications the ability to receive messages from a server whether or not the web app is in the foreground or currently loaded on a user agent. This lets you deliver asynchronous notifications and updates to users who opt-in, resulting in better engagement with timely new content.

This tutorial will cover how to integrate OneSignal push notifications into your app using our setup process for Android apps. Part one of this guide covers the OneSignal setup process. Part two of this guide covers the integration of OneSignalwith Ionic + Capacitor (React) for your Android app.

Guide Overview

Part 1: Set Up Your OneSignal Account
Part 2: Push Notification Setup For Android In Ionic + Capacitor (React)

This tutorial requires some basic knowledge of React. I'm using the Ionic CLI to generate my project and NodeJS version 14.16.

Github Repository Resources

Ionic + Capacitor (React) OneSignal Setup

Part 1: Set Up Your OneSignal Account

To begin, log in to your OneSignal account or create a free account. Then, click on the blue button entitled _ New App/Website _ to configure your OneSignal account to fit your app or website.

Insert the name of your app or website. Select _ Google Android _ as your platform.

Click on the blue button entitled, _ Next: Configure Your Platform _.

Google Android FCM Configuration

Now select your target SDK. We'll take you through the steps to get your first user and send your first test notification.

In the next screen that appears, you will see your app ID — copy that app ID because you will use it inside of your Ionic application. DO NOT click to _ Check Subscribed Users _ or _ Done _ yet.

Part 2: Push Notification Setup For Android

Now that you’ve collected the necessary items to add push notifications to your Android app, the next step is to make your Ionic app aware of OneSignal so that it can receive notifications.

Creating Your Ionic + Capacitor (React) App

Inside your terminal, run the following command to add the Ionic project globally in your machine to use Ionic in your command line.

npm install -g @ionic/cli

Next, run the following command to create a new Ionic + Capacitor (React) project using the Ionic CLI. You will be asked to select a framework, select React.

ionic start

When asked to enter a project name, you can enter whatever name you want. In my case, I named my project OneSignal-Ionic.

You will also be asked to select a template. Feel free to select whatever template you’d like. In the example below, I have selected tabs as the template.

Adding OneSignal To Your Ionic Application

To guide you through this process, I’m using a simple Ionic React Android app that illustrates how to integrate the OneSignal SDK. It is running on the Cordova npm package onesignal-cordova-plugin release.

To begin, add your desired platform to the project. For my app, I chose Android as my desired platform by running: ionic capacitor add android. Then, install the OneSignal Cordova plugin inside the project by running npm install onesignal-cordova-plugin. The ionic capacitor build android command will open the Android build in Android Studio.

After building your Ionic application into a new Android app, run the cap sync command (one time only) by entering npx cap sync.

At the top of you App.tsx file, import the OneSignal npm package to your component.

import OneSignal from 'onesignal-cordova-plugin';

Add the following initialization code to the App.tsx file. Make sure to add your app ID, which you previously copied during Google Android FCM Configuration.

// Call this function when your app starts
function OneSignalInit(): void {
  // NOTE: Update the setAppId value below with your OneSignal AppId.
  OneSignal.setAppId("YOUR_ONESIGNAL_APP_ID");
  OneSignal.setNotificationOpenedHandler(function(jsonData) {
      console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
  });
}

After creating the OneSignalInit() function, you are going to call it when your app starts. In the App.tsx file, add the following line of code:

OneSignalInit();

Finally, build your app again by running ionic capacitor build android and opening the Android Studio project.

I recommend you run the application on an actual Android device to test the notifications. To do so, you will need to connect your Android device and enable developer mode.

Once you have opened the application on your device, the device will be automatically subscribed to the notification. Now, your device will be able to receive notifications sent by OneSignal.

Click on the _ Done _ button.

Send A Push Notification

It’s time to send your first web push notification! To do so, log in to your OneSignal account and navigate to the _ Dashboard _ tab. On the dashboard page, click on the blue button that says _ New Push _.

Note: Notifications are enabled on Android devices by default, but can be disabled by users via their phone settings. If you have manually disabled your notifications, make sure you enable notifications again in order to test how they work.

A small popup will appear for you to review your message. Once you are satisfied, click on the blue _ Send Message _ button. You should receive a web push notification on your device! 🚀

Now, you can keep expanding your code to make use of different features of the OneSignal SDK across your Ionic app by passing the OneSignal variable to different components. To learn more about the Ionic SDK visit our Ionic push SDK documentation.

DEV Community: Pato

Build a Docs‑Aware Chatbot with React, Vite, Node, and OpenAI (plus fun DALL·E avatars)

What you’ll build

Prereqs

1) Create the React app (Vite)

Vite proxy (avoid CORS while developing)

Chatbot UI

The Chat functionality

Generating avatars

2) Add the backend (Express + OpenAI)

Install deps

Environment variables

Server code (Responses API + Images API)

Training the chatBot

Creating the chatBot with OpenAI

Creating the Avatars with DALL-E

3) Dev scripts

4) Run it

Production notes (important)

Wrap‑up

Turn Any Image into a Blog Post with AI (React, Cloudinary & OpenAI)

Why this is cool

Prereqs

1) Cloudinary setup

2) OpenAI setup

3) Scaffold the project (Vite + React)

4) Vite dev proxy (no CORS headaches)

5) React UI

Creating the story

The AudioPlayer component

6) Express backend (Cloudinary + OpenAI)

OpenAI Initialization

Multer Upload Handling

Helper Function: Upload Image Buffer to Cloudinary

Generating the caption

Generating the blog content

Generating audio

7) Run it

8) Production & security notes

Troubleshooting

Wrap‑up

I went to the Firebase Summit 2022 -NYC

PayPal Developer Community

How to add PayPal checkout payments to your React app

Guide Overview

Part 1: PayPal Developer sandbox app

Part 2: Adding PayPal to your React App

Add the PayPal NPM package

Working with the PayPalScriptProvider

Loading state with the usePayPalScriptReducer

Loading states:

Adding The Currency Selectors

Adding the PayPal buttons

Part 3: Testing the PayPal Checkout

Testing the PayPal Checkout

Sample Card

PayPal Developer Community

How to Add In-App Messages to a Flutter App

Creating the Flutter Project

Setting up your OneSignal Account

Android Setup

iOS Setup

Upload Your APNs Cert

Sending an In-App Message

In-App Messaging Triggers

Asking for Push Permission (iOS)

Using Custom Triggers in In-App Messaging

Adding Click Actions in Messages

Custom Click Action ( Custom Action ID)

Share Your Feedback

>> Connect with the OneSignal Developer Community

How to Add In-App Messages in React Native (Expo)

OneSignal & Your Browser's Push API

Guide Overview

Part 1: Set Up Your OneSignal Account

Google Android FCM Configuration

Part 2: Push Notification Setup In React Native Expo

Creating Your React App

Install OneSignal Expo Plugin

Configuration in app.json / app.config.js

Working with the `PayPalScriptProvider`

Loading state with the `usePayPalScriptReducer`