Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Creating a custom
Moodle Mobile app
Juan Leyva
Moodle Mobile Lead Developer
Daniel Palou
Moodle Mobile Developer (CV&A)
@j...
● Code editor (Sublime, WebStorm, Eclipse, Netbeans...)
● Github account (http://github.com/)
● Github desktop app (http:/...
Moodle Mobile is the official mobile
app for Moodle
https://download.moodle.org/mobile/
Moodle Mobile
● Custom corporate image (name, app icon,
theme, store entry)
● Add additional features or static pages
● Remove or change...
https://github.com/moodlehq/moodlemobile
Fork the app
You can use your favourite GIT client (or GitHub
Desktop clients)
git clone git@github.com:jleyva/moodlemobile.git
Clone t...
Create a new branch
about.json: Your app information
config.json: App settings
config.xml: Cordova/Phonegap settings
README.md: App info (gith...
We need to change:
● id: com.moodle.moodlemobile ->
net.moodlemoot.mootes14
● versionCode, version, and
CFBundleShortVersi...
We need to change:
● app_id: Use the same that in config.xml
● versioncode, versionname: Same that config.xml
● default_la...
● Overwrite the images in img/icon/ with other ones
with the same properties (alpha, width and height)
● Same for the img/...
That’s all folks!
● Commit your changes!
● Create an account in:
https://build.phonegap.com/
https://build.phonegap.com/apps/1211443/builds
...
● For iOs you need to create certificates/provisioning
files: http://docs.build.phonegap.com/en_US/
● Android, you can dow...
● https://docs.moodle.org/dev/Moodle_Mobile_Themes
Create a custom theme
● The theme:
https://github.com/jleyva/moodlemobile/blob/mootes1
4/plugins/mootes14/theme.css
Create a custom theme
Two options for adding the theme in the app:
1. Via Moodle settings:
2. Creating a plugin for the app. Recommended for
cus...
● Remove plugins
You can easily disable some of the existing plugins,
edit the config.json and remove plugins from the
“pl...
● Edit the lang/xx.json file for replacing the
language strings used in the app.
Change the app strings
● Create a new plugin
● Inject the theme once the plugin is loaded
● This plugin can be used for replacing core
functional...
● In the plugin created for the theme, you can add
custom html templates to replace existing core
templates.
Plugin code:
...
● Static pages:
Add new options in the app
● Sync your fork:
https://help.github.com/articles/syncing-a-fork/
● Rebase your changes (and resolve conflicts):
git reba...
You have more information here:
https://github.com/jleyva/moodlemobile/tree/mootes14
https://build.phonegap.com/apps/12114...
Próxima SlideShare
Cargando en…5
×

Creating a custom Moodle Mobile app - MoodleMoot Spain 2014

22.730 visualizaciones

Publicado el

Creating a custom version of the Moodle Mobile app

Publicado en: Educación
  • Sé el primero en comentar

Creating a custom Moodle Mobile app - MoodleMoot Spain 2014

  1. 1. Creating a custom Moodle Mobile app Juan Leyva Moodle Mobile Lead Developer Daniel Palou Moodle Mobile Developer (CV&A) @jleyvadelgado #mootes14
  2. 2. ● Code editor (Sublime, WebStorm, Eclipse, Netbeans...) ● Github account (http://github.com/) ● Github desktop app (http://windows.github.com/) ● PhonegapBuild account (https://build.phonegap.com/) ● Chromium browser as described here: https://docs.moodle.org/dev/Moodle_Mobile_development_using _Chrome_or_Chromium ● Will be a plus: Moodle Mobile Simulator: https://docs.moodle.org/dev/Moodle_Mobile_simulator ● Will be a plus: QR reader app for Android Requirements
  3. 3. Moodle Mobile is the official mobile app for Moodle https://download.moodle.org/mobile/ Moodle Mobile
  4. 4. ● Custom corporate image (name, app icon, theme, store entry) ● Add additional features or static pages ● Remove or change existing features ● Custom translation of the app ● Use your own notifications infrastructure Why a custom app?
  5. 5. https://github.com/moodlehq/moodlemobile Fork the app
  6. 6. You can use your favourite GIT client (or GitHub Desktop clients) git clone git@github.com:jleyva/moodlemobile.git Clone the repo in your desktop
  7. 7. Create a new branch
  8. 8. about.json: Your app information config.json: App settings config.xml: Cordova/Phonegap settings README.md: App info (github) package.json: Node-webkit info Edit the configuration files
  9. 9. We need to change: ● id: com.moodle.moodlemobile -> net.moodlemoot.mootes14 ● versionCode, version, and CFBundleShortVersionString ● Name, description, author, etc… ● URL_SCHEME: mootes14 https://github.com/jleyva/moodlemobile/blob/mootes14/config.xml config.xml
  10. 10. We need to change: ● app_id: Use the same that in config.xml ● versioncode, versionname: Same that config.xml ● default_lang: es ● Delete demo_sites ● Replace reportbugmail ● Add the Site URL in presets.url https://github.com/jleyva/moodlemobile/blob/mootes14/config.json config.json
  11. 11. ● Overwrite the images in img/icon/ with other ones with the same properties (alpha, width and height) ● Same for the img/splash/ directory ● Use online tools like: http://makeappicon.com/ Replace the app icons, splashscreen
  12. 12. That’s all folks!
  13. 13. ● Commit your changes! ● Create an account in: https://build.phonegap.com/ https://build.phonegap.com/apps/1211443/builds Build the app using Phonegap Build
  14. 14. ● For iOs you need to create certificates/provisioning files: http://docs.build.phonegap.com/en_US/ ● Android, you can download and install the .apk Build the app using Phonegap Build
  15. 15. ● https://docs.moodle.org/dev/Moodle_Mobile_Themes Create a custom theme
  16. 16. ● The theme: https://github.com/jleyva/moodlemobile/blob/mootes1 4/plugins/mootes14/theme.css Create a custom theme
  17. 17. Two options for adding the theme in the app: 1. Via Moodle settings: 2. Creating a plugin for the app. Recommended for custom apps. (Described below). Create a custom theme
  18. 18. ● Remove plugins You can easily disable some of the existing plugins, edit the config.json and remove plugins from the “plugins” array ● Reorder plugins In the same “plugins” array you can reorder the plugins list. Remove existing features
  19. 19. ● Edit the lang/xx.json file for replacing the language strings used in the app. Change the app strings
  20. 20. ● Create a new plugin ● Inject the theme once the plugin is loaded ● This plugin can be used for replacing core functionality, adding new static pages, etc… ● You can create multiple plugins Plugin code: https://github.com/jleyva/moodlemobile/tree/mootes14/plugins/mootes14 Replace the base theme
  21. 21. ● In the plugin created for the theme, you can add custom html templates to replace existing core templates. Plugin code: https://github.com/jleyva/moodlemobile/tree/mootes14/plugins/mootes14 Change the sign-in form
  22. 22. ● Static pages: Add new options in the app
  23. 23. ● Sync your fork: https://help.github.com/articles/syncing-a-fork/ ● Rebase your changes (and resolve conflicts): git rebase master mootes14 ● Upgrade your version number ● Commit your changes ● Rebuild with Phonegap build ● Publish in the store Keep your custom version up2date
  24. 24. You have more information here: https://github.com/jleyva/moodlemobile/tree/mootes14 https://build.phonegap.com/apps/1211443/builds http://docs.moodle.org/en/Mobile_app https://docs.moodle.org/en/Moodle_Mobile_additional_features http://docs.moodle.org/dev/Moodle_Mobile https://tracker.moodle.org/browse/MOBILE Thanks for coming

×