Oermacc.edc.org



CIS 243 Project: Reverse Engineering a Web App- Phase2.The second project assignment will be focused on beginning the implementation of the server-side portion of your application. Naturally, your server components will be driven by the functional specification you outlined as part of Phase1. In addition, there are several aspects of the project at this stage you are not able to implement because we have not yet covered all the details. For this reason, you will be required to provide fake or stub implementations that you will eventually replace with the actual implementation (i.e., retrieving data from a database). The main goal is to produce an application that mimics the real application enough so that you can get a feel for how the application must operate. In particular, you should be able to navigate through the application, but the functionality (e.g., forms, links, buttons) will not all be operational and the data displayed will be fake.Task #1: Git/GithubYou are required to maintain your team work as a Git project hosted as an open source project on Github. So, for this first task you must create an account on Github and one person on your team must create a repository for your project. The team member who creates the repository must then add everyone else as a collaborator so that each team member has write/commit access to the shared repository. You should review the links provided as part of Lecture 10 to understand the basics of Git. The usage of Git is part of this assignment and a very important skill to become acquainted with as part of today's software development practices.After you create the new repository on Github you must clone the repository on your local host:bash $ git clone that you should replace the owners-user-name with the team member who created the repository and team-name with your team's name (spaces replaced with '-'). This will clone your team's Git repository onto your local machine into a directory named team-name. You should then study some of the important commands for Git such as status, log, commit, pull, and push. You may want to reference the git reference to help with understanding these commands. If you are having trouble understanding how it works you should ask your team-mates and create a few local test repositories and explore some of the commands.Task #2: Generate Team Express AppYour second team task is to generate a new Express application as described in class. First you must install the express script globally using npm:bash $ npm install -g expressOnce you have express installed globally, you will be able to generate the new express application. You should use the following command to do so (again, replace team-name with your team's name):bash $ cd team-name bash $ express -s -e .? create : . create : ./package.json create : ./app.js create : ./public create : ./public/images create : ./public/javascripts create : ./routes create : ./routes/index.js create : ./routes/user.js create : ./views create : ./views/index.ejs create : ./public/stylesheets create : ./public/stylesheets/style.css? install dependencies: $ cd . && npm install? run the app: $ node appOnly one member on your team should do this to start the project off. I recommend doing this as a group together to understand how this works. After you generate your express starter application you need to do a few things to finish things off. First, you should run npm install in your project directory to install the dependencies local to your project (see the package.json file. Second, you should make sure that you have a README.md file in your project. If you let Github create one for you this should be all set. If not, you can easily generate a README.md file inside your project directory. On Unix this is accomplished like this (inside your project directory):bash $ echo "# CMPSCI 326 Web Programming: Team Your-Team-Name" > README.mdYour README.md file will contain information about what the project is about and instructions on how to run your application. At this point you will have already seen a few Github repositories of libraries that we have looked at that demonstrate the contents of the README.md file. Note, that the README.md file uses Markdown format - a common web format these days that you should be familiar with (don't worry, it is simple!).You will also want certain directories ignored by Git. For example, you do not want npm libraries that you install locally to be uploaded to Github (it takes up too much space) - this should stay local. To do this you must create a file called .gitignore that contains the files you wish to ignore. Here is how you would do this on Unix to ignore the node_modules directory (in your project directory):bash $ echo "node_modules" > .gitignoreLastly, you should commit your changes to Github:bash $ git add . # this will add all the filesbash $ git commit -am 'first commit' # this will commit your changesbash $ git push # this will push to githubTask #3: ImplementationOnce your team has become comfortable with Git and Github you should begin your implementation. The implementation is largely left up to you, however, we will provide some pointers to get you started. You should begin to translate important components/entities outlined in your functional specification into source code. Your express project is delineated between client-side parts and server-side components. The client-side source will exist in the public directory in your project. We have not covered client-side programming yet so this will largely remain untouched - except for static files such as images and generated documentation (see next task). Your focus for this project assignment will be on defining views, routes, and dummy or fake libraries. ViewsYou should create views using Embedded JavaScript (EJS) and your view files (.ejs file extension) should reside in the views sub-directory of your generated express project. Each view should correspond to a major view in your application. You should not be concerned with styling (e.g., CSS) as we have not covered this yet and your project may change over time. The idea is that you will create Wireframes using basic HTML of your application - you will evolve these in later project assignments.RoutesTo access your views you will need to create routes that can render the views. It is sensible to organize your routes into separate files based on important components in your application. These files should reside in the routes directory in your express project. Each of these files will be Node.js libraries that export route functionality to the main application (app.js in the root of your project directory).Data Access LayerYour routes should provide each view with the data that it needs to generate HTML dynamically. To do this you will need to create modules for a data access layer for each of the main entities of your project. To make understanding your project easier we ask that you create a lib directory in your main project directory that contains folders for each of the main components of your application. You should follow the suggestions we covered in class on how to create libraries in Node.js to do this. For now, your modules will only provide fake data to the routes to facilitate the wireframes. You need not support a functional application, however, it should generate "fake" data that will demonstrate how the application will eventually function. An important aspect of this is to create an interface that makes sense. So, your libraries should provide functions that you will not change in the future, but the data they return will be "real" rather than "fake". A good rule of thumb is that you will have a route library file, a view file, and a data library file for each of the main components in your application. Of course, this is not always the case and certain circumstances may require additional files and others less.Task #4: DocumentationDocumentation is important. This will be your main communication mechanism to us to elaborate on your implementation. We will be using the Docker documentation generator to generate documentation for your project code. Here is an example of what it generates (for the Docker project itself). The format for the documentation is simple: it is Markdown format. You should annotate your source code using single-line comments with embedded Markdown. This will generate documentation that can easily be viewed in a browser along with your source code. You are also able to use JSDoc format to document functions in a similar fashion as JavaDoc. The main point is that the more your document your code the easier it will be for us to understand your thought process and understanding. You should generate your documentation into a public/docs directory and make sure it is commmitted to your github repository. The command to generate the documentation from the command line is:$ docker -i lib -i routes -o public/docsNote, that you will need to install docker globally using npm:$ npm install -g dockerSubmission DetailsSubmit your github repository URL to the Moodle Project Phase2 assignment so we can clone your project and test it locally and view your documentation. *Note: This material has been adapted from Tim Richards, CS Department at the University of Massachusetts, Amherst, MA.This work is licensed under a Creative Commons 3.0 License workforce solution is 100% funded by a grant awarded by the U.S. Department of Labor, Employment and Training Administration, TAACCCT grant agreement # TC-22505-11-60-A-25.The solution was created by the grantee and does not necessarily reflect the official position of the U.S. Department of Labor. The Department of Labor makes no guarantees, warranties, or assurances of any kind, express or implied, with respect to such information, including any information on linked sites and including, but not limited to, accuracy of the information or its completeness, timeliness, usefulness, adequacy, continued availability, or ownership. Massachusetts Community Colleges are equal opportunity employers. Adaptive equipment available upon request for persons with of FormBottom of Form ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download