Download - Ti.conf titanium on firefoxos

Transcript
Page 1: Ti.conf titanium on firefoxos

Titanium Mobile Web & Firefox OS

alessio ricco

Page 2: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

Firefox OS is a new mobile operating system, developed by Mozilla,which lets users install and run open web applications created using HTML5, CSS3,

and JavaScript.

We'll explain the best practices for a cross platform porting to MobileWeb and the guidelines for the

deployment on this new cool platform.

Abstract

Page 3: Ti.conf titanium on firefoxos

@alessioriccohttp://www.slideshare.net/alessioricco

Titanium Certified App Developer/Titan Ti.Roma - Roma Titanium Mobile Meetup http://www.meetup.com/Titanium-Appcelerator-Roma/ Titanium Mobile Developers Italy (fb) https://www.facebook.com/groups/TitaniumMobileItaly/?fref=ts

Apps •TwinsMatcher •CrowdFuture •Bitcoin Markets •Wallive •World Medicine Park

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

About me

Page 4: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

About me

… I’m a Cross Platform Curious….

Page 5: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

Cross Platform ?

Page 6: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOSA new OS for mobile devices - Developed by Mozilla - Based on Linux - Gecko engine

Page 7: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Architecture

Page 8: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Architecture

Gonk is the lower level operating system of the

Firefox OS platform, consisting of a Linux kernel based on the

Android Open Source Project (AOSP) and userspace hardware

abstraction layer (HAL).

Page 9: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Architecture

Gecko is the name of the layout engine developed by the

Mozilla Project. Gecko's function is to read web content, such as HTML, CSS, XUL, JavaScript,

and render it on the user's screen or print it.

Page 10: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - ArchitectureGaia is the user

interface level of Firefox OS. Everything that

appears on the screen after Firefox OS starts up is drawn by Gaia,

including the lock screen, home screen,

dialer, and other

Page 11: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - API

Page 12: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - SDK

Available SDK

• Firefox Web API (mainly device/hardware/sensors) https://wiki.mozilla.org/WebAPI

• Gaia building blocks(Ready to use UI snippets and code blocks) http://buildingfirefoxos.com/building-blocks/action-menu.html

Page 13: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Native Apps!

• Native apps are web apps!- HTML5 - Javascript- CSS3

• Titanium MobileWeb Appsare able to run on FFOS (with some limits…)

Page 14: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1- Simulator

Simulator and Debugger as Firefox Add-On

Page 15: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Deployment

• Packaged AppsA packaged app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest, and so on) contained in a zip file, instead of having its resources on a Web server

• Hosted AppsA hosted app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest and so on) stored on a Web server

https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_or_hosted_

https://developer.mozilla.org/en-US/Apps/Build/App_permissions

Page 16: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Open Web AppOpen Web Apps are essentially no different than standard

websites or Web pages. They are built using standard open Web technologies HTML, CSS, JavaScript, etc. and can be accessed using a Web browser. The main differences lie in their ability to be installed on a device and work offline, and access to advanced APIs that allow interaction with device features such as the camera, address book, and other such things. In addition, they are built on open technologies as

much as is possible.

Page 17: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Marketplace

Page 18: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1-Requirements

!

• A simple text editor

• Firefox Browser(Firefox 24 or Firefox 25)

https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator

Page 19: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - install

Page 20: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - install

Page 21: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.2-Requirements!

• A simple text editor

• Firefox Browser(Latest version)

• App manager

• WebIDE

The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator,

directly from your browser.

https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/

Page 22: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - dashboard

Page 23: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - Simulator

Page 24: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - app install

Page 25: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - app install

Page 26: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - The ManifestAn open web app manifest

contains information that a web browser needs to interact with an app. !

A manifest is one of the key things that distinguishes an open web app from a website.

!It is a JSON file with a name and description for the app,

and it can also contain the origin of the app, icons, and the permissions required by the app, among other things.

The manifest file should be called manifest.webapp, and be placed in the root of your web app directory alongside your

index.html file.

Page 27: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - The Manifest

The manifest file should be called manifest.webapp, and be placed in the root of your web app directory alongside your

index.html file.

https://developer.mozilla.org/en-US/Apps/Build/Manifest

Page 28: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - The Manifest

Page 29: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - The Manifest{ "name": "Kitchen Sink", "description": "Titanium demo", "launch_path": "/index.html", "icons": { "128": "/appicon.png" }, "developer": { "name": "appcelerator", "url": "http://www.appcelerator.com" }, "default_locale": "en"}

Page 30: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - Kitchen Sink

Page 31: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - Debugging

Page 32: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - Device connected….

remove empty lines at the end of the file

Many aspects of Firefox OS development require installation of adb, the Android Debug Bridge.

Page 33: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS 1.1 - ADBAndroid Debug Bridge (adb) is a versatile command line tool

that lets you communicate with an emulator instance or connected Android-powered device. It is a client-server

program that includes three components: !

A client, which runs on your development machine. You can invoke a client from a shell by issuing an adb command. Other

Android tools such as the ADT plugin and DDMS also create adb clients.

!A server, which runs as a background process on your

development machine. The server manages communication between the client and the adb daemon running on an emulator

or device. !

A daemon, which runs as a background process on each emulator or device instance.

http://developer.android.com/tools/help/adb.html

Page 34: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Titanium

Simulator is not working with Titanium Apps

because

Most touch events do not work in Firefox OS Simulator

We need some workarounds…

Page 35: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Titanium DEMO Time!

Page 36: Ti.conf titanium on firefoxos

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

FirefoxOS - Titanium• Touch Events doesn’t work on simulator

• Touch Events works on device

• Different tools between 1.1. and 2.1

• Back navigation button doesn’t work (Titanium.UI.MobileWeb.NavigationGroup)

• Some UI elements doesn’t work

• but…

Page 37: Ti.conf titanium on firefoxos

• FirefoxOShttp://www.mozilla.org/en-US/firefox/os/

• FirefoxOS 1.1 Simulator https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator

• Developers Page https://developer.mozilla.org/en-US/Firefox_OS

• Firefox Browser (all the releases)ftp.mozilla.org/pub/mozilla.org/firefox/releases/

• Publishing Apps https://developer.mozilla.org/en-US/Marketplace/Options/Self_publishing

• Submitting Appshttps://developer.mozilla.org/it/docs/Web/Apps/Publishing/Submitting_an_app

Links

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

Page 38: Ti.conf titanium on firefoxos

• Mobile Web overviewhttp://docs.appcelerator.com/titanium/3.0/#!/guide/Mobile_Web_Platform_Overview

• Mobile Web best practices (codestrong 2012) http://www.slideshare.net/appcelerator/codestrong-2012

• Mobile Web deployment http://docs.appcelerator.com/titanium/3.0/#!/guide/Deploying_and_Distributing_Mobile_Web_Apps

Links

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

Page 39: Ti.conf titanium on firefoxos

Thank you

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

• Nois3http://www.nois3.it/

• Etnatraininghttp://www.etnatraining.it/

• Davide Cassenti, Luca Greco

Page 40: Ti.conf titanium on firefoxos

Contacts

Titanium Mobile Web & FirefoxOS - tiConf 2014 - @alessioricco

• https://www.linkedin.com/in/alessioricco

• @alessioricco

• http://www.slideshare.net/alessioricco

• http://alessioricco.com