Phase-1-Week-3-Project

This is the project done by James Mburu Githire as required for the completion of the first section of Software Engineering course in Moringa School, Nairobi, Kenya.

ONLINE LIBRARY MANAGEMENT SYSTEM

This project is a mock system intended for librarians.

It acts as a catalog system.

The objectives are to check in and check out books, update the number of books in the library and the number of books owned by the library.

Guide on how to run the application

What you need to get started

• Have node js installed on your computer.
  Use this to get instructions on how to install node.
• Have json-server installed on your computer.
  Use this to get instructions on how to install json-server.
• Use any code editor that has similar or more capability to VS code.
  I recommend you use VS code editor with the live server extension.

Running the project

• Fork and clone this repository in to your computer
• Open the project-folder using VS code.
• Click on Go Live at the bottom right of the VS code window.
  This will open your default browser and display the contents of the index.html.
  Expect to see "Waiting for the server..." dispayed.
• Open a terminal and navigate to the project directory. ie.".../phase-1-week-3-project$"
• Run json-server --watch lib.json or json-server lib.jsonin the terminal
• Go back to the browser tab where the index.html loaded and refresh the page.
  A list of book titles should appear.

Navigating through the project

From this point, you can:

• Explore the books and the categories.
• "Give out" a book.
• Add and remove copies of a book available and owned by the library.
• Delete all records a book from the server/API.

Refer to this video(ap3) for more on this.

Criteria met

• A well documented readme that any developer can use.
• This project is in a polished, portfolio-quality state.
• 20 + commits in the project with well detailed commit messages.
• The project contains a single HTML file.
• This project incorporates at least 3 separate event listeners.
  • DOMContentLoaded : in javascript to load the script
  • Click : in javascript for all the buttons in the project
  • Change : in javascript for the input (search bar) and selection menu
  • Hover : in css file for the list items
  • Focus : in css for the input (search bar)
• Well designed landing page that shows a list of books (when connected to the server), a search bar, and a selection menu of the categories available in the library.
• Follows good coding practices by keeping code DRY (Do not repeat yourself) by utilizing functions to abstract repetitive code.

Introduction

A library is a collection of materials, books or media that are accessible for use and not just for display purposes.(ap1) The history of the book starts with the development of writing, and various other inventions such as paper and printing, and continues through to the modern-day business of book printing.(ap2).

And throughout this time, people have developed ways of storing, sorting and classifying books. Library classification system groups books together.

Problem Statement

A librarian may use a catalog to keep track of the books and classifications.

It may take a lot of time and energy finding a book in a hardcopy catalog of books that the library owns. The librarian has to cross check that catalog with the data kept after a book has been borrowed or returned.

This monotonous activity can lead to boredom and strain on the body for sitting for too long.

Solution

Single page web-application that does the crucial task of updating a library catalog

API

The API used in this project : lib.json file hosted on a json-server for data manipulation on the server(API).

Thought Process and Execution

The web application has an interactive interface. It shows a list of books that are owned.

Execution : Having a div with a list of books.

One can access books of a certain category.

Execution : Having a selection menu containing a list of all the available book categories fetched from the API.

The system gets the book searched quickly.

Execution : Having a search bar (input that takes text) that has a "change" event listener. After there is change in the input value, fetch books that match the input value and have them listed in an unordered list using "GET" method.

After clicking on the book desired, the application displays the details of the book (the title, author, category, number of copies the library owns, and the number available (not given out)).

Execution : Add an eventListener to each listed item to display the details and the buttons to update the information as needed.

The system registers that a copy is given out, returned, removed or added to the library.

Execution : Add eventListeners to the buttons displayed with the relevant functionalities.
A "Give Out" and a "Returned" button to reduce and increase the number of books available. A "Remove A Copy" and a "Add A Copy" button to reduce and add the number of books owned respectively.

It saves changes done.

Execution : Have a button that updates the API using the "PATCH" method.

The system can remove all records of a book.

Execution : Have a button that removes a book from the API using "DELETE" method.

Challenges Faced

Coming up with a simplistic, pleasing and functional design.

Solution : Drawing out designs before writing the html or javascript.

Following the DRY(do not repeat yourself) principle

Solution : Writing out pseudocode before writing javascript code. This helped bring out the repetitive parts of code. Having them in functions reduce recurrency.

Acknowledgement

Moringa School
Having a good Software Engineering curriculum and the resources to guide the students through it.

Daniel Karanja(Technical Mentor)
Identified this as a good project idea and gave the go ahead for the project.
Guided the class through the class content which has been used in the project.

public-apis
Had the gutendex api used to populate the json file for this project

Appendix

ap1 : Meaning of a Library
ap2 : History of Books
ap3 : Video Demo