Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tutorial for cobigen angular client generation #73

Closed
Show file tree
Hide file tree
Changes from 37 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
2d2b30e
commit1 tutorial for cobigen angular client generation
suvmanda Mar 25, 2021
e09029a
rename to installCobiGen
suvmanda Mar 30, 2021
e76adf1
Merge remote-tracking branch 'upstream/main' into tutorial-for-angula…
suvmanda Apr 1, 2021
c04434a
remove hyphen
suvmanda Apr 1, 2021
664670a
Update index.asciidoc
suvmanda Apr 1, 2021
00e9905
updated to backendServer/server
suvmanda Apr 1, 2021
8db291b
tutorial for angular client generation with cobigen
suvmanda Apr 5, 2021
e054940
added port
suvmanda Apr 14, 2021
6d191a2
Added port
suvmanda Apr 14, 2021
4b8a270
Update index.asciidoc
suvmanda Apr 14, 2021
75a54c9
added angular client generation
suvmanda Apr 14, 2021
63bc32a
changed to cobigenexample
suvmanda Apr 15, 2021
49cdc6a
added Prerequisites and Learning goals
suvmanda Apr 15, 2021
f7fbe22
changed port number
suvmanda Apr 15, 2021
afb0eb4
changed projectname
suvmanda Apr 19, 2021
3458de2
prerequisites and learning goals changed
suvmanda Apr 19, 2021
1c7b2ad
title changed
suvmanda Apr 19, 2021
b94221c
rename cobigenjavaexample
suvmanda Apr 21, 2021
7c2f64a
rename cobigenexample to cobigenangularexample
suvmanda Apr 21, 2021
c951a28
conclusion added
suvmanda Apr 21, 2021
ec0a3d7
adding Subtitle
suvmanda Apr 21, 2021
4b84226
Update index.asciidoc
suvmanda Apr 27, 2021
af5ea9c
removed ====
suvmanda Apr 27, 2021
3a59430
comments fixed
suvmanda Apr 28, 2021
baaf8f5
restructuring the code
suvmanda Apr 29, 2021
393b9e5
fix syntax
suvmanda Apr 29, 2021
9d9a4d4
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
suvmanda May 5, 2021
85382a3
Update index.asciidoc
suvmanda May 5, 2021
5403dec
adding steps
suvmanda May 6, 2021
fbc4e56
text added
suvmanda May 6, 2021
01c3fbe
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
suvmanda May 10, 2021
c84e0a9
spelling fixed
suvmanda May 10, 2021
2df2803
Update index.asciidoc
suvmanda May 10, 2021
8984313
Update PR fixed
suvmanda May 20, 2021
126b959
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
SchettlerKoehler Jun 11, 2021
7c5868b
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
suvmanda Jun 21, 2021
52d1699
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
SchettlerKoehler Jul 5, 2021
892cdd3
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
SchettlerKoehler Jul 12, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions cobigen-angular-client-generation/files/CustomerEntity.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
package com.example.application.cobigenjavaexample.customermanagement.dataaccess.api;

import java.sql.Timestamp;

import javax.persistence.Entity;
import javax.persistence.Table;

@Entity
@Table(name = "Customer")
public class CustomerEntity {

private String firstname;

private String lastname;

private int age;

/**
* @return the firstname
*/
public String getFirstname() {
return firstname;
}

/**
* @param firstname the firstname to set
*/
public void setFirstname(String firstname) {
this.firstname = firstname;
}

/**
* @return the lastname
*/
public String getLastname() {
return lastname;
}

/**
* @param lastname the lastname to set
*/
public void setLastname(String lastname) {
this.lastname = lastname;
}

/**
* @return the age
*/
public int getAge() {
return age;
}

/**
* @param age the age to set
*/
public void setAge(int age) {
this.age = age;
}

}
82 changes: 82 additions & 0 deletions cobigen-angular-client-generation/index.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
= Generate Angular Client with devonfw
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can now add a subtitle with the == syntax. See https://github.com/devonfw-tutorials/tutorials/wiki/Development

== Angular client generation with CobiGen
====
With the CobiGen code generator you can easily generate components for your Angular application.
The following tutorial provides an example for using the CobiGen cli.
You can find more information on https://github.com/devonfw/cobigen/wiki/howto_angular-client-generation
## Prerequisites
* devonfw Ide

## Learning goals.
Here in this tutorial we will learn the following:
* Create java project
* CobiGen to generate the Angular source code out of the java files

====

[step]
--
restoreDevonfwIde(["java", "mvn", "vscode"])
--

For this tutorial an installation of the devonfw IDE is required first time you use it. The next step is to install the CobiGen CLI.
[step]
--
installCobiGen()
--

CobiGen is build as an extensible framework for incremental code generation. It provides extension points for new input readers which allow reading new input types and converting them to an internally processed model.CobiGen uses the backend classes for generating your code used in the Angular application. So in the next steps you will create a java project, create a simple java class.
[step]
--
createDevon4jProject("cobigenjavaexample")
--

This step is for building the java project.
[step]
== Build the java project
--
buildJava("cobigenjavaexample")
--

====
CobiGen is integrated via plugin in the VS Code IDE. We will use it to generate code from one single java class based on existing templates.
[step]
--

createFile("cobigenjavaexample/core/src/main/java/com/example/application/cobigenjavaexample/customermanagement/dataaccess/api/CustomerEntity.java", "files/CustomerEntity.java")
adaptTemplatesCobiGen()
cobiGenJava("cobigenjavaexample/core/src/main/java/com/example/application/cobigenjavaexample/customermanagement/dataaccess/api/CustomerEntity.java",[5])
--
The CobiGen code generator will generate code for Transfer object, REST service handling and data access and so on.

For example, the following files are generated by CobiGen when using the specified templates:

(5) TO's: Generates the related Transfer Objects.
- `devonfw/workspaces/main/cobigenjavaexample/api/src/main/java/com/example/application/cobigenjavaexample/customermanagement/logic/api/to/CustomerEto.java`{{open}}
- `devonfw/workspaces/main/cobigenjavaexample/api/src/main/java/com/example/application/cobigenjavaexample/customermanagement/logic/api/to/CustomerSearchCriteriaTo.java`{{open}}

====
====
Now you can go through api module of your java project and use Cobigen again to generate your front end (angular code).
[step]
== Running CobiGen to generate to your Angular code
--
cobiGenJava("cobigenjavaexample/api/src/main/java/com/example/application/cobigenjavaexample/customermanagement/logic/api/to/CustomerEto.java",[1])
--
The angular code generation is done now and the generated code is stored in the workspace/main/devon4ng-applicaiton-template directory. Make sure the backend server url is configured in environments/environment.ts file.

====

The below commands are used, to run the angular front end.
npm install
ng serve

[step]
--
runClientNg("devon4ng-application-template", { "startupTime": 200, "port": 4200, "path": "" })
--
====
Conclusion: In this Tutorial we learned the following things.
* How to create a java project.
* How to generate the Angular source code using CobiGen.
====