Firefox OS 앱 개발하기 스터디 1주차

Channy Yun

@channyun

Geeksphone

Keon: Display: 3.5" HVGA CPU: Snapdragon 1 GHz RAM 512 MB ROM: 4GB MB Camera 3 MP Battery 1580 mAh

Peak: Display: 4.3" qHD IPS CPU: Snapdragon 1.2 GHz x2 RAM 512 MB ROM: 4GB MB Camera 8 MP (back) + 2 MP (front) Battery 1800 mAh

http://www.geeksphone.com/

Peak+ +1GB RAM 현재 예약 판매 중 (But, 미 인증 단말)

Firefox OS 인증 단말

ZTE Open: Size: 114 x 62 x 12.5 mm CPU: Snapdragon 1 GHz RAM 256 MB ROM: 512 MB Display: 3.5" HVGA

One Touch Fire: Size: 115 x 62.3 x 12.2 mm Display: 3.5" HVGA CPU: Snapdragon 1 GHz RAM 256 MB ROM: 512 MB

• 2013년 7월 부터 스페인 폴란드 등지에서 판매 개시

Firefox OS 앱 개발하기

Marketplace

Android Firefox OS

Web App

http://marketplace.firefox.com PC Desktop

Firefox OS 다국어 버전 시뮬레이터

• 다국어 버전 다운 받기

– http://r2d2b2g.flod.org

• 언어 설정을 변경 방법

– Settings→ Languages

– Gaia앱의 UI뿐만 아니라Accept-Languages HTTP헤더 등도 변경됨

• 앱 실행 방법

– Add Directory버튼 manifest파일을 선택

• Zip으로 압축된 packaged app 설치 및 실행 가능

– Connect 버튼으로 실행 가능

– Refresh 버튼으로 자동 업데이트 가능

• 앱 테스트

– https://github.com/channy/webpang

원격 디버깅

• Firefox OS 폰이 연결되면 Push버튼 생성 – 원격 디버깅을 선택한 후, USB연결하면 표시

– 원격 디버깅 설정

• Settings→ Device Information→ More Information → Developer→ Remote debugging

– Console enabled 등의 설정도 가능

manifest.webapp

• 앱에 관련된 정보가 담긴 JSON 파일 – 이름, 아이콘, 위치, 허가설정, 설명 등 – 앱 콘텐츠 파일의 루트 디렉토리에 위치 – .webapp 확장자 및 application/x-web-app-manifest+json 헤더

• 앱이 사용하는 Web Activities, Web API, Cache 위치 및 보안 설정 등을 포함 • Same Origin Policy를 준수

Same Origin이란? 도메인과 포트과 동일한 위치를 말하는 것 http://abc.com http://abc.com:80 http://abc.com/cde c.f. www.abc.com test.abc.com:8080

주요 항목

• name

– 앱 이름으로(128자 제한), Marketplace 등록 후 변경이 힘듦

• descriptioname

– 앱 설명으로(1024자 제한)

• launch_path

– 앱이 시작하는 위치, 패키징앱에서는 필수이며 호스팅앱에서는 매니페스토 파일이 위치한 URL의 절대 경로 “/”

– Launch_path를 서브 디렉토리에 지정하는 경우, “/real_path” 형식으로 지정해야 함

• 기본 옵션 – icon: 앱 아이콘 크기별 위치

• 아이콘 가이드라인: http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/

– developer: 개발자의 이름과 홈페이지 명시

• 참조 문서 – https://developer.mozilla.org/ko/docs/Apps/Manifest

다음 발표 및 스터디 방법

• 신현석님 – Firefox OS Builingblock http://buildingfirefoxos.com

– 광 센서 API 예제 • https://developer.mozilla.org/ko/docs/WebAPI/Using_Light_Events

• 차주 스터디: Web API에 대한 공부 – Firefox OS에서 사용하는 각종 Web API 하나씩 알아가기

• https://developer.mozilla.org/ko/docs/WebAPI

– 팀별로 한 주에 1~2개의 API에 대한 샘플 코드 구동

• 패키지 앱의 경우, 실제 폰 지급 및 샘플 코드 구동 필요

– Web API 문서 한국어 번역 필수

– 숙제검사: https://developer.mozilla.org/ko/dashboards/revisions?locale=ko

Q&A

http://www.mozilla.or.kr

@mozillakr

facebook.com/mozillakr