Angular Final Assignment - Keep Note frontend
Objective
The Objective of this level of Keep is to cover the following areas :
- Components Design
- Components Interaction
- Named Router Outlets
- Testing
Prerequisites
- Fork this boilerplate repository
- Clone the boilerplate repository and cd into it
- Install dependencies
npm install
- Run the backend
npm run serve
which shall run on port:3000 - Run the frontend
npm run start
which shall run on port:4200
Know your server
On running npm run serve
, following apis would be available for your use -
- To authenticate user - POST - http://localhost:3000/auth/v1 - expecting data - { username, password }
- To check if user is authenticated - POST - http://localhost:3000/auth/v1/isAuthenticated - expecting header - { 'Authorization',
Bearer ${token}
} - To get notes - GET - http://localhost:3000/api/v1/notes - expecting header - { 'Authorization',
Bearer ${token}
} - To add a note - POST - http://localhost:3000/api/v1/notes - expecting header - { 'Authorization',
Bearer ${token}
} and data - { note }
Assignment:
Keep to include following -
- Notes View - collection of notes
- List View - collection of notes but classified into three lists based on their
state
values- Not Started
- Started
- Completed
- Edit Note View - Both the NotesView and the ListView should be able to edit notes and should be able to update the list and notes view.
- Note Taker Component: Both the NotesView and the ListView should have a common NoteTakerComponent present in the DashboardComponent.
- Add more Unit test cases for all the Components.
- Add Unit test cases for all the Services.
- Add more E2E test cases to the application.
Instructions:
- You are expected to use
Note
class for Note model AppModule
shall be the root module- Application to have following routes -
3.1.dashboard
mapped toDashboardComponent
3.2.dashboard/view/noteview
mapped toNoteViewComponent
3.3.dashboard/view/listview
mapped toListViewComponent
3.4.login
mapped toLoginComponent
3.5.note/:noteId/edit
mapped toEditNoteOpenerComponent
rendered innoteEditOutlet
named router outlet
dashboard/view/noteview
being the default route AppComponent
as the bootstrapping componentHeaderComponent
to have a propertyisNoteView
which is set based on the route rendered and two icons as shown in the template to switch between List View and Note View.LoginComponent
same as implemented inKeep Level 2
DashboardComponent
calls notesService.fetchNotesFromServer() on initialization and renders components based on router outlets mentioned in the templateNoteTakerComponent
has the same implementation of Expansion panel to add new notes fromDashboardComponent
ofKeep Level 2
NoteViewComponent
displays the notes collection with each note rendered as a separate NoteComponent, the component class subscribes to notesService.getNotes() and populates the response in itsnotes
propertyNoteComponent
displays a single note as a Material Card, with card title set to note title and card content set to note text. On click of this card, user is navigated to Edit View of the same note.ListViewComponent
to have three properties in the component class as -notStartedNotes
,startedNotes
,completedNotes
into which the updated collection of notes is classified based on thestate
property of Note objects.EditNoteOpenerComponent
which gets rendered when application is routed to Edit View. This component extracts noteId from query parameter and passed same as data while opening EditNoteViewComponent in a Material Dialog.EditNoteViewComponent
enables editing of a note by fetching the entire note using notesService.getNoteById() based on noteId provided in the data while opening this component in a Material Dialog.onSave()
persists the updated note via notesService.editNote() and the dialog is closed after which the previous route is rendered by calling routerService.routeBack(). In case of any server error, the template has a label with classerror-message
, the text of which is set with the error object's message property.CanActivateRouteGuard
same as implemented inKeep Level 2
AuthenticationService
same as implemented inKeep Level 2
NotesService
with two properties ->notes
which is array of all the updated notes andnotesSubject
which is a BehaviourSubject of array of all updated notes and helps to emit changes to this array across subscribers, the service has methods as below -
16.1.fetchNotesFromServer()
to fetch notes from backend and update thenotes
andnotesSubject
likewise in the service
INPUT - no params
URL -http://localhost:3000/api/v1/notes
METHOD -GET
RETURN TYPE - void
16.2.getNotes()
to return thenotesSubject
of the service
INPUT - no params
RETURN TYPE -BehaviorSubject<Array<Note>>
16.3.addNote()
to persist the new note created with server and update thenotes
andnotesSubject
of the service
INPUT - Note
URL -http://localhost:3000/api/v1/notes
METHOD -POST
RETURN TYPE -Observable<Note>
16.4.editNote()
to persist the updated note with server and update thenotes
andnotesSubject
of the service
INPUT - Note
URL -http://localhost:3000/api/v1/notes/${note.id}
METHOD -PUT
RETURN TYPE -Observable<Note>
16.5.getNoteById()
to fetch the note matching provided Id fromnotes
collection of the service
INPUT - Number (noteId)
RETURN TYPE - NoteRouterService
to navigate user to available routes -
17.1.routeToDashboard()
to navigate to dashboard route
17.2.routeToLogin()
to navigate to login route
17.3.routeToEditNoteView()
to navigate to edit view of the note of given noteId
17.4.routeBack()
to navigate back to previous route
17.5.routeToNoteView()
to navigate to notes view
17.6.routeToListView()
to navigate to list view- Ensure following commands succeed in your local machine before submitting your code for Preliminary automated review as described next -
npm install npm run build npm run lint
- Ensure unit test cases pass -
npm run test
- Ensure e2e test cases pass -
npm run serve
(backend shall be running before executing e2e test cases)
npm run e2e
Submitting your solution for preliminary automated review
- Open
https://hobbes-cts.stackroute.in/#/
and login into the platform - Under
Assignment repository
selectangular-keep-level-3-assignment
, and branchmaster
- Under
Your solution repository
select your own repository and branch - Press
Submit
- Press
click here
for the feedback - Evaluation will take around 5 mins to complete after which you need to refresh your browser and get the updated status
- Watch out for your total score and detailed status on each test and eslint errors in the coloured blocks on the screen
- Fix failing test cases as well as eslint errors and re-submit your solution (you may skip any eslint errors reported in the provided spec files)
MENTORS TO BEGIN REVIEW YOUR WORK ONLY AFTER ->
-
You add the respective Mentor as a Reporter/Master into your Assignment Repository
-
You have checked your Assignment on the Automated Evaluation Tool - Hobbes (Check for necessary steps in your Boilerplate - README.md file. ) and got the required score - Check with your mentor about the Score you must achieve before it is accepted for Manual Submission.
-
Intimate your Mentor on Slack and/or Send an Email to [email protected] - with your Git URL - Once you are done working and are ready for final submission.
KeepNote Backend
Assignment Step Description
In this case study Keep Note Step 6, we will implement JWT (JSON Web Token) on top of Keep Note Step 5 Assignment. JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed.
In this step, we will create this application in five parts
1. AuthenticationService
2. UserService
3. NoteService
4. CategoryService
5. ReminderService
Steps to be followed:
Step 1: Clone the boilerplate in a specific folder on your local machine and import the same in your eclipse STS.
Step 2: Go thru the readme.md file and implement the code for AuthenticationService and run the test cases.
Step 3: Go thru the readme.md file and implement the code for UserService and run the test cases.
Step 4: Go thru the readme.md file and implement the code for NoteService and run the test cases.
Step 5: Go thru the readme.md file and implement the code for CategoryService and run the test cases.
Step 6: Go thru the readme.md file and implement the code for ReminderService and run the test cases.
Project structure
The folders and files you see in this repositories, is how it is expected to be in projects, which are submitted for automated evaluation by Hobbes
Project
|
├── AuthenticationService // This is the microservice for User Authentication
├── NoteService // This is the microservice of Note
├── CategoryService // This is the microservice of Category
├── ReminderService // This is the microservice of Reminder
├── UserService // This is the microservice of User
├── .gitignore // This file contains a list of file name that are supposed to be ignored by git
├── .hobbes // Hobbes specific config options, such as type of evaluation schema, type of tech stack etc., Have saved a default values for convenience
├── .project // This is automatically generated by eclipse, if this file is removed your eclipse will not recognize this as your eclipse project.
└── pom.xml // This is the parent POM, which holds all the microservice projects.
PS: All lint rule files are by default copied during the evaluation process, however if need to be customizing, you should copy from this repo and modify in your project repo
To use this as a boilerplate for your new project, you can follow these steps
-
Clone the base boilerplate in the folder assignment-solution-step6 of your local machine
git clone https://gitlab-cts.stackroute.in/stack_java_keep/KeepNote-Step6-Boilerplate.git assignment-solution-step6
-
Navigate to assignment-solution-step6 folder
cd assignment-solution-step6
-
Remove its remote or original reference
git remote rm origin
-
Create a new repo in gitlab named
assignment-solution-step6
as private repo -
Add your new repository reference as remote
git remote add origin https://gitlab-dev.stackroute.in/{{yourusername}}/assignment-solution-step6
Note: {{yourusername}} should be replaced by your username from gitlab
-
Check the status of your repo
git status
-
Use the following command to update the index using the current content found in the working tree, to prepare the content staged for the next commit.
git add .
-
Commit and Push the project to git
git commit -a -m "Initial commit | or place your comments according to your need"
git push -u origin master
-
Check on the git repo online, if the files have been pushed
Important instructions for Participants
- We expect you to write the assignment on your own by following through the guidelines, learning plan, and the practice exercises
- The code must not be plagirized, the mentors will randomly pick the submissions and may ask you to explain the solution
- The code must be properly indented, code structure maintained as per the boilerplate and properly commented
- Follow through the problem statement shared with you
MENTORS TO BEGIN REVIEW YOUR WORK ONLY AFTER ->
- You add the respective Mentor as a Reporter/Master into your Assignment Repository
- You have checked your Assignment on the Automated Evaluation Tool - Hobbes (Check for necessary steps in your Boilerplate - README.md file. ) and got the required score - Check with your mentor about the Score you must achieve before it is accepted for Manual Submission.
- Intimate your Mentor on Slack and/or Send an Email to [email protected] - with your Git URL - Once you done working and is ready for final submission.
Further Instructions on Release
*** Release 0.1.0 ***
- Right click on the Assignment select Run As -> spring boot app to run your Assignment.
- Right click on the Assignment select Run As -> JUnit Test to run your Assignment.