Kübra Aksu Practice App Contribution Report
Links: #212
In selecting the API that best meets our practice app's requirements, the NASA Image Search API emerged as an excellent choice. It offers a well-defined RESTful architecture with predictable URLs and built-in HTTP features. The API provides JSON responses for all interactions, including errors, ensuring clarity and ease of data handling. My first thoughts was Twitter API and OpenAI API, considering their usage for the project but they were challenging because they have strained authentication mechanism and also they were costly. By integrating the NASA Image Search API, our app will provide users with access to a vast collection of captivating NASA images, enhancing their exploration of image content. The API aligns perfectly with our technical capabilities and budget, making it the ideal choice for seamless integration into our app
Links: #213
I have developed the necessary components and functionality to interact with the NASA Image Search API in our app. Here is an overview of the key components and their responsibilities:
NasaImageService to handle operations and act as a service. Additionally, I developed a NASAImage Controller to manage HTTP requests and serve as a controller. The NasaData and NasaDataRepository models represent the structured data for Nasa archived images. The NasaDataRepository, perform database operations related to the NasaData entity using the provided methods, without having to write the underlying database queries manually. This promotes code reuse and simplifies data access in the application so is responsible for handling the storage.
- WeatherService: The NASAImageService class is a service component that interacts with the NASA Images API for image searches and saves NASA data using the NasaDataRepository. It provides methods to search for images based on a search text and save retrieved data.
The class uses the RestTemplate class from the Spring framework to make HTTP requests to the NASA Images API. It has a constructor that takes an instance of the NasaDataRepository interface as a parameter, indicating the dependency on the repository for data persistence.
The searchImages method is used to search for images based on a given text. It constructs the search URL using the provided text and the API endpoint, and sends an HTTP GET request to the NASA Images API. The response, containing the search results, is returned as a string.
The saveNasaData method is responsible for saving NASA image data to the database. It takes a NasaData object as a parameter and uses the nasaDataRepository to persist the data.
By encapsulating the logic related to NASA image searching and data saving, the NASAImageService class promotes code modularity and separation of concerns, enhancing the maintainability and readability of the application.
- NasaImageController as a Controller: The NASAImageController class is a RESTful controller that handles HTTP requests related to NASA image operations. It is responsible for receiving requests, invoking corresponding methods from the NASAImageService, and returning responses.
The controller has two main endpoints:
searchImages: Handles the HTTP GET request to "/nasa/search" with a query parameter "text". It delegates the search operation to the NASAImageService and returns the search results as a string.
saveNasaData: Handles the HTTP POST request to "/nasa/save" with a request body containing NasaData object. It invokes the saveNasaData method of the NASAImageService to save the NASA image data.
By using this controller, the application can effectively manage and process NASA image-related requests through the defined endpoints.
- NasaData as a Model: The NasaData class is a model that encapsulates data related to NASA images. It provides a structured representation of the data retrieved from the NASA Image Search API. This model is used to store and transport information about NASA images between different components and layers of the application.
Links: #217
I write the NasaImage.js file. These functionalities are the core aspects of the NasaImage component:
- Search Images: The handleRequest function sends an HTTP GET request to the /api/nasa/search endpoint with the inputText parameter as the search query. It retrieves NASA images related to the provided text and updates the responseText state variable with the response data.
-Save NASA Data: The handleSave function sends an HTTP POST request to the /api/nasa/save endpoint with the inputText parameter as the data to be saved. It saves the NASA data in the backend and provides a success message upon successful submission.
-Input Text Handling: The handleInputChange function is triggered when the user enters text in the input field. It updates the inputText state variable to reflect the user's input.
The component renders an input field where users can enter text, and two buttons for sending requests and saving data. The response from the API is displayed as a grid of NASA images along with their titles.
These functionalities allow users to search for NASA images based on their input and save the selected data for further use or analysis.
Pull Request that I reviewed : #200 #230
In my reviews, I thoroughly read the code, carefully examining for any conflicts, typos, or changes. If I come across any issues or areas that need improvement, I request the necessary changes to address them appropriately.
Pull Request that I opened : #227 #233
Nasa API, https://api.nasa.gov/
The NASA API is a data service that provides access to a vast collection of NASA images and related information. It offers various endpoints and parameters to retrieve images, metadata, captions, and album contents.
With the NASA API, you can search for images based on free text search terms, NASA center, description, keywords, location, media type, and more. The API supports retrieving images related to space exploration, scientific discoveries, lunar missions, astronauts, and other NASA-related subjects.
By using the NASA API, you can access high-quality images, explore captivating visual content, and retrieve detailed information about each image. The API allows you to integrate NASA images into your applications, websites, or projects, enabling users to discover and engage with NASA's extensive image collection.
The code snippet provided includes two methods: handleRequest and handleSave, which represent HTTP GET and POST requests, respectively. Here's a brief explanation of each method:
handleRequest:
This method is triggered when the "Send Request" button is clicked. It uses the fetch function to send an HTTP GET request to the specified URL: api/nasa/search?text=${inputText}. The fetch function returns a Promise that resolves to the server's response. The first then block checks if the request was successful and converts the response to JSON format. The second then block sets the retrieved data as the value of the responseText state variable. If there is an error during the request or response handling, the catch block logs the error to the console.
handleSave:
This method is triggered when the "Save" button is clicked. It uses the fetch function to send an HTTP POST request to the specified URL: api/nasa/save. The request includes a JSON payload in the request body, which is created using JSON.stringify and includes the inputText value. The headers object is used to specify the content type as JSON. Similar to handleRequest, the response is processed in the then blocks, and any errors are logged in the catch block. Upon successful completion, an alert is shown to indicate that the data was saved successfully. In summary, handleRequest is responsible for retrieving data from the NASA API using an HTTP GET request, while handleSave is responsible for sending data to the API using an HTTP POST request. Both methods use the fetch function to perform the requests and handle the responses asynchronously.
Test Methods:
The testSearchImages() method tests the searchImages() method of the NASAImageService.
It sets up a mock response using when(restTemplate.exchange(...)) to define the behavior of the mocked RestTemplate. It performs the test by calling nasaImageService.searchImages("moon") and storing the result in the result variable. It verifies the result by asserting that the responseBody matches the result using assertEquals.
The testSaveNasaData() method tests the saveNasaData() method of the NASAImageService.
It creates a sample NasaData object and sets its ID. It performs the test by calling nasaImageService.saveNasaData(nasaData). It verifies that the save() method of the nasaDataRepository is called once with the provided nasaData object using verify(nasaDataRepository, times(1)).save(nasaData).
The code snippet performs a GET request using the fetch() function. It sends a request to the specified URL with the inputText value as a query parameter. The response is processed by extracting the JSON data and updating the responseText state variable. Any errors that occur during the request or response handling are caught and logged to the console.
The code snippet performs a POST request using the fetch() function. It sends a request to the api/nasa/save URL with the specified options: method: 'POST', body: JSON.stringify({ inputText }), and headers: 'Content-Type': 'application/json'. The response is processed in a chain of .then() methods that log the response and display success alerts. Any errors are caught and logged in the .catch() block.
The most challenging aspect for me during the project was establishing the connections between the backend and the database. I was unable to work on the project locally until our team resolved the Docker-related issues. For me, developing docker and frontend-backend parts are new and thanks to my teammates i learned a lot.
I had challenges when i was choosing API. My first idea was Twitter or OpenAI API. Then, because they have strict authentication mechanism and they are costly, i changed my mind. It was very challenging to try them.
Additionally, I encountered another problem. I lost my code because of the a single wrong git command. With using history feature of Intellij, i could find my current code. But before learning that, i lost all i did. It was such a breakdown.