Hello, if you have any need, please feel free to consult us, this is my wechat: wx91due
HOMEWORK ASSIGNMENT 3
CSCI 571 – Fall 2024
Assignment 3: Ajax, JSON, Responsive Design and Node.js
1. Objectives
-
Achieve familiarity with the AJAX and JSON technologies.
-
Create the front-end by integrating and combining HTML5, CSS, Bootstrap, and Angular.
-
Create the back end using JavaScript on Node.js.
-
Both front-end and back-end must be implemented in one of the approved cloud environments.
-
Build responsive web design with Bootstrap to enhance UX across multiple screens.
-
Deploy your Web app on Google Cloud Platform/Amazon Web Services/Microsoft Azure.
-
Leverage APIs for added functionalities. Key APIs you will work with include tomorrow.io API, Google Maps API, Google Geocoding & Places API, IPinfo API, HighCharts and X (aka Twitter) API.
-
Learn how to manage and access a NoSQL DBMS like MongoDB Atlas, in the cloud.
2. Background
2.1AJAX and JSON
AJAX (Asynchronous JavaScript + XML) incorporates several technologies which include Standards-based presentation using XHTML and CSS, displaying results and interactions using the Document Object Model (DOM), data interchange and manipulation using XML and JSON, Asynchronous data retrieval using XMLHttpRequest. In summary, JavaScript binds everything together. Peruse the class slides covering Ajax on D2L Brightspace for detailed information.
JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its primary application for this task is in AJAX web application programming, where it serves as an alternative to the XML format for data exchange between client and server. Peruse the class slides covering JSON on D2L Brightspace for detailed information.
2.2 Bootstrap
Bootstrap is a free collection of tools for creating responsive websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. We recommend Bootstrap 5.3 and ng-bootstrap (v 17.x.x) in this assignment. In general, you can use Bootstrap 5.2.3 through 5.3.2, Angular 15 through 17, ng-bootstrap 14 through 16, and Node.js 18 or 20 in this assignment. To learn more details about Bootstrap please refer to the lecture material on Responsive Web Design (RWD). Peruse the class slides covering Responsive Design on D2L Brightspace.
2.3 Google Cloud Platform (GCP)
Google Cloud Platform (GCP) applications are easy to create, easy to maintain, and easy to scale as your traffic and data storage needs change. With GCP, there are no servers to maintain. You simply upload your application and it’s ready to go. App Engine applications automatically scale based on incoming traffic. Load balancing, micro services, authorization, SQL and NoSQL databases, Memcached, traffic splitting, logging, search, versioning, roll out and roll backs, and security scanning are all supported natively and are highly customizable in GCP. Peruse GCP support information for Node.js in the ungraded assignment Cloud Setup (NodeJS) in the Assignment folder on D2L Brightspace.
To learn more about GAE support for Node.js visit this page:
https://cloud.google.com/appengine/docs/standard/nodejs/
2.4 Amazon Web Services (AWS)
AWS is Amazon’s implementation of cloud computing. Included in AWS is Amazon Elastic Compute Cloud (EC2), which delivers scalable, pay-as-you-go compute capacity in the cloud, and AWS Elastic Beanstalk, an even easier way to quickly deploy and manage applications in the AWS cloud. You simply upload your application, and Elastic Beanstalk automatically handles the deployment details of capacity provisioning, load balancing, auto-scaling, and application health monitoring. Elastic Beanstalk is built using familiar software stacks such as the Apache HTTP Server, PHP, and Python, Passenger for Ruby, IIS for .NET, and Apache Tomcat for Java. Peruse AWS support information for Node.js in the ungraded assignment Cloud Setup (NodeJS) in the Assignment folder on D2L Brightspace.
To learn more about AWS support for Node.js visit this page:
https://aws.amazon.com/getting-started/projects/deploy-nodejs-web-app/
2.5 Microsoft Azure
Microsoft Azure is a cloud computing service created by Microsoft for building, testing, deploying, and managing applications and services through a global network of Microsoft managed data centers. It provides software as a service (SaaS), platform as a service (PaaS) and infrastructure as a service (IaaS) and supports many different programming languages, tools and frameworks, including both Microsoft-specific and third-party software and systems. Peruse Azure support information for Node.js in the ungraded assignment Cloud Setup (NodeJS) in the Assignment folder on D2L Brightspace.
To learn more about Azure support for Node.js visit this page:
https://docs.microsoft.com/en-us/javascript/azure/?view=azure-node-latest
2.6 Angular
Angular is a toolset for building the framework most suited to your application development. It is fully extensible and integrates well with other libraries. Every feature can be modified to suit your unique development feature needs. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
For this homework, Angular 18 is recommended, but Angular 12, through 17 can be used.
However, please note Angular can be difficult to learn if you are not familiar with Typescript and component-based programming.
To learn more about Angular, visit these pages:
https://angular.io/ (v 17 and earlier)
https://angular.dev/ (v 18)
Note: AngularJS (a.k.a Angular 1.0) cannot be used in this project, and will result in a score
of zero (0) in the assignment.
2.7 Node.js
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event driven, non-blocking I/O model that makes it lightweight and efficient. Node.js package ecosystem, npm, is the largest ecosystem of open-source libraries in the world.
Peruse Node.js support information in the class slides covering JavaScript Frameworks on D2L Brightspace.
To learn more about Node.js, visit:
https://Node.js.org/en/
Express.js is strongly recommended. Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is in fact the standard server framework for Node.js. Peruse Express.js support information the class slides covering JS Frameworks on D2L Brightspace. There are other frameworks like Express that are covered in the lectures. Any of these frameworks can be used in this assignment.
To learn more about Express.js, visit:
http://expressjs.com/
Important Explicit Notes:
1. In this document when you see GCP/AWS/Azure it implies that you can either use Google App Engine, Amazon Web Services or Microsoft Azure Services. However, the CSCI 571 staff will only provide full support for GCP on Piazza and only partial support for AWS and Azure, as none of the TAs use either platform.
2. All APIs calls to tomorrow.io must be done through the Node.js server, functioning as a “proxy.” All other API calls should be done through your front-end JavaScript.
3. It is recommended to perform all HTTP calls to your Node backend with either fetch() or the Angular HttpClient (as opposed to using jQuery.ajax() / axios() / XMLHttpRequest()), but any asynchronous XHR functionality will be acceptable.