MozillaWiki

Firefox OS/AcademyNCU2015: Difference between revisions

< Firefox OS
(→‎Agenda: add my slides)
 
(96 intermediate revisions by 7 users not shown)
Line 2: Line 2:
Web applications are popular due to the ubiquity of web browsers, and the convenience of using a web browser as a client to update and maintain web applications without distributing and installing software on potentially thousands of client computers is a key reason for their popularity, as is the inherent support for cross-platform compatibility.  
Web applications are popular due to the ubiquity of web browsers, and the convenience of using a web browser as a client to update and maintain web applications without distributing and installing software on potentially thousands of client computers is a key reason for their popularity, as is the inherent support for cross-platform compatibility.  


[[File:NCU logo.gif|thumbnail|right|NCU]]
Firefox OS is an open source mobile operating system build entirely using Web technologies. Having launched into market on smartphones built by leading handset manufacturers, Firefox OS is seeing rapid expansion into further markets. By making the Web a first class citizen on mobile, Firefox OS seeks to tear down closed ecosystem barriers and promote an open mobile Web.
Firefox OS is an open source mobile operating system build entirely using Web technologies. Having launched into market on smartphones built by leading handset manufacturers, Firefox OS is seeing rapid expansion into further markets. By making the Web a first class citizen on mobile, Firefox OS seeks to tear down closed ecosystem barriers and promote an open mobile Web.


[[File:NCU logo.gif|thumbnail|right|NCU]]
[[File:14142.jpg|thumbnail|right|Photo taken during the class]]
As an open source project, Firefox OS is built by a community of employees, partners and contributors.  Mozilla enthusiastically encourages students from the academy to contribute to Firefox OS. Mozilla works with National Central University in Taiwan and creates a semester class in 2015. In this class, Mozilla deploys required knowledge and skills to students, to implement web based apps. In the end of the class, we expect some apps to be submitted to Mozilla Marketplace.  
As an open source project, Firefox OS is built by a community of employees, partners and contributors.  Mozilla enthusiastically encourages students from the academy to contribute to Firefox OS. Mozilla works with National Central University in Taiwan and creates a semester class in 2015. In this class, Mozilla deploys required knowledge and skills to students, to implement web based apps. In the end of the class, we expect some apps to be submitted to Mozilla Marketplace.  


This class will focus on the implementation of Web Apps and Add-ons, including testing, programming best practice, API basics, and some workshops that allow students to experience the whole process to implement Add-ons and Web Apps. In the end of the class, finished and completed Add-ons and Web Apps are expected. To submit these apps to Mozilla Marketplace is even better.  
This class will focus on the implementation of Web Apps and Add-ons, including testing, programming best practice, API basics, and some workshops that allow students to experience the whole process to implement Add-ons and Web Apps. In the end of the class, finished and completed Add-ons and Web Apps are expected. To submit these apps to Mozilla Marketplace is even better.  


==Class==
==Basic Information of the Class==
[[File:NCUCSIElogo.png|thumbnail|right|NCU CSIE]]
[[File:NCUCSIElogo.png|thumbnail|right|NCU CSIE]]
* National Central University, Taiwan
* National Central University, Taiwan
* Computer Science and Information Engineering Department
* Computer Science and Information Engineering Department
* Name of the Class: Implementation and SDLC of Web Apps (Web Apps軟體工程與實作)
* '''Name of the Class''': Implementation and SDLC of Web Apps (Web Apps軟體工程與實作)
* Number of Students: ~30
* '''Number of Students''': 50~60
* Required Skills: Basic JavaScript programming
* '''Required Skills''': Basic JavaScript programming
* '''Time''': 3-5pm every Friday.
* '''Location''': Room 206 in Computer Science department building (工程五館).


==Working Environment==
==Working Environment==
[[File:flame-dev-hud.png|thumbnail|right|Firefox OS Flame]]
[[File:gaia2.0screen.png|thumbnail|right|Firefox OS]]
* Firefox OS Simulator.  
===Operating System===
* Firefox OS Flame device(To be clarified. Need to be returned at the end of the class).
* [http://www.ubuntu.com/download Ubuntu Desktop 15.04]. (Recommended)
===Tools===
* [https://github.com/creationix/nvm NVM - Node Version Manager]
* [https://git-scm.com/ git tool]
* [https://developer.mozilla.org/en/docs/Tools/Firefox_OS_Simulator Firefox OS Simulator]
* [https://nightly.mozilla.org/ Firefox Nightly Build] - In order to try new framework for Add-Ons.
* [https://developer.mozilla.org/en/docs/Tools/WebIDE WebIDE in Firefox browser(Gecko 34 or higher)] with Firefox OS 2.2 and 3.0 runtime installed.
* Pythonpip, Python-virtualenv.
===Before development===
* [https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Running_the_Gaia_codebase#Running_your_own_Gaia_build Running your own Gaia build]:
** First, make a fork of [https://github.com/mozilla-b2g/gaia the main Gaia repo on Github].
** Clone your fork locally: git clone https://github.com/your-username/gaia.git
** Go to 'gaia' folder and add upstream: git remote add upstream https://github.com/mozilla-b2g/gaia
** Now you need to create a Gaia profile. Running make inside your repo folder creates a profile in the profile directory, which is setup for optimal debugging. It creates unpackaged (hosted versions) of the Gaia apps that can be served directly via the local HTTPD server bundled along with Firefox desktop as an extension. When you make a change you just need to refresh your browser window to see the result (as you'll see later), rather than having to rebuild the profile, repush it to the device, etc. This is really good for rapid CSS/JS/HTML hacking.
** With your debug profile built, run it in [https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_in_Firefox_Mulet Mulet] or [https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_inside_WebIDE_with_a_Firefox_OS_Simulator WebIDE].
 
===Testing environment===
* [https://developer.mozilla.org/en/docs/Tools/Firefox_OS_Simulator Firefox OS Simulator], [https://addons.mozilla.org/en-us/firefox/addon/firefox-os-simulator/ Add-on for Firefox browser].  
* [https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Flame Firefox OS Flame device](To be clarified. Need to be returned at the end of the class).
** Students need to sign agreements to make sure that these Flame devices will be returned at the end of this class.
** Students need to sign agreements to make sure that these Flame devices will be returned at the end of this class.
===Firefox OS device===
[[File:FlamesForNCU.JPG|thumbnail|right|Flashing builds on Flame]]
[[File:FlashingFlame.JPG|thumbnail|right|Flashing builds on Flame]]
* [https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Flame Flame device]
** The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps.
** Device Spec:
*** Qualcomm MSM8210 Snapdragon, 1.2GHZ Dual core processor
*** 4.5” screen (FWVGA 854×480 pixels)
*** Cameras: Rear: 5MP / Front: 2MP
*** 3G UMTS quad-band (850/900/1900/2100)
*** 8GB memory
*** 256MB -1GB RAM (adjustable by developer)
*** A-GPS, NFC
*** Dual SIM support
*** Battery capacity: 1,800 mAh
*** WiFi: 802.11 b/g/n, Bluetooth, Micro USB


==Rating Criteria==
==Rating Criteria==
Line 29: Line 67:
! Type !! Percentage !! Detailed description
! Type !! Percentage !! Detailed description
|-
|-
| Project || 60% || * Votes from Demo: 20%<br>** In the 20% for demo, each student, teacher assistant and speaker has votes to choose the projects that are done by others. <br>* Code quality: 15%<br>* Unit tests: 15%<br>* Creativity: 10%
| Project || 60% || * Votes from Demo: 20%<br>** In the 20% for demo, each student, teacher assistant and speaker has votes to choose the projects that are done by others. <br>* Code quality: 15%<br>* Unit tests: 15% '''[1]'''<br>* Creativity: 10%
|-
|-
| Homework || 30% || Based on the completion and quality of assignment after sessions. Reviewed and assigned by teacher assistants and speakers.  
| Homework || 30% || Based on the completion and quality of assignment after sessions. Will be reviewed and assigned by teacher assistants and speakers.  
|-
|-
| Attendance || 10% || Based on how students are involved in the class. Reviewed and assigned by teacher assistants and speakers.  
| Attendance || 10% || Based on how students are involved in the class '''[2]'''.  
|}
|}
* '''Button line:''' Needs to have tests passed, should not be copied from others, and needs to submit the app to Marketplace.  
* '''Button line:''' ''(Students who don't meet one of the following conditions may have a fail in this class.)''
* '''Additional bonus''': Submitted to Marketplace and on the shelf successfully.
** '''[1]''' The codes of the project need to have enough tests passed.
** The project should not be copied from others.
** Students need to submit the app(or add-on) to [http://marketplace.firefox.com/ Mozilla Marketplace] and on the shelf of [http://marketplace.firefox.com/ Mozilla Marketplace] on time(before Jan 15th) successfully. Please take at least 2 weeks review into consideration, and submit the application in advance.  
** Students are expected to finish the project by December 4th.
** '''[2]''' Should not have absence for more than 2 sessions.
* To quit in the middle of the class is not allowed. Please make sure you understand the criteria and decide to enroll this class or not before the end of the 2nd session.


==Deliverable==
==Deliverable==
* Each student needs to submit a completed and workable Web app or Add-on to Mozilla Marketplace.  
* Each student needs to submit a completed and workable Web app or Add-on to Mozilla Marketplace.
* Each student needs to prepare a demo and shows to other students in this class.
* These Web Apps need to be committed to [https://github.com/MAP-NCU2015 this Github repository].


==Communication Channels==
==Communication Channels==
Line 46: Line 91:
** Channels: #b2g, #mozilla-taiwan, #Academy-NCU2015
** Channels: #b2g, #mozilla-taiwan, #Academy-NCU2015
* Mailing list:  
* Mailing list:  
** [https://lists.mozilla.org/listinfo/dev-b2g dev-b2g], [https://lists.mozilla.org/listinfo/dev-gaia dev-gaia]
** Discussion for this class: [mailto:fxos-ncu-2015@googlegroups.com fxos-ncu-2015@googlegroups.com]
** General discussions for Firefox OS: [https://lists.mozilla.org/listinfo/dev-fxos dev-fxos], [https://lists.mozilla.org/listinfo/dev-gaia dev-gaia]
** [https://lists.mozilla.org/listinfo/dev-general-zh Mozilla Community in Chinese language]


==Mentors==
==Agenda==
{| class="wikitable sortable"
* Projects are expected to be finished before December, in order to avoid the conflict with projects from other classes.
{| class="wikitable"
|-
! # !! Date !! Topic !! Speaker / Owner !! Homework
|-
| 1 || 09/18 || '''Introduction'''<br>Overview of this class(rating criteria, major goals, projects). At the end of this session, we will also provide the basic instruction to use Github.<br>[http://slides.com/kevinhu-3/deck#/ Slides can be opened here]. || Kevin Hu || Register a Github account and create a repository and rename it via git commands.
|-
| 2 || 09/25 || '''Git, Github, Bugzilla, WebIDE and DevTools'''<br>Introduction of Git, Github, Bugzilla, WebIDE and DevTools. After this session, students are expected to have the skills to use some tools to develop Web Apps.<br>[https://docs.google.com/presentation/d/1QmmDpLy_kch8vnZQZyC8caybKF2A0zPxQsXHUCXIqRU/edit?usp=sharing Slides can be opened here.] || Ricky Chien<br>Kevin Hu || To create a Hello World app, and submit to your own Github repository.
|-
| 3 || 10/02 || '''JavaScript Best Practice (1)'''<br>Some examples will be used in this session. After this session, students are expected to learn JavaScript best practice, and the skills to refactor JavaScript codes.<br>[https://docs.google.com/presentation/d/1ofgD63SENpiihJ_MIYyZVW2TM11Mo-qwcstDbZytqIo/edit#slide=id.p Slides can be opened here.] || Greg Weng || Codes refactoring.
|-
| 4 || 10/16 || '''Testing Concepts, Framework and Strategies'''<br>Introduction of testing concept, strategies and current used testing framework in Mozilla. Students are expected to learn the importance of unit tests and know how to write good one. <br> [https://drive.google.com/file/d/0B7-UHKhu7dYsb3NldzNMVVV0SXM/view?usp=sharing Slides can be opened here.] || Shing Lyu<br>Askeing Yen || To write tests to cover codes from the previous session.
|-
| 5 || 10/23 || '''JavaScript Best Practice (2)'''<br>Some examples will be used in this session. After this session, students are expected to learn JavaScript best practice, and the skills to refactor JavaScript codes.<br>[https://docs.google.com/presentation/d/15bkiDc8egvAiaapaqk_yvrcFo2jQJTGFipBRCqhP_yg/edit#slide=id.p Slides can be opened here.] || Greg Weng<br>Kevin Hu || Codes refactoring. Start to provide the draft of proposed project.
|-
|-
! Speaker !! Responsibility !! IRC !! Github !! Detailed work on items
| 6 || 10/30 || '''WebAPI Basics'''<br>Different kinds of Web APIs will be introduced. Students are expected to know the capacity of Web Apps after this session. || Wei-Cheng Pan<br>Kevin Hu || Use at least one WebAPI in their prototype projects.
|-
|-
| '''Kevin Hu''' || Management of Engineering Community Development || khu || kaichih || LinkedIn: https://www.linkedin.com/in/kaichih<br>Telegram: kaichih
| 7 || 11/06 || '''Mozilla Taipei Visit'''<br>Students will come to visit Mozilla Taipei office. Will provide basic introduction about Mozilla. <br>[https://docs.google.com/presentation/d/1VQPMShcMP30PgbY9QZXTgIQO3rPzjZegB8-kaGfg9C0/edit?usp=sharing Slides can be opened here.]<br>Office Location: [https://www.google.com.tw/maps/place/No.+106,+Section+5,+Xinyi+Rd,+Xinyi+District,+Taipei+City,+110/@25.0327429,121.5646424,17z/data=!3m1!4b1!4m2!3m1!1s0x3442abb11481f283:0x24d463b1d3e86041 台北市信義區信義路五段106號4樓A1]<br>Agenda:
# Video sharing, 2 mins.
# Introduction of the session today, 3 mins.
# Introduction of Mozilla, 17 mins.
# Visit Mozilla Taipei Space, 10 mins.
# Q&A and/or Sharing from old schoolmates who are working at Mozilla now, 30~ mins.
# Suggest to visit [http://planet.moztw.org/ Mozilla Taipei Community Space].
# Delivery of Flame devices.
|| Kevin Hu<br>Sean Peng || None.
|-
|-
| '''Eddie Lin''' || Web Developer, Firefox OS Product Marketing || elin || || http://mozilla.com.tw, Firefox OS Product Marketing and IoT development exploration.
| 8 || 11/13 || '''Special guest: Douglas Sherk'''<br>DOM and CSS.  || Douglas Sherk<br>Kevin Hu || None.
|-
|-
| '''Greg Weng''' || Firefox OS Software Engineer || snowmantw || snowmantw || Lockscreen, and NFC visual effects in Firefox OS.  
| 9 || 11/20 || '''Introduction of Add-ons + Client-server Model and Server-side Programming Basics'''<br>Knowledge of Add-ons will be deployed. Common client-server model on the Web and some server-side programming options will be introduced, too. <br>Slides: [https://docs.google.com/presentation/d/11cFhjIQkUV9Jn7Yj4Co3vPz1odEaAGZC5sgxuPmPNsQ/edit#slide=id.gd4d0c5aef_0_21 Server-side Programming], [https://docs.google.com/presentation/d/1bB6AKqnHDWr-38giK_la95mCQVXkEzwaNfFM6teLX4I/edit#slide=id.gd4c8ee188_3_18 Introduction to Add-ons] || Eddie Lin || None.
|-
|-
| '''Yi-Fan Liao''' || Firefox OS Software Engineer || yliao || bebeeben || system browser, vertical home screen, and bookmark in Firefox OS.  
| 10 || 11/27 || '''Introduction of WoT + Q&A for projects'''<br>Speaker will share the idea of WoT and what we've done so far. In the 2nd hour, students can ask questions regarding to the projects and the speaker can help to provide technical evaluation. || Evan Tseng<br>Kevin Hu || None.
|-
|-
| '''Evan Tseng''' || Firefox OS Software Engineer || evanxd || || making FxOS people want, and coding for System App, Calendar App, and JS Marionette in FxOS Team.
| 11 || 12/04 || '''Project Demo'''<br>Students need to demo the result of implemented apps. || Teaching assistants || Project demo
|-
|-
| '''Ricky Chien''' || Firefox OS Software Engineer || ||  || Work on Firefox OS Gaia.
| 12 || 12/11 || '''Project Demo'''<br>Students need to demo the result of implemented apps. || Teaching assistants || Project demo
|-
|-
| '''Askeing Yen''' || Firefox OS Senior QA Engineer || askeing || askeing || B2G, gaia-ui-tests, marionette, automation, B2G-flash-tool, MTBF, MCTS, b2g-util, taskcluster-util
| 13 || 12/18 || '''How to work on Mozilla Projects'''<br>Introduction of using Git and Bugzilla to work on Mozilla projects. Code review process, patch submission process, and identification of projects in Bugzilla will be introduced. Students can understand how big open source projects are working, and how to work with lots of talented people worldwide. <br>[http://slides.com/kevinhu-3/mozilla-projects/live#/ Slides can be opened here.] || Kevin Hu || None.
|-
|-
| '''Shing Lyu''' || Firefox OS QA Engineer || slyu || shinglyu || Marionette (WebDriver), MozTrap (Test Case Management Tool), Firefox OS Metrics, and Cost Control.  
| 14 || 12/25 || '''Introduction of animation, web component and Firefox OS TV'''<br>Introduction of animation technology, web component and technology in Firefox OS TV device. <br>[http://begeeben.github.io/animation-presentation/ Slides can be opened here.] || Yifan Liao<br>Kevin Hu || None.
|-
|-
| '''Wei-Cheng Pan''' || Firefox OS Software Engineer || wcpan || legnaleurc || Firefox OS Performance.
| 15 || 01/08 || '''Sharing: Community society.'''<br>[http://www.slideshare.net/bobchao/mozilla-community Slides can be opened here.] || Bob Chao<br>Kevin Hu || None.
|-
|-
| '''Dietrich Ayala''' || Technical Evangelist || dietrich || || Firefox OS (B2G), Gaia, Firefox, Places, Bookmarks, History, Awesomebar, Livemarks, Microsummaries, Session Restore, Add-on SDK (Jetpack), Performance, Snappy
| 16 || 01/15 || '''Special guest: Dietrich Ayala'''<br>Technical Evangelist at Mozilla. || Dietrich Ayala<br>Kevin Hu || None.
|}
|}


==Agenda==
==Mentors / Session Owner==
* All slides/materials will be uploaded in [https://drive.google.com/drive/folders/0B1cxDHuuke17cXllTGxsbFpiYjQ this Google Drive folder].  
{| class="wikitable sortable"
* Projects are expected to be finished before December, in order to avoid the conflict with projects from other classes.  
|-
{| class="wikitable"
! Speaker !! Responsibility !! IRC !! Github !! Detailed work on items
|-
| [[File:Khu.jpg|50px|thumbnail|center]]'''Kevin Hu''' || Management of Engineering Community Development, the organizer of this class || khu || [https://github.com/kaichih/ kaichih] || LinkedIn: https://www.linkedin.com/in/kaichih<br>Telegram: kaichih<br>Skype: kaichih.hu
|-
| [[File:elin.jpg|50px|thumbnail|center]]'''Eddie Lin''' || Web Developer, Firefox OS Product Marketing || elin || [https://github.com/elin-moco/ elin-moco] || Firefox OS Product Marketing and Web of Things development experiments.
|-
| [[File:gweng.jpg|50px|thumbnail|center]]'''Greg Weng''' || Firefox OS Software Engineer || snowmantw || snowmantw || Lockscreen, and NFC visual effects in Firefox OS.  
|-
|-
! # !! Date !! Topic !! Speaker / Owner !! Homework
| [[File:yliao.jpg|50px|thumbnail|center]]'''Yi-Fan Liao''' || Firefox OS Software Engineer || yliao || bebeeben || system browser, vertical home screen, and bookmark in Firefox OS.
|-
|-
| 1 || 09/18 || '''Introduction'''<br>Overview of this class(rating criteria, major goals, projects). At the end of this session, we will also provide the basic instruction to use Github. || Kevin Hu || Create a repository and rename it.
| [[File:evan.jpg|50px|thumbnail|center]]'''Evan Tseng''' || Firefox OS Software Engineer || evanxd || || making FxOS people want, and coding for System App, Calendar App, and JS Marionette in FxOS Team.
|-
|-
| 2 || 09/25 || '''Github, Bugzilla, WebIDE and DevTools(including practice)'''<br>Introduction of Github, Bugzilla, WebIDE and DevTools. After this session, students are expected to have the skills to use some tools to develop Web Apps. || Ricky Chien || To modify Hello World app, and submit to your own repository.
| [[File:ricky.jpg|50px|thumbnail|center]]'''Ricky Chien''' || Firefox OS Software Engineer || rickychien || [https://github.com/rickychien/ rickychien] || Work on Firefox OS Gaia.
|-
|-
| 3 || 10/02 || '''JavaScript Best Practice'''<br>Some examples will be used in this session. After this session, students are expected to learn JavaScript best practice, and the skills to refactor JavaScript codes. || Greg Weng || Codes refactoring.  
| [[File:askeing.jpg|50px|thumbnail|center]]'''Askeing Yen''' || Sr. Software Engineer in Automation || askeing || [https://github.com/askeing/ askeing] || B2G, gaia-ui-tests, marionette, automation, B2G-flash-tool, MTBF, MCTS, b2g-util, taskcluster-util
|-
|-
| 4 || 10/16 || '''Testing Concepts, Framework and Strategies'''<br>Introduction of testing concept, strategies and current used testing framework in Mozilla. Students are expected to learn the importance of unit tests and know how to write good one. || Shing Lyu, Askeing Yen || To write tests to cover codes from the previous session.  
| [[File:slyu.jpg|50px|thumbnail|center]]'''Shing Lyu''' || Software Engineer in Automation || slyu || shinglyu || Marionette (WebDriver), MozTrap (Test Case Management Tool), Firefox OS Metrics, and Cost Control.  
|-
|-
| 5 || 10/23 || '''Firefox OS and Web Apps Introduction'''<br>Architecture of Firefox OS, types of different kinds of Web Apps, and structure of Web Apps will be introduced. Students are expected to understand the concept of Web Apps. || || Start to provide the draft of proposed project.
| [[File:wcpan.jpg|50px|thumbnail|center]]'''Wei-Cheng Pan''' || Firefox OS Software Engineer || wcpan || [https://github.com/legnaleurc legnaleurc] || Firefox OS Performance.
|-
|-
| 6 || 10/30 || '''WebAPI Basics'''<br>Different kinds of Web APIs will be introduced. Students are expected to know the capacity of Web Apps after this session. || Wei-Cheng Pan || Use at least one WebAPI in their prototype projects.
| [[File:dietrich.jpg|50px|thumbnail|center]]'''Dietrich Ayala''' || Technical Evangelist || dietrich || || Firefox OS (B2G), Gaia, Firefox, Places, Bookmarks, History, Awesomebar, Livemarks, Microsummaries, Session Restore, Add-on SDK (Jetpack), Performance, Snappy
|-
|-
| 7 || 11/06 || '''Introduction of Add-ons + Presentation of projects(1)'''<br>Each student needs to start to present the idea of proposed project in the class. Speaker will review the ideas and provide technical suggestions. Meanwhile, knowledge of Add-ons will be deployed. || Eddie Lin ||  
| [[File:dsherk.jpg|50px|thumbnail|center]]'''Douglas Sherk''' || Product Engineer || drs || || Firefox OS (B2G)
|-
|-
| 8 || 11/13 || '''Client-server Model and Server-side Programming Basics + Presentation of projects(2)'''<br>Students who didn't present the ideas yet can present the ideas this week. Revised ideas are accepted to be presented as well. common client-server model on the Web and some server-side programming options will be introduced, too. || Eddie Lin ||  
| [[File:bchao.jpg|50px|thumbnail|center]]'''Bob Chao''' || [https://reps.mozilla.org/u/bobchao Mozilla Rep] / MozTW Community || bobchao || [https://github.com/bobchao bobchao] || All about community (both paid / non-paid staff)
|}
 
==Offline Support==
{| class="wikitable sortable"
|-
|-
| 9 || 11/20 || '''Introduction of WoT + Presentation of projects(3)'''<br>All students are expected to finish the presentation of proposed projects this week. Speaker will share the idea of WoT and what we've done so far. || Evan Tseng ||
! Name !! Responsibility !! Support items
|-
|-
| 10 || 11/27 || '''Mozilla Taipei Visit'''<br>Students will come to visit Mozilla Taipei office, and all students need to demo the result of implemented apps. All speakers and students can vote and that's considered as an important factor of final rating in this class. || Kevin Hu || Project Demo
| [[File:peyton.jpg|50px|thumbnail|center]]'''Peyton Sun''' || Communications Manager, Firefox OS, Product Marketing || Overall arrangement of this class.  
|-
|-
| 11 || 12/18 || '''How to work on Mozilla Projects'''<br>Introduction of using Git and Bugzilla to work on Mozilla projects. Code review process, patch submission process, and identification of projects in Bugzilla will be introduced. Students can understand how big open source projects are working, and how to work with lots of talented people worldwide. || Kevin Hu || None.
| [[File:eliu.jpg|50px|thumbnail|center]]'''Estela Liu''' || Program and Brand Management, Firefox OS || Planning of the Mozilla Taipei Office visit.
|-
|-
| 12 || 12/25 || '''Introduction of animation, web component and Firefox OS TV'''<br>Introduction of animation technology, web component and technology in Firefox OS TV device.  || Yifan Liao || None.
| [[File:bsu.jpg|50px|thumbnail|center]]'''Bella Su''' || Office Services Coordinator || Co-working with custom to import Firefox OS devices for students.  
|-
|-
| 13 || 01/08 || Special guest || || None.
| [[File:nli.jpg|50px|thumbnail|center]]'''Linear Li''' || IT Engineer || Prepare additional Firefox OS devices for students.  
|-
|-
| 14 || 01/15 || '''Special guest: Dietrich Ayala'''<br>Technical Evangelist at Mozilla. || Dietrich Ayala || None.
| [[File:atsai.jpg|50px|thumbnail|center]]'''Al Tsai''' || QA Manager || Flash Firefox OS builds on 53 Flame devices for students.  
|}
|}
==Teaching Assistants==
* 鍾智鈞
** Github: chungya
* 蔡宗明
** Github: [https://github.com/FlowerHop FlowerHop]
==Reference==
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript A re-introduction to JavaScript (JS tutorial)]
* [https://marketplace.firefox.com/ Mozilla Marketplace]
* Firefox OS apps:
** [https://developer.mozilla.org/en/Marketplace/Options/Hosted_apps Hosted apps]
** [https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_apps Packaged apps]
** [https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_or_hosted Packaged apps or hosted apps?]
* [https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS Building apps for Firefox OS]
* [https://classroom.github.com/classrooms Classrooms for Github]

Latest revision as of 18:03, 9 January 2016

Academy Program in National Central University 2015

Web applications are popular due to the ubiquity of web browsers, and the convenience of using a web browser as a client to update and maintain web applications without distributing and installing software on potentially thousands of client computers is a key reason for their popularity, as is the inherent support for cross-platform compatibility.

 
NCU

Firefox OS is an open source mobile operating system build entirely using Web technologies. Having launched into market on smartphones built by leading handset manufacturers, Firefox OS is seeing rapid expansion into further markets. By making the Web a first class citizen on mobile, Firefox OS seeks to tear down closed ecosystem barriers and promote an open mobile Web.

 
Photo taken during the class

As an open source project, Firefox OS is built by a community of employees, partners and contributors. Mozilla enthusiastically encourages students from the academy to contribute to Firefox OS. Mozilla works with National Central University in Taiwan and creates a semester class in 2015. In this class, Mozilla deploys required knowledge and skills to students, to implement web based apps. In the end of the class, we expect some apps to be submitted to Mozilla Marketplace.

This class will focus on the implementation of Web Apps and Add-ons, including testing, programming best practice, API basics, and some workshops that allow students to experience the whole process to implement Add-ons and Web Apps. In the end of the class, finished and completed Add-ons and Web Apps are expected. To submit these apps to Mozilla Marketplace is even better.

Basic Information of the Class

 
NCU CSIE
  • National Central University, Taiwan
  • Computer Science and Information Engineering Department
  • Name of the Class: Implementation and SDLC of Web Apps (Web Apps軟體工程與實作)
  • Number of Students: 50~60
  • Required Skills: Basic JavaScript programming
  • Time: 3-5pm every Friday.
  • Location: Room 206 in Computer Science department building (工程五館).

Working Environment

 
Firefox OS

Operating System

Tools

Before development

  • Running your own Gaia build:
    • First, make a fork of the main Gaia repo on Github.
    • Clone your fork locally: git clone https://github.com/your-username/gaia.git
    • Go to 'gaia' folder and add upstream: git remote add upstream https://github.com/mozilla-b2g/gaia
    • Now you need to create a Gaia profile. Running make inside your repo folder creates a profile in the profile directory, which is setup for optimal debugging. It creates unpackaged (hosted versions) of the Gaia apps that can be served directly via the local HTTPD server bundled along with Firefox desktop as an extension. When you make a change you just need to refresh your browser window to see the result (as you'll see later), rather than having to rebuild the profile, repush it to the device, etc. This is really good for rapid CSS/JS/HTML hacking.
    • With your debug profile built, run it in Mulet or WebIDE.

Testing environment

Firefox OS device

 
Flashing builds on Flame
 
Flashing builds on Flame
  • Flame device
    • The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps.
    • Device Spec:
      • Qualcomm MSM8210 Snapdragon, 1.2GHZ Dual core processor
      • 4.5” screen (FWVGA 854×480 pixels)
      • Cameras: Rear: 5MP / Front: 2MP
      • 3G UMTS quad-band (850/900/1900/2100)
      • 8GB memory
      • 256MB -1GB RAM (adjustable by developer)
      • A-GPS, NFC
      • Dual SIM support
      • Battery capacity: 1,800 mAh
      • WiFi: 802.11 b/g/n, Bluetooth, Micro USB

Rating Criteria

  • Rating Criteria:
Type Percentage Detailed description
Project 60% * Votes from Demo: 20%
** In the 20% for demo, each student, teacher assistant and speaker has votes to choose the projects that are done by others.
* Code quality: 15%
* Unit tests: 15% [1]
* Creativity: 10%
Homework 30% Based on the completion and quality of assignment after sessions. Will be reviewed and assigned by teacher assistants and speakers.
Attendance 10% Based on how students are involved in the class [2].
  • Button line: (Students who don't meet one of the following conditions may have a fail in this class.)
    • [1] The codes of the project need to have enough tests passed.
    • The project should not be copied from others.
    • Students need to submit the app(or add-on) to Mozilla Marketplace and on the shelf of Mozilla Marketplace on time(before Jan 15th) successfully. Please take at least 2 weeks review into consideration, and submit the application in advance.
    • Students are expected to finish the project by December 4th.
    • [2] Should not have absence for more than 2 sessions.
  • To quit in the middle of the class is not allowed. Please make sure you understand the criteria and decide to enroll this class or not before the end of the 2nd session.

Deliverable

  • Each student needs to submit a completed and workable Web app or Add-on to Mozilla Marketplace.
  • Each student needs to prepare a demo and shows to other students in this class.
  • These Web Apps need to be committed to this Github repository.

Communication Channels

Agenda

  • Projects are expected to be finished before December, in order to avoid the conflict with projects from other classes.
# Date Topic Speaker / Owner Homework
1 09/18 Introduction
Overview of this class(rating criteria, major goals, projects). At the end of this session, we will also provide the basic instruction to use Github.
Slides can be opened here.		 Kevin Hu Register a Github account and create a repository and rename it via git commands.
2 09/25 Git, Github, Bugzilla, WebIDE and DevTools
Introduction of Git, Github, Bugzilla, WebIDE and DevTools. After this session, students are expected to have the skills to use some tools to develop Web Apps.
Slides can be opened here.		 Ricky Chien
Kevin Hu		 To create a Hello World app, and submit to your own Github repository.
3 10/02 JavaScript Best Practice (1)
Some examples will be used in this session. After this session, students are expected to learn JavaScript best practice, and the skills to refactor JavaScript codes.
Slides can be opened here.		 Greg Weng Codes refactoring.
4 10/16 Testing Concepts, Framework and Strategies
Introduction of testing concept, strategies and current used testing framework in Mozilla. Students are expected to learn the importance of unit tests and know how to write good one.
Slides can be opened here.		 Shing Lyu
Askeing Yen		 To write tests to cover codes from the previous session.
5 10/23 JavaScript Best Practice (2)
Some examples will be used in this session. After this session, students are expected to learn JavaScript best practice, and the skills to refactor JavaScript codes.
Slides can be opened here.		 Greg Weng
Kevin Hu		 Codes refactoring. Start to provide the draft of proposed project.
6 10/30 WebAPI Basics
Different kinds of Web APIs will be introduced. Students are expected to know the capacity of Web Apps after this session.		 Wei-Cheng Pan
Kevin Hu		 Use at least one WebAPI in their prototype projects.
7 11/06 Mozilla Taipei Visit
Students will come to visit Mozilla Taipei office. Will provide basic introduction about Mozilla.
Slides can be opened here.
Office Location: 台北市信義區信義路五段106號4樓A1
Agenda:
  1. Video sharing, 2 mins.
  2. Introduction of the session today, 3 mins.
  3. Introduction of Mozilla, 17 mins.
  4. Visit Mozilla Taipei Space, 10 mins.
  5. Q&A and/or Sharing from old schoolmates who are working at Mozilla now, 30~ mins.
  6. Suggest to visit Mozilla Taipei Community Space.
  7. Delivery of Flame devices.
 Kevin Hu
Sean Peng		 None.
8 11/13 Special guest: Douglas Sherk
DOM and CSS.		 Douglas Sherk
Kevin Hu		 None.
9 11/20 Introduction of Add-ons + Client-server Model and Server-side Programming Basics
Knowledge of Add-ons will be deployed. Common client-server model on the Web and some server-side programming options will be introduced, too.
Slides: Server-side Programming, Introduction to Add-ons		 Eddie Lin None.
10 11/27 Introduction of WoT + Q&A for projects
Speaker will share the idea of WoT and what we've done so far. In the 2nd hour, students can ask questions regarding to the projects and the speaker can help to provide technical evaluation.		 Evan Tseng
Kevin Hu		 None.
11 12/04 Project Demo
Students need to demo the result of implemented apps.		 Teaching assistants Project demo
12 12/11 Project Demo
Students need to demo the result of implemented apps.		 Teaching assistants Project demo
13 12/18 How to work on Mozilla Projects
Introduction of using Git and Bugzilla to work on Mozilla projects. Code review process, patch submission process, and identification of projects in Bugzilla will be introduced. Students can understand how big open source projects are working, and how to work with lots of talented people worldwide.
Slides can be opened here.		 Kevin Hu None.
14 12/25 Introduction of animation, web component and Firefox OS TV
Introduction of animation technology, web component and technology in Firefox OS TV device.
Slides can be opened here.		 Yifan Liao
Kevin Hu		 None.
15 01/08 Sharing: Community society.
Slides can be opened here.		 Bob Chao
Kevin Hu		 None.
16 01/15 Special guest: Dietrich Ayala
Technical Evangelist at Mozilla.		 Dietrich Ayala
Kevin Hu		 None.

Mentors / Session Owner

Speaker Responsibility IRC Github Detailed work on items
 
Kevin Hu		 Management of Engineering Community Development, the organizer of this class khu kaichih LinkedIn: https://www.linkedin.com/in/kaichih
Telegram: kaichih
Skype: kaichih.hu
 
Eddie Lin		 Web Developer, Firefox OS Product Marketing elin elin-moco Firefox OS Product Marketing and Web of Things development experiments.
 
Greg Weng		 Firefox OS Software Engineer snowmantw snowmantw Lockscreen, and NFC visual effects in Firefox OS.
 
Yi-Fan Liao		 Firefox OS Software Engineer yliao bebeeben system browser, vertical home screen, and bookmark in Firefox OS.
 
Evan Tseng		 Firefox OS Software Engineer evanxd making FxOS people want, and coding for System App, Calendar App, and JS Marionette in FxOS Team.
 
Ricky Chien		 Firefox OS Software Engineer rickychien rickychien Work on Firefox OS Gaia.
 
Askeing Yen		 Sr. Software Engineer in Automation askeing askeing B2G, gaia-ui-tests, marionette, automation, B2G-flash-tool, MTBF, MCTS, b2g-util, taskcluster-util
 
Shing Lyu		 Software Engineer in Automation slyu shinglyu Marionette (WebDriver), MozTrap (Test Case Management Tool), Firefox OS Metrics, and Cost Control.
 
Wei-Cheng Pan		 Firefox OS Software Engineer wcpan legnaleurc Firefox OS Performance.
 
Dietrich Ayala		 Technical Evangelist dietrich Firefox OS (B2G), Gaia, Firefox, Places, Bookmarks, History, Awesomebar, Livemarks, Microsummaries, Session Restore, Add-on SDK (Jetpack), Performance, Snappy
 
Douglas Sherk		 Product Engineer drs Firefox OS (B2G)
 
Bob Chao		 Mozilla Rep / MozTW Community bobchao bobchao All about community (both paid / non-paid staff)

Offline Support

Name Responsibility Support items
 
Peyton Sun		 Communications Manager, Firefox OS, Product Marketing Overall arrangement of this class.
 
Estela Liu		 Program and Brand Management, Firefox OS Planning of the Mozilla Taipei Office visit.
 
Bella Su		 Office Services Coordinator Co-working with custom to import Firefox OS devices for students.
 
Linear Li		 IT Engineer Prepare additional Firefox OS devices for students.
 
Al Tsai		 QA Manager Flash Firefox OS builds on 53 Flame devices for students.

Teaching Assistants

  • 鍾智鈞
    • Github: chungya
  • 蔡宗明

Reference

Retrieved from "https://wiki.allizom.org/index.php?title=Firefox_OS/AcademyNCU2015&oldid=1112029"