Difference between revisions of "Module 7"

From CSE330 Wiki
Jump to navigationJump to search
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
 +
= Creative Project =
 +
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.
  
'''THIS IS NOT THE CREATIVE PROJECT ASSIGNMENT!
+
You’re free to choose which frameworks/languages you’ll use, and you’ll earn more base points for using more, but '''you’re required to learn at least one new framework/technology.'''
'''
 
  
This is the old Module 7 assignment and an example of a web framework that you may want to explore for the Creative Project.
+
'''As an example''':
  
Information about the Creative Project is available in the final lecture slides and video.
+
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.
  
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.
+
== 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.
  
== Optional Reading ==
+
As a general structure, your project will consist of:
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:
+
*Front end
*[[Git]]
+
*Backend
*[[Preparations]]
+
*Database
 +
*Styling
 +
*Best practices
 +
(Though note that using all may not be necessary for your project! Reallocate as you need)
  
== Individual Assignment ==
+
==== General Rubric Guidelines ====
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.  
+
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 bitbucket on time (yes, we will be checking your commit timestamps!)
 +
*[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.
  
Now that you have finished the tutorial, we will make a coffee rating website!
+
''Note that exceptions can be made to these guidelines, but make sure to get approval from a TA.''
  
=== Setting up ===
+
===== Points you can allocate for frameworks =====
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’.
+
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, 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
  
'''Note:''' If you are running the Angular-Seed project from EC2, open the '''package.json''' file in the coffees directory
+
== 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.
Find the line that says
+
Your rubric could look like the following:
 
+
======Rubric turned in on time (5 points)======
<source lang="bash">"start": "http-server -a localhost -p 8000 -c-1", </source>
+
======Languages/Frameworks used (20 points)======
 
+
*10 - Learned/Used Vue.js frontend
and change it to
+
*10 - Learned/Used PHP Laravel backend
 
+
*0 - MySQL Database
<source lang="bash">"start": "http-server -p 8000 -c-1",</source>
+
======Functionality (60 points)======
 
+
*5 Users can input a url and receive a shortened url that redirects to it.
This will allow for connections other than just localhost.
+
*10 Url redirect lasts 1 week before the shortened link doesn't work
 
+
*10 Users can register, login, and logout
'''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.
+
*10 Logged in users can edit and delete their shortened URLs
 
+
*15 Logged in users can purchase a shortened URL via Stripe integration
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 Database contains Users, Links, and Purchases with the necessary columns and column types to maintain the above functionality
 
+
======Best Practices (5 points)======
=== Creating the Site ===
+
*3 Code is readable and well formatted
+
*2 All pages pass the html validator
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:
+
======Creative Portion (10 points)======
 
[[File:Coffees-bare (2).png|upright=2|thumb|center|coffees.html]]
 
 
 
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.
 
 
 
 
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:
 
          npm install -g bower
 
          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">
 
          <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 ==
 
 
We will be grading the following aspects of your work.  There are 55 points total.
 
 
  
 
'''Assignments must be committed to Bitbucket 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.'''  
 
'''Assignments must be committed to Bitbucket 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.'''  
Line 160: Line 73:
 
___________
 
___________
  
 
+
Your project will be graded '''in person''' during the last week of classes, using the rubric you create.
# '''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)
 
  
 
___________
 
___________
 
'''Creative Project Rubric'''
 
 
You will also be submitting your Creative Project rubric alongside Module 7. Make a new repo <Season><year>-CP-StudentID1-StudentID2, and place your Creative Project rubric in a README.md in that repository.
 
 
Your Creative Project point breakdown should total to 95 points. An additional 5 points come from submitting the rubric on time. You may assign up to 20 points for the creative portion.
 
 
The project itself, you will be using a new framework or technology of your choice to build a project.
 
  
 
[[Category:Module 7]]
 
[[Category:Module 7]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Revision as of 20:32, 25 March 2019

Creative Project

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 base points for using more, 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
  • Backend
  • 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 bitbucket on time (yes, we will be checking your commit timestamps!)
  • [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, 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)
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 Bitbucket 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.

___________