Top Banner
Workshop How to develop a new plugin for Moodle Mobile Juan Leyva Moodlemoot Spain 2013 26, 27 y 28 September
20

Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Nov 18, 2014

Download

Technology

Juan Leyva

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

WorkshopHow to develop a new

plugin for Moodle Mobile

Juan LeyvaMoodlemoot Spain 2013

26, 27 y 28 September

Page 2: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Speakers

Juan Leyva

Moodle Developer (since 2003) working @ CV&A Consulting

Moodle Mobile official app creator and maintainer

Developer of plugins:● Configurable Reports● jmail● LTI Provider● UMM (Unofficial Moodle Mobile)● Anonymous posting in forums, Collaborative real-time editor,

ConfigTabs, Forum discuss subscription,

Page 3: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

What we are going to do

● Understand how Moodle Mobile talks with a Moodle installation● Understand the basics about Moodle Mobile Architecture● Set up your Moodle Mobile development environment● Set up your Moodle installation● Package a existing Webservice to be used inside a local plugin● Configure new “Mobile Services” in your Moodle installation● Set up your MoodleMobile app● Develop a MoodleMobile plugin● Change the name and appearance of your app● Build your MoodleMobile rebranded app

Page 4: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

The new plugin

● Display user grades in activities

Page 5: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

How Moodle Mobile talks with Moodle

Moodle Mobile is a REST+JSON based Web Services client

HTTPS is recommended

User session is emulated using unique tokens

File upload and downloads are done using standard HTTP requests

Page 6: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Moodle Mobile Architecture basics

Page 7: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Set up the development environment

● Install Google Chrome● Create a direct access or script for launching Google Chrome

with these flags: --disable-web-security --allow-file-access-from-files

● With Google Chrome and the F12 or "Developer tools" you can emulate mobile devices changing user-agent, orientation, resolution, geo-location, touch events, etc..

● Just open the Developers tools, click on the wheel bottom-right corner to see the Override options.

● It's interesting also disabling the Cache (in general options)

Page 8: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Set up your Moodle Installation

● Enable debugging

● Disable all caches

● Enable WebServices in Advanced options

● Enable WebServices protocols (REST)

● Enable Mobile Services (in Plugins -> WebServices

-> Services)

Page 10: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Configure the new service

● A service is a set of functions for an specific purpose. Since Moodle 2.1 there is a pre-built service for Moodle M.

● This service cannot be edited for adding new functions so we don't have a simple way for make available our new Web Service function to the mobile app.

● The only way for fix this is creating a new Service in Moodle, and configuring our app for pointing to this new service.

● There are two ways of creating a Service in Moodle:○ Using a db/services.php in your plugin as mentioned here:

External services description○ Creating the service in your Moodle installation using the forms in

Admin > Plugins > Web Services > External Services

Page 11: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Configure the new service

● In this case we've created the service using the Moodle forms because it gives more flexibility in some aspects.

● There is a big impediment, due tohttps://tracker.moodle.org/browse/MDL-29807 in order to add a shortname for the new Service, we have to edit manually the Moodle database for adding the shortname in the dbprefix_external_services table

Page 12: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Set up your MoodleMobile app

● Download the last version of the MoodleMobile source code from https://github.com/moodlehq/moodlemobile

● Edit the config.json file and change the wsservice parameter in order to point to the shortname of the Service you created before.

● You have to add also the name of the plugin you are developing at the final of the plugins parameter:

● "plugins" : ["notifications", "upload", "contents", "participants", "addcontact", "addnote", "sendmessage", "grades"],

● Notice that, for avoid errors, this last change should be done once the file plugins/grades/main.js file exists

Page 13: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Develop the MoodleMobile plugin

● https://github.com/cvaconsulting/moodlemobile-grades

● plugin/grades/lang/en.json - Contains the language strings

● plugin/grades/icon.png - The plugin icon

● plugin/grades/activities.html - The template for the activities list

● plugin/grades/activitygrade.html - The template for showing the

grade

● plugin/grades/main.js - The plugin's main code

Page 14: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Develop the MoodleMobile plugin (main.js)

Page 15: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Develop the MoodleMobile plugin (main.js)

Page 16: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Develop the MoodleMobile plugin (main.js)

Page 17: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Develop the MoodleMobile plugin (main.js)

Page 18: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Change the name an appearance

● Edit the config.xml to change the app name● Replace all the icons found in the app● Edit also the config.json file for additional changes● Load a custom CSS from your plugin:

$('head').append('<link rel="stylesheet" href="plugins/myplugin/mycss.css" type="text/css" />');MM.registerPlugin(plugin);

Page 19: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Build your MoodleMobile rebranded app

● Use PhoneGap Build https://build.phonegap.com/

● Create a free account pointing to your github repository or upload a zip file with your app

● Sign the app using your Android and iOs certificates

● Publish your app in Google Play and Apple app Store

Page 20: Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile

Thanks for coming!

You have more information here:

http://docs.moodle.org/dev/Moodle_Mobile