Lecture1 - Course overview, a cloud app sample.pdf

Server-side Technologies and Cloud Computing COMPS381F (2023 Autumn) 1 Prepared by Dr. Alin Liu. Updated on 6 Sep. 2023. Agenda • Course Overview • Basic Concepts and Technologies • A Sample Cloud App • Coming Lecture and Tutorials 2 Agenda • Course Overview • Basic Concepts and Tec...

Server-side Technologies and Cloud Computing COMPS381F (2023 Autumn) 1 Prepared by Dr. Alin Liu. Updated on 6 Sep. 2023. Agenda • Course Overview • Basic Concepts and Technologies • A Sample Cloud App • Coming Lecture and Tutorials 2 Agenda • Course Overview • Basic Concepts and Technologies • A Sample Cloud App • Coming Lecture and Tutorials 3 Course Overview – Teaching Staff • Dr. Alin Yalin Liu ([email protected]) • Lecture (L01) • Tutorial (P01,P02, P03) • Harry Lai Hing Lun ([email protected]) • Tutorial (P04,P05) 4 Course Overview – Class Schedule See your OLE! Lecture: L01, Thu. 11:00~13:00, in D0309 Tutorial: P01, Mon. 14:00~16:00, in D0626 P02, Fri. 11:00~13:00, in D0627 P03, Tue. 14:00~16:00, in D0627 P04, Fri. 9:00~11:00, in D0625 P05, Mon. 16:00~18:00, in D0627 5 Tutorial re-arrangement! 1. The tutorial (P01,P03,P05) in the second week will be canceled to keep the consistent learning progress of all students. After that, 1 lecture will follow by 1 tutorial for all students. 2. Make-up tutorials. Info from University: To avoid causing time slash problem, the timetable will be shown after add/drop period. Section COMPS381F/2304/P01 Original Class Makeup Class 02 Oct 2023, 2-4pm 3 Oct 2023, 6-8pm, D0626 COMPS381F/2304/P05 02 Oct 2023, 4-6pm 4 Oct 2023, 6-8pm, D0626 COMPS381F/2304/P01 23 Oct 2023, 2-4pm 24 Oct 2023, 6-8pm, D0626 COMPS381F/2304/P05 23 Oct 2023, 4-6pm 25 Oct 2023, 6-8pm, D0626 6 Course Overview – Assessment 1. [30%] Continuous Assessment (OCAS) • • [20%] Mid-term test (Tentative Date: Oct. 19, 2023) [10%] Mini Project (Tentative Due Date: Nov. 20, 2023) 2. [70%] Final Exam (OES) (Date: Up to Registry) 3. Must pass both OCAS and OES • • Passing mark of OCAS is 12 (out of 30) Passing mark of OES is 28 (out of 70) 7 Course Overview – Assessment [20%] Mid-term test • • • Scope: all lecture materials and lab tasks before Oct. 19 Type: short essay questions + coding tests Form: F2F, closed-book, with some hints [10%] Mini Project • • • Content: develop and implement a cloud-based application Type: group of 1, 2, or 3 to complete the project Form: any topics you want, but follow some formats [70%] Final exam • • • Scope: all teaching materials, in-class exercises, and lab tasks Type: short essay questions + coding tests Form: F2F, closed-book, with some hints 8 Course Overview – Attendance Registry > Student Announcements • Attendance requirements for you • Take attendance via OLE ---- scan QR code Notes: • • If you cannot access, call 2768 6454 (OLE support) or email [email protected] If you cannot join OLE activities because of device/network problems, please tell me after class face-to-face, and I'll count you in. 9 Course Overview – Class Disruption • Case 1: Student reasons • He/she cannot attend class, please 1. Email me and provide solid evidence proof 2. catch up on the materials missed by watching class recordings and consulting lecture notes, etc. • For other students, no change in class arrangement • Case 2: Instructor reasons • Class re-arrangement by online classes or make up classes 10 Course Overview – Course Info • Course Name: • Server-side Technologies and Cloud Computing (COMPS381F) • Course Aim: • L e a rn k e y t e c h n o lo g i e s i n s e rv e r - s i d e a p p s • L e a rn k e y c o n c e p t s i n c lo u d c o mp u t i n g → L e a rn t o d e s i g n , p ro g ra m , a n d i mp le m e n t s e rv e r s i d e a p p s t o c lo u d . 11 Course Overview – Course Info • Course Content: Server-side Technologies Cloud Computing 1. 2. 3. 4. 5. 6. NoSQL, JSON, MongoDB Server-side scripting Node.js Object Document Mapper (ODM) Mongoose Server side MVC Express.js Middleware, Session, Oauth Service oriented Architecture (SOA), REST, GraphQL, Serverless/API Architecture 7. Cloud computing concepts & services 8. Virtualization technology 12 Course Overview – Course Info • Course Materials: - No books. Only lecture notes. - Also using GitHub, Website, etc. • Programming languages. - L i n u x c o mma n d s , J a v a S c ri p t - M o n g o D B c o mma n d s , etc. • Used Tools or Platforms - Linux System, Ubuntu, Robo 3T, - GitHub, Render (cloud Platform), MongoDB, etc. 13 Agenda • Course Overview • Basic Concepts and Technologies • A Sample Cloud App • Coming Lecture and Tutorials 14 Server and Client ❑ A server is a computer (or multiple computers) provide services. ❑ A client (user devices, e.g., PC) requests services. ❑ This is known as client-server networking model. Content requests services Computing resources provides services User (Client) Server … Services: ✓ Providing content including web pages, files, etc. ✓ Sharing resources such as programs, data, storage devices. Reference: https://www.javatpoint.com/computer-network-client-and-server-model 15 Server-side apps (programs) ❑ Server-side apps indicate apps (programs) running in a server. ❑ Server-side programs is used to • • • • querying and interacting with the database, accessing files on the server, interacting with other servers processing user input, and structuring web applications. Content requests services Computing resources provides services User (Client) Server … Server-side apps/programs 16 Key technologies in server-side apps requests services provides services User (Client) Server-side technologies • Data Base management • Server-side programming • Data/Object Mapping • Express web to clients • Identification Server • Integrating multiple services App developer 17 Key technologies in server-side apps ❑ NoSQL – allows developers to store huge amounts of unstructured data. ❑ JSON - stores JavaScript objects as text and easily send JSON data between computers. ❑ MongoDB – a cloud data management platform to develop and scale applications. 1. NoSQL, JSON, MongoDB Server-side technologies • Data Base management • Server-side programming Data/Object Mapping • Express web to clients • Identification Server • Integrating multiple services 18 Key technologies in server-side apps ❑ Node.js – a JavaScript runtime environment, let developers use JavaScript to write command line tools and for server-side scripting – running scripts server-side to produce dynamic web page content. 1. NoSQL, JSON, MongoDB 2. Server-side scripting Node.js Server-side technologies • Data Base management • Server-side programming Data/Object Mapping • Express web to clients • Identification Server • Integrating multiple services 19 Key technologies in server-side apps ❑ ODM Mongoose – an Object Data Modeling library for MongoDB and Node.js, it manages relationships between data and translates between objects in code and the representation of those objects in MongoDB. 1. NoSQL, JSON, MongoDB 2. Server-side scripting Node.js 3. Object Document Mapper (ODM) Mongoose Server-side technologies • Data Base management • Server-side programming Data/Object Mapping • Express web to clients • Identification Server • Integrating multiple services 20 Key technologies in server-side apps ❑ Express.js – a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. 1. NoSQL, JSON, MongoDB 2. Server-side scripting Node.js 3. Object Document Mapper (ODM) Mongoose 4. Server side MVC Express.js Server-side technologies • Data Base management • Server-side programming Data/Object Mapping • Express web to clients • Identification Server • Integrating multiple services 21 Key technologies in server-side apps ❑ Session – interact multiple requests and responses with the same user for identification ❑ Middleware – make changes to the request and the response objects. ❑ Oauth – an open standard authorization framework for token-based authorization on the internet. 1. NoSQL, JSON, MongoDB 2. Server-side scripting Node.js 3. Object Document Mapper (ODM) Mongoose 4. Server side MVC Express.js 5. Middleware, Session, Oauth Server-side technologies • Data Base management • Server-side programming Data/Object Mapping • Express web to clients • Identification Server • Integrating multiple services 22 Key technologies in server-side apps ❑ Application programming interfaces (API) – allow one system to access the information or functionality of another, in another work, connect two separate apps ❑ Varieties of API architectural styles, i.e., SOAP, REST, GraphQL, can achieve different function interactions between apps 1. NoSQL, JSON, MongoDB 2. Server-side scripting Node.js 3. Object Document Mapper (ODM) Mongoose 4. Server side MVC Express.js 5. Middleware, Session, Oauth 6. Service oriented Architecture (SOA), REST, GraphQL, Serverless/API Architecture Server-side technologies • Data Base management • Server-side programming Data/Object Mapping • Express web to clients • Identification Server • Integrating multiple services 23 Could Computing • Cloud is a remote data center/platform • • Operated by a third-party cloud services infrastructure provider E.g., IBM, AWS, Heroku, Render, Huawei. • Cloud Computing is the online computer system resource, • • • Especially data storage (cloud storage) and computing power Without direct active management by the user Flexibility, on-demand availability A cloud recourse may be distributed, it has huge data storage and computing power. 24 Server-side apps in Cloud ❑ Deploy Server-side apps to cloud = cloud apps • • S e rv e r - s i d e p ro g ra ms ru n i n c lo u d F a s t re s p o n s e t o b u s i n e s s n e e d s , s i mp li fi e d o p e ra t i o n , i n s t a n t s c a l a b i l i t y, A P I u s e , re d u c e d c o s t . App developer Easy, fast, flexible deployment Massive Users (Clients) Cloud app Hard to manage local data and computing resource A server supported by App developer 25 In-class Exercise 1 Th re e s i mp le q u i z z e s a b o u t s e rv e r - s i d e t e c h n o l o g i e s ( n o s c o re , j u s t fo r p ra c t i c e ). 26 Agenda • Course Overview • Basic Concepts and Technologies • A Sample Cloud App • Coming Lecture and Tutorials 27 A Sample Cloud App A “server.js” based app to show Weather on Web. Developer Deploy Web browser User HTTP GET Server.js Render Cloud REST JSON Web service API openweathermap.org 28 A Sample Cloud App • How to implement it to the cloud? 1. Prepare all required stuff 2. Test the App locally 3. Deploy it to a cloud platform Developer Deploy Web browser User HTTP GET Server.js Render Cloud REST JSON Web service API openweathermap.org 29 A Sample Cloud App - Preparations 1. Prepare all required stuff Developer a. Email Account b. Local System Deploy Web browser User HTTP GET Server.js Render Cloud d. Render Cloud | GitHub REST JSON Web service API openweathermap.org c. openweathermap.org 30 A Sample Cloud App - Preparations a. O365 email Account: [email protected] • An available email address is required to apply multiple web platform accounts, including, GitHub, OpenWeather, MongoDB, etc. • Please use your O365 student email. Activate your O365 mail: https://student.intranet.hkmu.edu.hk/hkmu_o365/ 31 A Sample Cloud App - Preparations b. Local system: VMware + Ubuntu (JCC: D0625/D0626/D0627) For your PC configuration: 1. Install VMware WorkStation Player in your PC 2. Copy “C:\VM_Image\Ubuntu 64-bit 19.04.vmwarevm” from JCC Lab/VMOS 3. Open VMware WorkStation → Open Ubuntu 32 A Sample Cloud App - Preparations c. OpenWeather: Account + API keys Create a free account at https://home.openweathermap.org/users/sign_up. → Get an API key. API key from Open Weather allows users to track and bill individual usage of the weather information from global regions. 33 A Sample Cloud App - Preparations d. Render platform: Account + Create Web Service Create a free Render account (via GitHub) at https://www.render.com/. Create your Web Service Render will generate a URL (e.g., https://app-name.onrender.com) for your app. 34 A Sample Cloud App - Preparations All required stuff prepared! → 2. Test the App locally Developer a. Email Account b. Local System Deploy Web browser User HTTP GET Server.js Render Cloud d. Render Cloud | GitHub REST JSON Web service API openweathermap.org c. openweathermap.org 35 A Sample Cloud App – Local Test • Download the sample app to Local System. All sample codes are available in my GitHub repository (yalin-liu). Local System > VMware Workstation > Ubuntu > Linux system 36 A Sample Cloud App – Local Test • Download the sample app to Local System. 37 A Sample Cloud App – Local Test • Download the sample app to Local System. 38 A Sample Cloud App – Local Test • Add your API key to the app sample. 39 A Sample Cloud App – Local Test • Test the app sample locally. 1) Install the app's dependencies 2) Run the server app in local machine. 40 A Sample Cloud App – Local Test • Test the app sample locally. 3) Test your app by opening "http://localhost:8099" in your web browser. If things go well, you can *submit* the weather query for a region, e.g., Tokyo, and then see the left message. 41 A Sample Cloud App – Local Test The App runs successfully in Local System. → 3. Deploy it to the cloud. Developer a. Email Account b. Local System Deploy Web browser User HTTP GET Server.js Render Cloud d. Render Cloud | GitHub REST JSON Web service API openweathermap.org c. openweathermap.org 42 A Sample Cloud App – Cloud Deployment • Upload your app file to your GitHub Repositories Way1: Upload your project file by GitHub GUI. Way2: Upload your file by command lines. 43 A Sample Cloud App – Cloud Deployment • Connect your Render web service to GitHub 44 A Sample Cloud App – Cloud Deployment • Deploy it to the Render. 45 A Sample Cloud App – Cloud Deployment • Check your web service on a browser. 46 Work Done! Summary: 1 . Pre p a ra t i o n s : d e v e lo p er, lo c a l s y s t e m, c lo u d , A P I 2 . Te s t t h e Ap p lo c a lly : d o w n lo a d a p p , u s e n p m t o t e s t ! 3 . D e p l o y t o Re n d e r c lo u d : c re a t e c lo u d AP P, l o c a l c o n f i g u ra t i o n s , p u s h t o c lo u d . Developer Deploy Web browser User HTTP GET Server.js Render Cloud REST JSON Web service API openweathermap.org 47 In-class Exercise 2 Th re e s i mp le q u i z z e s a b o u t i mp le me n t i n g t h e s a m p l e a p p ( n o s c o re , j u s t fo r p ra c t i c e s ). 48 Discussion: • Did we go through all processes for developing a cloud APP? • If the answer is “no”, Which part did we ignore? Developer Deploy Web browser User HTTP GET Server.js Render Cloud REST JSON Web service API openweathermap.org 49 No, we did not • design the app, • manage the database, • build the program files, • etc.. 50 Agenda • Course Overview • Basic Concepts and Technologies • A Sample Cloud App • Coming Lecture and Tutorials 51 The coming tutorials: - P04, Fri. 9:00~11:00, in D0625 - P02, Fri. 11:00~13:00, in D0627 Pre-study and review: see Lab materials of Lab01 on OLE. The coming Lecture: - L01, Thu. 11:00~13:00, in D0309 Content: NoSQL, JSON, MongoDB -> Learn how to manage the database on server-side apps. Pre-study: The lecture note will be released later. 52 Q&A 53