Difference between revisions of "Module 7"

From CSE330 Wiki
Jump to navigationJump to search
 
(24 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]]
 
*[[Preparations]]
 
*[[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://code.angularjs.org/1.4.7/docs/tutorial this] tutorial, and focus on steps 0-10.  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:''' If you are running the Angular-Seed project from EC2, open the '''package.json''' file in the coffees directory
+
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.
  
Find the line that says
+
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)
  
<source lang="bash">"start": "http-server -a localhost -p 8000 -c-1", </source>
+
==== 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.
  
and change it to
+
''Note that exceptions can be made to these guidelines, but make sure to get approval from a TA.''
  
<source lang="bash">"start": "http-server -p 8000 -c-1",</source>
+
===== 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
  
This will allow for connections other than just localhost.  
+
== 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!
  
'''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.
+
======Languages/Frameworks used (20 points)======
 
+
*10 - Learned/Used Vue.js frontend
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.
+
*10 - Learned/Used PHP Laravel backend
 
+
*0 - MySQL Database
=== Creating the Site ===
+
======Functionality (60 points)======
+
*5 Users can input a url and receive a shortened url that redirects to it.
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:
+
*10 Url redirect lasts 1 week before the shortened link doesn't work
+
*10 Users can register, login, and logout
[[File:Coffees-bare (2).png|upright=2|thumb|center|coffees.html]]
+
*10 Logged in users can edit and delete their shortened URLs
 
+
*15 Logged in users can purchase a shortened URL via Stripe integration
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.
+
*10 Database contains Users, Links, and Purchases with the necessary columns and column types to maintain the above functionality
+
======Best Practices (5 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.''
+
*3 Code is readable and well formatted
 
+
*2 All pages pass the html validator
*''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. ''
+
======Creative Portion (10 points)======
Here’s what your reviews.html should look like before CSS:
 
 
 
[[File:reviews-bare.png|thumb|upright=2|center|reviews.html]]
 
 
 
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).
 
In app.js, you will need to copy the following array into your controller:
 
 
 
    $scope.coffees =
 
        [
 
        {'id': 1,
 
        'brand': "Average Andy's Coffee",
 
        'name': 'Regular Coffee',
 
        'country': 'Denmark',
 
        'reviews': [
 
                {'rating': 3,
 
                'comment': "Could've been crispier",
 
                'reviewer': "Chris P. Bacon"
 
                }
 
        ]
 
        },
 
        {'id': 2,
 
        'brand': "Jimmy's Coffee",
 
        '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, if you'd like to make it easier on yourself), 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. Type the following in your command file from the coffees directory:
 
          bower install angular-bootstrap
 
 
 
The following should be in your index.html *before you include app.js, but after you put the source files for bower_components/angular...* if you are using UI Bootstrap:
 
 
 
          <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">         
 
          <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>
 
 
 
 
 
After installing and configuring your own css/bootstrap, your coffee site may look something like this (although it can look any way you want, this was just one person's design):
 
 
 
[[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 55 points total.
+
___________
 
 
  
'''Assignment must be demoed by the Monday at 1:00 PM of the week after the assignment is due. We will grade late penalties based on Bitbucket submission time-stamps, so you are allowed to demo at TA office hours. However, after Monday, you will receive a late penalty for the assignment solely based on when you demo. Please import the four modified files to bitbucket'''
+
Your project will be graded '''in person''' during the last week of classes, using the rubric you create.
 
 
#''You must save your repo as:''
 
#*"<Season><year>-Module<#>-FirstName-LastName-StudentID"
 
#*(ie. Spring2025-Module3-John-Doe-201343)
 
  
 
___________
 
___________
 
 
# '''Completed Google Angular Tutorial steps 0-10 (5 points)'''
 
# '''Completed coffee web application (50 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 or two controller(s) for the project ( 2 points)
 
#*** Use scope injection  (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.

___________