VOU Marketing with Realtime Games

📋 Table of Contents

1. Run on Android Virtual Device (AVD)
   1. Config .env file
   2. Installation
      1. Prerequisites
      2. Run the Project
      3. Run on Android Virtual Device (AVD)
2. Run on Mobile Device (real device)
   1. Using ngrok to Expose server localhost:8080
      1. Install ngrok
      2. Connect Your ngrok Account
      3. Start ngrok
      4. Get the Public URL
   2. Config .env file
   3. Installation
      1. Prerequisites
      2. Run the Project
      3. Run on Mobile Device
3. Project Showcase

🧑‍💻 Run on Android Virtual Device (AVD)

⚙️ Config .env file

To ensure that the API and WebSocket connections work properly, you need to set up the IP address in the .env file in root dir with path ./.env. Follow these steps:

1. Open Command Prompt and run the following command to get your IPv4 address:

ipconfig

2. Locate the IPv4 address of the network you are connected to (e.g., 192.168.1.x).

3. In the root directory of the project, create or open the .env file with the path ./.env.

4. Add this IPv4 address to the API_URL and WEBSOCKET_URL environment variables as follows:

API_URL=http://<your-IPv4-address>:8080/v1
WEBSOCKET_URL=ws://<your-IPv4-address>:8080/v1/notify

📦 Installation

1. Prerequisites

Ensure yarn is installed globally on your system. If not, install it using:

npm install -g yarn

Intall packages & dependencies

yarn install

2. Run the Project

yarn start --reset-cache

3. Run on Android Virtual Device (AVD)

To launch the app on an Android emulator (recommended with Android Studio), press:

a

📱 Run on Mobile Device (real device)

🌐 Using ngrok to Expose server localhost:8080

To make your local server accessible over the internet, you can use ngrok. Follow these steps to expose localhost:8080:

1. Install ngrok

If you haven’t installed ngrok yet, download it from the official website. Follow the installation instructions specific to your operating system.

2. Connect Your ngrok Account (Optional but Recommended)

Connecting your ngrok account allows you to access additional features like custom subdomains and extended session durations. Follow these steps:

• Go to the ngrok dashboard and sign up or log in.

• In your dashboard, copy your auth token from the Your Authtoken section.

• Run the following command in your terminal (ngrok.exe) to add the token to your ngrok configuration:

ngrok config add-authtoken <your-auth-token>

Replace <your-auth-token> with the token you copied from the ngrok dashboard.

3. Start ngrok

Once installed, open a terminal (ngrok.exe) and start ngrok with the following command:

ngrok http http://localhost:8080

4. Get the Public URL

After running the command, ngrok will display output similar to this:

Forwarding                    https://abcd1234.ngrok-free.app -> http://localhost:8080

Copy the generated URL (e.g., https://abcd1234.ngrok-free.app). This URL is now publicly accessible and will forward requests to your local server on port 8080.

⚙️ Config .env file

If your project uses environment variables, you can set API_URL and WEBSOCKET_URL in your .env file to use the ngrok URL:

API_URL=https://abcd1234.ngrok-free.app/v1
WEBSOCKET_URL=ws://abcd1234.ngrok-free.app/v1/notify

NOTE: Each time you restart ngrok, a new URL will be generated, so you'll need to update the URLs in your .env file accordingly.

📦 Installation

1. Prerequisites

Ensure yarn is installed globally on your system. If not, install it using:

npm install -g yarn

Intall packages & dependencies

yarn install

2. Run the Project

npx expo start --tunnel

NOTE: If you get the error $${\color{red}CommandError:\space ngrok\space tunnel\space took\space too\space long\space to\space connect}$$. Try running this command again until it succeeds

3. Run on Mobile Device

• Open Expo Go and scan the displayed QR code.

  If scanning doesn't work, enter the displayed URL manually in the Expo Go app.

⚡️ Project Showcase