Assignment #2 Solution

Title




Sycamore Calendar, Part 1




Topics Covered




HTML




CSS




Java Servlets




AJAX

Introduction




For this assignment, you will be creating a web application that will allow users to log into their Google Accounts and view their calendars. Users can also follow other users and view their calendars.




This assignment will test your proficiency with HTML and CSS to design the web pages, and use Servlets to connect front-end and back-end code.




Instead of handing you a JSON with all the information and a folder of images, you will be using the Google Calendar API to retrieve the information of the users.




API Introduction




An Application Programming Interface (API) is a set of routines, protocols, and tools for




building software applications. More practically, many technology companies create API’s of their software to give developers some access to their technology without having to implement it from scratch. For example, the Google Maps API allows developers to embed Google Maps into their applications.




To work with the API in your Java code, you will have to add the appropriate JAR file into your build path. You can download the appropriate files here: https://developers.google.com/api-client-library/java/apis/calendar/v3. After downloading the zipped folder, look at the readme.html and add the appropriate JAR files for Servlet Dependencies.




Here is some documentation on understanding the API, how to get started, and how to get




authorizations and requests from the API:




https://developers.google.com/calendar/concepts/




https://developers.google.com/calendar/overview




https://developers.google.com/calendar/auth#AboutAuthorization




https://developers.google.com/api-client-library/java/




Here is some documentation on getting the Google Sign In: https://developers.google.com/identity/#google-sign-in https://developers.google.com/identity/sign-in/web/sign-in




And here is some documentation on the Google Calendar API Library:




https://developers.google.com/resources/api-libraries/documentation/calendar/v3/java/latest/.




Assignment




For this assignment, you are expected to construct some central features of a web app that will allow users to display events from and add events to the user’s Google Calendar. You are required to make four pages for this assignment, a Sign-In Page (Figure 1), Logged in page (Figure 2), profile page (Figure 3), and Home Page in (Figure 4).




Your webpages should look reasonably similar in style to the examples shown in the figures.







Figure 1: Sign-In Page






Figure 2: Logged-in Home Page







Figure 3: Profile Page







Assignment #2

Figure 4: Home Page







Sign-In Page:




The main page is going to be the sign-in page. Users will have to sign in using a Google Account. This will redirect the users to sign into their Google accounts. Once signed in, redirect the users to their Profile Page in Figure 3.




Logged-in Home Page:




This page is displayed when users are already signed in and they click on the “Sycamore Calendar” text on the top left corner. When users click on the “Signed in” button, it should sign the users out and lead them to the Sign-In Page in Figure 1.




Profile Page:




This Profile Page shows the upcoming events in chronological order (earliest on top) from their Google calendar. The image on the right is the profile picture and their full name underneath both taken from their Google account. If the user has no image in their Google account, display an image that says, “No Image”.




Home Page:




The Home Page displays the user’s profile image and name. It also has a box where users can insert a new event into their calendar. The “Event Title” should take in text, the “Start Date” and “End Date” fields should pop-up a calendar so that the user can click on the date, and the “Start Time” and “End Time” should take in HH:MM. Feel free to use any CSS plugins to help ensure that the user will not input an invalid input.




When the user submits a new event, it should be added to the Google calendar. There should also be a page displayed that confirms it was submitted successfully (or displays that there was an error if it was not successful). This page is not shown in the screenshots, so create your own template for it.




Clicking on the “Sycamore Calendar” text in the top left corner should redirect the user to the main page on Figure 2.




The screenshots above were taken with a resolution of 1440x1024. Make sure that your application performs similarly at that (or a similar) resolution.




Notice that the scrollbar in Figure 3 only scrolls the events within the box, and the scroll bar in Figure 4 only scrolls the page in between the top and bottom black blocks.




Additional Comments:




These are the colors used for the website:




 
Black: 362f2d




 
White: ffffff




 
Grey: 898989




Fonts used:




 
Calibri font for login page in Figure 1




 
American Typewriter font used for the rest




The sycamore leaf in the front page is from Google. Feel free to search for the leaf.




The Google Sign in page does not have to be identical. There are many styles that google has, so feel free to pick whichever style you prefer. However, make sure the functionalities still work.




Grading Criteria




Web Design (1.6%)




0.4% - The Sign-In page looks similar in style to the sample




0.4% - The Logged-In page looks similar in style to the sample




0.4% - The Profile page looks similar in style to the sample




0.4% - The Home page looks similar in style to the sample




Functionality (2.9%)




0.1% - Clicking the logo on any page returns the user to the home page




0.6% - Users can login and log out their Google account




1.0% - Events display in chronological order (earliest on top) from the user’s Google account




0.7% - Adding an event onto their Google Calendar updates when the Profile page refreshes




0.5% - Outputs an error if the user inputs invalid data when adding an event