An attendance app built with React Native, Pusher, and BLE
Switch branches/tags
Nothing to show
Clone or download

README.md

Attendance app with React Native and BLE

An attendance app built with React Native, Pusher, and BLE. You can view the tutorial at the Pusher tutorial hub: Creating a realtime attendance app with React Native, BLE and Pusher

Note: the React Native code in this repo may be a little bit outdated and won't run immediately after you've followed the setup instructions. Be sure to refactor the code to use the more recent React Native syntax if it doesn't run for you.

Prerequisites

  • BLE peripheral device - I used a Raspberry Pi 3 in this tutorial, but you can also use any micro-controller with BLE support.
  • BLE central device - any smartphone with bluetooth capabilities can act as a central device.
  • Knowledge of React Native
  • Knowledge of Git and GitHub
  • Pusher Account and a Pusher app

Getting Started

  1. Create a new React Native app:
react-native init BLEPusherAttendance
  1. Clone the repo:
git clone https://github.com/anchetaWern/BLE-Pusher-Attendance.git
  1. Navigate inside the app directory and copy the package.json file to the new React Native project you just created.

  2. Still inside the app directory, copy the contents of index.android.js and paste it on the index.js file of your React Native project.

  3. Navigate inside your project folder and install the dependencies:

cd BLEPusherAttendance
npm install
  1. Navigate inside the repo you cloned earlier and go inside the server directory:
cd BLE-Pusher-Attendance
cd server
  1. Create a new .env file and replace the placeholder values with your Pusher app credentials:
APP_ID="YOUR PUSHER APP ID"
APP_KEY="YOUR PUSHER APP KEY"
APP_SECRET="YOUR PUSHER APP SECRET"
APP_CLUSTER="YOUR PUSHER APP CLUSTER" 
  1. Still inside the server directory, open a new terminal window and execute node attendance.js to launch the server.

  2. Navigate inside your new React Native project and open the index.js file on your text editor:

cd BLEPusherAttendance
nano index.js
  1. Replace the placeholder values on lines 110 and 111 with your Pusher app credentials: https://github.com/anchetaWern/BLE-Pusher-Attendance/blob/master/app/index.android.js#L110-L111

  2. Run the app on your device (emulator wouldn't work because there's no bluetooth in there):

react-native run-android

Built With