Skip to content
A simple mobile app built for Phonegap / Cordova using ably-js realtime library
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 8b47140 Mar 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
hooks initial commit with "cordova create" template Jul 22, 2015
plugins Add files updated by cordova add Mar 12, 2018
www Update Ably SDK source code Mar 12, 2018
.gitignore Restructure of app, final implementation of design & clean up Nov 12, 2015
Gruntfile.js
LICENSE Add the license Nov 12, 2015
Procfile Add support for Heroku server that generates a token Jan 24, 2017
README.md Add note about Heroku config vars Mar 12, 2018
app.json Add Heroku button app.json Jan 24, 2017
config.xml Add files updated by cordova add Mar 12, 2018
package-lock.json Regenerate lock file Mar 12, 2018
package.json Update node version Mar 12, 2018
server.js Add support for Heroku server that generates a token Jan 24, 2017

README.md

Ably Phonegap / Cordova / Browser demo

Ably is a hugely scalable, superfast and secure hosted real-time messaging service for web-enabled devices. Find out more about Ably.

This Phonegap / Cordova demo uses the Ably real-time message service and provides a simple example of how to use the following features:

Want to try this demo now? Deploy to Heroku for free:

Deploy

If you are deploying to Heroku, then your app by default will not have history enabled which means all chat data is lost after 2 minutes. See enabling history below.

Remember to set your api key on Heroku via the CLI (heroku config:set ABLY_API_KEY=<YOUR_KEY>) or the dashboard

View demo on a mobile device

  • Run npm install. This will install the dependencies and the Cordova Command-Line Interface.
  • Install cordova-plugin-whitelist by running ./node_modules/.bin/cordova plugin add cordova-plugin-whitelist in the root folder of the project.
  • Add the needed platforms (e.g. Android, iOS): ./node_modules/.bin/cordova platforms add android. The cordova CLI tool should install the whitelist plugin for the specific platform.
  • Run the application on your mobile device: ./node_modules/.bin/cordova platforms run android
  • Use the app.

Debugging on a mobile device

You can use the remote debugging feature of Chrome, or Safari.

View demo in your desktop / mobile browser

Deploy to Heroku for free:

Deploy

If you are deploying to Heroku, then your app by default will not have history enabled which means all chat data is lost after 2 minutes. See enabling history below.

OR access our demo app running on Heroku at:

bit.do/ably-demo

This static site demo is hosted on Heroku, there is no server-side code to run this demo. If you want to run this app with a local static website server, you can use Grunt grunt server. Make sure you have run npm install beforehand.

View demo locally in your browser

Use the same steps as running on a mobile device, but use browser as a platform:

  • Make sure you have Cordova CLI installed.
  • Add cordova-plugin-whitelist.
  • Use cordova platforms add browser to add a browser platform.
  • Run in the browser: cordova run browser.

Local development

In order to make changes to the app, you will need grunt to compile the SCSS files into CSS. A grunt task has been set up to spin up a local server and watch for any changes you make, and then build the CSS files automatically. You can run the grunt task as follows:

  • npm install
  • grunt watch:server

Enabling history

If your app is running on Heroku, or you have run the Express server with an ABLY_API_KEY environment variable, then it is likely that history is not yet enabled for your application. As such, all message and presence history will be discarded by Ably after 2 minutes.

The app publishes, subscribes and registers presence on a channel named mobile:chat. To enable history on this channel, please see our support article how do I enable history.

Configurable options via query string params

The following query string params can be appended to the app URL to change the default configuration of the demo:

  • autoLogin: do not prompt the user for a username and log the user in automatically
  • logLevel: configure the Ably Realtime log level: 0 is lowest, 5 is most verbose
  • key: use this API key instead of the default end point for generating a token
  • environment: defaults to production, but can be configured as sandbox for example
You can’t perform that action at this time.