public-courses / 2016-pwa-public

Commit 087da77985f4455371052b7f34e7dae2d083f601

Authored by Rémi Emonet almost 4 years ago

Exists in master

pro

Showing 2 changed files with 142 additions and 1 deletions

index.html
more-projects.html

...	...	@@ -68,9 +68,9 @@
68	68	<a href="raw/test.mp4">A test video to download¹</a>
69	69	<a href="more-installation.html">Installation <br/>on your laptop</a>
70	70	<a href="tp2.pdf">TP 2 (SPRING) <br/>Sujet</a>
	71	+ <a href="more-projects.html">Project <br/>Instructions</a>
71	72	<!--
72	73	<a href="tp3.pdf">TP 3 <br/>Subject</a>
73		- <a href="more-projects.html">Project <br/>Instructions</a>
74	74	<a href="more-links.html">Helpful <br/>Links</a>
75	75	<a class="vil" href="more-errors.html">Typical <br/>Problems</a>
76	76	<a href="more-attribution.html">Where images are borrowed?</a>

	1	+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	2	+<html xmlns="http://www.w3.org/1999/xhtml">
	3	+<head>
	4	+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	5	+ <meta http-equiv="Content-Style-Type" content="text/css" />
	6	+ <meta name="generator" content="pandoc" />
	7	+ <title></title>
	8	+ <style type="text/css">code{white-space: pre;}</style>
	9	+ <link rel="stylesheet" href="media/picnic.min.css" type="text/css" />
	10	+</head>
	11	+<body>
	12	+<style>
	13	+html { margin: 2em;}
	14	+ol li em { margin-right: 1em; }
	15	+</style>
	16	+<h2 id="updates">Updates</h2>
	17	+<h1 id="expectations-for-the-project">Expectations for the Project</h1>
	18	+<p>The project will be evaluated based on your ability to show that you acquired skills at using different web technologies. You'll be working in groups (of 2/3 students) and you'll probably share the work load. However, while only some of you will fight with each particular line of code and detail, it is expected that each group member have an understanding of the project as a whole (can explain any of its parts).</p>
	19	+<p>A good project, deliverables and defense should show that you understood and know how to:</p>
	20	+<ul>
	21	+<li>generate dynamic pages on the server side, using Thymeleaf in Spring,</li>
	22	+<li>expose a REST API for your data,</li>
	23	+<li>write rich client application using a framework such as React,</li>
	24	+<li>handle security and user authentication,</li>
	25	+<li>present your work properly,</li>
	26	+<li>use the git version control system to collaborate (not just a few commits at the end of the project).</li>
	27	+</ul>
	28	+<h2 id="good-development-practices">Good Development Practices:</h2>
	29	+<p>About git:</p>
	30	+<ul>
	31	+<li>commit/push often, so you don't fear making changes,</li>
	32	+<li>provide good commit messages that describe the changes and the reason for these changes,</li>
	33	+<li>use English for all commit messages,</li>
	34	+<li>if you pair-program in front of single machine, mention in the message who contributed to the commit (you'd be surprised how fast you can forget who did what on a project),</li>
	35	+<li>do not commit generated files (and use a <code>.gitignore</code> so that <code>git status</code> shows up clean),</li>
	36	+<li>write your documentation in markdown (.md) so that it is automatically nicely display in github.</li>
	37	+</ul>
	38	+<p>About your code:</p>
	39	+<ul>
	40	+<li>write your code in English,</li>
	41	+<li>indent/format your code properly,</li>
	42	+<li>avoid mixing spaces and tabs (ideally, don't use tabulations),</li>
	43	+<li>keep your code clean: do not use global/static variables, choose your names carefully (packages, classes, etc), follow the conventions (e.g., <a href="http://www.oracle.com/technetwork/java/codeconventions-135099.html">java convention</a>), use constants for constant values, ...</li>
	44	+</ul>
	45	+<p>You're writing software, so:</p>
	46	+<ul>
	47	+<li>test a lot and often,</li>
	48	+<li>automate the tests that can be automated,</li>
	49	+<li>document how to use, compile, test and start your project,</li>
	50	+<li>document how to understand and continue your project.</li>
	51	+</ul>
	52	+<h2 id="reuse-and-attribution">Reuse and Attribution</h2>
	53	+<p>Whenever re-used code/text/definitions/... coming from external sources, <strong>you must properly cite your sources</strong>. In particular, your must specify in your README.md (in your git repository) the source of external code you used, who are the authors, what is the license, and what effort you had to make to understand and integrate, ... Not doing this properly may be against the law (license terms) and against the university policies and can get you evicted (<a href="http://www.universite-lyon.fr/plagiat" class="uri">http://www.universite-lyon.fr/plagiat</a>).</p>
	54	+<h2 id="project-deliverable-november-30-23h59-via-github">Project deliverable (November 30, 23h59, via github)</h2>
	55	+<p>I will clone the project from your github repository (no handing-in by email or other means). This will happen at the moment mentioned above, roughly one day before the defenses.</p>
	56	+<p>All textual documents should preferably be in a text-based format, such as <code>.md</code> (markdown <a href="https://help.github.com/articles/github-flavored-markdown/" class="uri">https://help.github.com/articles/github-flavored-markdown/</a>).</p>
	57	+<p>Your repository <strong>must</strong> contain, at least, the following elements:</p>
	58	+<ul>
	59	+<li><code>README.md</code>
	60	+<ul>
	61	+<li>a paragraph at least about your subject</li>
	62	+<li>instructions on how to obtain, build, run, test, ..., your project</li>
	63	+<li>a description of the architecture (what parts interacts how with what other parts, e.g., database, spring pages, spring rest, angular, ...)</li>
	64	+<li>if so: whether there is a running instance deployed somewhere (on a private server, or on a PAAS (like heroku))</li>
	65	+</ul></li>
	66	+<li><code>retrospective.md</code>, about organization of the work, technology, etc
	67	+<ul>
	68	+<li>compared to your objectives: what works, what does not work yet</li>
	69	+<li>the difficulties you faced</li>
	70	+<li>the lessons you learned</li>
	71	+<li>what you would do differently next time</li>
	72	+<li>what you would keep for next time</li>
	73	+</ul></li>
	74	+<li><code>auto-evaluation.md</code>, which should contain
	75	+<ul>
	76	+<li>the time spent (in hours) by each member of the project</li>
	77	+<li>the parts on which each member worked</li>
	78	+<li>for each item in the “Good Development Practices” section, an evaluation of how much you followed the practice</li>
	79	+</ul></li>
	80	+</ul>
	81	+<h2 id="project-defense-december-2-9h-12h">Project Defense (December 2, 9h-12h)</h2>
	82	+<p>The first part of your defense should be a product presentation, as if you were presenting/selling your project to a semi-technical client, not detailing too much the low level details. The “retrospective” part should be an honest evaluation of your work. Ideally, your slides should also be committed in your git repository.</p>
	83	+<h3 id="typical-defense-indicative-timings">Typical Defense (indicative timings)</h3>
	84	+<ul>
	85	+<li>2 minutes: setup in the room</li>
	86	+<li>5 minutes with slides: presentation of the project, what have been done, your choices, ...</li>
	87	+<li>5 minutes: project demo</li>
	88	+<li>5 minutes with slides: retrospective, how you worked in your group, auto-evaluation, what worked well, what was difficult, what you learned, strong/weak points of the projects (on the methodology and results)</li>
	89	+<li>5 minutes: questions</li>
	90	+</ul>
	91	+<h2 id="about-git-version-control-system-and-github-online-service-hosting-git-repositories">About Git (version control system) and GitHub (online service hosting git repositories)</h2>
	92	+<p>A team will be created for your group (3 students), and you'll have to accept the invitation. You should also have a private repository (git project) writable and visible only by your group. If you cannot see it, contact your teacher.</p>
	93	+<h1 id="list-of-project-ideas">List of Project Ideas</h1>
	94	+<p>Some project ideas include possibly advanced data analysis techniques. Beware of not forgetting about the “web application” part of the project :).</p>
	95	+<h2 id="section">???</h2>
	96	+<p>You can propose your own project based on an idea/product you want to develop or around one of your passion or another course (data analysis, xml, ...). Or you can get inspiration from the fuzzy suggestions below (feel free to discuss with your teacher).</p>
	97	+<h2 id="the-experiment-manager">The Experiment Manager</h2>
	98	+<p>A web interface around a system of another course (machine learning, data analysis, …). The goal would be to create a web interface to run different analysis, visualize the output, manage a database of results, … Ideally, one would be able to run different kind of analysis, on different databases, with different parameters; to monitor the progress; and to visualize the results.</p>
	99	+<h2 id="the-programming-exercise-manager">The Programming Exercise Manager</h2>
	100	+<p>Make a product based on the following advertisement video: <a href="http://blog.docker.com/2014/04/docker-in-education-interview/" class="uri">http://blog.docker.com/2014/04/docker-in-education-interview/</a>. The goal is to manage programming exercise, their answers by students, and the feedback from the teacher to the students. As a bonus, you'll (most probably) learn a tool that is very useful and much in-demand: docker.</p>
	101	+<h2 id="live-mcq-system">Live MCQ System</h2>
	102	+<p>Build a system to setup classrooms with live MCQ like <a href="http://socrative.com/" class="uri">http://socrative.com/</a>. The system should provide statistics to help analyzing the evolution of the cohort but also of individual students. Clustering methods can be added to group students based on their error patterns.</p>
	103	+<h2 id="toyota-kata-recorder">Toyota Kata Recorder</h2>
	104	+<p>Build a system to manage your Toyota katas (see <a href="http://www.slideshare.net/bcarrington/toyota-kata-summary" class="uri">http://www.slideshare.net/bcarrington/toyota-kata-summary</a> and <a href="http://www-personal.umich.edu/~mrother/Homepage.html" class="uri">http://www-personal.umich.edu/~mrother/Homepage.html</a> and <a href="http://www-personal.umich.edu/~mrother/Materials_to_Download.html" class="uri">http://www-personal.umich.edu/~mrother/Materials_to_Download.html</a> and more) so that you can record the history of your decisions. The system can be somewhat inspired by <a href="https://trello.com/" class="uri">https://trello.com/</a>, but it should be much tailored to the specifics of Toyota katas (which is more structured that a trello board).</p>
	105	+<h2 id="interactive-learning-for-design-generation">Interactive Learning for Design Generation</h2>
	106	+<p>Taking the example of business cards (like <a href="http://www.moo.com/uk/" class="uri">http://www.moo.com/uk/</a>), the web application should allow the user to upload content (pictures, logos, company name, slogan, etc). From this content (and potentially previous interactions of people), the service should generated randomly (from positioning rules, templates with parameters, image cropping, color palette variations) multiple design for a business card. The user can rate as bad/good/amazing some of the designs and get new proposals based on her/his preferences.n The interactive learning can be difficult to implement properly (there is research on this), but the project should focus on providing a working and usable solution (even if not perfect). The application should provide a “download as pdf option” that allow to download the create business card (or a variety of, say, 50 designs).</p>
	107	+<h2 id="sport-tracker-analyzer">Sport Tracker Analyzer</h2>
	108	+<p>Open source applications such as <a href="https://github.com/jonasoreland/runnerup" class="uri">https://github.com/jonasoreland/runnerup</a> allow users to track their activity (running, cycling, ...). Such activities produces logs including GPS traces, instantaneous speed, instantaneous heart beat frequency, etc. To aggregate and explore these data, mobile applications usually share the data with online services that provide statistics and visualization. The goal is to develop an open service that receives and aggregates sport tracking logs and provides statistics, visualizations, etc.</p>
	109	+<h2 id="automated-mcq-manager">Automated MCQ Manager</h2>
	110	+<p>Make a modern version of <a href="http://home.gna.org/auto-qcm/" class="uri">http://home.gna.org/auto-qcm/</a> with a web interface etc. AMC makes it possible to write MCQ exams, print them with randomized questions and answer order and correct the student answers automatically from the scans.</p>
	111	+<h2 id="teachable-clone">"Teachable" Clone</h2>
	112	+<p>Study the business model of this service and clone it <a href="http://teachable.com/" class="uri">http://teachable.com/</a>.</p>
	113	+<!-- clicky Cla -->
	114	+<script type="text/javascript">
	115	+var clicky_site_ids = clicky_site_ids \|\| [];
	116	+clicky_site_ids.push(100779706);
	117	+(function() {
	118	+ var s = document.createElement('script');
	119	+ s.type = 'text/javascript';
	120	+ s.async = true;
	121	+ s.src = '//static.getclicky.com/js';
	122	+ ( document.getElementsByTagName('head')[0] \|\| document.getElementsByTagName('body')[0] ).appendChild( s );
	123	+})();
	124	+</script>
	125	+<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>
	126	+
	127	+
	128	+<!-- Histats.com START (aync)-->
	129	+<script type="text/javascript">var _Hasync= _Hasync\|\| [];
	130	+_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
	131	+_Hasync.push(['Histats.fasi', '1']);
	132	+_Hasync.push(['Histats.track_hits', '']);
	133	+(function() {
	134	+var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
	135	+hs.src = ('http://s10.histats.com/js15_as.js');
	136	+(document.getElementsByTagName('head')[0] \|\| document.getElementsByTagName('body')[0]).appendChild(hs);
	137	+})();</script>
	138	+<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?2767123&101" alt="javascript hit counter" border="0"></a></noscript>
	139	+<!-- Histats.com END -->
	140	+</body>
	141	+</html>