Sign up
This repository has been archived by the owner. It is now read-only.
Public archive
Webmaker for Android
MPL-2.0 License
152 stars
108 forks
Go to file
on May 20, 2016
Webmaker for Android
Please file all issues related to Webmaker Android at​. You can use the android tag if your issue applies specifically to this repo or the Android platform.
Mozilla Webmaker's mission is to help enable a new generation of digital creators and webmakers, giving people the tools and skills they need to move from using the Web to actively making the Web. To this end, the Webmaker App is an entry point to the Webmaker community that provides a radically simple interface for creating mobile applications directly on device.
Getting Started
Before you jump into the code you'll want to download, install, and configure the following:
Clone & Install Dependencies
git clone cd webmaker-android npm install
Specifying a dev environment
In order to override default webmaker-core settings such as id and api endpoints, create an .env file in the webmaker-android root directory, and declare any environment overrides you need in that file, then (re)build the webmaker-android project using npm run build.
For example, to run webmaker-android with a different API endpoint, you would make sure the .env file contains:
For more details on which environment variables are used by webmaker-core, please see the webmaker-core default environment.
This repository is home to the native Android wrapper for the Webmaker app. webmaker-android is a hybrid mobile application that is primarily web-based (HTML/CSS/JS) but uses this wrapper to communicate with the native Android SDK. To make changes or to test the app, we recommend you use Android Studio.
Once you have the project open, you can run it within an emulator or on any Android device with USB debugging enabled by selecting "Run 'app'" from the "Run" dropdown menu. For more information, please check out the Android SDK documentation.
If you can't compile the project, check the messages at the bottom of the Android Studio IDE. If this is the first time you've run an Android project, you may need to install an Android target OS. If so, there should be a link in the messages that will walk you through that. Afterwards, you'll probably need to install a virtual device for emulation. If you're using an x86 based development machine and virtual device, you'll probably have to install Intel HAXM as well.
Because much of the application logic takes place in WebViews, you'll likely want to set up Remote debugging on Android with Chrome.
Each fragment within webmaker-android is actually just a web page! You can find all of the js, css, and static assets in the webmaker-core module. Static files in ./node_modules/webmaker-core/src/dest/ will be copied up to this Android wrapper as part of npm run build.
For local development, it's recommended to use npm link (read more) with a local copy of webmaker-core, in which you'll do any webview related work separately.
Gradle will automatically run npm run copy:core before building in Android Studio. This makes it convenient to watch your local copy of webmaker-core while you are testing on device or with an emulator.
Contact Us
IRC: #webmaker on
Changing configuration
You can see all the default configuration in config/defaults.env (within webmaker-core). In order to change something, create a file called .env in your root directory and format configuration as follows:
Turning on production configuration
You will need a production CLIENT_ID for the OAuth server to run the app in production mode. Ask @cade or @k88hudson on irc.
If you are deploying/creating a build that should use production configuration, add the following to your .env before running npm run build.
Network Assets
Webmaker for Android attempts to use network resources as sparingly as possible. In addition, it is important to cover failure and loading states gracefully at all times. To this end, we have a few React components and libraries included in the project to help make this easier:
Interacting with Android APIs
While very few native Android APIs are used throughout the app, there are a few instances where native APIs are exposed to JS and react using the class:
The application uses an Android class called Router to move between activities. Similar to how you can pass parameters in a URL router like Express, the Android Router class can provide route parameters via the router.js mixin. When using the mixin, route parameters will be bound to route within the react class's state.
var router = require('./lib/router.js');var MyThing = React.createClass({ mixins: [router], // ... componentWillMount: function () { console​.​log​(​this​.​state​.​route​)​; }});
SharedPreferences is a simple key/value store API native to Android that can be used to persist values to disk that are only available to the Webmaker application. You can both set and get values to SharedPreferences using Java <-> JS bindings that are provided within
if (window.Android) { window​.​Android​.​setSharedPreferences​(​'my::cache::key'​, 'foobar'); var hit = window​.​Android​.​getSharedPreferences​(​'my::cache::key'​)​; console.log(hit); // prints "foobar"}
SharedPreferences is automatically namespaced to the current activity. You can override this behavior by passing true to the optional "global" parameter:
window​.​Android​.​getSharedPreferences​(​'state'​, true);
LRU Cache
MemStorage is a single LRUCache instance that is provided as a singleton. This can be used to persist values to memory that are not needed in-between app sessions. You can both set and get values to MemStorage using Java <-> JS bindings that are provided within
if (window.Android) { window​.​Android​.​setMemStorage​(​'my::cache::key'​, 'foobar', false); var hit = window​.​Android​.​getMemStorage​(​'my::cache::key'​, false); console.log(hit); // prints "foobar"}
MemStorage is automatically namespaced to the current activity. You can override this behavior by passing true to the optional "global" parameter:
window​.​Android​.​getMemStorage​(​'state'​, true);
Google Analytics Event Firing
This function allows you to send event data to Google Analytics by calling the trackEvent() method. Optionally you can specify a numeric value (int) to pass along in your event, however this isn't required. Please see the below code for example implementation.
You can read more about the parameters and what they do here:
if (window.Android) { window​.​Android​.​trackEvent​(​'category'​, 'action', 'label'); window​.​Android​.​trackEvent​(​'category'​, 'action', 'label', 'value'); // optional value}
Releases 39
on Feb 10, 2015
+ 38 releases
No packages published
Contributors 43
+ 32 contributors
© 2021 GitHub, Inc.
Contact GitHubPricingAPITrainingBlogAbout
CodeCodeIssuesIssues2Pull requestsPull requests3ActionsActionsProjectsProjectsSecuritySecurityInsightsInsights Code Issues Pull requests Actions Projects Security Insights