This application should serve as a good base for creating mobile apps to deploy on Heroku.
A set of players opens the app on their phones and registers to play. The app maintains this list of users plus a set of quiz questions. During the game, questions are presented to each user running the app, and points are awarded for correct answers to questions. As players earn points a realtime leaderboard is displayed to each player.
Notification of new questions and answer results are broadcast via Websocket to the mobile app using the SocketIO library.
The app has two major pieces: An AngularJS based client app which comprises the front-end which runs on the phone, and a Node.js backend which provides an API to the client app for user registration, data storage, and event broadcast.
/---mobile app-----\ | Ionic framework | | Angular JS | \------------------/ | | http / websocket | /-------Node.js app-\ | | | express | | bookshelf | | node-pg | \-------------------/ | [Postgres DB]
The app can be deployed to Heroku, and distributed to the mobile device either through the mobile web browser, or by compiling the AngularJS application into a native app using an Apache Cordova container.
Clone this repo to your local machine and install the requirements:
Now create a database on your local server called
Now create the database schema and initial data:
And now run the server app:
and open the client app:
From the home screen click "Register". Enter your name and email and click
Register. The first user
is automatically marked as the administrator. Click the Open Admin Page link on the quiz page.
On the admin page, use the following controls
Next Question - queue up the next quiz question
Restart Quiz - erase all current scores and start over
As you click
Next Question a new question will appear automatically for anyone running
the app. Additional users can register for the app and play at the same time. Users accumulate
points by answering questions correctly, with a bonus awarded to the person who answers
When you are ready to share the app, just create a new Heroku app, provision a Postgres database addon for your app, and then deploy the code. After you deploy you should bootstrap the database:
$ heroku run ./bootstrap.sh
The components of the application are organized as follows:component folder client app client ..app code client/js ..html templates client/templates ..ionic/angular frameworks client/lib express app server.js, server/* ..db migrations server/migrations ..question list server/load_question.js admin app admin
As an option, the app can be configured so that each person who registers to play is recorded as a Lead record in Salesforce. This template shows how to access the Force.com API to exchange data with a Salesforce account. See FORCE_README for full instructions.
node-debug to use the Chrome debugger with Node.js:
$ npm install node-debug
And to use, just run with
node-debugger. After the Chrome debugger opens, make sure to click
so the server starts:
$ node-debug server.js
To bundle your client app as a native mobile app, you can use the Cordova tool. Note that to build a native app you will need the corresponding native build tools. So for iOS apps you will need Xcode installed, and for Android apps you will need to have the Android SDK installed.
$ sudo npm install -g cordova
Install an application simulator:
$ sudo npm install -g ios-sim
Initialize the wrapper:
$ mkdir wrapper $ cd wrapper $ cordova create . QuizLive $ rm -rf www $ ln -s ../client www
Now add one or more platform targets:
$ cordova platform add ios $ cordova platform add android
Now build the native app:
$ cordova compile ios
And run in the emulator:
$ cordova run --emulator
The Ajax calls used in the Angular client are written using simple relative paths. This means that they automatically use the
host value inferred from the domain which served the client JS files. This all works properly when the client app is served from a web server.
However, when you package the client files into the Cordova wrapper, then they are provided to the mobile device from the local filesystem, rather than being served from the web. As a result there is no
domain to tell the Ajax calls where to go. To correct this, you need to specify your web domain explicitly in all client Ajax calls, such as the login call:
Scott Persinger firstname.lastname@example.org
See LICENSE. This code is available under the MIT license.