Frames

Untitled

0
1# Getting Started
2
3* To Access h2 in-memory database use the link [localhost:port/h2-console](http://localhost:port/h2-console) with JDB URL `jdbc:h2:mem:testdb`
4
5* API is available via [link](http://localhost:port/swagger-ui.html#)
6
7### Creating entities include following steps:
8- [X] Add test for creating new entities(Card, User)
9- [X] Add the endpoint for creating new entities(Card, User)
10- [X] Add business logic for creating new entities(Card, User)
11- [X] Manually verify endpoints with Postman
12
13### Reading entities include following steps:
14- [X] Add test for reading entities
15- [X] Add the endpoint for reading one and all entities
16- [X] Add business logic for both endpoints
17- [X] Manually verify endpoints with Postman
18
19### Updating entities include following steps:
20- [X] Add test for updating entities
21- [X] Add the endpoint for updating the existing entities
22- [X] Add business logic for updating the existing entities
23- [X] Manually verify endpoints with Postman
24
25### Deleting entities include following steps:
26- [X] Add test for deleting entities
27- [X] Add the endpoint for deleting the existing entities
28- [X] Add business logic for deleting the existing entities
29- [X] Manually verify endpoints with Postman
30
31### Integration test
32- [X] IT for Card REST service
33- [X] IT for User REST service
34
35### Hibernate steps
36- [X] Many2Many - DB tables
37 * [X] table User
38 * [X] table User
39 * [X] table Card
40 * [X] table Card2user
41 * [X] fill table data
42- [ ] Many2Many - mapping entities
43- [ ] Many2Many - test in Demo app
44
45# Create frontend app
46* Node.js version that is supported is 10.9 or greater
47
48* run `npm install -g @angular/cli` to install Angular CLI(include routing and CSS)
49
50* run `ng new frontend` to generate the entire application structure within the 'frontend' directory
51** Angular’s application files use TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.
52** the entry point of any Angular application is a plain old index.html file.
53** <app-root> is the root selector that Angular uses for rendering the application’s root component.
54** add [Bootstrap](https://getbootstrap.com/) to index.html
55```$
56<link rel="stylesheet"
57 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
58 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
59 crossorigin="anonymous">
60```
61
62## Run Frontend application
63* go to 'frontend' and run `ng serve`
64 * This will start Angular’s live development server and also open the browser at http://localhost:4100.
65* open http://localhost:4100/users to see the list of users.
66
67
68### Angular application
69 * app.component.ts - the app.component.ts Root Component
70 * selector – the HTML selector used to bind the component to the HTML template file
71 * templateUrl – the HTML template file associated with the component
72 * styleUrls – one or more CSS files associated with the component
73 * app.component.html - allows us to define the root component’s HTML template
74 * In each case, the HTML template associated with the matching component will be rendered within the <router-outlet></router-outlet> placeholder.
75
76* go to 'frontend/src/app', create directory 'model' and run 'ng generate class user'
77 * src/app/model/user.ts - empty User class.
78 * src/app/model/user.spec.ts - test for new User class
79
80* go to 'frontend/src/app', create directory 'service' and run `ng generate service user` to generate user service that performs GET and POST requests to the http://localhost:8100/api/users endpoint.
81 * src/app/service/user.service.ts - empty User class.
82 * src/app/service/user.service.spec.ts - test for new User class
83 * @Injectable() metadata marker. This signals that the service should be created and injected via Angular’s dependency injectors.
84
85* go to 'frontend/src/app', and run 'ng generate component user-list' to generate a user list component
86 * src/app/user-list/user-list/user-list.component.html - simple html/bootstrap table which displays entities
87 * src/app/user-list/user-list/user-list.component.ts - UserListComponent class.
88 * src/app/user-list/user-list/user-list.component.spec.ts - test for new UserListComponent class
89 * src/app/user-list/user-list/user-list.component.css - styles
90
91* go to 'frontend/src/app', and run 'ng generate component user-form' to generate a user form
92 * src/app/user-list/user-form/user-form.component.html - simple html/bootstrap form for persisting a new user in the database
93 * src/app/user-list/user-form/user-form.component.ts - UserFormComponent class.
94 * src/app/user-list/user-form/user-form.component.spec.ts - test for new UserFormComponent class
95 * src/app/user-list/user-form/user-form.component.css - styles
96
97* edit `app-routing.module.ts` to call our components when the user clicks the buttons in the navigation bar.
98 * the Routes array instructs the router which component to display when a user clicks a link or specifies a URL into the browser address bar.
99 * A route is composed of two parts:
100 * Path – a string that matches the URL in the browser address bar
101 * Component – the component to create when the route is active (navigated)
102
103* edit `app.module.ts` to call our components when the user clicks the buttons in the navigation bar.
104 * import all the required modules, components, and services
105 * also we need to specify which provider we’ll use for creating and injecting the UserService class to make Angular able to inject it into the component classes
106
107### Reference Documentation
108
109For further reference, please consider the following sections:
110
111* [Official Apache Maven documentation](https://maven.apache.org/guides/index.html)
112
113### Guides
114The following guides illustrate how to use some features concretely:
115
116* [Building a RESTful Web Service](https://spring.io/guides/gs/rest-service/)
117* [Serving Web Content with Spring MVC](https://spring.io/guides/gs/serving-web-content/)
118* [Building REST services with Spring](https://spring.io/guides/tutorials/bookmarks/)
119* [Accessing Data with JPA](https://spring.io/guides/gs/accessing-data-jpa/)
120
121