Building Strong Foundations: A Frontend Development Approach

Angular

Below is an example of an Angular component that demonstrates how to perform GET and POST API requests using Angular's HttpClient.

import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-api-component', templateUrl: './api.component.html', styleUrls: ['./api.component.css'] }) export class ApiComponent implements OnInit { // Define variables for storing data getApiResponse: any; postResponse: any; constructor(private http: HttpClient) {} ngOnInit() { // Fetch data when the component is initialized this.fetchData(); } fetchData() { // GET request to retrieve data from the API this.http.get('https://api.example.com/data').subscribe((response) => { this.getApiResponse = response; console.log('GET API Response:', response); }, (error) => { console.error('Error fetching data:', error); }); } postData() { // Data to be posted to the API const dataToPost = { key: 'value' }; // POST request to send data to the API this.http.post('https://api.example.com/endpoint', dataToPost).subscribe((response) => { this.postResponse = response; console.log('POST API Response:', response); }, (error) => { console.error('Error posting data:', error); }); } }

• This Angular component provides methods to trigger GET and POST requests and displays the responses.

ScriptMotor

Typescripts

Here's an example in TypeScript that demonstrates how to create an interface and define data types using that interface.

/**************** TypeScript Interface: Here's an example in TypeScript that demonstrates how to create an interface and define data types using that interface: ******************/ // Define an interface to represent a Person with data types interface Person { firstName: string; lastName: string; age: number; email?: string; // Optional property } // Create an object that conforms to the Person interface const person1: Person = { firstName: "John", lastName: "Doe", age: 30, }; // You can also include optional properties const person2: Person = { firstName: "Jane", lastName: "Smith", age: 25, email: "jane@example.com", }; // Attempting to assign a property of the wrong type will result in a compilation error // For example, this would produce a TypeScript error: // const person3: Person = { // firstName: "Invalid", // lastName: "Person", // age: "30", // Age should be a number, not a string // }; // Functions can also use the Person interface function getFullName(person: Person): string { return `${person.firstName} ${person.lastName}`; } // Using the function with our objects const fullName1: string = getFullName(person1); const fullName2: string = getFullName(person2); console.log(fullName1); // Output: "John Doe" console.log(fullName2); // Output: "Jane Smith"

Here's an example in TypeScript using < types > symbols for type parameters with data types

// Define a generic class with a type parameter T class Box<T> { private value: T; constructor(initialValue: T) { this.value = initialValue; } // Method to get the value getValue(): T { return this.value; } // Method to set a new value setValue(newValue: T): void { this.value = newValue; } } // Create instances of the Box class with different data types const numberBox = new Box<number>(42); // A box for numbers const stringBox = new Box<string>("Hello, TypeScript!"); // A box for strings // Get and set values const numberValue: number = numberBox.getValue(); const stringValue: string = stringBox.getValue(); console.log(numberValue); // Output: 42 console.log(stringValue); // Output: Hello, TypeScript // Try to set an invalid value (e.g., string in a number box) numberBox.setValue("Invalid"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

In TypeScript, you can use various class types and data modifiers. Here's a list of common ones and their meanings with examples.

/**************** Public: Properties and methods marked as public are accessible from anywhere. ******************/ class Person { public name: string; constructor(name: string) { this.name = name; } } /**************** Private: Private properties and methods are only accessible within the class. ******************/ class BankAccount { private balance: number; constructor(initialBalance: number) { this.balance = initialBalance; } } /**************** Protected: Protected properties and methods are accessible within the class and its subclasses. ******************/ class Vehicle { protected speed: number; constructor(speed: number) { this.speed = speed; } } /**************** Read-Only: A read-only property can only be assigned a value when it's declared or in the constructor. ******************/ class Circle { readonly radius: number; constructor(radius: number) { this.radius = radius; } } /**************** Default (public by default): If a member (property or method) doesn't have an access modifier, it's public by default. ******************/ class Example { name: string; // Public by default constructor(name: string) { this.name = name; } } /**************** Enum: An enum in TypeScript is a way to create a named set of constant values. It is used to represent a fixed set of values, often used for things like days of the week or status codes. ******************/ enum Days { Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday } /**************** Enum: An enum in TypeScript is a way to create a named set of constant values. It is used to represent a fixed set of values, often used for things like days of the week or status codes. ******************/ enum Days { Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday }

• This Angular component provides methods to trigger GET and POST requests and displays the responses.

ScriptMotor

Streamlit

Streamlit is a Python library that allows you to create web applications with minimal effort. Here's a simple example of a Streamlit app that displays a basic web page with some text and a plot:

# Import necessary libraries import streamlit as st import numpy as np import matplotlib.pyplot as plt # Set the title and description of your app st.title("Simple Streamlit Example") st.write("This is a basic Streamlit web app.") # Create a sidebar with user input st.sidebar.header("User Input") user_input = st.sidebar.text_input("Enter your name:", "John Doe") # Display user input st.write(f"Hello, {user_input}!") # Create a simple plot st.write("Here's a basic plot:") chart_data = np.random.randn(20, 3) st.line_chart(chart_data) # Add more content st.write("You can add more text, data, and visualizations to customize your app.") // streamlit run streamlit_example.py
ScriptMotor

Unit Test

Here's an example of a Jest unit test for a frontend component that fetches data from an API using mock data. In this example, we'll create a simple React component that displays user data and test it using Jest with mock API data.

First, let's create a simple React component

// UserData.js import React, { useState, useEffect } from 'react'; const UserData = () => { const [user, setUser] = useState(null); useEffect(() => { // Simulate an API call to fetch user data fetch('/api/user') .then((response) => response.json()) .then((data) => setUser(data)); }, []); if (!user) { return <div>Loading...</div>; } return ( <div> <h1>User Profile</h1> <p>Name: {user.name}</p> <p>Email: {user.email}</p> </div> ); }; export default UserData;

Now, let's create a Jest unit test for this component using mock API data

// UserData.test.js import React from 'react'; import { render, act } from '@testing-library/react'; import UserData from './UserData'; // Mock the API response const mockUser = { name: 'John Doe', email: 'john@example.com', }; beforeAll(() => { jest.spyOn(global, 'fetch').mockResolvedValue({ json: jest.fn().mockResolvedValue(mockUser), }); }); afterAll(() => { global.fetch.mockRestore(); }); it('displays user data after fetching', async () => { let container; await act(async () => { const { container: componentContainer } = render(<UserData />); container = componentContainer; }); expect(container.querySelector('h1').textContent).toBe('User Profile'); expect(container.querySelector('p[name="name"]').textContent).toBe('Name: John Doe'); expect(container.querySelector('p[name="email"]').textContent).toBe('Email: john@example.com'); });
ScriptMotor