Difference between revisions of "Module 7"

From CSE330 Wiki
Jump to navigationJump to search
 
(48 intermediate revisions by 6 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
−
This module will be teaching “Angular JS,” a framework that works with Javascript and HTML to create a front-end of a website much easier and faster. It is part of the oft-used “MEAN stack,” which is a stack that entirely uses Javascript, for the database, back-end, and front-end.  
+
The goal of the creative project is for you to learn a new framework or language that you may be interested in. This is a good opportunity to get a head start on learning the frameworks/languages your employer/potential employer uses.
  
 +
You’re free to choose which frameworks/languages you’ll use, and you’ll earn more points for learning more or harder frameworks, but '''you’re required to learn at least one new framework/technology.'''
  
−
== Optional Reading ==
+
'''As an example''':
−
To learn more about the MEAN stack, as well as using Git to do more than check out and commit repos, check out the Old module 7 reference pages:
 
−
[[git]]
 
−
[[preperations]]
 
−
[[getting_mean]]
 
  
−
== Individual Assignment ==
+
You cannot use the combination of Plain HTML/JavaScript (frontend), PHP (backend), and MySQL (Database) because we've covered those extensively in class.
−
In this assignment you will build an Angular website. To learn Angular, please view and complete [https://docs.angularjs.org/tutorial this] tutorial, and focus on steps 0-9.  The other steps and the tests at the bottom of each step are helpful and to master Angular you will need to learn these. However, for this module, you are not required to do these parts.  
 
  
−
Now that you have finished the tutorial, we will make a coffee rating website!
+
You could, however, use React.JS (frontend), PHP, and MySQL, because your React front end would be new.
  
−
=== Setting up ===
+
== Creating Your Rubric ==
−
To help you get started, download a skeleton on which you will build your angular app on, called Angular-Seed. Go [https://github.com/angular/angular-seed/blob/master/README.md here] and follow the instruction to download the seed, naming your project ‘coffees’.
 
−
Note: Although you can ignore a lot of these files (the node directory, the karma files, view1/view2, etc), by downloading the seed you can get around issues such as creating the server (this does it for you), and if you were going to use a backend, having node all set up for you is really nice.
 
  
−
Now that you’ve downloaded the seed, you will need to modify the following files: app.js, and index.html. Furthermore, you will add the following files: coffees.html, and reviews.html.
+
Before creating a rubric, you should come up with an idea for a site you want to build. From there, check [https://classes.engineering.wustl.edu/cse330/index.php?title=Web_Frameworks here] for guidance on which frameworks/languages to learn for your project and for links on how to get started with each.
  
−
=== Creating the Site ===
+
As a general structure, your project will consist of:
−
+
*Front-end
−
Your site will need to use ‘ngRoute’ with two views on top of index.html. One view (coffees.html) will be a list of all coffees in the database, sorted by name. There should be a search box at the top to find a particular coffee. Each listing in the table should include a brand, a name, a location, and a link to see the reviews of that coffee. Here’s what it should look like before CSS:
+
*Back-end
−
+
*Database
−
[[File:Coffees-bare (2).png|upright=2|thumb|center|coffees.html]]
+
*Styling
 +
*Best practices
 +
(Though note that using all may not be necessary for your project! Reallocate as you need)
  
−
Once you click the link, it should go to the second view (reviews.html). This should be another table, of all of the reviews for the coffee list.  
+
==== General Rubric Guidelines ====
−
+
Your rubric will add up to '''100 points''' (including the 5 points earned for submitting your rubric on time). For each component of your stack, you can allocate the following numbers of points:
−
''Note: in order to keep a variable in a controller when you switch between two different views (instead of resetting the variables), use $rootScope as a dependency for that controller.''
+
*5 points for creating a rubric and uploading it to Github on time (yes, we will be checking your commit timestamps!). Please make sure you check your rubric out with a TA, or else it would not be considered submitted.
 +
*[10 - 40] points: Learning and implementing new framework(s).
 +
*Functionality
 +
**Think about what's happening in your front end, backend, and database that creates functionality. See example rubric.
 +
*5 points: Best Practices
 +
**Code well formatted
 +
**HTML output passes the validator
 +
*[0 - 20] points: Creative Portion
 +
*[0 - 5] points: Styling. "Looks really cool" or "Used Bootstrap" would '''not''' earn any points. Learning and implementing SCSS/SASS, animations, or making your page responsive/mobile-friendly would.
  
−
*''For example, if you want to keep the id of the selected coffee, making it $rootScope.selectedID in your controller will keep the value of that variable when you switch from coffees.html to reviews.html. ''
+
''Note that exceptions can be made to these guidelines, but make sure to get approval from a TA.''
−
Here’s what your reviews.html should look like before CSS:
 
  
−
[[File:reviews-bare.png|thumb|upright=2|center|reviews.html]]
+
===== Points you can allocate for frameworks =====
 +
Because some stacks have a higher learning curve, more points will be earned for using them. Use the following as a guide:
 +
*React, Vue, Angular, and other frontend frameworks : 10
 +
*Express (Node.js framework), Laravel, Bottle, Flask, other back-end micro frameworks: 10
 +
*Full stack frameworks like Django (python): 20
 +
*Learning a new database system:
 +
**Mongo DB: 10
 +
**Firebase: 5 (lower learning curve)
 +
**Other SQL Databases (Postgres, MariaDB): 5
  
−
At all times, there should be a button at the top (not in either view, but in the main page) that takes you home (coffees.html).  
+
== Example Rubric ==
−
In app.js, you will need to copy the following array into your controller:
+
Say your project idea is to re-create Bitly (the URL shortener), where shortened URLs expire after 1 week, but users can purchase the shortened URL (using stripe) for it to work forever. You decide you want to use Vue for your frontend, Laravel for your backend, and a MySQL database.
 +
Your rubric could look like the following:
 +
======Rubric turned in on time (5 points)======
 +
Remember to get it checked out by a TA!
  
−
    $scope.coffees =
+
======Languages/Frameworks used (20 points)======
−
        [
+
*10 - Learned/Used Vue.js frontend
−
        {'id': 1,
+
*10 - Learned/Used PHP Laravel backend
−
        'brand': "Average Andy's Coffee",
+
*0 - MySQL Database
−
        'name': 'Regular Coffee',
+
======Functionality (60 points)======
−
        'country': 'Denmark',
+
*5 Users can input a url and receive a shortened url that redirects to it.
−
        'reviews': [
+
*10 Url redirect lasts 1 week before the shortened link doesn't work
−
                {'rating': 3,
+
*10 Users can register, login, and logout
−
                'comment': "Could've been crispier",
+
*10 Logged in users can edit and delete their shortened URLs
−
                'reviewer': "Chris P. Bacon"
+
*15 Logged in users can purchase a shortened URL via Stripe integration
−
                }
+
*10 Database contains Users, Links, and Purchases with the necessary columns and column types to maintain the above functionality
−
        ]
+
======Best Practices (5 points)======
−
        },
+
*3 Code is readable and well formatted
−
        {'id': 2,
+
*2 All pages pass the html validator
−
        'brand': "Jimmy's Coffee",
+
======Creative Portion (10 points)======
−
        'name': 'Mocha',
 
−
        'country': 'America',
 
−
        'reviews': [
 
−
        {'rating': 10,
 
−
        'comment': 'What everyone should drink in the morning!',
 
−
        'reviewer': 'Earl Lee Riser'
 
−
        },
 
−
        {'rating': 10,
 
−
        'comment': 'A genius of everything coffee',
 
−
        'reviewer': 'Bob'
 
−
        }
 
−
        ]
 
−
        },
 
−
        {'id': 3,
 
−
        'brand': "We Did Our Best",
 
−
        'name': 'Latte',
 
−
        'country': 'France',
 
−
        'reviews': [
 
−
        {'rating': 1,
 
−
        'comment': " a 'latte' yuckiness.",
 
−
        'reviewer': 'Tim Burr'
 
−
        },
 
−
        {'rating': 1,
 
−
        'comment': 'Is this even coffee?',
 
−
        'reviewer': 'Sue Flay'
 
−
        },
 
−
        {'rating': 1,
 
−
        'comment': 'The grossest thing I have ever had.',
 
−
        'reviewer': 'Myles Long'
 
−
        },
 
−
        {'rating': 5,
 
−
        'comment': 'I dont know what the fuss is about, i dont think its too bad!',
 
−
        'reviewer': 'Sara Bellum'
 
−
        }
 
−
        ]
 
−
        },
 
−
        {'id': 4,
 
−
        'brand': "Jimmy's Special Coffee",
 
−
        'name': 'Americano',
 
−
        'country': 'America',
 
−
        'reviews': [
 
−
        {'rating': 10,
 
−
        'comment': 'If I could rate it higher, I would!',
 
−
        'reviewer': 'Justin Case'
 
−
        },
 
−
        {'rating': 10,
 
−
        'comment': 'He does it again!',
 
−
        'reviewer': 'Eileen Dover'
 
−
        }
 
−
        ]
 
−
        }];
 
−
 
 
−
This will be your “database,” as we are not going to use the “$http” dependency.
 
−
 
 
−
=== Style ===
 
−
 
 
−
Finally, use CSS and UI Bootstrap (view the reference [https://angular-ui.github.io/bootstrap/ here] ), to make the site look pretty.
 
−
Although you’re allowed to use whatever CSS/Bootstrap you want, UI Bootstrap makes things really easy. For example, using stars in the rating directives to display ratings instead of a number. 
 
−
Please follow the installation instructions carefully. The following should be in your index.html if you are using UI Bootstrap:
 
−
          <script src "bower_components/angular-bootstrap/ui-bootstrap.js"></script>
 
−
          <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js" type="text/javascript"></script>
 
−
          <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
 
−
 
 
−
At the end, your coffee site may look something like this:
 
−
 
 
−
[[File: Coffee-css.png|thumb|upright=2|none|Coffee page]]
 
−
[[File: Reviews-css.png|thumb|upright=2|none|Review page]]
 
  
 
== Grading ==
 
== Grading ==
  
 +
'''Assignments must be committed to Github by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.'''
  
−
We will be grading the following aspects of your work.  There are 100 points total.
+
___________
  
−
 
+
Your project will be graded '''in person''' during the last week of classes, using the rubric you create.
−
'''Assignments must be demoed within 2 weeks of the assignment being due. We will grade late penalties based on Bitbucket submission time-stamps, so you are allowed to demo at TA office hours. However, after two weeks of not demoing, you will receive a zero for the assignment.'''
 
−
 
 
−
#''You must save your repo as:''
 
−
#*"<Season><year>-Module<#>-FirstName-LastName-StudentID"
 
−
#*(ie. Spring2025-Module3-John-Doe-201343)
 
  
 
___________
 
___________
−
 
−
 
−
# '''Completed Google Angular Tutorial steps 0-9 (5 points)'''
 
−
# '''Completed coffee web application (45 points)'''
 
−
#* Index.html (5 points)
 
−
#** Working button with back to home button at all times (3 points)
 
−
#** Set up Angular correctly (2 points)
 
−
#* App.js (10 points)
 
−
#** Set  up module ( 5 points)
 
−
#** Controller (5 points)
 
−
#*** Have one controller for the project ( 2 points)
 
−
#*** Use scope and rootScope injections (3 points)
 
−
#* Coffees.html (15 points):
 
−
#** List of all coffees sorted by name (3 points)
 
−
#** Search bar, working correctly (4 points)
 
−
#** Has Name, Brand, Location, and Review link all displayed in one table (3 points)
 
−
#** Review link works, and takes you to another view (5 points)
 
−
#* Reviews.html
 
−
#** Reviews of correct coffee, and only correct coffee, are listed (10 points)
 
−
#** All reviews are listed ( 2 points)
 
−
#** Rating, comment, and commenter are listed in the same table. (3 points)
 
−
#* BootStrapping
 
−
#** Site looks good, intuitive, and professional ( 5 points)
 
−
 
  
 
[[Category:Module 7]]
 
[[Category:Module 7]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Latest revision as of 20:33, 20 August 2019

The goal of the creative project is for you to learn a new framework or language that you may be interested in. This is a good opportunity to get a head start on learning the frameworks/languages your employer/potential employer uses.

You’re free to choose which frameworks/languages you’ll use, and you’ll earn more points for learning more or harder frameworks, but you’re required to learn at least one new framework/technology.

As an example:

You cannot use the combination of Plain HTML/JavaScript (frontend), PHP (backend), and MySQL (Database) because we've covered those extensively in class.

You could, however, use React.JS (frontend), PHP, and MySQL, because your React front end would be new.

Creating Your Rubric

Before creating a rubric, you should come up with an idea for a site you want to build. From there, check here for guidance on which frameworks/languages to learn for your project and for links on how to get started with each.

As a general structure, your project will consist of:

  • Front-end
  • Back-end
  • Database
  • Styling
  • Best practices

(Though note that using all may not be necessary for your project! Reallocate as you need)

General Rubric Guidelines

Your rubric will add up to 100 points (including the 5 points earned for submitting your rubric on time). For each component of your stack, you can allocate the following numbers of points:

  • 5 points for creating a rubric and uploading it to Github on time (yes, we will be checking your commit timestamps!). Please make sure you check your rubric out with a TA, or else it would not be considered submitted.
  • [10 - 40] points: Learning and implementing new framework(s).
  • Functionality
    • Think about what's happening in your front end, backend, and database that creates functionality. See example rubric.
  • 5 points: Best Practices
    • Code well formatted
    • HTML output passes the validator
  • [0 - 20] points: Creative Portion
  • [0 - 5] points: Styling. "Looks really cool" or "Used Bootstrap" would not earn any points. Learning and implementing SCSS/SASS, animations, or making your page responsive/mobile-friendly would.

Note that exceptions can be made to these guidelines, but make sure to get approval from a TA.

Points you can allocate for frameworks

Because some stacks have a higher learning curve, more points will be earned for using them. Use the following as a guide:

  • React, Vue, Angular, and other frontend frameworks : 10
  • Express (Node.js framework), Laravel, Bottle, Flask, other back-end micro frameworks: 10
  • Full stack frameworks like Django (python): 20
  • Learning a new database system:
    • Mongo DB: 10
    • Firebase: 5 (lower learning curve)
    • Other SQL Databases (Postgres, MariaDB): 5

Example Rubric

Say your project idea is to re-create Bitly (the URL shortener), where shortened URLs expire after 1 week, but users can purchase the shortened URL (using stripe) for it to work forever. You decide you want to use Vue for your frontend, Laravel for your backend, and a MySQL database. Your rubric could look like the following:

Rubric turned in on time (5 points)

Remember to get it checked out by a TA!

Languages/Frameworks used (20 points)
  • 10 - Learned/Used Vue.js frontend
  • 10 - Learned/Used PHP Laravel backend
  • 0 - MySQL Database
Functionality (60 points)
  • 5 Users can input a url and receive a shortened url that redirects to it.
  • 10 Url redirect lasts 1 week before the shortened link doesn't work
  • 10 Users can register, login, and logout
  • 10 Logged in users can edit and delete their shortened URLs
  • 15 Logged in users can purchase a shortened URL via Stripe integration
  • 10 Database contains Users, Links, and Purchases with the necessary columns and column types to maintain the above functionality
Best Practices (5 points)
  • 3 Code is readable and well formatted
  • 2 All pages pass the html validator
Creative Portion (10 points)

Grading

Assignments must be committed to Github by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.

___________

Your project will be graded in person during the last week of classes, using the rubric you create.

___________

Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Module_7&oldid=2680"