•   Course Home  
•   Information  
  • Syllabus
  • Roster
  • Instructor
•   Class Notes  
  • List of Current & Completed Classes
  • List of Future Classes

  ---

  • Class Videos
•   Assignments  
  • Assignment No. 1 — Thursday, February 4, 2016
  • Assignment No. 2 — Tuesday, March 8, 2016
  • Assignment No. 3 — Thursday, April 14, 2016
  • Assignment No. 4 — Thursday, April 21, 2016

  ---

  • Assignment Submission Form
  • Complete List of Assignments
•   Resources  
  • Getting MEAN Code Repository on GitHub
  • Getting MEAN Publisher’s Forum
  • Getting MEAN Publisher’s Page
  • Simon Holmes Home Page

  ---

  • Poll Everywhere

  ---

  • Textbooks
  • References & Tutorials
  • Cool Stuff
  • Twitter Tricks
  • Of Interest
  • Tools, Utilities, IDEs, & Test Environments
  • Writing Resources

  ---

  • Complete List of Resources

Notes for Class No. 2

Semester Project Discussions and Partner Meetings and Introduction to the MEAN Stack

Thursday, January 21, 2016

A video of this class is (or will be) posted at:  http://echo360.uml.edu/heines2016/comp4620-201.html

Handouts and Materials

• Assignment No. 1

Openings / Announcements / Reminders

For this class you were to complete your registration for this course by filling out the form at https://docs.google.com/forms/d/166cx_uRhYJ24qoI-zMrs1dpWVyOw5iloQ-ojjF41lv4/viewform

• as of 2:00 PM on Wednesday afternoon, 9 of you had done this
• as of 12:00 noon today, only 23 of you had done this
• if you have not yet done this, please do so as soon as you read this

Please please please remember to put COMP-4620 in the subject header of your emails to me

There are some good project ideas posted on Piazza, but I would like to see more, please

• the post to respond to is at https://piazza.com/class/iiryipeqhix7au?cid=9

If you’ve been getting the Piazza posts, you can see that Curran is reading, responding, and posting

• see his “Hello from San Francisco” post for links to two worthwhile videos
• User Interface (UX) Techniques • Janne Jul Jensen
  • This is not about implementation, it is about design of the user experience.  The points she brings up are all extremely relevant to the phase you all are currently in for your semester projects, the ideation phase.  She discusses a recommended approach of sketching out your full user interface on paper, then creating more detailed mock-ups, then doing the real implementation.  This is much easier than going straight to the full implementation.
    
• Introduction to Angular.js in 50 Examples (part 1) - YouTube
  • This is a guest lecture I gave as part of the GUI Programming course at UML in March 2014.  If you sit down for an hour and watch this, you will gain a solid grasp of the capabilities of Angular.  I’m sure some APIs have changed since this was made (e.g., the routing module), but the core concepts are the same.

Kate Carcia, whom I spoke about in our last class, also wrote to me and is monitoring the list

• Kate will also come in to address the class about her experience working in the UI field at some point this semester

Class Notes

Related reading for this class:  Sample Project Proposals and GetMEAN: Chap. 2

Today additional time will be allotted to reviewing previous semesters’ project proposals (linked in Assignment No. 1), looking at previous semesters’ actual final projects (linked below if still available), and meeting with potential project partners to discuss ideas and begin planning your project.

Please respond to the Project Ideas Forum question that I posted on Piazza with your project ideas so that others can know what you’re thinking and appropriate project teams can be built.

For next Tuesday’s class

• try to solidify your team and meet with your partners to establish clear goals
  • see the grading criteria in Assignment No. 1
  • we will discuss putting the proposal together in much more detail next week
• get the MEAN stack installed on your system
• by then you should have read Chapters 1 and 2 and started Chapter 3

MEAN Stack Architecture

2.1 A common MEAN stack architecture  (p. 25)

REST API = REpresentational State Transfer Application Program Interface
SPA = Single Page Application

• “a REST API is a stateless interface to your application”
• “In the case of the MEAN stack the REST API is used to create a stateless interface to your database, enabling a way for other applications to work with the data.”
• you build the REST API yourself

The book contains a discussion of the pros and cons of single page applications

• see particularly 2.2.4 (p. 28): “To SPA or not to SPA?”

The application developed in the book is a blog engine with two basic interfaces

The book explains the advantages of building a REST API vs. integrating the database access with your application code

• the integrated approach quickly becomes unwieldy as additional application functionality is added

Building one’s own toolkit

• consider the work you need to do to get a new system really usable for yourself
• consider the software tools you will want to take with you to a new job
• I’m basically a Windows guy, and my toolkit on that platform includes TakeCommand, for which I have over 1,000 aliases and about 100 batch files defined
  • JP Software — https://jpsoft.com/company/company.html
• I’m also an UltraEdit user, and I simply couldn’t live without that editor
  • IDM Computer Solutions, Inc. — http://www.ultraedit.com/company/about_us.html
• and of course there are other “must have” applications on my system, including the Microsoft Office Suite

2.5 Breaking the development into stages  (p. 40)

The book has two aims:

• “Build an application on the MEAN stack”
• “Learn about the different layers of the stack as we go”

2.5.1 Rapid prototype development stages  (pp. 40-41)

Stage 1:  Build a static site

• aims:
  • “to quickly figure out the layout”
  • “to ensure that the user flow makes sense”
• in this course, this is the purpose of the project proposal
• use Balsamiq Mock-ups — https://balsamiq.com/
  • web-based demo version — http://webdemo.balsamiq.com/
  • this is all you need for your proposal
  • you can wireframe you application and simply do screen captures
    

Stage 2:  Design the data model and create the database

• aims:
  • “to define a data model that reflects the requirements of the application”
  • “to create a database to work with the model”
• some of this might be in your proposal, at least partially

Stage 3:  Build the data API

• aim:
  • “to create a REST API that will allow our application to interact with the database”
• this will be part of your implementation

Stage 4:  Hook the database to the application

• aim:
  • “to get our application to talk to our API”
• this is also part of your implementation
• stages 3 and 4 need to be part of your alpha version

Stage 5:  Augment the application

• aims:
  • “to add finishing touches to our application”
  • “to get the application ready for people to use”
• this needs to be in your beta version, but some of the work involved could be done much earlier
• this is the stage in which you will do usability testing

2.5.2 The steps to build the Loc8r application (pp. 41-46) — you should use analogous steps to build your application

Step 1:  Build a static site

Step 2:  Design the data model and create the database

Step 3:  Build the REST API

Step 4:  Integrate the API into the application

Step 5:  Embellish the application

Step 6:  Refactor the code into an AngularJS SPA — most projects will not get this far

Step 7:  Add authentication — we’re simply not going to do this

Installing the MEAN stack

See Appendix A, p. 392, for instructions on installing all MEAN stack components on various platforms

See Appendix B, p. 395, for instructions on setting up Git and Heroku

This is document http://jesseheines.com:8080/~heines/91.462/91.462-2015-16s/462-lecs/lecture02.jsp.  It was last modified on Friday, August 26, 2022 at 4:09 PM.
Copyright © 2022 by Jesse M. Heines.  All rights reserved.  May be freely copied or excerpted for educational purposes with credit to the author.