SYST$35300$ Hybrid Mobile App Development

Assignment #$1$

Page $1$ of $3$

Requirements:

Develop an Ionic application designed for organizing your personal library:

$$ The application features two tabs$,$ one component, and one page.

$$ Book data is stored in localStorage.

$$ Each book includes the following properties:

$$ Title: string $($mandatory$)$

$$ Description: string $($mandatory$)$

$$ Author: string $($mandatory$)$

$$ Year: number

$$ Publisher: string

$$ Comments: string

Book Collection Tab:

This tab includes:

$1.$ A component that retrieves and displays the following information from a file

through a service:

a$.$ Describe of your library.

b$.$ Your passion in book collecting.

$2.$ A feature to load multiple books from a file into localStorage using a service:

a$.$ A constant containing at least $5$ books with specified properties.

$3.$ A form for adding books:

a$.$ Allow input for new books with specified properties.

b$.$ Provides a button to add them to localStorage via a service.

Book List Tab:

This tab displays a list of book titles and authors, obtained from localStorage through an

event using a service. Upon selecting a book from the list, the key to the book item is

passed to the Book Page using either the RouterLink directive or Router.navigate $/$

Router.navigateByUrl method.

Book Page:

This Page contains:

$1.$ A form displaying the details of the book passed from the Book List Tab $($utilizing

a service to retrieve the book details from localStorage$).$

$2.$ A feature to update the book in localStorage via a service.

$3.$ A feature to delete the book from localStorage via a service.

$4.$ A back button to return to the Book List Tab.

SYST$35300$ Hybrid Mobile App Development

Assignment #$1$

Page $2$ of $3$

Additional requirements include:

$$ Implement data validation for inputs.

$$ Generate custom keys for the books in localStorage.

$$ Customize tab names to your preference.

$$ Remove unused tabs$.$

$$ Provide feedback messages to users upon completion or failure of any CRUD

operation.

$$ Ensure proper formatting, layout, colours, background, sizing, and labeling for an

enhanced user experience.

Grading Rubric

Description Marks

Functionalities $6$

Data Handling $3$

Proper formatting, layout, colours, background, size and labeling $1$

Submission:

$$ Prepare a zip backup of the $"$src$"$ folder from your Ionic Project and upload it to the

Assignment $1$ Dropbox $($please note that submissions via email will not be

accepted$).$

$$ Submissions are allowed up to $3$ days after the due date, with a penalty of $10\%$ per day.

Submissions will not be accepted after $3$ days.

$$ Only the final submission will be graded.

$$ Each assignment must be completed individually