1. Firefox OS 앱 개발하기
스터디 1주차
Channy Yun
@channyun

2. 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, 미 인증 단말)

3. 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월 부터 스페인 폴란드 등지에서 판매 개시

4. Firefox OS 앱 개발하기
Marketplace
Android Firefox OS
Web App
http://marketplace.firefox.com PC Desktop

5. 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

6. 원격 디버깅
• Firefox OS 폰이 연결되면 Push버튼 생성
– 원격 디버깅을 선택한 후, USB연결하면 표시
– 원격 디버깅 설정
• Settings→ Device Information→ More Information →
Developer→ Remote debugging
– Console enabled 등의 설정도 가능

7. 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

8. 주요 항목
• 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

9. 다음 발표 및 스터디 방법
• 신현석님
– 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

10. Q&A
http://www.mozilla.or.kr
@mozillakr
facebook.com/mozillakr