Difference between revisions of "Module 9"
(Created page with '__NOTOC__ 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…') |
|||
| Line 12: | Line 12: | ||
*[[Express]] | *[[Express]] | ||
*[[AngularJS]] | *[[AngularJS]] | ||
| − | *[[ | + | *[[Getting MEAN]] |
| − | == Assignments == | + | == Individual Assignments == |
| − | === | + | === Tutorials === |
| − | + | Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works. | |
| − | + | === Install MEAN === | |
| − | |||
| − | |||
| − | + | 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). | |
| + | Open up the app in your browser (localhost:3000), and understand what the default app does. | ||
| + | |||
| + | |||
| + | == Group Project == | ||
| + | * | ||
| + | * Make an e-commerce site using the MEAN stack. | ||
| + | * | ||
| + | |||
| + | 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. | ||
| + | |||
| + | 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/> | ||
| + | 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. | ||
==== How to Edit Your File ==== | ==== How to Edit Your File ==== | ||
Revision as of 01:55, 30 April 2014
This module introduces MEAN, a fullstack web framework that uses MongoDB, Express, AngularJS and Node.js.
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 introduce 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.
Reading
The following articles on the online class wiki textbook contain information that will help you complete the assignment.
Individual Assignments
Tutorials
Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works.
Install MEAN
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). Open up the app in your browser (localhost:3000), and understand what the default app does.
Group Project
- Make an e-commerce site using the MEAN stack.
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.
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.
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.
How to Edit Your File
Starting in Module 2, we will be using Komodo Edit as our primary development tool. However, for the purposes of this exercise, we want you to edit your HTML file using a more basic text editor.
- On Windows, consider Notepad++. This is already installed for you in the CEC labs. If you prefer to use your personal computer, you can download it from here.
- On Mac OS X, consider TextWrangler. You can download it from here or from the Apple App Store.
- Most Linux distributions come with gedit pre-installed, which you can use for this lab.
Please save your file as birthday.html from the plain text editor of your choice.
Important Note: Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will not work. What you need is a plain text editor.
How to View Your HTML Document
Once you have birthday.html, you can open it using your favorite web browser (like Firefox). For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox. When the file opens, it should be under the file:/// protocol.
In Module 2, we will install a web server that serves up pages on the http:// protocol.
Validation
Your birthday card must pass the W3C Validator with no errors. From the validator, you can choose to upload your file.
For more information on validation, see the HTML and CSS guide: HTML and CSS#Validation
Make a Portal to a DuckDuckGo Search
Write an HTML document containing a form that searches DuckDuckGo's web site. You should be able to type in a search term and have your form load the DuckDuckGo search page.
- Visit www.duckduckgo.com. Search for something easy to spot in the URL, like "QUERY".
- Look at the URL of the search page. What is the script URL? What is the query variable?
- Make an HTML document containing a text field and a submit button. Typing a search query into the text field and pressing the submit button should load the DuckDuckGo search page.
Grading
We will be grading the following aspects of your work. There are 50 points total.
- Birthday Card (30 Points):
- Correct usage of HTML and CSS in your birthday card (10 points).
- Make sure that you use HTML for "content" and CSS for "appearance." Don't write inline styles: use a stylesheet.
- Experimenting with at least 5 different CSS properties in your birthday card (10 points).
- Birthday card passes the W3C validation for the declared DOCTYPE (e.g., HTML 5) (10 points).
- Correct usage of HTML and CSS in your birthday card (10 points).
- Search Portal (15 Points):
- DuckDuckGo search portal is functional (15 points).
- Account Created on Amazon Web Services (5 Points)
