Lesson 11-14 - Web Development & API PDF

Lesson 11: WEB DEVELOPMENT APPLICATION PROGRAMMING INTERFACE TOPIC OUTLINE Concept and Importance of API Brief History of API API Methodologies and Implementation RESTful API concept and implementation WEB 3.0 Ethical considerations and Business Practices in Web development PH Laws...

Lesson 11: WEB DEVELOPMENT APPLICATION PROGRAMMING INTERFACE TOPIC OUTLINE Concept and Importance of API Brief History of API API Methodologies and Implementation RESTful API concept and implementation WEB 3.0 Ethical considerations and Business Practices in Web development PH Laws’ Impact in the Industry of Web Development  What are APIs? Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place. API in Web Development.  JavaScript — A high-level scripting language built into browsers that allows you to implement functionality on web pages/apps. Note that JavaScript is also available in other programming environments, such as Node. Browser APIs — constructs built into the browser that sit on top of the JavaScript language and allow you to implement functionality more easily. Third-party APIs — constructs built into third-party platforms (e.g. Disqus, Facebook) that allow you to use some of those platform's functionality in your own web pages (for example, display your Disqus comments on a web page). JavaScript libraries — Usually one or more JavaScript files containing custom functions that you can attach to your web page to speed up or enable writing common functionality. Examples include jQuery, Mootools and React. JavaScript frameworks — The next step up from libraries, JavaScript frameworks (e.g. Angular and Ember) tend to be packages of HTML, CSS, JavaScript, and other technologies that you install and then use to write an entire web application from scratch. API in Web Development. Browser APIs  Browser APIs are built into your web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it. For example, the Web Audio API provides JavaScript constructs for manipulating audio in the browser — taking an audio track, altering its volume, applying effects to it, etc. API in Web Development.  Popup example: APIs for manipulating documents loaded into the browser. The most obvious example is the DOM (Document Object Model) API, which allows you to manipulate HTML and CSS — creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page or some new content displayed, for example, that's the DOM in action. What can APIs do?  APIs that fetch data from the server to update small sections of a webpage on their own are very commonly used. This seemingly small detail has had a huge impact on the performance and behavior of sites. Used to update a stock listing or list of available new stories, doing it instantly without having to reload the whole entire page from the server can make the site or app feel much more responsive and "snappy". What can APIs do?  APIs for drawing and manipulating graphics are widely supported in browsers — the most popular ones are Canvas and WebGL, which allow you to programmatically update the pixel data contained in an HTML element to create 2D and 3D scenes. What can APIs do? More examples: Device APIs enable you to interact with device hardware: for example, accessing the device GPS to find the user's position using the Geolocation API. Client-side storage APIs enable you to store data on the client-side, so you can create an app that will save its state between page loads, and perhaps even work when the device is offline. Third-Party APIs  Third-party APIs are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the Web. For example, the Google Maps API allows you to do things like display an interactive map to your office on your website. It provides a special set of constructs you can use to query the Google Maps service and return specific information. API in Web Development.  Map APIs, like Mapquest and the Google Maps API, which allow you to do all sorts of things with maps on your web pages. API in Web Development.  The Facebook suite of APIs, which enables you to use various parts of the Facebook ecosystem to benefit your app, such as by providing app login using Facebook login, accepting in-app payments, rolling out targeted ad campaigns, etc. API in Web Development.  The YouTube API, which allows you to embed YouTube videos on your site, search YouTube, build playlists, and more. API in Web Development. Restful API What is RESTful API? Clients Clients are users who want to access information from the web. The client can be a person or a software system that uses the API. For example, developers can write programs that access weather data from a weather system. Or you can access the same data from your browser when you visit the weather website directly. Resources Resources are the information that different applications provide to their clients. Resources can be images, videos, text, numbers, or any type of data. The machine that gives the resource to the client is also called the server. What is RESTful API? RESTful API is an interface that two computer systems use to exchange information securely over the internet. A RESTful API is an implementation of REST principles in the form of an API What is REST API? Representational State Transfer (REST) is a software architecture that imposes conditions on how an API should work. REST was initially created as a guideline to manage communication on a complex network like the internet. What is REST API? It is an architectural style, not a protocol or technology. It is based on a set of principles for designing networked applications. It relies on stateless, client-server communication. Resources (data) are identified by URLs, and interactions are made using standard HTTP methods: GET, POST, PUT, DELETE, etc. REST emphasizes the separation of concerns between client and server, where the server handles data processing and the client is responsible for presenting the data. Key principles of REST include statelessness, scalability, cacheability, uniform interface, and the use of standard HTTP methods. REST API Principles: Uniform Interface Uniform interface imposes four architectural constraints: Requests should identify resources. They do so by using a uniform resource identifier. Clients have enough information in the resource representation to modify or delete the resource if they want to. The server meets this condition by sending metadata that describes the resource further. Clients receive information about how to process the representation further. The server achieves this by sending self-descriptive messages that contain metadata about how the client can best use them. Clients receive information about all other related resources they need to complete a task. The server achieves this by sending hyperlinks in the representation so that clients can dynamically discover more resources. REST API Principles: Statelessness In REST architecture, statelessness refers to a communication method in which the server completes every client request independently of all previous requests. Clients can request resources in any order, and every request is stateless or isolated from other requests. This REST API design constraint implies that the server can completely understand and fulfill the request every time. REST API Principles: Layered System In a layered system architecture, the client can connect to other authorized intermediaries between the client and server, and it will still receive responses from the server. Servers can also pass on requests to other servers. You can design your RESTful web service to run on several servers with multiple layers such as security, application, and business logic, working together to fulfill client requests. These layers remain invisible to the client. REST API Principles: Cacheability RESTful web services support caching, which is the process of storing some responses on the client or on an intermediary to improve server response time. For example, suppose that you visit a website that has common header and footer images on every page. Every time you visit a new website page, the server must resend the same images. To avoid this, the client caches or stores these images after the first response and then uses the images directly from the cache. RESTful web services control caching by using API responses that define themselves as cacheable or noncacheable. REST API Principles: Code on demand In REST architectural style, servers can temporarily extend or customize client functionality by transferring software programming code to the client. For example, when you fill a registration form on any website, your browser immediately highlights any mistakes you make, such as incorrect phone numbers. It can do this because of the code sent by the server. Benefits of RESTful APIs Scalability Systems that implement REST APIs can scale efficiently because REST optimizes client- server interactions. Statelessness removes server load because the server does not have to retain past client request information. Well-managed caching partially or completely eliminates some client-server interactions. All these features support scalability without causing communication bottlenecks that reduce performance. Flexibility RESTful web services support total client-server separation. They simplify and decouple various server components so that each part can evolve independently. Platform or technology changes at the server application do not affect the client application. The ability to layer application functions increases flexibility even further. For example, developers can make changes to the database layer without rewriting the application logic. Independence REST APIs are independent of the technology used. You can write both client and server applications in various programming languages without affecting the API design. You can also change the underlying technology on either side without affecting the communication. Assignment Your task is to conceptualize and design the foundational structure of a web development product (e.g., a blog site, e-commerce platform, portfolio website, or online learning platform). You will complete the following deliverables: User Flow Diagram Create a visual representation of how a typical user will navigate through your web product. Consider different user goals and key interactions, ensuring the flow is intuitive and seamless. Site Map Design a comprehensive site map illustrating the hierarchical structure of your website. This should include main pages, subpages, and connections between them. Wireframes Develop low-fidelity wireframes for at least three key screens of your website. Focus on the layout, placement of elements, and user interface components. Explain how you planned the user persona and user preferences to develop your Scenario maps. WEB 3.0 WEB EVOLUTION: WEB 1.0 Timeframe: 1990s to early 2000s Characteristics: Static content: Websites were mainly informational, consisting of static pages (HTML documents). Read-only: Users could view and consume content but had minimal interaction with the site. Centralized publishing: Content was created and maintained by webmasters or site owners. Limited interactivity: Forms and dynamic content were rare; interactivity was minimal or nonexistent. Technologies: HTML, CSS, basic JavaScript. Examples: Early corporate websites, personal blogs, or portals like Yahoo! (in its initial stage). WEB EVOLUTION: WEB 2.0 Timeframe: Early 2000s to present Characteristics: Dynamic content: Pages are more interactive, with dynamic content that changes without reloading the page. User-generated content: Users contribute by creating blogs, uploading videos, posting on social media, etc. Interactivity and collaboration: Emphasis on user engagement, sharing, and collaboration. Social media dominance: Platforms like Facebook, Twitter, and YouTube exemplify Web 2.0. Rise of APIs: Enabled integration and mashups of services. Technologies: AJAX, HTML5, CSS3, JavaScript frameworks (like React, Angular), and server-side scripting (PHP, Node.js). Examples: WEB EVOLUTION: WEB 3.0 Timeframe: Emerging (2010s onwards) Characteristics: Semantic web: Focuses on understanding and interpreting the meaning of data, allowing machines to process information more intelligently. Personalization: Tailors the web experience to individual users using AI and machine learning. Decentralization: Emphasizes decentralized data storage and blockchain technology for privacy and security. Interoperability: Systems and platforms are interconnected seamlessly. Ownership of data: Users have more control over their data, often enabled by blockchain technology. Technologies: AI, machine learning, blockchain, decentralized protocols, smart contracts, and the Internet of Things (IoT). Examples: Decentralized applications (DApps), blockchain platforms (e.g., Ethereum), AI-powered assistants, and IoT-integrated systems. WEB EVOLUTION: WEB 3.0 Web 3.0 will give AI and machine learning more prominent roles in delivering relevant content to each user, instead of content others have chosen to provide. While Web 2.0 essentially enables users to contribute to and sometimes collaborate on site content, Web 3.0 will most likely turn these jobs over to the Semantic Web and AI. Web 3.0 will thus be more "intelligent" and responsive because data will be more logically organized in the Semantic Web structure that Berners-Lee envisioned for the first version of the web, and AI will be more adept at understanding it. The decentralized autonomous organization (DAO), an emerging governance mechanism in today's blockchain and Web 3.0 communities, could also revolutionize management of the web by wresting control from central authorities and devolving it to self-governed digital communities. And because Web 3.0 also fundamentally relies on cryptocurrency rather than government currency, financial transactions will be conducted on decentralized blockchains rather than through the current financial service companies. KEY DIFFERENCES: Ethical Considerations in Web Development Principles of Ethical Web Development: 1. Web applications should work for everyone Built on top of progressive enhancement Prioritize accessibility Develop inclusive forms Test with real users 1. Web applications should work everywhere Built responsively Value performance Leverage off-line first capabilities Expose permanent, human readable, deep links Principles of Ethical Web Development: 3. Web applications should respect a user's privacy and security Use https everywhere Respect user tracking preferences Provide users with clear information about how their information is used Allow users to export their data Secure user data 4. Web developers should be considerate of their peers Comment and document code Lint and test code Make use of source control and continuous integration Consume and contribute to open source when possible Treat other developers with respect Offer, follow, and enforce a code of conduct for open source projects Data Privacy Act of 2012 (Republic Act No. 10173) Do: Include clear, understandable privacy policies on websites. Implement mechanisms for users to give consent before collecting and processing their data. Use encryption and other secure methods for storing user data. Avoid: Collecting more user data than necessary. Make sure to follow the principle of data minimization and only collect data that are essential for the service you are providing. Never share user data without consent. Cybercrime Prevention Act of 2012 (Republic Act No. 10175) Do: Implement robust security measures to protect the integrity of your website and the data it holds. Regularly update software and plugins to guard against known vulnerabilities. Avoid: Infringing upon intellectual property rights, such as using copyrighted images without permission. Be careful not to facilitate or engage in activities that could be considered cybercrimes, such as phishing or unauthorized data access. E-Commerce Act of 2000 (Republic Act No. 8792) Do: Clearly display terms and conditions, total costs, and return policies on e-commerce websites. Make sure electronic contracts and transactions are secure and legally compliant. Avoid: Making the purchase process complex and confusing. Transparency is vital in e-commerce, so avoid hidden charges or non-disclosed terms that could confuse or mislead customers. Access to Information on the Web (Magna Carta for Disabled Persons) Do: Incorporate accessibility features in your web design, such as high contrast, readable fonts, and alternative text for images. Consider the use of ARIA (Accessible Rich Internet Applications) attributes to make websites more accessible to users with disabilities. Avoid: Overlooking accessibility during the design process. Remember that a significant portion of the population has some form of disability, and failing to make your website accessible can alienate these users. Access to Information on the Web (Magna Carta for Disabled Persons) Do: Ensure all information presented on the website is accurate, especially regarding product details, pricing, and availability. Provide a clear way for customers to lodge complaints or ask questions Avoid: Misleading customers through false advertising, incomplete information, or confusing design. The goal should always be to provide a transparent and trustworthy experience for the user. REFERENCES https://aws.amazon.com/what-is/restful-api/ https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction https://www.google.com/url?sa=i&url=https%3A%2F%2Fmannhowie.com%2Frest- api&psig=AOvVaw12NGRYq2YOqx_ontf6- DWP&ust=1733447314374000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwo TCMCkps24j4oDFQAAAAAdAAAAABBD https://www.techtarget.com/whatis/definition/Web-3