164 lines
6.8 KiB
Markdown
164 lines
6.8 KiB
Markdown
# EventBuzz Checkins (mobile)
|
||
|
||
Bare React Native app for staff to check in event participants via search or badge QR scan. Uses the EventBuzz Dashboard API (`/api/auth/login`, `/api/checkins/events`, attendance endpoints).
|
||
|
||
## Important: Metro (port 8081) is not the app UI
|
||
|
||
Opening **http://localhost:8081** in a browser shows React Native’s default Metro landing page (“Welcome to React Native”). That is only the JavaScript bundler status page.
|
||
|
||
To use **EventBuzz Checkins**, run the app on a **simulator or physical device**:
|
||
|
||
```sh
|
||
source ~/.bashrc
|
||
cd eventbuzz-checkins
|
||
|
||
# Terminal 1 — keep running
|
||
npm start
|
||
|
||
# Terminal 2 — Android emulator or USB device
|
||
npm run android
|
||
|
||
# OR iOS Simulator (after pod install in ios/)
|
||
npm run ios
|
||
```
|
||
|
||
You should see the **email login** screen, not the Metro welcome page.
|
||
|
||
If the simulator still shows the old welcome screen, press **`r`** in the Metro terminal to reload, or run `npm run android` again from `eventbuzz-checkins`.
|
||
|
||
## Android build note (AsyncStorage 3.x)
|
||
|
||
If Gradle reports `Could not find org.asyncstorage.shared_storage:storage-android:1.0.0`, the project’s `android/build.gradle` already adds the package’s `local_repo` Maven path. After `npm install`, run `npm run android` again.
|
||
|
||
## Offline mode
|
||
|
||
1. While online, open **Events** and tap the cloud icon (or long-press an event) → **Enable Offline**.
|
||
2. The app downloads active attendance sessions + participant rosters into local SQLite.
|
||
3. While Offline is on, search and QR check-ins always save locally (even with internet). They queue in an outbox.
|
||
4. Every minute while online (app in the foreground), pending check-ins are **uploaded**. Reconnect and returning to the app also upload.
|
||
5. Header **Sync** is two-way at that page’s scope:
|
||
- **Events** — all Offline-enabled events (upload pending + refresh all sheets)
|
||
- **Attendance sessions** — this event (upload pending + refresh all sheets)
|
||
- **Participants** — this attendance sheet only (upload pending + refresh this roster)
|
||
6. **Refresh Offline Data** (long-press an event) is a recovery pull of the snapshot without clearing pending outbox rows.
|
||
7. **Assign a Blank** (when enabled on the attendance session in the dashboard) scans a spare badge QR, lets staff edit name/email/phone, then saves — updating that participant and checking them in. It uses the same offline outbox as check-ins.
|
||
8. **Undo** on the check-in success sheet reverses the last check-in. For a later mistake, swipe a checked-in row left to reveal **Uncheck-in**. Staff-only; last check-in only; same offline queue. Does not revert Assign a Blank profile.
|
||
|
||
Native rebuild is required after installing `@op-engineering/op-sqlite` / NetInfo (`npm run android` / `npm run ios`).
|
||
|
||
## Configuration
|
||
|
||
Copy `.env.example` to `.env` and set `API_BASE_URL`:
|
||
|
||
- **Android Emulator:** `http://10.0.2.2:3001/api` — `localhost` in `.env` causes **Network request failed**
|
||
- **iOS Simulator:** `http://localhost:3001/api`
|
||
- **Physical device:** your Mac’s LAN IP, e.g. `http://192.168.1.10:3001/api`, and set `HOST=0.0.0.0` in `backend/.env`
|
||
|
||
Start the API: `cd backend && npm run dev` (port **3001**).
|
||
|
||
After changing `.env`, rebuild the app: `npm run android` (react-native-config embeds `.env` at build time).
|
||
|
||
## QR format
|
||
|
||
Badge QRs encode `eventbuzz:participant:{participantId}` (same as dashboard badge PDFs).
|
||
|
||
---
|
||
|
||
This is a [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
|
||
|
||
# Getting Started
|
||
|
||
> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
|
||
|
||
## Step 1: Start Metro
|
||
|
||
First, you will need to run **Metro**, the JavaScript build tool for React Native.
|
||
|
||
To start the Metro dev server, run the following command from the root of your React Native project:
|
||
|
||
```sh
|
||
# Using npm
|
||
npm start
|
||
|
||
# OR using Yarn
|
||
yarn start
|
||
```
|
||
|
||
## Step 2: Build and run your app
|
||
|
||
With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
|
||
|
||
### Android
|
||
|
||
```sh
|
||
# Using npm
|
||
npm run android
|
||
|
||
# OR using Yarn
|
||
yarn android
|
||
```
|
||
|
||
### iOS
|
||
|
||
For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
|
||
|
||
The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
|
||
|
||
```sh
|
||
bundle install
|
||
```
|
||
|
||
Then, and every time you update your native dependencies, run:
|
||
|
||
```sh
|
||
bundle exec pod install
|
||
```
|
||
|
||
For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
|
||
|
||
```sh
|
||
# Using npm
|
||
npm run ios
|
||
|
||
# OR using Yarn
|
||
yarn ios
|
||
```
|
||
|
||
If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
|
||
|
||
This is one way to run your app — you can also build it directly from Android Studio or Xcode.
|
||
|
||
## Step 3: Modify your app
|
||
|
||
Now that you have successfully run the app, let's make changes!
|
||
|
||
Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
|
||
|
||
When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
|
||
|
||
- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
|
||
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
|
||
|
||
## Congratulations! :tada:
|
||
|
||
You've successfully run and modified your React Native App. :partying_face:
|
||
|
||
### Now what?
|
||
|
||
- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
|
||
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
|
||
|
||
# Troubleshooting
|
||
|
||
If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
|
||
|
||
# Learn More
|
||
|
||
To learn more about React Native, take a look at the following resources:
|
||
|
||
- [React Native Website](https://reactnative.dev) - learn more about React Native.
|
||
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
|
||
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
|
||
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
|
||
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
|