Difference between revisions of "Module 9"

From CSE330 Wiki
Jump to: navigation, search
(Tips)
 
Line 1: Line 1:
__NOTOC__  
+
__NOTOC__
 
+
In Module 9, you will learn about Git, a version control system, and Django, a web framework.
This module introduces MEAN, a fullstack web framework that uses '''M'''ongoDB, '''E'''xpress, '''A'''ngularJS and '''N'''ode.js. <br/>
 
You have already learned (some things) about Node.js. In this module, you will be introduced to other three new technologies. Don’t frown yet, the goal of this module is to expose you to the concept of web frameworks and prepare you for the creative project. You are not required to be an expert in all of these technologies, however, it’s important to understand the basics of each and how they work together.
 
Follow along the tutorials and complete exercises to learn how things work, and you will be ready to create your own web applications using the MEAN stack very soon!
 
  
 +
This article contains your assignments for Module 9.
  
 
== Reading ==
 
== Reading ==
  
The following articles on the online class wiki textbook contain information that will help you complete the assignment.
+
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
  
*[[Preparations]]
+
* [[Git]]
*[[Getting MEAN]]
+
* [[Web Frameworks]]
  
 
== Individual Assignments ==
 
== Individual Assignments ==
  
=== Tutorials ===
+
<!-- === Learn about Version Control Systems ===
 +
 
 +
On your own time, '''watch the 40-minute screencast that has been posted to Blackboard'''.  This gives an insightful understanding of how VCSs work under-the-hood. -->
 +
 
 +
=== Django Tutorial ===
 +
 
 +
The web framework we will be using in Module 9 is called '''Django'''.  Django is the dominant Python-based web framework and is useful for large web sites.
 +
 
 +
Before you may begin, you need to install Django.  You may do this using [[Python#Pip|pip]], which you installed in Module 4.  Django's package name in pip is '''Django'''.
  
Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works.
+
Once you have Django installed, complete [https://docs.djangoproject.com/en/1.5/intro/tutorial01/ the official Django tutorial].  You will be creating a simple poll app.  '''Complete the first ''four'' parts of the tutorial for the individual portion.'''  You may complete steps 5 and 6 during the group portion.
  
=== Install MEAN ===
+
'''Tip:''' It is recommended that you install a copy of Python and Django on your local computer.  This way, you will not need to upload the files to your server every time you make a change, because your server will be running locally.
  
Follow the steps and install MEAN on your machine, initialize an app and type grunt in your terminal to start the server (make sure your mongoDB server is connected and running).
+
'''Tip:''' When testing Django on your EC2 instance, make sure to open port 8000 for your instance on AWS (and to click "apply rule changes").
Open up the app in your browser (localhost:3000), and understand what the default app does.
 
  
 +
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial01/ Part 1]'''
 +
#* Create a project
 +
#* Start the development server
 +
#* Setup an SQLite database
 +
#* Create the Polls app and define the models
 +
#* Interact with the database using the interactive python shell
 +
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial02/ Part 2]'''
 +
#* Activate the admin site
 +
#* Add the poll app to the admin site
 +
#* Modify the database using the admin site
 +
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial03/ Part 3]'''
 +
#* Configure URL handling
 +
#* Create some views
 +
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial04/ Part 4]'''
 +
#* Write a form that modifies the database
 +
#* Refactor to use generic views
  
 
== Group Project ==
 
== Group Project ==
* Make an e-commerce site using the MEAN stack.
 
  
 +
=== Extending the Polls App using Version Control ===
 +
 +
As your group project, you and your partner will each independently add an additional feature to the polls app you made in the individual portion. You will each be working in your own branch in your group Git repository.  When the features are complete, you will merge them back into the master branch.
  
To start, come up with use cases for your site. Think about what products the site is selling, what the user can do, and how information is stored etc.
+
# Someone in your group needs to copy their tutorial code from the individual portion into the master branch of the group repository.
 +
# After pushing and pulling, everyone should have the up-to-date master branch on their machine.
 +
# Each person in the group should then make a new branch named with their first name.
 +
# Each person can then individually work on their new feature.  Here are some ideas for new features that will all earn full credit.
 +
#: If there is a feature not on this list that you would like to add, save it for the Creative Portion.
 +
#: '''Important: Refer to the grading section for more details on our expectations for the features.'''
 +
#* Enable users to create and edit their own polls
 +
#* Add user accounts.  Polls voted on would be associated with the account.  Note that Django comes built-in with user accounts; you just need to wire a few things up.  Refer to [https://docs.djangoproject.com/en/dev/topics/auth/default/ the Django documentation] for details.
 +
#* Check for double votes using an IP address ''or'' a cookie
 +
#*: ''Food for Thought: What are the pros and cons of using IP addresses to block double votes compared to cookies?''
 +
#* Set a timeout for polls (e.g., ensure that the poll is active for only 7 days)
 +
#* Complete the last two steps of the Django tutorial (unit testing and appearance).
 +
# When someone completes their feature, they should merge their branch into the master branch, and everyone else in the group should merge the master branch (which now has the new feature) into their personal working branch.
  
You may start with the default MEAN.io app and build on top of it. This way you don't have to implement user authentication. You can also create a MEAN package and start from there. <br/>
+
<!--Not doing in summer, lab machines are still missing software.... On Demo Day, you will need to show the branching structure of your repository in SourceTree to the TA. -->
You may use phone models provided by the Angular Phone Catalog app as your products. Review the MongoDB section on how to import JSON data into MongoDB.
 
  
==== Tips ====
+
=== Creative Portion ===
  
Review the "Getting MEAN" section to understand the file system so you know how components work with each other.
+
As your creative portion, you may either add your own feature, or you may add another of the suggested features above. See the grading section for details.
Keep in mind that you don't have to understand what every line of code does. Whenever in doubt, refer to the default app.
 
  
You will be making changes on both the server side (the /server directory of your app) and the client side (in the /public directory)
+
=== Web Security and Validation ===
#* Server Side:
+
 
Model: add model files to the /server/models folder. There are Mongoose files that define the objects, they are referenced by the controllers.
+
Web frameworks take care of a lot of the security practices you learned in modules 2 and 3. For more information on Django security, refer to the Django documentation: https://docs.djangoproject.com/en/dev/topics/security/
View: nothing to change
+
 
Controller: add controller file(s) for your models (/server/controllers), they are referenced by the routing file
+
You still need to ensure that all pages on your site pass the W3C validation.
Routing: add a js file in /server/routes folder that responds to client side requests (same format as the one in the default app)
 
#* Client Side
 
Model: nothing to change
 
View: (/public/views directory) views are .html files. Each view that requires data from the server side should be tied to a controller, inside the controller, you can specify methods to update/save/delete objects in the DB,  the view and routing section gives an example
 
Controller: add controller files to /public/controllers. Easy once you go through the AngularJS tutorial. You may need to add multiple services in the /public/services directory (tutorial part 11, and the default MEAN app) to use data received from the back end and persist data across views (look up ngCookie, $cookieStore or the HTML 5 localStorage solution).
 
Routing: /public/routes directory of your app. Add entries for all views you will use, and specify their urls and templates (stored in /public/views).
 
  
 
== Grading ==
 
== Grading ==
  
We will be grading the following aspects of your work.  There are 100 points total.
+
We will be grading the following aspects of your work.  There are 75 points total.
 +
 
 +
# '''Django Tutorial Steps 1-4 (20 points):'''
 +
#* Database schema and models set up (5 points)
 +
#* Admin page working (5 points)
 +
#* URL routing is correct (5 points)
 +
#* Correct implementation of MVC (or, shall we say, MTV) architecture (5 points)
 +
# '''Extend Polls Application (45 Points):'''
 +
#* '''''Version Control (15 Points):'''''
 +
#** Each team member has their own branch in Git (5 points)
 +
#** The branching view in SourceTree indicates that features were merged into master as they were completed and from there merged into each member's working branch (10 points)
 +
#* '''''Features (20 Points):'''''
 +
#*: ''The rubric for five features are shown below; each one is worth 10 points.  You need only two of the five to satisfy this requirement. Implementation of a third additional feature will count for the Creative Portion; see below for details.''
 +
#** '''Unit Testing and Appearance'''
 +
#*** These are the last two steps of the Django 1.5 tutorial.
 +
#** '''Poll Creation and Editing'''
 +
#*** Users can specify any number of choices for the poll
 +
#*** If the "Timeout" feature is implemented, a timeout can be specified for the poll
 +
#**: ''Note:'' When a poll is edited, you can choose whether to always reset all votes, or whether to keep old votes between edits of the poll.
 +
#** '''User Accounts'''
 +
#*** Users can log in and log out
 +
#*** Votes on polls are associated with a user
 +
#** '''Preventing Double Votes'''
 +
#*** If using the IP-based approach, you store the IP address ''using the correct SQL data type'' (i.e., not a string)
 +
#*** If using the cookie-based approach, your cookie format is not something that the end user can easily figure out and manipulate
 +
#**: ''Note:'' You will not earn credit for implementing both an IP-based and a Cookie-based approach.
 +
#** '''Poll Timeout'''
 +
#*** Polls can have specified start times and end times
 +
#*** The poll entirely shuts down when it is "off" (i.e., the template should not load and the view should not allow more votes to be cast)
 +
#* '''''Best Practices (5 Points):'''''
 +
#** Code is well organized and conforms to Django conventions (3 points)
 +
#** All pages pass the W3C validator (2 points)
 +
#* '''''Usability (5 Points):'''''
 +
#** Site is intuitive to use and navigate (4 points)
 +
#** Site is visually appealing (1 point)
 +
# '''Creative Portion (10 Points):'''
 +
#* Each one of the five features listed in the "Features" section is worth 10 points.
 +
#* A novel feature not listed in the "Features" section may be worth a full 10 points.
 +
 
  
# '''Working E-commerce Site (75 points)'''
+
'''For Clarification Only:'''
#* MEAN installed and set up correctly (10 points).
+
* Zero Suggested Features = 20 Points Lost in Group Portion
#* Models set up correctly (15 points).
+
* One Suggested Feature = 10 Points Lost in Group Portion
#*: ''including products, orders, and adding payment and shipping address to the user model, you don't have to use phones from the Angular tutorial but you are responsible for populating your products table''
+
* Two Suggested Features = No Points Lost in Group Portion
#* Can display a list of all products, can search, can view details (15 points).
+
* Three Suggested Features = No Points Lost in Group Portion '''''and''''' 10 Points in Creative Portion
#* Can add to cart, view cart, cart sustains (data can be accessed across views and shouldn't be lost when page is refreshed) (20 points).
+
* Two Suggested Features + a TA-Approved Novel Feature = No Points Lost in Group Portion '''''and''''' 10 Points in Creative Portion
#* Can check out (5 points).
+
*: ''Note:'' No extra credit will be granted for completion of additional suggested features if your creative portion is already satisfied.
#*: ''A user can check out if she has a payment option and a shipping address, on a successful checkout, the cart should be emptied''
 
#* Can view orders, delete orders (10 points).
 
#*: ''An order is associated to a user and should contain at least four fields: date, total, number of products, shipped to''
 
# '''Design and Misc (5 Points):'''
 
#* Site is overall user friendly and utilizes Bootstrap (3 points).
 
#* App passes JShint with no errors (2 points)
 
# '''Creative Portion (20 Points):'''
 
#* TBD
 
  
 
[[Category:Module 9]]
 
[[Category:Module 9]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Latest revision as of 07:17, 22 August 2014

In Module 9, you will learn about Git, a version control system, and Django, a web framework.

This article contains your assignments for Module 9.

Reading

The following articles on the online class wiki textbook contain information that will help you complete the assignments.

Individual Assignments

Django Tutorial

The web framework we will be using in Module 9 is called Django. Django is the dominant Python-based web framework and is useful for large web sites.

Before you may begin, you need to install Django. You may do this using pip, which you installed in Module 4. Django's package name in pip is Django.

Once you have Django installed, complete the official Django tutorial. You will be creating a simple poll app. Complete the first four parts of the tutorial for the individual portion. You may complete steps 5 and 6 during the group portion.

Tip: It is recommended that you install a copy of Python and Django on your local computer. This way, you will not need to upload the files to your server every time you make a change, because your server will be running locally.

Tip: When testing Django on your EC2 instance, make sure to open port 8000 for your instance on AWS (and to click "apply rule changes").

  1. Part 1
    • Create a project
    • Start the development server
    • Setup an SQLite database
    • Create the Polls app and define the models
    • Interact with the database using the interactive python shell
  2. Part 2
    • Activate the admin site
    • Add the poll app to the admin site
    • Modify the database using the admin site
  3. Part 3
    • Configure URL handling
    • Create some views
  4. Part 4
    • Write a form that modifies the database
    • Refactor to use generic views

Group Project

Extending the Polls App using Version Control

As your group project, you and your partner will each independently add an additional feature to the polls app you made in the individual portion. You will each be working in your own branch in your group Git repository. When the features are complete, you will merge them back into the master branch.

  1. Someone in your group needs to copy their tutorial code from the individual portion into the master branch of the group repository.
  2. After pushing and pulling, everyone should have the up-to-date master branch on their machine.
  3. Each person in the group should then make a new branch named with their first name.
  4. Each person can then individually work on their new feature. Here are some ideas for new features that will all earn full credit.
    If there is a feature not on this list that you would like to add, save it for the Creative Portion.
    Important: Refer to the grading section for more details on our expectations for the features.
    • Enable users to create and edit their own polls
    • Add user accounts. Polls voted on would be associated with the account. Note that Django comes built-in with user accounts; you just need to wire a few things up. Refer to the Django documentation for details.
    • Check for double votes using an IP address or a cookie
      Food for Thought: What are the pros and cons of using IP addresses to block double votes compared to cookies?
    • Set a timeout for polls (e.g., ensure that the poll is active for only 7 days)
    • Complete the last two steps of the Django tutorial (unit testing and appearance).
  5. When someone completes their feature, they should merge their branch into the master branch, and everyone else in the group should merge the master branch (which now has the new feature) into their personal working branch.


Creative Portion

As your creative portion, you may either add your own feature, or you may add another of the suggested features above. See the grading section for details.

Web Security and Validation

Web frameworks take care of a lot of the security practices you learned in modules 2 and 3. For more information on Django security, refer to the Django documentation: https://docs.djangoproject.com/en/dev/topics/security/

You still need to ensure that all pages on your site pass the W3C validation.

Grading

We will be grading the following aspects of your work. There are 75 points total.

  1. Django Tutorial Steps 1-4 (20 points):
    • Database schema and models set up (5 points)
    • Admin page working (5 points)
    • URL routing is correct (5 points)
    • Correct implementation of MVC (or, shall we say, MTV) architecture (5 points)
  2. Extend Polls Application (45 Points):
    • Version Control (15 Points):
      • Each team member has their own branch in Git (5 points)
      • The branching view in SourceTree indicates that features were merged into master as they were completed and from there merged into each member's working branch (10 points)
    • Features (20 Points):
      The rubric for five features are shown below; each one is worth 10 points. You need only two of the five to satisfy this requirement. Implementation of a third additional feature will count for the Creative Portion; see below for details.
      • Unit Testing and Appearance
        • These are the last two steps of the Django 1.5 tutorial.
      • Poll Creation and Editing
        • Users can specify any number of choices for the poll
        • If the "Timeout" feature is implemented, a timeout can be specified for the poll
        Note: When a poll is edited, you can choose whether to always reset all votes, or whether to keep old votes between edits of the poll.
      • User Accounts
        • Users can log in and log out
        • Votes on polls are associated with a user
      • Preventing Double Votes
        • If using the IP-based approach, you store the IP address using the correct SQL data type (i.e., not a string)
        • If using the cookie-based approach, your cookie format is not something that the end user can easily figure out and manipulate
        Note: You will not earn credit for implementing both an IP-based and a Cookie-based approach.
      • Poll Timeout
        • Polls can have specified start times and end times
        • The poll entirely shuts down when it is "off" (i.e., the template should not load and the view should not allow more votes to be cast)
    • Best Practices (5 Points):
      • Code is well organized and conforms to Django conventions (3 points)
      • All pages pass the W3C validator (2 points)
    • Usability (5 Points):
      • Site is intuitive to use and navigate (4 points)
      • Site is visually appealing (1 point)
  3. Creative Portion (10 Points):
    • Each one of the five features listed in the "Features" section is worth 10 points.
    • A novel feature not listed in the "Features" section may be worth a full 10 points.


For Clarification Only:

  • Zero Suggested Features = 20 Points Lost in Group Portion
  • One Suggested Feature = 10 Points Lost in Group Portion
  • Two Suggested Features = No Points Lost in Group Portion
  • Three Suggested Features = No Points Lost in Group Portion and 10 Points in Creative Portion
  • Two Suggested Features + a TA-Approved Novel Feature = No Points Lost in Group Portion and 10 Points in Creative Portion
    Note: No extra credit will be granted for completion of additional suggested features if your creative portion is already satisfied.