Sign up
This repository has been archived by the owner. It is now read-only.
mozilla
/
webmaker-core
Public archive
React-based core for Webmaker shared across all platforms
foundation.mozilla.org/en/artifacts/webmaker/
MPL-2.0 License
39 stars
33 forks
Star
Notifications
develop
Go to file
alanmoo
on Aug 2, 2016
README.md
Webmaker
Webmaker enables people to discover, create, and share rich content from their mobile device. It brings a few of the web’s best ingredients to a mobile-first content creation platform. Webmaker goes beyond a soundbite or filtered photo to enable truly creative projects. It is free, open-source, and independent.
Webmaker is currently available in the Android Play store. Projects can be shared and viewed from any web browser on mobile or desktop.
If you'd like to become a Beta tester for the Android app, you can opt in here.
Contribute
This repository contains the core features of Webmaker. We utilize the wiki and issues to track the whole project. The Android code resides at webmaker-android and the desktop viewer at webmaker-browser.
Found a bug? Have an idea? File new issues.
Roadmap
The Webmaker team has identified a few areas of focus to advance the project. These frame our features and bug fixes in terms of the needs of our users and help set priorities as we iterate toward a well rounded product experience.
Take a look at our set of Feature Priorities
Quality Testing
Whenever we release a new version of the app, we always test our release candidates. If you are interested in testing the app, head over to the Quality Testing section of the Wiki. You will find instructions to become a Beta tester. You will also find quality testing scripts that make testing a whole lot easier.
Design
The UI Design Toolkit, which contains the major user interface elements, colours, and patterns used throughout the app can be found on the Webmaker Wiki. The toolkit will give you what you need to start contributing Design to this project.
If you have any questions about Design feel free to speak to @ricardo on IRC or email mailto:ricardo@mozillafoundation.org​ricardo@mozillafoundation.org
webmaker-core development
webmaker-core is the React based core for the Webmaker app. It's a series of webviews that are integrated into the various platforms running Webmaker (currently: Android, Browser).
If you'd like to become a beta tester for the Android app, you can opt in by opening this URL on your device: https://play.google.com/apps/testing/org.mozilla.webmaker
Installation
git clone https://github.com/mozilla/webmaker-core.git npm install
Running the core
For local development, you'll begin by running npm start, which will compile the core, watch for and recompile changed code, and run a local webserver where you can view changes.
Usage with a platform
Although webmaker-core can run stand-alone, you're typically going to run it as a core dependency of a parent application (aka "platform"). Running stand-alone will have very limited functionality as much of the functionality is delegated to the parent platform (eg: changing views, persistence, device APIs).
Create a linkage
In order to do local development, you'll need to npm link this package so that as you make updates they are reflected in the app you're working on. To do this, run npm link in the root of this project. Next, go into the repo for the platform that will consume it (eg: webmaker-android) and run npm link webmaker-core.
Adding New Pages or Components
There are a few standards to bear in mind when adding new pages or components to the project.
Components are added to the src/components directory. Pages are added to src/pages. Each component or page needs its own subdirectory, JSX file, and LESS file. All three should share a common name.
For example:
src/components/link/ ├── link.jsx └── link.less
Be sure to add the LESS file as an import in src/main.less so that it gets compiled!
Component markup should contain a top-level class name that corresponds to its filename (eg: .link for link). Pages should similarly have a top-level ID (eg: #editor for editor).
File names are hyphenated lowercase. For example: section-2.jsx.
Also, if you make a change regarding activities within the native Android wrapper, you will need to update the res/xml/app_tracker.xml file to create a display name for that new activity, in Google Analytics.
Using configuration in js
In order to access config values, simply require config.js (in the src/).
var config = require​(​'../config.js'​)​;​console​.​log​(​config​.​CLIENT_ID​)​;
API Requests
The ./lib/api.js module is the primary way in which you should interact with api.webmaker.org. This module can use the platform's SharedPreferences API to cache API requests thus reducing network requests. If you would like to use the cache, you can send useCache: true to the module:
var api = require('./lib/api.js');api({ uri: '/discover', useCache: true}, function (err, results) { // do stuff w/ cached results if found!});
Loading Images
Any time you are loading images over the network, we recommend that you use the <ImageLoader> react component. This gives you access to important events like loading and error states as well as a hook for providing a loading animation. Full documentation can be found here: https://github.com/hzdg/react-imageloader
Localization
In this project we're using React-Intl to localize our application and YAML for translation.
Localize a component or page
To localize a component or page you have to include IntlMixin in your class mixins, for example:
var React = require('react');var Example = React.createClass({ mixins: [​require​(​'react-intl'​)​.​IntlMixin​]​, render: function() { return ( <div> <​h1​>​{​this​.​getIntlMessage​(​'key_name_here'​)​} </div> ); }});
If the strings include HTML, use the FormattedHTMLMessage element:
import { FormattedHTMLMessage, IntlMixin } from 'react-intl'​;​<​FormattedHTMLMessage message={ this​.​getIntlMessage​(​"key_name_here"​) }/>
Once you add the mixin it will expose the getIntlMessage method to your component to get the localized message for the given key.
Adding locale
Because we are using YAML for our translation and React-Intl expects JSON, we need an extra build step to convert YAML to JSON. We are using yaml-intl-xml-json-converter to convert from YAML to JSON.
config for for YAML to JSON conversion
intl-config.json
{ "supportedLocales": ["en-US", "de", "fr", "pt-BR", "es"], "dest": "locales", "src": "locales", "type": "json" }
YAML template
en-US.yaml
--- en-US: first: This is your first message second: This is your second message
You have to make sure you match your language code in your YAML file and the name of the file with what you include in your config file for the converting part otherwise it will fail.
I18N Methods
i18n.js file exposes different methods to help with localization. These are the list of available methods when you required the module.
{ intlData: {messages: {}, locales: {}}, defaultLang: 'en-US', currentLanguage: locale, isSupportedLanguage: function(lang), intlDataFor: function(lang)}
  1. intlData This object consist of two properties. locales and messages. We use this object to pass it to React-Router in order for getIntlMessage to work properly.
  2. defaultLang This will return default language of the application.
  3. currentLanguage This will return current language of the client that visiting our site.
  4. isSupportedLanguage This method expect a valid language code, and it's used to validate if we support that given language or not. The return value is boolean.
  5. intlDataFor This method expect a valid language code, and it will return intlData for the given language.
Post localization
To fully localized the app we need to make sure we update the resource file on Transifex. This step requires that you have the required credential to upload the resource file on the Transifex's Webmaker project.
If you do not have the credential please speak @alicoding on IRC or any of the coordinator of the project for Webmaker on Transifex.
NOTE: There should be a weekly cycle where we upload the file on Transifex to avoid any problem that could occur.
Releases
8 tags
Packages
No packages published
Used by 6
@mozilla / webmaker-android
@mozilla / webmaker-browser
Contributors 14
+ 3 contributors
Languages
JavaScript90.4%
CSS9.5%
HTML0.1%
© 2021 GitHub, Inc.
Terms
Privacy
Security
Status
Docs
Contact GitHubPricingAPITrainingBlogAbout
CodeCodeIssuesIssues372Pull requestsPull requestsActionsActionsProjectsProjectsWikiWikiSecuritySecurityInsightsInsights Code Issues Pull requests Actions Projects Wiki Security Insights