Apps development for Firefox OS & introduction to WebAPIs
Download as PPTX, PDF1 like303 views
This document provides an introduction to developing apps for Firefox OS. It explains that Firefox OS apps are really just webpages that have access to device hardware and APIs. To get started developing, a developer needs a text editor, Firefox browser, Firefox OS simulator add-on, and WebIDE. Apps are built with HTML and CSS for the user interface and JavaScript for logic and programming. The document walks through creating a simple "Hello World" app and provides examples of common JavaScript APIs for building Firefox OS apps, including APIs for making phone calls, sending SMS, accessing sensors, manipulating files, and more.
Apps development for Firefox OS & introduction to WebAPIs
- 1. Apps Development for Firefox OS & Introduction to Web APIs Rashik Ishrak Nahian rashik@nahian.me
- 3. Firefox OS is actually Firefox Browser . That works as the system for smartphones. What you feel & what you is pure web
- 4. Architecture
- 6. How to develop apps for Firefox OS ? if( HTML && CSS && JS) { start building Firefox OS Apps } else { you need to start learning those three items above }
- 7. So, your application is actually a webpage? Yes it is! Webpage with access to your phone's Hardware on demand.
- 8. Will it run only in internet ?? NO!!! It will run offline too. It will run in Android too..
- 9. What do we need to start? 1. Any text editor 2. Firefox browser 3. Firefox OS Simulator Add On 4. WebIDE
- 10. To develop any application, we worry about two things...
- 11. User Interface
- 12. & Controls! Logic programming, loops, working with data etc...
- 13. While building FirefoxOS apps, We Build user interface with HTML & CSS & Javascript does the programming!
- 15. Step 1: Create a directory Create a directory named hello anywhere in your computer. This will be the base directory - we put all files of our app here.
- 16. Step 2: Create file named index.html Create a file index.html (it doesn't need to be index.html, it could be any name with .html extension) in the hello directory.
- 18. One more step to turn this into an app!
- 19. Step 3: Create Manifest file All Firefox OS apps need a manifest file .The manifest file tells the app's name, description, permissions it requires and some other basic settings. Manifest file can have any name, but it should have .webapp extension. Should be kept in the application root directory. A simple JSON File . JSON== JavaScript Object Notation
- 21. Step 3: icon.png
- 23. How to run/test? I don't have device!
- 24. Run your app in Firefox OS Simulator Open the WebIDE from: Click Open Menu > Developer >WebIDE
- 25. •Click on Open App > Open Packaged App > Select the app directory •Click Select Run time> Choose the simulator you want to run •The simulator will start •Press PLAY Button to start your app
- 26. Add some Style
- 27. More Fun: Add some scripts
- 28. You have created your first FirefoxOs app!
- 29. What We need in Apps
- 30. But, what JavaScript usually...
- 32. There are JavaScript APIs! •For making phone calls •For sending SMS •For reading sensors •For manipulating files •For ....
- 37. Geolocation Enables your app to request the user's current location and listen for location changes.
- 38. Ambient Light Sensor API Provides access to the ambient light sensor, which lets your app detect the ambient light level in the vicinity of the device.
- 39. Battery Status API Provides information about the battery's charge level and whether or not the device is currently plugged in and charging.
- 40. Pointer Lock API Lets apps lock access to the mouse and gain access to movement deltas rather than absolute coordinates; this is great for gaming.
Editor's Notes
- #3: Probably you already know about Firefox OS, note that it's not Firefox the browser... it's a brand new OS for mobile platforms
- #8: Probably you already know about Firefox OS, note that it's not Firefox the browser... it's a brand new OS for mobile platforms
- #9: Probably you already know about Firefox OS, note that it's not Firefox the browser... it's a brand new OS for mobile platforms
- #10: Probably you already know about Firefox OS, note that it's not Firefox the browser... it's a brand new OS for mobile platforms
- #11: Probably you already know about Firefox OS, note that it's not Firefox the browser... it's a brand new OS for mobile platforms
- #14: Probably you already know about Firefox OS, note that it's not Firefox the browser... it's a brand new OS for mobile platforms