Firefox OS workshop, Colombia

  • 681 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
681
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
18
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Firefox OS & the Open Web
  • 2. 09:30 Welcome09:40 Introductions09:50 Firefox OS overview10:20 Pushing apps10:30 Start hacking12:00 Lunch13:00 Hacking17:00 Demos18:00 Mingle20:00 DinnerAgenda
  • 3. Using HTML5, CSS andJavaScript together with anumber of APIs to buildapps and customize the UI.Firefox OS
  • 4. Open Web Apps
  • 5. Develop Web App usingHTML5, CSS, & Javascript1.Create an app manifest file2.Publish/install the app3.
  • 6. {"version": "1.0","name": "MozillaBall","description": "Exciting Open Web development action!","icons": {"16": "/img/icon-16.png","48": "/img/icon-48.png","128": "/img/icon-128.png"},"developer": {"name": "Mozilla Labs","url": "http://mozillalabs.com"},"installs_allowed_from": ["*"],"appcache_path": "/cache.manifest","locales": {"es": {"description": "¡Acción abierta emocionante del desarrollo del Web!","developer": {"url": "http://es.mozillalabs.com/"}},"it": {"description": "Azione aperta emozionante di sviluppo difotoricettore!","developer": {"url": "http://it.mozillalabs.com/"}}},"default_locale": "en"}
  • 7. MANIFEST CHECKERhttp://appmanifest.org/
  • 8. Serve with Content-type/MIME type:application/x-web-app-manifest+json
  • 9. https://marketplace.firefox.com/
  • 10. https://marketplace.firefox.com/developers/
  • 11. Packaged vs. Hosted Apps
  • 12. WebAPIs
  • 13. https://wiki.mozilla.org/WebAPI
  • 14. Security Levels
  • 15. Web ContentRegular web contentInstalled Web AppA regular web appPrivileged Web AppMore access, more responsibilityCertified Web AppDevice-critical applications
  • 16. https://wiki.mozilla.org/WebAPI#Planned_for_initial_release_of_B2G_.28aka_Basecamp.29
  • 17. "permissions": {"contacts": {"description": "Required for autocompletion in the share screen","access": "readcreate"},"alarms": {"description": "Required to schedule notifications"}}
  • 18. PERMISSIONS
  • 19. Vibration API (W3C)Screen OrientationGeolocation APIMouse Lock API (W3C)Open WebAppsNetwork Information API (W3C)Battery Status API (W3C)Alarm APIWeb ActivitiesPush Notifications APIWebFM APIWebPaymentIndexedDB (W3C)Ambient light sensorProximity sensorNotificationREGULAR APIS
  • 20. BATTERY STATUSAPI
  • 21. var battery = navigator.battery;if (battery) {var batteryLevel = Math.round(battery.level * 100) + "%",charging = (battery.charging)? "" : "not ",chargingTime = parseInt(battery.chargingTime / 60, 10,dischargingTime = parseInt(battery.dischargingTime / 60, 10);// Set eventsbattery.addEventListener("levelchange", setStatus, false);battery.addEventListener("chargingchange", setStatus, false);battery.addEventListener("chargingtimechange", setStatus, false);battery.addEventListener("dischargingtimechange", setStatus, false);}
  • 22. NOTIFICATION
  • 23. var notification = navigator.mozNotification;notification.createNotification("See this","This is a notification",iconURL);
  • 24. SCREENORIENTATION API
  • 25. // Portrait mode:screen.mozLockOrientation("portrait");/*Possible values:"landscape""portrait""landscape-primary""landscape-secondary""portrait-primary""portrait-secondary"*/
  • 26. VIBRATION API
  • 27. // Vibrate for one secondnavigator.vibrate(1000);// Vibration pattern [vibrationTime, pause,…]navigator.vibrate([200, 100, 200, 100]);// Vibrate for 5 secondsnavigator.vibrate(5000);// Turn off vibrationnavigator.vibrate(0);
  • 28. NETWORKINFORMATION API
  • 29. var connection = window.navigator.mozConnection,online = connection.bandwidth > 0,metered = connection.metered;
  • 30. DEVICEPROXIMITY
  • 31. window.addEventListener("deviceproximity", function (event) {// Current device proximity, in centimetersconsole.log(event.value);// The maximum sensing distance the sensor is// able to report, in centimetersconsole.log(event.max);// The minimum sensing distance the sensor is// able to report, in centimetersconsole.log(event.min);});
  • 32. AMBIENT LIGHTEVENTS
  • 33. window.addEventListener("devicelight", function (event) {// The level of the ambient light in luxconsole.log(event.value);});
  • 34. window.addEventListener("devicelight", function (event) {// The lux values for "dim" typically begin below 50,// and the values for "bright" begin above 10000console.log(event.value);});
  • 35. Device Storage APIBrowser APITCP Socket APIContacts APIsystemXHRPRIVILEGED APIS
  • 36. DEVICE STORAGEAPI
  • 37. var deviceStorage = navigator.getDeviceStorage("videos");
  • 38. // "external", "shared", or "default".deviceStorage.type;// Add a file - returns DOMRequest with file namedeviceStorage.add(blob);// Same as .add, with provided namedeviceStorage.addNamed(blob, name);// Returns DOMRequest/non-editable File objectdeviceStorage.get(name);// Returns editable FileHandle objectdeviceStorage.getEditable(name);// Returns DOMRequest with success or failuredeviceStorage.delete(name);// Enumerates filesdeviceStorage.enumerate([directory]);// Enumerates files as FileHandlesdeviceStorage.enumerateEditable([directory]);
  • 39. var storage = navigator.getDeviceStorage("videos"),cursor = storage.enumerate();cursor.onerror = function() {console.error("Error in DeviceStorage.enumerate()", cursor.error.name);};cursor.onsuccess = function() {if (!cursor.result)return;var file = cursor.result;// If this isnt a video, skip itif (file.type.substring(0, 6) !== "video/") {cursor.continue();return;}// If it isnt playable, skip itvar testplayer = document.createElement("video");if (!testplayer.canPlayType(file.type)) {cursor.continue();return;}};
  • 40. CONTACTS API
  • 41. var contact = new mozContact();contact.init({name: "Tom"});var request = navigator.mozContacts.save(contact);request.onsuccess = function() {console.log("Success");};request.onerror = function() {console.log("Error")};
  • 42. WEB ACTIVITIES
  • 43. var activity = new MozActivity({name: "view",data: {type: "image/png",url: ...}});activity.onsuccess = function () {console.log("Showing the image!");};activity.onerror = function () {console.log("Cant view the image!");};
  • 44. {"activities": {"share": {"filters": {"type": ["image/png", "image/gif"]}"href": "sharing.html","disposition": "window"}}}
  • 45. var register = navigator.mozRegisterActivityHandler({name: "view",disposition: "inline",filters: {type: "image/png"}});register.onerror = function () {console.log("Failed to register activity");}
  • 46. navigator.mozSetMessageHandler("activity", function (a) {var img = getImageObject();img.src = a.source.url;// Call a.postResult() or a.postError() if// the activity should return a value});
  • 47. Future APIs
  • 48. Resource lock APIUDP Datagram Socket APIPeer to Peer APIWebNFCWebUSBHTTP-cache APICalendar APISpellcheck APILogAPIKeyboard/IME APIWebRTCFileHandle APISync API
  • 49. Web Apps from Mozilla
  • 50. DialerContactsSettingsSMSWeb browserGalleryVideo PlayerMusic PlayerE-mail (POP, IMAP)CalendarAlarm ClockCameraNotesFirst Run ExperienceNotificationsHome ScreenMozilla MarketplaceSystem UpdaterLocalization Support
  • 51. Get started
  • 52. https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
  • 53. FIREFOX OSBOILERPLATE APPhttps://github.com/robnyman/Firefox-OS-Boilerplate-App
  • 54. Getting help
  • 55. https://lists.mozilla.org/listinfo/dev-webappsirc://irc.mozilla.org/#openwebapps
  • 56. Trying things out
  • 57. Robert Nymanrobertnyman.comrobert@mozilla.comMozilla@robertnyman