The CBHS Assistant app cbhs-chorogi
addresses inconveniences faced by students at CBHS. It Simplifies QR code based entry system and provides quick access to the meal. Developed using React Native
and Expo
. Distributed it to the Google Play Store, and put up posters in CBHS for advertising. Statistics showed that almost all Android users (around 90-100) in CBHS installed cbhs-chorogi
. Also, when I ask people they say that CBHS makes check-in much faster and simplified to see what's on the menu for the day.
CBHS
is 'Chung Buk Hak-Sa', which means local dormitory for people from Chungchungbuk-do, Korea.
CBHS has a QR check-in system for student access. To obtain a QR code, students must log in to the CBHS server, which is currently only possible through a web page. Therefore, the existing procedure for student access was as follows:
- Students access the login page by bookmarking it in their browser or searching for the link in front of the kiosk.
- Since the page does not have an option to save the ID, students manually enter their ID and password to log in.
- After logging in, they receive the QR code and proceed with entering or exiting the dorm.
This method has the following problems:
- The process of obtaining the QR code, including opening the browser, accessing the link, and entering the ID and password, is inconvenient.
- Forgetting passwords is common, leading to frequent inquiries to the office.
- Many students experience difficulty in scanning the QR code during morning entry times, resulting in long waiting lines (especially when time for going school)
Students always keep checking the dorm's meal menu (I do too XD), as it is available only through a web page. Moreover, the menu does not prioritize displaying today's menu, requiring students to search for and verify the menu up to the current date.
To address the aforementioned issues, we developed the CBHS Assistant app
cbhs-chorogi
(충북학사 초록이
).
cbhs-chorogi
provides the following features:
- App-based instead of web-based for quick server access
- Automatic server connection, login, and QR code issuance upon app launch
- Instant access to today's meal menu, categorized into 'Past Meals' and 'Upcoming Meals'
React Native
for cross-platform mobile app development and the Expo
framework for expedited development.
git clone https://github.com/your/your-project.git
cd your-project/
npm install
npm start
// at /src/domain/QR/QR.js
useEffect(() => {
const subscription = AppState.addEventListener('change', (nextAppState) => {
if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
loadQR()
} else if (appState.current.match(/active/) && nextAppState.match(/inactive|background/)) {
setIsLoading(true)
}
appState.current = nextAppState
})
Utilized the useEffect
hook in React to automatically issue the QR code upon app launch or when returning from the background.
This functionality was triggered only if the 'automatic login' button was enabled.
We developed an app, distributed it to the Play Store, and put up posters in the elevators and on each floor of the CBHS. Based on this, we achieved the following results:
- Statistics showed that there were about 100 users, and considering the percentage of Android users in their 20s in Korea, which is 35% (the usage rate according to Korea Gallup) out of 320 total users in CBHS, it was 96, which means that almost everyone was interested in the app and installed it.
- In fact, I saw a lot of people using QR check-in. When I ask people, they say that CBHS makes check-in much faster!
- I love how easy it is to see what's on the menu for the day. (very important)
I quit CBHS, so this repository no more maintained. But, I've had a few people ask if they can use this code to build new apps. Please do! You're always welcome.