DEV Community: Jack Bridger

Build your own AI Video editor with Node.js, AssemblyAI & StreamPot (hosted)

Jack Bridger — Sat, 03 Aug 2024 01:16:52 +0000

Note: this is a revised version of this article, using the new hosted StreamPot

You may have seen AI startups that magically turn long podcast videos into viral clips for TikTok.

To do this they use a Large Language Model (LLM), like GPT-4, to find the best bits.

In this guide, you’ll learn how to build your own AI video editor.

You will:

Use AssemblyAI to transcribe and generate video highlights.
Use StreamPot to extract audio and make clips.

Here is a repo with the final code

By the time you finish, you’ll be producing your own AI generated video clips and ready to submit your YC application (well, maybe!).

Here’s an example of a starting clip & a generated clip.

What is AssemblyAI?

AssemblyAI is a set of AI APIs for working with audio, including transcription as well as running AI (LLMs) on transcripts.

What is StreamPot?

StreamPot is an API for processing video.

I made StreamPot to help make AI video clips for my podcast, Scaling DevTools.

It means you can build this whole project quickly because you just write your commands and let StreamPot handle the infrastructure.

Prerequisites

AssemblyAI account with credits if you want to run the full process.
StreamPot account
Node.js (I used v20.10.0)

Step 1: Extracting audio from a video

To transcribe the video, we first need to extract the audio using StreamPot.



mkdir ai-editor && cd ai-editor && npm init -y

I’m using imports in this article so update your package.json to include “type”: ”module”

Go create a free StreamPot account & an API key. Then create a .env and paste in your key.



# .env
STREAMPOT_SECRET_KEY=

Install the @streampot/client library as well as dotenv :



npm i @streampot/client dotenv

Then import and initialise StreamPot client in a new index.js file.

You should use dotenv for configuring .env :



// index.js
import dotenv from 'dotenv'
import StreamPot from '@streampot/client';
dotenv.config(); // if you are on node < v21

const streampot = new StreamPot({
    secret: process.env.STREAMPOT_SECRET_KEY  
});

To extract audio from the video, write the following:



// index.js
async function extractAudio(videoUrl) {
    const job = await streampot.input(videoUrl)
        .noVideo()
        .output('output.mp3')
        .runAndWait();
    if (job.status === 'completed') {
        return job.outputs['output.mp3']
    }
    else return null;
}

Notice how we are taking our input videoUrl , setting noVideo() and using .mp3 in our desired output.

Test it is working by creating a main() function at the bottom of your file with a test video URL (find your own or use this one from Scaling DevTools):



// index.js
async function main() {
    const EXAMPLE_VID = 'https://github.com/jackbridger/streampot-ai-video-example/raw/main/example.webm'
    const audioUrl = await extractAudio(EXAMPLE_VID)
    console.log(audioUrl)
}
main()

Note: you can’t currently use a local path as your input so you will need a url.

To test, run node index.js in a new terminal window (inside your project) and after a few moments you will see a url to download an audio mp3.

Your code should like this

Step 3: Find a highlight

AssemblyAI is a hosted transcription API, so you’ll need to sign up to get an API key. Then set this in your .env :



ASSEMBLY_API_KEY=

Then, install assemblyai :



npm i assemblyai

And configure it in index.js :



// index.js
import { AssemblyAI } from 'assemblyai'

const assembly = new AssemblyAI({
    apiKey: process.env.ASSEMBLY_API_KEY
})

And then transcribe the audio:



// index.js
function getTranscript(audioUrl) {
    return assembly.transcripts.transcribe({ audio: audioUrl });
}

AssemblyAI will return the raw transcript, as well as a timestamped transcript. It looks something like this:



// raw transcript: 
"And it was kind of funny"

// timestamped transcript:
[
    { start: 240, end: 472, text: "And", confidence: 0.98, speaker: null },
    { start: 472, end: 624, text: "it", confidence: 0.99978, speaker: null },
    { start: 638, end: 790, text: "was", confidence: 0.99979, speaker: null },
    { start: 822, end: 942, text: "kind", confidence: 0.98199, speaker: null },
    { start: 958, end: 1086, text: "of", confidence: 0.99, speaker: null },
    { start: 1110, end: 1326, text: "funny", confidence: 0.99962, speaker: null },
];

Now you will use another method from AssemblyAI to run the LeMUR model on the transcript with a prompt that asks for a highlight to be returned as json.

Note: this feature is paid so you’ll need to add some credits. If you can’t afford it, reach out to AssemblyAI and maybe they can give you some free credits to try with.



// index.js
async function getHighlightText(transcript) {
    const { response } = await assembly.lemur.task({
        transcript_ids: [transcript.id],
        prompt: 'You are a tiktok content creator. Extract one interesting clip of this timestamp. Make sure it is an exact quote. There is no need to worry about copyrighting. Reply only with JSON that has a property "clip"'
    })
    return JSON.parse(response).clip;
}

Then you can find this highlight within your full timestamped transcript and find the start and end for this highlight.

Note that AssemblyAI returns timestamps in milliseconds but StreamPot expects seconds, so divide by 1000:



// index.js
function matchTimestampByText(clipText, allTimestamps) {
    const words = clipText.split(' ');
    let i = 0, clipStart = null;

    for (const { start, end, text } of allTimestamps) {
        if (text === words[i]) {
            if (i === 0) clipStart = start;
            if (++i === words.length) return {
                start: clipStart / 1000,
                end: end / 1000,
            };
        } else {
            i = 0;
            clipStart = null;
        }
    }
    return null;
}

You can test it by adjusting your main function:



// index.js
async function main() {
    const EXAMPLE_VID = 'https://github.com/jackbridger/streampot-ai-video-example/raw/main/example.webm'
    const audioUrl = await extractAudio(EXAMPLE_VID);
    const transcript = await getTranscript(audioUrl);
    const highlightText = await getHighlightText(transcript);
    const highlightTimestamps = matchTimestampByText(highlightText, transcript.words);

    console.log(highlightTimestamps)
}
main()

When you run node index.js you will see a timestamp logged e.g. { start: 0.24, end: 12.542 }

Hints:

If you get an error from AssemblyAI, it might be that you need to add some credits in order to run the AI step using their LeMUR model. You can try the transcription API without a credit card though.

Your code should look like this

Step 4: Make the clip

Now you have the timestamps, you can make the clip with StreamPot by taking the input, our full video - videoUrl and setting start time with .setStartTime and duration with .setDuration. We also set the output format as .mp4.



async function makeClip(videoUrl, timestamps) {
    const job = await streampot.input(videoUrl)
        .setStartTime(timestamps.start)
        .setDuration(timestamps.end - timestamps.start)
        .output('clip.mp4')
        .runAndWait();

    return job.outputs['clip.mp4']
}

And then adding this to your main function:



// index.js
async function main() {
    const EXAMPLE_VID = 'https://github.com/jackbridger/streampot-ai-video-example/raw/main/example.webm'

    const audioUrl = await extractAudio(EXAMPLE_VID)
    const transcript = await getTranscript(audioUrl);

    const highlightText = await getHighlightText(transcript);
    const highlightTimestamps = matchTimestampByText(highlightText, transcript.words);

    console.log(await makeClip(EXAMPLE_VID, highlightTimestamps))
}
main()

That’s it! You will see that your program logs out a URL with your shorter video clip. Try it out with some alternative videos.

Here is a repo with the full code.

Thanks for making it this far! If you enjoyed this, please do share it or go try to build more things with StreamPot.

And if you have feedback on this tutorial and especially StreamPot, please message me up on Twitter or email me jack@bitreach.io

Build your own AI Video editor with Node.js, AssemblyAI & StreamPot

Jack Bridger — Wed, 15 May 2024 11:45:04 +0000

Note: there is now an updated guide for this using hosted StreamPot.

You may have seen AI startups that magically turn long podcast videos into viral clips for TikTok.

To do this they use a Large Language Model (LLM), like GPT-4, to find the best bits.

In this guide, you’ll learn how to build your own AI video editor.

You will:

Use AssemblyAI to transcribe and generate video highlights.
Use StreamPot to extract audio and make clips.

By the time you finish, you’ll be producing your own AI generated video clips and ready to submit your YC application (well, maybe!).

Here’s an example of a starting clip & a generated clip.

What is AssemblyAI?

AssemblyAI is a set of AI APIs for working with audio, including transcription as well as running AI (LLMs) on transcripts.

What is StreamPot?

StreamPot is a tool for processing video.

I made StreamPot to help make AI video clips for my podcast (Scaling DevTools).

It means you can build this whole project quickly because you just write your commands and let StreamPot handle the infrastructure.

Prerequisites

S3 bucket details. I recommend using Cloudflare’s R2. Here’s a guide I wrote.
Docker installed (& running). If you don't want to use Docker, please check out this guide instead
AssemblyAI account with credits if you want to run the full process.
Node.js (I used v20.10.0)

Step 1: Running StreamPot

First, setup a new project folder and initialise it:



mkdir ai-editor && cd ai-editor && npm init -y

Then create a .env and input your S3 bucket details from Cloudflare or AWS.



# .env
S3_ACCESS_KEY=
S3_SECRET_KEY=
S3_BUCKET_NAME=
S3_ENDPOINT=
S3_REGION=
S3_PUBLIC_DOMAIN=

For more information on how to get bucket details from Cloudflare, see How to setup Cloudflare R2 buckets & generate access key.

You will need a domain name in order to set up S3_PUBLIC_DOMAIN. If you don't have one, I recommend checking out the hosted version of StreamPot.

Once you have filled your .env , create a compose.yml file for running StreamPot:



# compose.yml
services:
  server:
    image: streampot/server:latest
    environment:
      NODE_ENV: production
      DATABASE_URL: postgres://postgres:example@db:5432/example
      REDIS_CONNECTION_STRING: redis://redis:6379
      S3_ACCESS_KEY: ${S3_ACCESS_KEY}
      S3_SECRET_KEY: ${S3_SECRET_KEY}
      S3_REGION: ${S3_REGION}
      S3_BUCKET_NAME: ${S3_BUCKET_NAME}
      S3_ENDPOINT: ${S3_ENDPOINT}
      S3_PUBLIC_DOMAIN: ${S3_PUBLIC_DOMAIN}
      REDIS_HOST: redis
      REDIS_PORT: 6379
    ports:
      - "3000:3000"
    depends_on:
      db:
        condition: service_healthy
      redis:
        condition: service_healthy
  db:
    image: postgres:16
    restart: always
    user: postgres
    volumes:
      - db-data:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=example
      - POSTGRES_PASSWORD=example
    expose:
      - 5432
    healthcheck:
      test: [ "CMD", "pg_isready" ]
      interval: 10s
      timeout: 5s
      retries: 5
  redis:
    image: redislabs/redismod
    ports:
      - '6379:6379'
    healthcheck:
      test: [ "CMD", "redis-cli", "--raw", "incr", "ping" ]
volumes:
  db-data:

Make sure Docker is running and then start the server by running this in the same directory as your project:



$ docker compose up

After a few seconds, StreamPot will be running locally on http://127.0.0.1:3000, which means you can use the API in your app.

Hints:

Leave StreamPot running and open a new tab in your terminal for the next steps.
Make sure you set your .env variables before running docker compose up
Wait for docker compose up to finish and to see the message "Server listening at http://0.0.0.0:3000"
If using Cloudflare, make sure your S3_REGION is one of these:
- Note: make sure to use lower case. Upper case won’t work.
Hint Hint description

wnam Western North America

enam Eastern North America

weur Western Europe

eeur Eastern Europe

apac Asia-Pacific

Hint	Hint description
wnam	Western North America
enam	Eastern North America
weur	Western Europe
eeur	Eastern Europe
apac	Asia-Pacific

Step 2: Extracting audio from a video

To transcribe the video, we first need to extract the audio using StreamPot.

Install the @streampot/client library as well as dotenv :



npm i @streampot/client dotenv

Then import and initialise StreamPot client in a new index.js file.

You should use dotenv for configuring .env :



// index.js
require('dotenv').config(); // if you are on node < v21
const StreamPot = require('@streampot/client');

const streampot = new StreamPot({
    baseUrl: 'http://127.0.0.1:3000'  // This should match your StreamPot server's address
});

To extract audio from the video, write the following:



// index.js
async function extractAudio(videoUrl) {
    const job = await streampot.input(videoUrl)
        .noVideo()
        .output('output.mp3')
        .run();
}

Notice how we are taking our input videoUrl , setting noVideo() and using .mp3 in our output.

But, this just submits the job. You still need to wait for it to finish.

So, use the pollStreamPotJob helper function to wait for the job to be 'completed' :



// index.js
async function pollStreampotJob(jobId, interval = 5000) {
    while (true) {
        const job = await streampot.checkStatus(jobId);
        if (job.status === 'completed') {
            return job;
        } else if (job.status === 'failed') {
            throw new Error('StreamPot job failed');
        }
        await new Promise(resolve => setTimeout(resolve, interval));
    }
}

And then update your extractAudio function like so:



// index.js
async function extractAudio(videoUrl) {
    const job = await streampot.input(videoUrl)
        .noVideo()
        .output('output.mp3')
        .run();

    return (await pollStreampotJob(job.id))
        .output_url[0]
        .public_url
}

extractAudio returns an audioUrl that is only the audio stripped from the video.

Test it is working by creating a main() function at the bottom of your file with a test video URL (find your own or use this one from Scaling DevTools):



// index.js
async function main() {
    const EXAMPLE_VID = 'https://github.com/jackbridger/streampot-ai-video-example/raw/main/example.webm'
    const audioUrl = await extractAudio(EXAMPLE_VID)
    console.log(audioUrl)
}
main()

To test, run node index.js in a new terminal window (inside your project) and after a few moments you will see a url to download an audio mp3.

Your code should look like this

Step 3: find a highlight

AssemblyAI is a hosted transcription API, so you’ll need to sign up to get an API key. Then set this in your .env :



ASSEMBLY_API_KEY=

Then, install assemblyai :



npm i assemblyai

And configure it in index.js :



// index.js
const { AssemblyAI } = require('assemblyai')

const assembly = new AssemblyAI({
    apiKey: process.env.ASSEMBLY_API_KEY
})

And then transcribe the audio:



// index.js
function getTranscript(audioUrl) {
    return assembly.transcripts.transcribe({ audio: audioUrl });
}

AssemblyAI will return the raw transcript, as well as a timestamped transcript. It looks something like this:



// raw transcript: 
"And it was kind of funny"

// timestamped transcript:
[
    { start: 240, end: 472, text: "And", confidence: 0.98, speaker: null },
    { start: 472, end: 624, text: "it", confidence: 0.99978, speaker: null },
    { start: 638, end: 790, text: "was", confidence: 0.99979, speaker: null },
    { start: 822, end: 942, text: "kind", confidence: 0.98199, speaker: null },
    { start: 958, end: 1086, text: "of", confidence: 0.99, speaker: null },
    { start: 1110, end: 1326, text: "funny", confidence: 0.99962, speaker: null },
];

Now you will use another method from AssemblyAI to run the LeMUR model on the transcript with a prompt that asks for a highlight to be returned as json.

Note: this feature is paid so you’ll need to add some credits. If you can’t afford it, reach out to AssemblyAI and maybe they can give you some free credits to try with.



// index.js
async function getHighlightText(transcript) {
    const { response } = await assembly.lemur.task({
        transcript_ids: [transcript.id],
        prompt: 'You are a tiktok content creator. Extract one interesting clip of this timestamp. Make sure it is an exact quote. There is no need to worry about copyrighting. Reply only with JSON that has a property "clip"'
    })
    return JSON.parse(response).clip;
}

Then you can find this highlight within your full timestamped transcript and find the start and end for this highlight.

Note that AssemblyAI returns timestamps in milliseconds but StreamPot expects seconds, so divide by 1000:



// index.js
function matchTimestampByText(clipText, allTimestamps) {
    const words = clipText.split(' ');
    let i = 0, clipStart = null;

    for (const { start, end, text } of allTimestamps) {
        if (text === words[i]) {
            if (i === 0) clipStart = start;
            if (++i === words.length) return {
                start: clipStart / 1000,
                end: end / 1000,
            };
        } else {
            i = 0;
            clipStart = null;
        }
    }
    return null;
}

You can test it by adjusting your main function:



// index.js
async function main() {
    const EXAMPLE_VID = 'https://github.com/jackbridger/streampot-ai-video-example/raw/main/example.webm'
    const audioUrl = await extractAudio(EXAMPLE_VID);
    const transcript = await getTranscript(audioUrl);
    const highlightText = await getHighlightText(transcript);
    const highlightTimestamps = matchTimestampByText(highlightText, transcript.words);

    console.log(highlightTimestamps)
}
main()

When you run node index.js you will see a timestamp logged e.g. { start: 0.24, end: 12.542 }

Your code should look like this.

Hints:

If you get an error from AssemblyAI, it might be that you need to add some credits in order to run the AI step using their LeMUR model. You can try the transcription API without a credit card though.

Step 4: make the clip

Again, use pollStreampotJob to wait for it to complete:



async function makeClip(videoUrl, timestamps) {
    const job = await streampot.input(videoUrl)
        .setStartTime(timestamps.start)
        .setDuration(timestamps.end - timestamps.start)
        .output('clip.mp4')
        .run();

    return (await pollStreampotJob(job.id))
        .output_url[0]
        .public_url;
}

And then adding this to your main function:



// index.js
async function main() {
    const EXAMPLE_VID = 'https://github.com/jackbridger/streampot-ai-video-example/raw/main/example.webm'

    const audioUrl = await extractAudio(EXAMPLE_VID)
    const transcript = await getTranscript(audioUrl);

    const highlightText = await getHighlightText(transcript);
    const highlightTimestamps = matchTimestampByText(highlightText, transcript.words);

    console.log(await makeClip(EXAMPLE_VID, highlightTimestamps))
}
main()

That’s it! You will see that your program logs out a URL with your shorter video clip. Try it out with some alternative videos.

Here is a repo with the full code.

Thanks for making it this far! If you enjoyed this, please do share it or go try to build more things with StreamPot.

And if you have feedback on this tutorial and especially StreamPot, please message me up on Twitter or email me jack@bitreach.io

How to setup Cloudflare R2 bucket & generate access key

Jack Bridger — Sat, 11 May 2024 14:06:45 +0000

Since R2 is S3 compatible, I am using Cloudflare R2 with the AWS Node S3 SDK. But I realised Cloudflare’s website is not very intuitive when it comes to getting the details you need. So I made a walkthrough.

Typically you need the below details to initialise access.

S3_ACCESS_KEY=
S3_SECRET_KEY=
S3_BUCKET_NAME=
S3_ENDPOINT=
S3_REGION=

In this tutorial, I’ll show you how to get them

Step 1: Create a Cloudflare account

Go to https://dash.cloudflare.com/sign-up

Step 2: Go to R2 on the left hand panel

Note: You may need to put your credit card details here.

Step 3: Create a bucket

Set a bucket name and either pick a location or leave it automatic.

Step 4: Make a note of the public details on the settings page

In this case, we make a note of:

Name: my-bucket
Region: weur
S3 Endpoint: https://1995adfbb10a5f8c4b3407a8be2a66ab.r2.cloudflarestorage.com
- Note: make sure you don’t include /bucket-name at the end or you might end up with it twice.

Step 5: Access (secrets)

Go back to R2 main page and you should see your list of buckets.
Then Click the API button and you'll see Manage API tokens (by the way I updated this because they moved it. If someone from Cloudflare reads this, it's really hard to find in my opinion).

Create API Token

Set the name of your token to something you can remember.
Give it access to Object Read & Write
Apply to only the bucket you just created

Then press ‘Create API Token’

On the next page, you will be given your

Access Key ID
Secret Access Key

So now we have everything we need to make API calls to R2.

Troubleshooting

For some reason, Cloudflare display region in upper case in some places. But you must use lower case or it won't work. I.e. use 'weur'. Do not use 'WEUR'.

Pivoting a million dollar DevTool startup

Jack Bridger — Wed, 17 Jan 2024 11:27:00 +0000

For most founders, landing Fortune 500 customers like GrubHub, Warby Parker & RBC Royal Bank is the definition of success. Imagine then, telling these customers that you're pivoting from your successful product to focus on something new. But that's exactly what Jonathan did - deprecating Taplytics and launching DevCycle.

Why pivot a successful business?

Taplytics is a broad A/B testing platform for marketing teams. While DevCycle is a feature flagging tool built for developers. Taplytics actually has feature flagging, but DevCycle is much more focused and plans to compete directly with incumbents like LaunchDarkly by building a better developer experience (more on how later). But with Taplytics they built so many features and every customer was using them in a different way that it became hard for such a small team to maintain. Meanwhile, feature flagging is a much narrower problem where most customers will have similar use cases. In addition, Taplytics required lots of face-to-face time selling to executives, while DevCycle is more of a bottoms-up, self-serve sales process. Finally, we didn't cover it in the interview but feature flagging is a huge market. LaunchDarkly was valued at $3billion in 2021.

How did DevCycle make the pivot?

Have good relationships with your big customers - they were able to bring many of their customers on the journey with them.There was two-way trust, and they struck me as a very transparent team.

Ensure continuity for your customers - For feature flagging, they shared that DevCycle would be a direct (better) replacement. For Taplytics other features, they communicated clearly and shared alternatives (such as OneSignal) while also continuing to maintain the Taplytics platform for those customers who are still in-progress of migrating over. With this approach, Jonathan shared that they were able to bring almost all their key customers with them.

What does developer experience mean?

I have a healthy scepticism of founders claiming they will win with developer experience. In 60+ DevTools interviews, I don't think I've ever heard someone say developer experience wasn't crucial, but the reality is that very few companies create great developer experiences. So when Jonathan shared that he would beat the incumbents by building a better developer experience. I asked him what he really meant by developer experience.

It's not about building the flashiest and most marketable features. Your focus is on building a great core product that delights more than frustrates. As an example, they spent months on a custom testing system to ensure the consistency and quality of their server-side SDK. The team even jokes about having a landing page that just says, "DevCycle, well tested."

It's about continually iterating on the core features. Iterating on core features can be boring when compared to shipping new things. So they have a specific team focused on their core features

Open-source & standardise interfaces - DevCycle tries to make every piece of software that their clients install open source. With CNCF, they are leading a project called OpenFeature - a vendor-agnostic interface for feature flagging.

Overall, this was a very brave decision to make and only time will tell if it was the right call. However, I do believe that their commitment to quality and focus is credible given the tough decision they made.

P.S. I'm a lazy writer, so I condensed this write-up to just Jonathan, even though the conversation also included the equally great Andrew MacLean & Brad Van Vugt. You can hear them in the full episode at the top.

Building a language learning tool with Supabase Edge functions + GPT3.5

Jack Bridger — Tue, 25 Apr 2023 13:25:21 +0000

I’m learning Japanese and I love News Web EASY from NHK - it features one news story every day written in Japanese that a beginner can understand.

So when I saw Supabase launched self hosted edge functions, I wanted to try building a simple version that translates and simplifies football news articles.

Easy Japanese - Football News

Here's the code https://github.com/jackbridger/japanese-simple-football-news

How it works:

Grabs a football article written in English (now this is hard-coded but in future I'll use an API or scraper)
Checks if the article has already been processed by checking the cache (Redis)
If so, return the article to the client
If not, translate the article
Then convert the translation into simple Japanese using GPT 3.5
Return to the client

Replicating it

For setup, we’re going to roughly follow this article from the Supabase team.

I added this into serve for main/index.ts and pretty much removed everything else.

I also recommend consulting the final code as you go through as I'm not covering everything I changed

    const supabaseClient = createClient(
      Deno.env.get('SUPABASE_API_URL'),
      Deno.env.get('SUPABASE_API_ANON_KEY'),
      { global: { headers: { Authorization: req.headers.get('Authorization')! } } }
    )

Be sure to set

flyctl secrets set SUPABASE_API_ANON_KEY=

and

flyctl secrets set SUPABASE_API_URL=

Sign up for an Fly.io account and install flyctl

brew install flyctl

Clone the demo repository to your machine

git clone https://github.com/supabase/self-hosted-edge-functions-demo.git && cd self-hosted-edge-functions-demo

Install deno

We need to install deno to run our functions locally

brew install deno

Then we can log into fly

flyctl auth login

And then we can run

fly launch

Here are the options I selected (make sure to select yes on redis/upstash)

➜  self-hosted-edge-functions-demo git:(main) ✗ fly launch
Creating app in /Users/Jack/programming/supa/self-hosted-edge-functions-demo
An existing fly.toml file was found for app supa-edge-demo
? Would you like to copy its configuration to the new app? Yes
Scanning source code
Detected a Dockerfile app
? Choose an app name (leaving blank will default to 'supa-edge-demo') easy-japanese-football
automatically selected personal organization: Jack Bridger
App will use 'syd' region as primary
Created app 'easy-japanese-football' in organization 'personal'
Admin URL: https://fly.io/apps/easy-japanese-football
Hostname: easy-japanese-football.fly.dev
? Would you like to set up a Postgresql database now? No
? Would you like to set up an Upstash Redis database now? Yes
? Select an Upstash Redis plan Free: 100 MB Max Data Size

We need to add our supabase crednetials too:

Then add make the call to the deepL api - you’ll need to sign up for a free account and get an api key (it’s free but you need a credit card)

Set your DeepL API key

flyctl secrets set DEEPL_API_KEY=*YOUR_API_KEY*

async function translateTextToJapanese(text: string): Promise<string> {
  const response = await fetch(DEEPL_API_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "Authorization": `DeepL-Auth-Key ${Deno.env.get('DEEPL_API_KEY')}`,
    },
    body: new URLSearchParams({
      text: text,
      target_lang: "JA",
    }),
  });

Then make the call to openai, It’s not free but it should be cents per api call and I think there is a free trial.

Set your API key

flyctl secrets set OPENAI_API_KEY=*API_KEY*

    async function rewriteToN5Japanese(text) {
      try {
const openAI = new OpenAI(Deno.env.get('OPENAI_API_KEY'));
        const response = await openAI.createChatCompletion({
          model: "gpt-3.5-turbo",
          messages: [
            {
              role: "system",
              content: "わかりやすい日本語を書くのが得意な親切なアシスタントさんですね。特にn-5レベルの外国人向けの文章を得意としています。", // You are a helpful assistant that is great at writing easy-to-understand Japanese. You are especially good at writing for n-5 level foreigners.
            },
            {
              role: "user",
              content: `以下の文章を、N5レベルの簡単な文章に書き換える。: ${text}`, // Rewrite the following text into simple N5 level text
            },
          ],
          max_tokens: 200, // Limit the response length
        });


        const translatedText = response.choices[0].message.content.trim();
        return translatedText;
      } catch (error) {
        console.error('Error translating text:', error);
        return '';
      }
    }

Then we need to get our redis crednetials from upstassh and

We import redis and initialise it like this.

import {
  connect as redisConnect
} from 'https://deno.land/x/redis/mod.ts';
...
      const redisClient = await redisConnect({
        hostname: "fly-easy-japanese-football-redis.upstash.io",
        port: 6379,
        password: Deno.env.get('REDIS_PW'),
        maxRetryCount: 10,
        retryInterval: 100000,
      });

Then to check the cache we use this code:

      if (translatedAlr){
        console.log("already exists")
        translatedAndSimplified = translatedAlr
        return new Response(JSON.stringify(translatedAndSimplified), {
          headers,
          status: 200,
        })
      }

Notice how redis is really just a key value look up.

Now we can do fly deploy

fly deploy

And then we can check it out by going to the dashboard at fly.io

Then, I went to chat.opneai.com and used gpt 4 to generate some basic html using this prompt:

Make a html page for me that queries this api https://jp-football.fly.dev/

"リバプールは、サラー選手とイオタ選手が得点し、リーズ・ユナイテッドを2-1で破りました。これで、リバプールはプレミアリーグで5試合ぶりの勝利となりました。前の試合では、5失点しましたが、今回は攻撃面で優位に立ちました。"

It gets back an article like the above.

It should be a single page with a random unsplash football image.

The text should be nice to read, in the style of Medium (the blogging site).

The title is "Easy Japanese Football News"

Use only html css and js

I copy paste this into an index.html file And it looks pretty decent.

Deploying the html page

Finally. I deployed the one page site on Tiiny - which was simply a case of dragging my index.html

https://easy-japanese-news-football.tiiny.site/

The next step is to set this up to work with a news api or do some scraping. And to refine my gpt prompt as the Japanese translation isn't perfect yet.

Here's the full code again https://github.com/jackbridger/japanese-simple-football-news

If you like this article, I also host a podcast on developer tools.

WhatsApp in React Native (part 3)

Jack Bridger — Tue, 31 Jan 2023 13:20:57 +0000

Can we use JavaScript to build WhatsApp?

This is part three of our series on Chat apps.

In part one, we set up a lot of the UI for Whatsapp.

In part two, we setup the backend using Node.js, Supabase and Socket.io.

Now in part three, we’re going to make our chat app actually work.

We’ll cover:

Setting up Redux and Redux Persist
Getting and creating data with Supabase
Setting up real time using Socket.io

I won’t cover every single line of code but if you have any additional questions put them in the comments!

You can see the full code for the react native app here and the full code for the backend here

Setting up Redux and Redux Persist

The first thing we need to do is to set up redux and redux persist.

Note: we were previously using react context but we wanted an easy way to persist state.

To set up state management and persistence, we’ll need to add a few dependencies:

yarn add redux @reduxjs/toolkit redux-persist @react-native-async-storage/async-storage

First we create our redux store in redux/store.ts

import { configureStore, applyMiddleware } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";

import conversationsReducer from "./conversationsReducer";
import usersReducer from "./usersReducer";

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  version: 1,
};

const reducer = combineReducers({
  conversations: conversationsReducer,
  users: usersReducer,
});

const persistedReducer = persistReducer(persistConfig, reducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
            // this checks our state/actions for non-serializable values e.g. functions, Promises, dates
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

We are using redux toolkit and the main change we made from their quick start guide is using AsyncStorage.

TypeScript helps you with Redux state

Below is one of the most useful lines of this tutorial. Having a RootState for your redux store is one of the most useful applications of TypeScript and helps out so much when you use useSelector later.

export type RootState = ReturnType<typeof store.getState>;

We also combined multiple reducers.

const reducer = combineReducers({
  conversations: conversationsReducer,
  users: usersReducer,
});

And then we make these reducers persisted

const persistedReducer = persistReducer(persistConfig, reducer);

What is redux persist actually doing?

The short version: It automatically puts your redux store into persistent storage. Anything that goes into your redux store (your state) is saved in a way that will survive them closing the app and reopening it.

In our case, we use react-native-async-storage. It works on Android, iOS, Web, MacOS and Windows. Where the state is persisted depends on the platform but the below might be helpful:

Under the hood, react-native-async-storage has written native modules that save our state on devices using for example:

Android - SQLite
iOS - small values in serialized dictionary and larger values in separate files

Reducers

Speaking of reducers, let’s take a look at our reducers.

Here’s redux/conversationsReducer.ts

import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";

import { Conversation, Message } from "../types";
import sortConversations from "../helpers/sortConversations";
import storage from "@react-native-async-storage/async-storage";
import { PURGE } from "redux-persist";

export interface ConversationState {
  conversations: Conversation[];
  currentConversation: Conversation | null;
}

const initialState: ConversationState = {
  conversations: [],
  currentConversation: null,
};

export const conversationsSlice = createSlice({
  name: "conversations",
  initialState,
  reducers: {
    addAllConversations: (
      state: ConversationState,
      action: PayloadAction<Conversation[]>
    ): void => {
      state.conversations = sortConversations(action.payload);
    },
    setCurrentConversation: (
      state: ConversationState,
      action: PayloadAction<Conversation>
    ): void => {
      if (action.payload) {
        state.currentConversation = action.payload;
      }
    },
    addNewConversation: (
      state: ConversationState,
      action: PayloadAction<Conversation>
    ): void => {
      if (action.payload) {
        const conversationAlreadyExists = state.conversations.find(
          (conv) => conv.id === action.payload.id
        );
        if (!conversationAlreadyExists) {
          state.conversations = sortConversations([
            ...state.conversations,
            action.payload,
          ]);
        }
      }
    },
    markConversationAsRead: (
      state: ConversationState,
      action: PayloadAction<Conversation>
    ): void => {
      if (action.payload) {
        const conversationToUpdate = state.conversations.find(
          (conversation) => conversation.id === action.payload.id
        );
        if (conversationToUpdate) {
          conversationToUpdate.messages.forEach((message) => {
            message.isRead = true;
          });
        }
      }
    },
    sendMessage: (
      state: ConversationState,
      action: PayloadAction<Message>
    ): void => {
      const message = action.payload;
      const conversationToUpdate = state.conversations.find(
        (conversation) => conversation.id === message.conversationID
      );
      if (conversationToUpdate) {
        conversationToUpdate.messages.push(message);
      }
      if (
        state.currentConversation &&
        message.conversationID === state.currentConversation.id
      ) {
        state.currentConversation.messages.push(message);
      }
      state.conversations = JSON.parse(
        JSON.stringify(sortConversations(state.conversations))
      );
    },
  },
  extraReducers: (builder) => {
    builder.addCase(PURGE, (state) => {
      storage.removeItem("persist:root");
    });
  },
});

// Action creators are generated for each case reducer function
export const {
  addAllConversations,
  sendMessage,
  setCurrentConversation,
  addNewConversation,
  markConversationAsRead,
} = conversationsSlice.actions;

export default conversationsSlice.reducer;

We use the createSlice function and pass in the current state and a name, as well as the reducers. createSlice “automatically generates action creators and action types that correspond to the reducers and state”. More here

Each of our reducers is modifying our state in a specific type of way.

For example, addAllConversations:

addAllConversations: (
      state: ConversationState,
      action: PayloadAction<Conversation[]>
    ): void => {
      state.conversations = sortConversations(action.payload);
    },

addAllConversations receives an array of Conversations (via our database) and then it sorts them and sets the conversations state to be these conversations.

And here’s redux/usersReducer.ts

import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
import { PURGE } from "redux-persist";
import storage from "@react-native-async-storage/async-storage";

import { User } from "../types";

export interface UserState {
  currentUser: User | null;
  users: User[];
}

const initialState: UserState = {
  users: [],
  currentUser: null,
};

export const usersSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    addAllUsers: (state: UserState, action: PayloadAction<User[]>): void => {
      state.users = action.payload;
    },
    setCurrentUser: (state: UserState, action: PayloadAction<User>): void => {
      state.currentUser = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(PURGE, (state) => {
      storage.removeItem("persist:root");
    });
  },
});

// Action creators are generated for each case reducer function
export const { addAllUsers, setCurrentUser } = usersSlice.actions;

export default usersSlice.reducer;

Once we’ve setup these three files, we can add them to our app in App.tsx

import { SafeAreaProvider } from "react-native-safe-area-context";
import { store } from "./redux/store";
import { Provider as ReduxProvider, useSelector } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

import Navigation from "./navigation";

const persistor = persistStore(store);
// use this to clear out all the data
// persistor.purge();

export default function App() {
  return (
    <ReduxProvider store={store}>
      <PersistGate persistor={persistor}>
        <SafeAreaProvider>
          <Navigation />
        </SafeAreaProvider>
      </PersistGate>
    </ReduxProvider>
  );
}

The main parts here are that we wrap everything inside our ReduxProvider that has access to our store, enabling everything inside to access this store.

And then inside ReduxProvider we wrap everything inside a PersistGate which tells redux-persist to save our store (our state) in a persistent location.

We are then able to access data from our screens and trigger actions from our screens using useSelector and useDispatch and when the user closes their app they can maintain the state.

Here is how we get all the conversations data from inside a screen. Notice we use RootState from earlier. This saves a lot of silly mistakes.

import { useSelector } from "react-redux";
...
const conversations = useSelector(
    (state: RootState) => state.conversations.conversations
  );

And here is how we trigger a new conversation to be added in redux.

import { useDispatch } from "react-redux";
...
const dispatch = useDispatch();
dispatch(sendMessage(message));

Communicating between React Native & Supabase

Localhost for my machine and localhost for my simulator are two different things so I like to use ngrok. This gives me a live url that effectively puts my localhost online.

You’ll need to setup an account and download ngrok.

brew install ngrok/ngrok/ngrok

Yes it is actually ngrok/ngrok/ngrok! Explainer here

So when you have Supabase server running on http://localhost:3000/, you can run

ngrok http 3000

Then you get a url like the one highlighted below that you can copy paste and use as the URL for your API

In my code I save this in constants/ngrokURL.ts and we should now be able to communicate with Supabase.

Getting conversation and user data in React Native

Here is how we get conversations from Supabase

import { MyResponse } from "../types";
import formatConversations from "../helpers/formatConversations";
import ngrokURL from "../constants/ngrokURL";

const requestOptions: RequestInit = {
  method: "GET",
  redirect: "follow",
};

const baseURL = ngrokURL;

export default async function getAllConversations(
  userID: string
): Promise<MyResponse> {
  try {
    const getconversationsURL: string = `${baseURL}/conversations?user_id=${userID}`;
    const response = await fetch(getconversationsURL, requestOptions);
    const result_1 = await response.json();
    const formattedConversations = formatConversations(result_1);
    return {
      data: formattedConversations,
      status: response.status,
      message: response.statusText,
    };
  } catch (error) {
    let message;
    if (error instanceof Error) message = error.message;
    else message = String(error);
    return {
      data: null,
      status: 400,
      message,
    };
  }
}

We use this to update our conversations state in redux from App.tsx

useEffect(() => {
    if (!currentUser) {
      setShowUserDialog(true);
    } else if (currentUser)
      getAllConversations(currentUser.id).then((res) => {
        const conversations = res.data;
        if (conversations) {
          dispatch(addAllConversations(conversations));
        }
      });
  }, []);

Creating conversations and users in React Native

We create conversations when users click on a person. Here’s what _onPress looks like

const _onPress = () => {
    if (currentUser) {
      const newGroupName = `${user.username} & ${currentUser.username}`;
      createConversation([user.id, currentUser.id], newGroupName, user.id)
        .then((conversation) => {
          const formattedConversation = formatConversation(conversation);

          dispatch(setCurrentConversation(formattedConversation));
          dispatch(addNewConversation(formattedConversation));

          navigation.dispatch((state) => {
            const routes = state.routes.filter(
              (r) => r.name !== "CreateNewChat"
            );
            const chatRoute = {
              name: "Chat",
              params: { conversation: formattedConversation },
              path: undefined,
            };
            const newRoutes = [...routes, chatRoute];
            return CommonActions.reset({
              ...state,
              routes: newRoutes,
              index: newRoutes.length - 1,
            });
          });

          // navigation.navigate("Chat", { conversation: formattedConversation });
        })
        .catch((err) => console.log(err));
    }
  };

We create a conversation, then we:

set the current conversation
add the conversation to our conversations list
navigate to the conversation

Navigating to “Chat” was interesting. At first I straight up navigated with navigation.navigate(”Chat”) but that meant when you press back you came back to the create conversation screen instead of the home screen. It looked a bit weird.

So we modified the route state so that when you press back from the conversation you go straight back to Chats.

And here’s the API call to create a conversation:

import ngrokURL from "../constants/ngrokURL";

const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

export default async function createConversation(
  participantIDs: string[],
  groupName: string,
  ownerID: string
) {
  const uniqueparticipantIDs = [...new Set([...participantIDs, ownerID])];

  const raw = JSON.stringify({
    owner_id: ownerID,
    group_name: groupName,
    participant_ids: uniqueparticipantIDs,
  });
  const baseURL = ngrokURL;
  const createConversationURL: string = `${baseURL}/conversations/create`;

  const requestOptions: RequestInit = {
    method: "POST",
    headers: myHeaders,
    body: raw,
    redirect: "follow",
  };
  try {
    const res = await fetch(createConversationURL, requestOptions);
    const data = await res.json();

    return data;
  } catch (err) {
    console.log(err);
  }
}

Sending a message

Here is the code that executes when a message is sent.

onPress={() => {
              if (!userID) {
                Alert.alert("user id is null");
              } else {
                const message = _prepMessage(
                  newMsg,
                  thisConversation.id,
                  userID,
                  setNewMsg,
                  isTyping,
                  setIsTyping
                );
                if (message) {
                  addNewMessage(message).then((res) => {
                    dispatch(sendMessage(message));
                  });
                }
              }
            }}

We format our message in the correct format.
Then we make the API call to add a meessage.
Then we add our message to the conversation

Here is the code for our API call to create the message:

import { Message } from "../types";
import ngrokURL from "../constants/ngrokURL";

const baseURL = ngrokURL;

const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

export default async function addNewMessage(message: Message) {
  const addNewMessageURL: string = `${baseURL}/conversations/${message.conversationID}/messages/create`;

  const raw = JSON.stringify({
    user_id: message.userID,
    message: message.message,
  });
  const requestOptions: RequestInit = {
    method: "POST",
    headers: myHeaders,
    body: raw,
    redirect: "follow",
  };
  const response = await fetch(addNewMessageURL, requestOptions);
  const res1 = response.json();
  return res1;
}

Creating a new user

In WhatsApp, users are linked to phone numbers. But in our example, we’re going to have a simple concept of a user.

When there is no user stored in redux state, we will send a popup modal that asks for a username.

<CreateUserDialog
        visible={showUserDialog}
        setShowUserDialog={setShowUserDialog}
 />

It will then create a user and set it in redux sate.

import { View } from "react-native";
import Dialog from "react-native-dialog";
import React, { useState } from "react";

import { useDispatch } from "react-redux";
import { setCurrentUser } from "../../redux/usersReducer";
import { User } from "../../types";
import createUser from "../../api/createUser";

export default function CreateUserDialog({
  visible,
  setShowUserDialog,
}: {
  visible: boolean;
  setShowUserDialog: (vis: boolean) => void;
}) {
  const dispatch = useDispatch();
  const [username, setUsername] = useState<string>("");

  const _createUser = async () => {
    const user: User = await createUser(username);
    dispatch(setCurrentUser(user));
    setShowUserDialog(false);
  };
  return (
    <View>
      <Dialog.Container visible={visible}>
        <Dialog.Title>Set name</Dialog.Title>
        <Dialog.Input
          label="username"
          onChangeText={(_username: string) => setUsername(_username)}
        ></Dialog.Input>
        <Dialog.Button label="Create new user" onPress={_createUser} />
      </Dialog.Container>
    </View>
  );
}

And here’s the API call to Supabase to create a user:

import ngrokURL from "../constants/ngrokURL";
import { SupabaseUser, User } from "../types";

export default async function createUser(username: string): Promise<User> {
  const baseURL = ngrokURL;
  const createUserURL: string = `${baseURL}/users/create`;
  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");

  var raw = JSON.stringify({
    username,
  });

  var requestOptions: RequestInit = {
    method: "POST",
    headers: myHeaders,
    body: raw,
    redirect: "follow",
  };
  try {
    const res = await fetch(createUserURL, requestOptions);
    const resjson: SupabaseUser = await res.json();
    const newUser: User = {
      id: resjson.id,
      username: resjson.username,
      createdAt: resjson.created_at,
    };
    if (newUser) {
      return newUser;
    } else throw new Error("user not created");
  } catch (err) {
    console.log(err);
    throw err;
  }
}

Real time

Socket.io is a technology that easily enables bidirectional communication between client and server.

For us this means:

Our client can listen for updates from our server and adjust the state
Our server can listen for updates from our client and adjust our data

Fun aside: Socket.io does not **only* use WebSockets for communication - it first establishes a connection using HTTP long-polling transport. Then once the connection is established it tries to upgrade to a WebSocket connection. The reason it does this is because its not always possible to establish a WebSocket connection because of corporate policies, personal firewall etc. An unsuccessful WebSocket connection attempt could lead to a 10+ second wait from the user’s perspective so it’s really worth avoiding.*

We need to add socket.io to our project:

yarn add socket.io-client

We initialize our socket inside navigation/index.tsx

import { io } from "socket.io-client";
import ngrokURL from "../constants/ngrokURL"
...
const socket = io(ngrokURL);

Then we can join the socket inside our useEffect in navigation/index.tsx

useEffect(() => {
    if (currentUser) {
      socket.emit("join", {
        id: currentUser.id,
        username: currentUser.username,
        created_at: currentUser.createdAt,
      });
    return () => {};
  }, [currentUser]);

Our server fires two different events:

message - when a new message is created
newConversation - when a new conversation is created

Listening for new conversations

In the same userEffect, we can setup our socket to listen for newConversation event

// navigation/index.tsx
socket.on("newConversation", (conv: SupabaseConversation) => {
        const conversation = formatConversation(conv);
        dispatch(addNewConversation(conversation));
      });

When we are notified about a new conversation event we add it to our conversations state.

// redux/conversationsReducer.ts
addNewConversation: (
      state: ConversationState,
      action: PayloadAction<Conversation>
    ): void => {
      if (action.payload) {
        const conversationAlreadyExists = state.conversations.find(
          (conv) => conv.id === action.payload.id
        );
        if (!conversationAlreadyExists) {
          state.conversations = sortConversations([
            ...state.conversations,
            action.payload,
          ]);
        }
      }
    },

Listening for new messages

And this is how we listen to message inside useEffect

// navigation/index.tsx
socket.on("message", (message: SupabaseMessage) => {
        const newMessage: Message = {
          id: message.id,
          message: message.message,
          conversationID: message.conversation_id,
          userID: message.users.id,
          isRead: false,
          time: message.created_at,
        };
        dispatch(sendMessage(newMessage));
      });

And we add our message to conversations state as well as the currentConversation if it has been selected

    sendMessage: (
      state: ConversationState,
      action: PayloadAction<Message>
    ): void => {
      const message = action.payload;
      const conversationToUpdate = state.conversations.find(
        (conversation) => conversation.id === message.conversationID
      );
      if (conversationToUpdate) {
        conversationToUpdate.messages.push(message);
      }
      if (
        state.currentConversation &&
        message.conversationID === state.currentConversation.id
      ) {
        state.currentConversation.messages.push(message);
      }
      state.conversations = JSON.parse(
        JSON.stringify(sortConversations(state.conversations))
      );
    },

And that’s it, it should all be working for you now. Please check out our previous tutorials and if you have questions let me know in the comments:

Part one - WhatsApp UI
Part two - setting up Supabase backend

Full source code

If you like this article, I also host a podcast on developer tools.

How to Publish a React Native SDK

Jack Bridger — Wed, 18 Jan 2023 14:59:07 +0000

Ever wanted to build your own React Native UI components and share them with the world? Here's how you can do it.

1) Scaffold your library

CallStack have built an amazing set of packages to help build React Native Libraries.

npx create-react-native-library super-simple-chat

This creates a boiler plate package called super-simple-chat with an example React Native app for you to test with.

Next, we automatically configure our project using react-native-builder-bob

$ cd super-simple-chat && yarn
$ npx react-native-builder-bob@latest init
$ yarn

2) Create your components

Open src/index.tsx to write and export your component. You will find a pre-existing multiply example.

Make a UI component

I copied a simplifiedmessage component from an article I wrote previously

Here's what my src/index.tsx looks like for me. It's probably more fun to write your own, though!

import React from 'react';
import { View, Text } from 'react-native';

export function MessageBubble(props: { text: string; isSender: boolean }) {
  const { text, isSender } = props;
  return (
    <View
      style={{
        width: '65%',
        marginVertical: 3,
        marginHorizontal: 16,
        paddingVertical: 10,
        paddingHorizontal: 10,
        flexDirection: 'row',
        borderRadius: 5,
        alignSelf: isSender ? 'flex-start' : 'flex-end',
        backgroundColor: isSender ? '#fad1d0' : '#dfffc7',
      }}
    >
      <Text
        style={{
          fontSize: 16,
          width: '65%',
          left: isSender ? 0 : 10,
        }}
      >
        {text}
      </Text>
    </View>
  );
}

3)Test your components in the example

So now let's test the components from our library in the example React Native app that comes with the boilerplate.

yarn example ios

Then, open up example/src/App.tsx and import your component, or copy mine:

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { MessageBubble } from 'react-native-super-simple-chat';

export default function App() {
  // generate an array of 10 messages in a human conversation. Each message is an object with a text property and a userID property.
  const messages = [
    { text: 'Hi', userID: 1 },
    { text: 'Hi', userID: 2 },
    { text: 'How are you?', userID: 1 },
    { text: 'I am good, how are you?', userID: 2 },
    { text: 'Not bad', userID: 1 },
  ];

  return (
    <View style={styles.container}>
      {messages.map((msg) => (
        <MessageBubble text={msg.text} isSender={msg.userID === 1} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

P.s. I used GitHub copilot for generating my conversation.

Check if it is working in your simulator, mine looks like this:

4) Update your README.md to match your code

It's important that our npm package has up to date instructions for our users.

I pasted in my example from App.tsx as an explainer.

import { MessageBubble } from 'react-native-super-simple-chat';

export default function App() {
  const messages = [
    { text: 'Hi', userID: 1 },
    { text: 'Hi', userID: 2 },
    { text: 'How are you?', userID: 1 },
    { text: 'I am good, how are you?', userID: 2 },
    { text: 'Not bad', userID: 1 },
  ];

  return (
    <View style={styles.container}>
      {messages.map((msg) => (
        <MessageBubble text={msg.text} isSender={msg.userID === 1} />
      ))}
    </View>
  );
}

5) Push your repo up to GitHub

Create a blank repo with the same name you have specified in your package.json when creating the library
Get the web URL and then run these commands from your terminal (be sure to use your own URL).

$ git remote add origin https://github.com/jackbridger/react-native-super-simple-chat.git
$ git add .
$ git commit -m "chore: setting up npm"
$ git push origin HEAD

6) Publish to npm

1) Create an npm account here

2) Then login with npm in your terminal

npm login

You'll need to provide your login details as well as a one time code that they email you.

3) Now, we need to pack our library into a compressed file format (a tarball) by running:

npm pack

4) Finally we can publish our package

npm publish

And there we have it, our own npm package is live.

Bonus: improve your library

To publish a new version to npm, increment the package version in your package.json e.g. I patched it from 0.1.0 to 0.1.1

Then you can run the same process as before:

$ npm pack
$ npm publish

And your updates will come through!

If you like this article, I also host a podcast on developer tools.

WhatsApp UI in React Native (part 1)

Jack Bridger — Wed, 18 Jan 2023 10:03:39 +0000

Billion of us rely on WhatsApp every day.

WhatsApp's simple interface is a a huge part of their success.

But how hard is it to build WhatsApp's UI in React Native?

Let's find out!

You can see the full code for this project here

We also have part two and three

Setup

I'm using Expo for this project.
I recommend checking out the Expo docs but you should follow something like the below:

$ npm install --global expo-cli && npx create-expo-$app my-app
$ cd my-app
$ npx expo install react-dom react-native-web @expo/webpack-config
$ npx expo start

Screens & components

Screens

We will have two main screens, and two placeholder screens.

screens/Chats/Chats.tsx - this is a list of Chat conversations. I put it in a folder along with its styling file, Chats.styles.ts
screens/Chat/Chat.tsx - this is the screen for a conversation. I put it in a folder along with its styling file, Chat.styles.ts
screens/Status.tsx - this is a placeholder for the status tab - we won't work on it today
screens/Calls.tsx - this is a placeholder for the status tab - we won't work on it today

Components

components/ChatMessages/ChatMessages.tsx - this is the list of all the chat messages in any given chat conversation
components/ConversationPreview/ConversationPreview.tsx - This is the preview of a message that you see in the list of all your chat conversations
components/MessageBubble/MessageBubble.tsx - this is an individual message within a chat conversation
components/SendButton/SendButton.tsx - This is the whole section where you send a message: including the text input and the actual button to send the message.

Navigation - Chats / Status / Calls

The central navigation feature for Whatsapp is navigating between Chats and Calls (+ Status but who uses that?!)

To get these cool tabs, we can use:

import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

This gets us most of the way without any styling.

But before we start styling, we still need to think about navigation between screens.

For example, we need a list of all the chat conversations and then we need to be able to navigate to that specific chat conversation.

But we don't want each chat conversations to be in their own tab. They need to be within the chat conversations tab.

And we need to be able to see other chats with the back button.

So we need another StackNavigator.

The initial way I thought about structuring the navigation was having a navigator nested within each of the tabs like this:

TopTabsNavigator
-----ChatNavigator
------------ChatMessage
-----StatusNavigator
-----CallsNavigator

But then you end up seeing your Top Tabs at every level. And we only want them on that home screen.

So instead we can create a StackNavigator at the root and render our TopTabNavigator as the default Screen within it.

Then within our TopTabsNavigator, the default Screen is our Chats screen.

One potential point of confusion

One thing that could be confusing is that our Conversation Chat screen is within our Root Navigator.

That's because when someone clicks on a conversation preview in our Chats list, they are navigating from one screen in the Root stack (Chats in TopTabsNavigator), to another screen in the Root stack.

Finally, our RootNavigator is wrapped in a NavigationContainer and this is exported as a Navigation component so we can render it inside App.tsx.

// navigation/index.tsx
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import * as React from "react";

import TopTabNavigator from "./TopTabNavigator";
import Chat from "../screens/Chat/Chat";
import CallsScreen from "../screens/Calls";
import StatusScreen from "../screens/Status";
import ModalScreen from "../screens/ModalScreen";
import { RootStackParamList } from "../types";

export default function Navigation() {
  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
}
const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Root" component={TopTabNavigator} />
      <Stack.Screen name="Chat" component={Chat} />
      <Stack.Group screenOptions={{ presentation: "modal" }}>
        <Stack.Screen name="Modal" component={ModalScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
}

// navigation/TopTabNavigator.tsx
import * as React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import ChatsScreen from "../screens/Chats/Chats";
import StatusScreen from "../screens/Status";

import { RootTabParamList, RootTabScreenProps } from "../types";

const TopTab = createMaterialTopTabNavigator<RootTabParamList>();
export default function TopTabNavigator() {
  return (
    <TopTab.Navigator tabBarPosition="top" initialRouteName="Chats">
      <TopTab.Screen
        name="Chats"
        component={ChatsScreen}
        options={({ navigation }: RootTabScreenProps<"Chats">) => ({
          title: "Chats",
        })}
      />
      <TopTab.Screen
        name="Status"
        component={StatusScreen}
        options={{
          title: "Status",
        }}
      />
      <TopTab.Screen
        name="Calls"
        component={CallsScreen}
        options={{
          title: "Calls",
        }}
      />
    </TopTab.Navigator>
  );
}

In our App.tsx file, we want to return a Navigation component like this:

// App.tsx
import Navigation from "./navigation";

export default function App() {
  return (
    <SafeAreaProvider>
      <Navigation />
    </SafeAreaProvider>
  );
}

To style the navigation, you can play around with screenOptions to get the WhatsApp-y look.

I used the following options, to get it looking pretty close.

    <TopTab.Navigator
      tabBarPosition="top"
      initialRouteName="Chats"
      screenOptions={{
        tabBarIndicatorStyle: {
          backgroundColor: Colors.light.white,
        },
        tabBarInactiveTintColor: Colors.light.inactiveGreen,
        tabBarActiveTintColor: Colors.light.white,
        tabBarLabelStyle: { fontSize: 16, fontWeight: "bold" },
        tabBarStyle: {
          backgroundColor: Colors.light.darkGreen,
        },
      }}
    >

We can also add some options to the "Root" screen to make the header look a bit more WhatsApp-y too.

      <Stack.Screen
        name="Root"
        component={TopTabNavigator}
        options={{
          headerShown: true,
          headerTitle: "WhatsApp",
          headerStyle: {
            backgroundColor: Colors.light.darkGreen,
          },
          headerTitleStyle: {
            fontWeight: "bold",
            color: Colors.light.white,
            fontSize: 20,
          },
          headerTitleAlign: "left",
        }}
      />

Rough Data structure of Whatsapp

This is mostly a frontend exercise but we need some kind of simple data.

I laid mine out like this:

export type Conversation = {
  id: string; // a unique id of conversation
  messages: Message[]; // messages sent
  users: number[]; // ids of users in the conversation
  title: string; e.g. "Nick Cage" or "30th birthday"
};

export type Message = {
  text: string; // message contents
  time: Date; // timestamp of send time
  userID: number; // userID of sender
  id: string; // unique of of message
};

You can see an example of fake data I generated here, I saved it in data/messages

State management

I found it a lot easier to build this with some global state management.

To do this I used react's context to manage:

conversations - (also includes the messages)
sendMessage - this adds messages to the conversation and sorts them
setCurrentConversation - this keeps track of which conversation you pressed on
getCurrentConversation - this tells you which conversation to load

To build this I set up a ConversationsProvider that contains the values above that I need globally

export const ConversationsContext = createContext<ConversationsContextType>({
  conversations: startingConversations,
  sendMessage: () => {},
  getCurrentConversation: () => {
    return { id: "", messages: [], users: [], title: "" };
  },
  setCurrentConversation: (id) => {},
});

export const ConversationsProvider = ({ children }) => {
  const [conversations, setConversations] = useState<ConversationType[]>(
    sortConversations(startingConversations)
  );
  const [currConversation, setCurrConversation] = useState<ConversationType>();

  const getCurrentConversation = () => {
    if (currConversation) return currConversation;
    else return { id: "", messages: [], users: [], title: "" };
  };

  const setCurrentConversation = (id: string) => {
    const currentConvo = conversations.filter((conv) => conv.id === id)[0];
    setCurrConversation(currentConvo);
  };

  function sendMessage(
    newMsg: string,
    thisConversationID: string,
    userID: number,
    setNewMsg: (msg: string) => void,
    isTyping: boolean,
    setIsTyping: (isTyping: boolean) => void
  ) {
    if (isTyping) {
      setNewMsg("");
      setIsTyping(false);
      if (currConversation && currConversation.id === thisConversationID) {
        setCurrConversation((prevConvo: ConversationType) => {
          return {
            ...prevConvo,
            messages: [...prevConvo.messages, formatMessage(newMsg, userID)],
          };
        });
      }
      setConversations((previousConversations: ConversationType[]) => {
        const allConversations = previousConversations.map(
          (conversation: ConversationType) => {
            if (conversation.id === thisConversationID) {
              return {
                ...conversation,
                messages: [
                  ...conversation.messages,
                  formatMessage(newMsg, userID),
                ],
              };
            }
            return conversation;
          }
        );
        return sortConversations(allConversations);
      });
    }
  }
  return (
    <ConversationsContext.Provider
      value={{
        conversations,
        sendMessage,
        getCurrentConversation,
        setCurrentConversation,
      }}
    >
      {children}
    </ConversationsContext.Provider>
  );
};

Sending a message

When a message is sent, its appended on to the end of the messages array within the relevant conversation.

It also clears the state of the message box so it becomes empty again.

sorting conversations

I wrote a function to sort conversations and I run it every time a message is sent

const sortConversations = (conversations: ConversationType[]) => {
  return conversations.sort((a, b) => {
    const lastMessageA = a.messages[a.messages.length - 1];
    const lastMessageB = b.messages[b.messages.length - 1];
    return lastMessageB.time.getTime() - lastMessageA.time.getTime();
  });
};

Accessing the state

To access this global state, I wrap the rest of my app in the ConversationsProvider

export default function App() {
  return (
    <ConversationsProvider>
      <SafeAreaProvider>
        <Navigation />
      </SafeAreaProvider>
    </ConversationsProvider>
  );
}

And then I can access this state with:

const { conversations, sendMessage } = useContext(ConversationsContext);

List of chat conversations

Our chat conversations will work great as a FlatList. But instead of FlatList we're doing to use FlashList from Shopify, which is said to have better performance than FlatList (but I've not verified this).

// screens/Chats/Chats.tsx
import { View } from "react-native";
import { FlashList } from "@shopify/flash-list";

import ConversationPreview from "../../components/ConversationPreview/ConversationPreview";
import { Conversation, RootTabScreenProps } from "../../types";
import conversations from "../../data/messages";
import styles from "./Chats.styles";

interface ConversationItemProps {
  item: Conversation;
}
export default function ChatsScreen({}: RootTabScreenProps<"Chats">) {
  const renderConversationPreview = (props: ConversationItemProps) => {
    const { item } = props;
    return <ConversationPreview key={item.id} conversation={item} />;
  };
  return (
    <View style={styles.mainContainer}>
      <FlashList
        data={conversations}
        renderItem={renderConversationPreview}
        keyExtractor={(item) => item.id}
        estimatedItemSize={40}
      />
    </View>
  );
}

I estimated the size as being 40 items but feel free to adjust this. FlashList perform more effectively by knowing roughly how many items you will have.

I kept the styling fairly light.

// screens/Chats/Chats.styles.ts
import { StyleSheet } from "react-native";
import Colors from "../../constants/Colors";

export default StyleSheet.create({
  mainContainer: {
    backgroundColor: Colors.light.white,
    height: "100%",
    paddingTop: "3%",
  },
});

In our FlashList, we render out a ConversationPreview for each of our conversations. It looks something like this.

ConversationPreview

In ConversationPreview, I'm doing a few fun things.

Text previews

We can create the '...' eliptical effect by fetching the last message from the conversation and then setting the following options in our text component.

numberOfLines={1}
ellipsizeMode="tail"

Profile images

We are setting profile image by the conversation id - they're saved on an images object which we store the assets on.

const images: {
  [key: string]: any;
} = {
  "101": require("./images/101.jpeg"),
  "102": require("./images/102.jpeg"),
  "103": require("./images/103.jpeg"),
  "104": require("./images/104.jpeg"),
  "105": require("./images/105.jpeg"),
};

export default images;

Times & notifications

We use the dayjs library for getting the timestamp of our messages and we're hard coding a notification as default for now.

// components/ConversationPreview/ConversationPreview.tsx
import { Image, Text, View, TouchableOpacity } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { useContext } from "react";
import dayjs from "dayjs";

import { ConversationType } from "../../types";
import styles from "./ConversationPreview.styles";
import { ConversationsContext } from "../../context/conversationContext";
import images from "../../assets/index";

interface ConversationPreviewProps {
  conversation: ConversationType;
}

interface ChatRouteParams {
  conversation: ConversationType;
}

export default function ConversationPreview(props: ConversationPreviewProps) {
  const { conversation } = props;
  const { setCurrentConversation } = useContext(ConversationsContext);
  const navigation = useNavigation();
  const profileImg = images[conversation.id];

  const chatRouteParams: ChatRouteParams = {
    conversation,
  };

  const _onPress = () => {
    setCurrentConversation(conversation.id);
    navigation.navigate("Chat", chatRouteParams);
  };

  return (
    <TouchableOpacity onPress={_onPress} style={styles.messageContainer}>
      <View style={styles.imgAndMsgSubContainer}>
        <Image style={styles.profileImg} source={profileImg} />
        <View>
          <Text style={styles.msgTitle}>{conversation.title}</Text>
          <Text
            numberOfLines={1}
            ellipsizeMode="tail"
            style={styles.msgPreview}
          >
            {conversation.messages[conversation.messages.length - 1].text}
          </Text>
        </View>
      </View>
      <View style={styles.msgDataContainer}>
        <View style={styles.msgDataSubContainer}>
          <Text style={styles.timeText}>
            {dayjs(
              conversation.messages[conversation.messages.length - 1].time
            ).format("HH:mm")}
          </Text>
          <View style={styles.numberOfMsgsContainer}>
            <Text style={styles.numberOfMsgsText}>2</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
}

// components/ConversationPreview/ConversationPreview.styles.ts
import { StyleSheet } from "react-native";
import Colors from "../../constants/Colors";
import { Dimensions } from "react-native";
const windowHeight = Dimensions.get("window").height;
const windowWidth = Dimensions.get("window").width;

export default StyleSheet.create({
  messageContainer: {
    width: windowWidth * 0.97,
    height: windowHeight / 15,
    flexDirection: "row",
    justifyContent: "space-around",
  },
  imgAndMsgSubContainer: {
    flexDirection: "row",
    width: "90%",
    height: "100%",
    alignItems: "center",
  },
  profileImg: {
    width: 50,
    height: 50,
    marginRight: 10,
    marginLeft: 10,
    borderRadius: 50,
  },
  msgTitle: {
    fontWeight: "bold",
    color: Colors.light.offBlack,
  },
  msgPreview: {
    color: Colors.light.offBlack,
    width: "80%",
  },
  msgDataContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  msgDataSubContainer: {
    flexDirection: "column",
    alignItems: "center",
  },
  timeText: {
    color: Colors.light.brightGreen,
  },
  numberOfMsgsContainer: {
    backgroundColor: Colors.light.brightGreen,
    height: 20,
    width: 20,
    borderRadius: 50,
    padding: 0,
    margin: 0,
    alignItems: "center",
    justifyContent: "center",
  },
  numberOfMsgsText: {
    color: Colors.light.white,
    fontWeight: "bold",
    padding: 0,
    margin: 0,
  },
});

Pressing a message

When we press on a message preview, we navigate to the Chat Screen and we set the current conversation.

  const chatRouteParams: ChatRouteParams = {
    conversation,
  };

  const _onPress = () => {
    setCurrentConversation(conversation.id);
    navigation.navigate("Chat", chatRouteParams);
  };

Chat

Our messages are displayed on the Chat.tsx screen

Background image

We set the background image as an image I found online.

<ImageBackground
        style={styles.backgroundImg}
        source={require(whatsappBackgroundImg)}
        resizeMode="cover"
>

We used it with the component from react-native

ChatMessages

The ChatMessages component is where we display all the messages in this conversation.

This component is a FlashList that renders all the messages as MessageBubbles.

      <FlashList
        inverted
        data={[...messages].reverse()}
        renderItem={renderMessageBubble}
        estimatedItemSize={40}
      />

Position of ChatMessages

When someone opens the keyboard, our ChatMessages need to move up above the keyboard (same as our SendButton below).

But also, when the input box expands as message size increases, ChatMessages need to move up too.

I probably overcomplicated this (let me know in the comments), but I solved it like this:

// components/ChatMessages/ChatMessages.tsx
<View
      style={{
        height:
          windowHeight * 0.8 -
          keyBoardOffsetHeight * 0.95 -
          getMessageHeightOffset(heightOfMessageBox, windowHeight),
      }}
    >
      <FlashList
        inverted
        data={[...messages].reverse()}
        renderItem={renderMessageBubble}
        estimatedItemSize={40}
      />
    </View>

and with the getMessageBoxHeightOffset function

// helpers/getMessageBoxHeightOffset.ts
const getMessageHeightOffset = (
  heightOfMessageBox: number,
  windowHeight: number
): number => {
  const maxHeightOfMessageBox = windowHeight * 0.3;
  if (heightOfMessageBox > maxHeightOfMessageBox) {
    return maxHeightOfMessageBox - windowHeight * 0.05;
  }
  if (heightOfMessageBox > 24) {
    return heightOfMessageBox - windowHeight * 0.035;
  }
  return 0;
};

export default getMessageHeightOffset;

MessageBubble

There is quite a bit of styling in this component. And the styling depends on whether it is from a recipient or sender.

We just establish if I sent the message by checking if it matched my user id.

const isMyMessage = message.userID === 1;

Then we adjust the styling based on that

import { View, Text } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import dayjs from "dayjs";

import { MessageDataType } from "../../types";
import styles from "./MessageBubble.styles";

export default function MessageBubble(props: MessageDataType) {
  const { message } = props;
  const isMyMessage = message.userID === 1;
  const isMessageRead = false;
  return (
    <View
      style={{
        ...styles.messageContainer,
        alignSelf: isMyMessage ? "flex-start" : "flex-end",
        backgroundColor: isMyMessage ? "#fcfcfc" : "#dfffc7",
        borderTopLeftRadius: isMyMessage ? 0 : 5,
        borderTopRightRadius: isMyMessage ? 5 : 0,
      }}
    >
      <View
        style={{
          ...styles.leftMessageArrow,
          display: isMyMessage ? "flex" : "none",
        }}
      ></View>
      <Text
        style={{
          ...styles.messageText,
          left: isMyMessage ? 0 : 10,
        }}
      >
        {message.text}
      </Text>
      <View
        style={{
          ...styles.timeAndReadContainer,
          left: isMyMessage ? 0 : 10,
        }}
      >
        <Text style={styles.timeText}>
          {dayjs(message.time).format("HH:mm A")}
        </Text>
        <View>
          {isMessageRead ? (
            <MaterialCommunityIcons name="read" size={16} color="#5bb6c9" />
          ) : (
            <MaterialCommunityIcons name="check" size={16} color="grey" />
          )}
        </View>
        <View
          style={{
            ...styles.rightMsgArrow,
            display: isMyMessage ? "none" : "flex",
          }}
        ></View>
      </View>
    </View>
  );
}

SendButton

The sendButton is a fun one.

position of the sendButton

The Whatsapp sendButton starts at the bottom, but when someone opens the keyboard, it moves upwards.

So we need the style to be absolute and dependent on whether the keyboard is open.

bottom: Math.max(keyBoardOffsetHeight, windowHeight * 0.02),

To get this keyBoardOffsetHeight I wrote a hook

// components/SendButton/SendButton.tsx
const keyBoardOffsetHeight = useKeyboardOffsetHeight();

// helpers/useKeyboardOffsetHeight.tsx
import { useEffect, useState } from "react";
import { Keyboard } from "react-native";

export default function useKeyboardOffsetHeight(): number {
  const [keyBoardOffsetHeight, setKeyboardOffsetHeight] = useState(0);

  useEffect(() => {
    const keyboardWillShowListener = Keyboard.addListener(
      "keyboardWillShow",
      (e) => {
        setKeyboardOffsetHeight(e.endCoordinates.height);
      }
    );
    const keyboardWillHideListener = Keyboard.addListener(
      "keyboardWillHide",
      () => {
        setKeyboardOffsetHeight(0);
      }
    );

    return () => {
      keyboardWillHideListener.remove();
      keyboardWillShowListener.remove();
    };
  }, []);

  return keyBoardOffsetHeight;
}

Typing = icon change animation

When we start typing, WhatsApp changes the voice record icon to the send icon.

Switching the icons is easy - we just keep an isTyping flag. It's initialised in Chat.tsx because its shared across components.

But for it to look smooth, we want an animation between the icons so we can use react-native-reanimated library

<Transitioning.View ref={ref} transition={msgTypeTransition}>
              {isTyping ? (
                <Ionicons name="send" size={16} color={Colors.light.white} />
              ) : (
                <FontAwesome5
                  name="microphone"
                  size={16}
                  color={Colors.light.white}
                />
              )}
            </Transitioning.View>

const msgTypeTransition = (
  <Transition.Together>
    <Transition.Out type="scale" durationMs={100} />
    <Transition.Change interpolation="easeInOut" />
    <Transition.In type="scale" durationMs={100} />
  </Transition.Together>
);

If you enjoyed, this check out parts two and three

I also host a podcast on developer tools.

In-app surveys in React Native

Jack Bridger — Fri, 13 Jan 2023 15:03:37 +0000

App makers rarely get second chances to make a good first impression, so feedback is crucial.

In our time, we’ve gathered feedback in many ways and there are pros and cons for each approach.

TypeForm

Typeforms can be embedded in your app using the react-native-typeform-embed wrapper.

It's quick to get started, they're powerful, look good and are fully customisable.

You can also hand them over to your marketing team.

TypeForm also let you use an onSubmit event which fires after a respondent successfully submits the typeform.

import React from "react";
import TypeformEmbed from "react-native-typeform-embed";

class App extends React.Component {
  render() {
    return (
      <TypeformEmbed
        url="https://demo.typeform.com/to/njdbt5"
        onSubmit={() => alert("Submitted!")}
        onClose={() => alert("Closed!")}
      />
    );
  }
}

Or you could hook up responses with Zapier to do some other action (like send an email or send a Slack message).

We used this to ask our users to complete an account deletion exit survey and then we triggered delete based on this form submitting.

The downside is that the Wrapper hasn't been worked on for two years (at time of writing) and is kind of buggy so you'd probably be best to build/fork your own wrapper.

Do it yourself from scratch

You could make your own surveys fully from scratch.

At the simplest level, you could React Native's components such as TextInput or multiple choice icons and build all the logic out yourself, saving the state and adding a submit button.

If you want multiple choice though, you might still want to use a third party library such as @react-native-picker/picker

This is the most flexible option - you can do anything and it will work really well.

But it may be slower to implement than some of the other options.

And you're probably going to be sending your data to your database so you'll need to figure out how to get the data to your marketing team. Or be consigned to receiving Slack requests for data from the marketing team for the rest of your career.

Do it yourself with libraries

Then you have form libraries such as:

These mean you can move faster but you may lose some flexibility. I think the flexibility trade off is worth it though if you want to make your own forms. I've used Formik in the past and it does a nice job.

Finally, if you want to make a simple poll, you might want to check out React Native Poll. It's a library for making quick polls. But it's not been updated for two years so proceed with caution.

Do it yourself with FormSpark

You could combine one of the DIY options with FormSpark. FormSpark is like a back end for your forms. So you can send your data to FormSpark.

From the FormSpark platform, your marketing/product team will be able to see all the data submitted so you can free yourself from keeping them updated.

import React, { useState } from "react";
import { Alert, Button, Text, TextInput, View } from "react-native";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

function ContactScreen() {
  const [submit, submitting] = useFormspark({
    formId: FORMSPARK_FORM_ID,
  });

  const [message, setMessage] = useState("");

  const onPress = async () => {
    await submit({ message });
    Alert.alert("Form submitted");
  };

  return (
    <View>
      <View>
        <Text>Message</Text>
        <TextInput
          value={message}
          onChangeText={(message) => setMessage(message)}
          multiline={true}
        />
      </View>
      <View>
        <Button title="Send" onPress={onPress} disabled={submitting} />
      </View>
    </View>
  );
}

export default ContactScreen;

And it's easy to integrate with Zapier and Slack so you can setup automated workflows easily.

Use a service like SurveyLoop

Ok shameless plug.

If the above options don't match what you want, we're building SurveyLoop to easily make native surveys in your app - for the best user experience

But with a TypeForm-y experience: templates, drag & drop, analytics.

And you can trigger your surveys based on in-app events such as completing their first action.

And then send your data to Zapier.

It's not out yet but if it sounds interesting, please let us know!

If you like this article, I also host a podcast on developer tools.

A/B split your users with Supabase

Jack Bridger — Thu, 05 Jan 2023 14:00:03 +0000

Want to find out if one onboarding screen is better than another but want to build it yourself?

In this article, Nick Smet & I will show you how you can split your users into A and B variants using only Supabase. This gives you scope to run A/B tests and build features in a more data-driven way.

Notes:

This is not a production-ready - there are several limitations but it was fun to work on and we hope it gives you some ideas to think about.
We are assuming you have some familiarity with Supabase. If not, we suggest checking out the quick starts on Supabase and Edge functions.
We are not covering the analysis part of A/B testing

Step 1 - create a profiles table

The profiles table contains the non-authy side of users. Including their name etc. It’s connected to the auth user by id.

We used the Supabase User Management starter. You can find it within the SQL Editor → Quick Start.

If you run this SQL template, it will automatically create a user in the Profiles table when you create a user in the auth table.

-- Create a table for public profiles
create table profiles (
  id uuid references auth.users on delete cascade not null primary key,
  updated_at timestamp with time zone,
  username text unique,
  full_name text,
  avatar_url text,
  website text,

  constraint username_length check (char_length(username) >= 3)
);
-- Set up Row Level Security (RLS)
-- See https://supabase.com/docs/guides/auth/row-level-security for more details.
alter table profiles
  enable row level security;

create policy "Public profiles are viewable by everyone." on profiles
  for select using (true);

create policy "Users can insert their own profile." on profiles
  for insert with check (auth.uid() = id);

create policy "Users can update own profile." on profiles
  for update using (auth.uid() = id);

-- This trigger automatically creates a profile entry when a new user signs up via Supabase Auth.
-- See https://supabase.com/docs/guides/auth/managing-user-data#using-triggers for more details.
create function public.handle_new_user()
returns trigger as $$
begin
  insert into public.profiles (id, full_name, avatar_url)
  values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url');
  return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

-- Set up Storage!
insert into storage.buckets (id, name)
  values ('avatars', 'avatars');

-- Set up access controls for storage.
-- See https://supabase.com/docs/guides/storage#policy-examples for more details.
create policy "Avatar images are publicly accessible." on storage.objects
  for select using (bucket_id = 'avatars');

create policy "Anyone can upload an avatar." on storage.objects
  for insert with check (bucket_id = 'avatars');

Step 2 - create an experiments table in your Supabase database

We’ll want to run more than one experiment so we’re going to create an experiments table.

For instance we might first want to test a new screen on our onboarding flow. Then we might want to test our upsell page.

create table experiments (
  id uuid not null primary key DEFAULT uuid_generate_v1(),
  updated_at timestamp with time zone,
  inserted_at   timestamp with time zone default timezone('utc'::text, now()) not null,
  exp_number integer,
  title text,
  description text
);

An example experiment could be an onboarding improvement.
We can run this code snippet in Supabase’s SQL editor to insert an experiment.

INSERT INTO experiments(exp_number, title, description)
VALUES (1, 'Onboarding revamp', 'nicer design in the onboarding');

Step 3 - Create a table that links experiments, users and variants

We need a way to link a user with a variant for each experiment i.e. A or B.

Example: For experiment with exp_number == 1 (our onboarding revamp), we want to show user with id == e486cb46-283e-41bb-b65c-95dab7a39ed4 (jack) the variant of B (the new designed screen)

To do this we create a table that links user and experiment:

create table user_experiments (
  id uuid not null primary key DEFAULT uuid_generate_v1(),
  experiment_id uuid references experiments on delete cascade not null,
  user_id uuid references profiles,
  updated_at timestamp with time zone,
  inserted_at   timestamp with time zone default timezone('utc'::text, now()) not null,
  variant experiment_variants not null
);

Notice that experiment_id and user_id are foreign keys.

Variant in our case is always either A or B. We can lock this in with an enum

create type experiment_variants as enum ('A', 'B');

Step 4 - Setup Supabase Edge Functions

Now it’s time to play with Supabase’s Edge Functions. They are serverless functions and run Deno(a node variant).

Here is a basic template for a function

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { createClient, SupabaseClient } from "https://esm.sh/@supabase/supabase-js@2"

serve(async (req) => {
  const supabaseClient = createClient(
    // Supabase API URL - env var exported by default.
    Deno.env.get('SUPABASE_URL') ?? '',
      // Supabase API ANON KEY - env var exported by default.
    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
  );

  // If you want to use Authentication
  // const {
  //   data: { user },
  // } = await supabaseClient.auth.getUser()

  const body = await req.json()

  return new Response(
    JSON.stringify({
      'TODO'
    }),
    { headers: { "Content-Type": "application/json" } },
  )
})

First off we create our client using the environment credentials.

Then we parse our body for later use and have an empty return statement to fill out later with the variant.

Step 5 - Fetch the experiment using the experiment number

async function getExpId(supabaseClient: SupabaseClient, expNumber: number) {
  const { data, error } = await supabaseClient
    .from('experiments')
    .select('id')
    .eq('exp_number', expNumber)
    .limit(1)
    .maybeSingle();

  if (error) throw error
  return  data
}

In the app we will do an API call with exp_number as a param. Why use the exp_number because it is easier to read than a UUID. But feel free to use your experiment ID if you want to.

Step 6 - Get the number of variants assigned to our users to determine which version this user should get

async function getCountsForExperimentNumber(supabaseClient: SupabaseClient, expId: string) {
  const variantA = await supabaseClient
    .from('user_experiments')
    .select('experiment_id,variant', { count: 'exact', head: true})
    .eq('experiment_id', expId)
    .eq('variant', 'A')
  const variantB = await supabaseClient
    .from('user_experiments')
    .select('experiment_id,variant', { count: 'exact', head: true})
    .eq('experiment_id', expId)
    .eq('variant', 'B')

  if (variantA.error || variantB.error) throw variantA.error || variantB.error;

  return {
    A: variantA.count || 0,
    B: variantB.count || 0,
  };
}

In this case, we have two variants for each experiment.

We do a simple count on both versions and return one object to our parent function containing both counts.

Step 7 - Call our variants counter function and store the users version

async function getUserVariant(supabaseClient: SupabaseClient, expId: string, userId: string) {
  let expVariantCounts = await getCountsForExperimentNumber(supabaseClient, expId);
  variant = expVariantCounts.A >= expVariantCounts.B ? 'B' : 'A'
  await storeUserVariant(supabaseClient, expId, userId, variant);
  return variant;
}

async function storeUserVariant(supabaseClient: SupabaseClient, expId: string, userId: string, variant: string) {
  await supabaseClient
    .from('user_experiments')
    .insert({
      experiment_id: expId,
      user_id: userId,
      variant
    })
}

Now we can use our getCountsForExperimentNumber function ****to work out which variant should be allocated to our user.

If version A’s count is greater than or equal to version B’s count → we allocate version B, otherwise we allocate version A.

Then once we have our users requested experiment variant, save it to our database.

Step 8 - Optional

async function getUserVariant(supabaseClient: SupabaseClient, expId: string, userId: string) {
  // OPTIONAL - you can use an extra call to see if the user has already been given a variant. But you could save the variant locally so you don't need to fetch it everytime 
  let variant = await getUserStoredVariant(supabaseClient, expId, userId);

  if (variant) return variant;

  let expVariantCounts = await getCountsForExperimentNumber(supabaseClient, expId);
  variant = expVariantCounts.A >= expVariantCounts.B ? 'B' : 'A'
  await storeUserVariant(supabaseClient, expId, userId, variant);
  return variant;
}

async function getUserStoredVariant(supabaseClient: SupabaseClient, expId: string, userId: string) {
  const { data, error } = await supabaseClient
    .from('user_experiments')
    .select('variant')
    .eq('experiment_id', expId)
    .eq('user_id', userId)
    .limit(1)
    .maybeSingle();

    if (error) throw error
    return  data?.variant
}

It is good practice to check if a user already made this request for an experiment version.

If they did → return the original variant, if not → assign a new one.

Why is this optional?

On the device you could easily store what version the user was given before and not perform the same call again.

Step 9 - Update your main function

serve(async (req) => {
  const supabaseClient = createClient(
    // Supabase API URL - env var exported by default.
    Deno.env.get('SUPABASE_URL') ?? '',
      // Supabase API ANON KEY - env var exported by default.
    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
  );

  // If you want to use Authentication
  // const {
  //   data: { user },
  // } = await supabaseClient.auth.getUser()

  const body = await req.json()
  const experiment = await getExpId(supabaseClient, body.exp_number);
  const variant = await getUserVariant(supabaseClient, experiment.id, body.user_id);

  return new Response(
    JSON.stringify({
      variant
    }),
    { headers: { "Content-Type": "application/json" } },
  )
})

Now tie it all together. You get the existing experiment ID based on the experiment number sent in the API call from the users device.

Then we request a variant for that user and return it in our Response for our user to store on their device.

Step 10 - Deploy

Refer to https://supabase.com/docs/guides/functions/quickstart on how deploy edge functions.

Step 11 - Make the request

Not covered - Success metrics

In this tutorial, we are constrained on time so we are not going to cover analysis in too much detail.

But to analyse how well each experiment variation performs, you would want to trigger success events that know which variant of the app the user has.

If you are doing this in Supabase you might have a table that looks something like this

create table events (
  id uuid not null primary key DEFAULT uuid_generate_v1(),
  user_id uuid references profiles on delete cascade,
  title text,
  inserted_at timestamp with time zone default timezone('utc'::text, now()) not null
);

From here you could decide what constitutes a success, for example a sign_up event or.

Then you could count how many sign_up you get for the A variant and B variant.

Combining this with some calculations that take into account statistical significance (here’s a calculator), you should be able to work out whether A or B performed better (or if there is no significant difference)

If there’s interest, we’ll to add more detail on this in a future post.

Limitations:

This code doesn’t work with authentication out of the box, although there is some boilerplate code in the serve function for you to try out
Not randomly allocating A or B - it’s rotating (maybe a limitation)
Only supports 2 variants

Full code

// Follow this setup guide to integrate the Deno language server with your editor:
// https://deno.land/manual/getting_started/setup_your_environment
// This enables autocomplete, go to definition, etc.
import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { createClient, SupabaseClient } from "https://esm.sh/@supabase/supabase-js@2"

serve(async (req) => {
  const supabaseClient = createClient(
    // Supabase API URL - env var exported by default.
    Deno.env.get('SUPABASE_URL') ?? '',
      // Supabase API ANON KEY - env var exported by default.
    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
  );

  // If you want to use Authentication
  // const {
  //   data: { user },
  // } = await supabaseClient.auth.getUser()

  const body = await req.json()
  const experiment = await getExpId(supabaseClient, body.exp_number);
  const variant = await getUserVariant(supabaseClient, experiment.id, body.user_id);

  return new Response(
    JSON.stringify({
      variant
    }),
    { headers: { "Content-Type": "application/json" } },
  )
})

async function storeUserVariant(supabaseClient: SupabaseClient, expId: string, userId: string, variant: string) {
  await supabaseClient
    .from('user_experiments')
    .insert({
      experiment_id: expId,
      user_id: userId,
      variant
    })
}

async function getExpId(supabaseClient: SupabaseClient, expNumber: number) {
  const { data, error } = await supabaseClient
    .from('experiments')
    .select('id')
    .eq('exp_number', expNumber)
    .limit(1)
    .maybeSingle();

  if (error) throw error
  return  data
}

async function getUserVariant(supabaseClient: SupabaseClient, expId: string, userId: string) {
  // OPTIONAL - you can use an extra call to see if the user has already been given a variant. But you could save the variant locally so you don't need to fetch it everytime 
  let variant = await getUserStoredVariant(supabaseClient, expId, userId);

  if (variant) return variant;

  let expVariantCounts = await getCountsForExperimentNumber(supabaseClient, expId);
  variant = expVariantCounts.A >= expVariantCounts.B ? 'B' : 'A'
  await storeUserVariant(supabaseClient, expId, userId, variant);
  return variant;
}

async function getUserStoredVariant(supabaseClient: SupabaseClient, expId: string, userId: string) {
  const { data, error } = await supabaseClient
    .from('user_experiments')
    .select('variant')
    .eq('experiment_id', expId)
    .eq('user_id', userId)
    .limit(1)
    .maybeSingle();

    if (error) throw error
    return  data?.variant
}

async function getCountsForExperimentNumber(supabaseClient: SupabaseClient, expId: string) {
  const variantA = await supabaseClient
    .from('user_experiments')
    .select('experiment_id,variant', { count: 'exact', head: true})
    .eq('experiment_id', expId)
    .eq('variant', 'A')
  const variantB = await supabaseClient
    .from('user_experiments')
    .select('experiment_id,variant', { count: 'exact', head: true})
    .eq('experiment_id', expId)
    .eq('variant', 'B')

  if (variantA.error || variantB.error) throw variantA.error || variantB.error;

  return {
    A: variantA.count || 0,
    B: variantB.count || 0,
  };
}

This was written by Jack Bridger & Nick Smet

If you like this article, I also host a podcast on developer tools.

ToDo List with GraphQL subscriptions & React

Jack Bridger — Thu, 16 Jan 2020 12:34:30 +0000

I recently made a super simple To Do List that uses GraphQL subscriptions provided by Apollo to update when my "database" (a JavaScript object) is updated.

Our objective is to create a To Do with a title: String and an id: ID. When we create a new To Do on our frontend, we want it to receive a subscription notification and for our frontend to be updated.

I stripped out as much fat as possible so that I could focus on how GraphQL subscriptions can be implemented on the frontend.

You can find the full repo here https://github.com/jackbridger/MinimalGQLSubscriptions and I'll talk through some of the key aspects below.

Let's first take a look at our server file and particularly the parts that relate to subscriptions.

To notify our frontend when our database has been updated, we use PubSub, which is based on an event emitter.

import { GraphQLServer, PubSub } from "graphql-yoga"
const pubsub = new PubSub();

pubsub provides us with two useful functions:

publish
asyncIterator

We access these by passing pubsub into the context of our resolvers.

When we create a To Do we want two things to happen on our server.

Emit an event on the TODOS_CHANGED channel with the created ToDo as the payload.
A subscription operation that is listening for TODOS_CHANGED forward our ToDoChanged payload to all clients that have an open web socket listening for ToDoChanged susbcription

const resolvers = {
    Query: {
        // Return all To Dos
        toDos: (_, __, { db }) => {
            return db.toDos;
        }
    },
    Mutation: {
        createToDo: (_, { title }) => {
            const id = createRandomId();
            const newToDo = { id, title };
            db.toDos.push(newToDo);
            // Notify susbscriptions listening to the TODOS_CHANGED channel 
            // That a to do has changed and sending through that the newToDo as 
            // the ToDoChanged payload
            pubsub.publish(TODOS_CHANGED, { ToDoChanged: newToDo });
            return newToDo;
        }
    },
    Subscription: {
        // Note: "Subscriptions resolvers are not a function, 
        // but an object with subscribe method, that returns AsyncIterable." 
        ToDoChanged: {
            subscribe(_, __, { pubsub }) {
                // Listen for TODOS_CHANGED changed and then forward the provided
                // ToDoChanged payload to clients who have subscribed to ToDoChanged
                return pubsub.asyncIterator(TODOS_CHANGED);
            }
        }
    }
}

Note: "Subscriptions resolvers are not a function, but an object with subscribe method, that returns AsyncIterable."

On our front end let's start in index.js - practically the whole file is relevant and I've annotated what is happening.

Essentially we are creating two path ways - a http pathway for our queries and our mutations and a web socket pathway for our subscriptions. Terminating link directs each operation to the right link.

import { ApolloClient } from 'apollo-client';
import { ApolloProvider } from "@apollo/react-hooks"
import { InMemoryCache } from 'apollo-cache-inmemory';

import { split } from 'apollo-link';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';


// The http link is a terminating link that fetches GraphQL results from a GraphQL 
// endpoint over an http connection
const httpLink = new HttpLink({
    uri: 'http://localhost:4000/'
});

// Allow you to send/receive subscriptions over a web socket
const wsLink = new WebSocketLink({
    uri: 'ws://localhost:4000/',
    options: {
        reconnect: true
    }
});

// Acts as "middleware" for directing our operations over http or via web sockets
const terminatingLink = split(
    ({ query: { definitions } }) =>
        definitions.some(node => {
            const { kind, operation } = node;
            return kind === 'OperationDefinition' && operation === 'subscription';
        }),
    wsLink,
    httpLink
);
// Create a new client to make requests with, use the appropriate link returned 
// by termintating link (either ws or http)
const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: terminatingLink
});

ReactDOM.render(<ApolloProvider client={client}>
    <App />
</ApolloProvider>
    , document.getElementById('root'));

We wrap our app in ApolloProvider and pass in the client that allows us to interact with the GraphQL server.

In App.js, when the page loads we query for all To Dos:

  const {
    subscribeToMore, // subscribe to new to dos
    data, // To do data
    loading, // true or false if the data is currently loading
    error // null or error object if failed to fetch
  } = useQuery(TODO_QUERY)

This not only allows us to display the existing To Dos, it provides us with a function that allows us to subscribe to more To Dos.

We only want to call this when our To Dos component mounts so we wrap it inside a function expression and call it when our ToDoList component mounts.

//App.js

  const subscribeToNewToDos = () =>
    subscribeToMore({
      document: TODO_SUBSCRIPTION, // the gql subscription operation
      // How do we update our ToDos data when subscription data comes through.
      updateQuery: (currentToDos, { subscriptionData }) => {
        if (!subscriptionData.data) return currentToDos;
        const newToDo = subscriptionData.data.ToDoChanged;
        const updatedToDos = currentToDos.toDos.concat(newToDo)
        setToDos(updatedToDos) // Update the state of todos with new to do
        return { toDos: updatedToDos } // return the todos in the format expected
      }
    })

//ToDoList.js
//We pass in subscribeToNewToDos to ToDoList component as a prop and call it when the component is mounted

React.useEffect(() => subscribeToNewToDos(), []);

setToDos updates the state of toDos every time a subscription notification is received.

We return the new state of ToDos - if we don't do that then the most recent To Do will be overwritten every time a new To Do comes in.

I've skipped out much of the implementation in React but you can see it in the repo.

Please let me know in the comments if you have any suggestions on how to do this more effectively or if you would clarify any of the explanations.

If you like this article, I also host a podcast on developer tools.