Brooklyn
277 Bedford Avenue,
Brooklyn, NY 11211,
New York, USA

{{ 'description' | transloco }}
+ +{{ 'employeemanagement.Employee.navDataSub' | transloco }}
+{{ 'employeemanagement.Employee.navDataSub' | transloco }}
+ + + + +image:images/howtos/e2e_gen/nav-bar.png[nav bar] + +* Check the file *environment.ts* if the server path is correct. (for production you will have to change also the environment.prod.ts file) + +image:images/howtos/e2e_gen/image42.png[environment] + +For example in this case the URL should be since the context path is empty the server URLS should be like: + +[source] +export const environment = { +production: false, +restPathRoot: 'http://localhost:8081/', +restServiceRoot: 'http://localhost:8081/services/rest/', +security: 'jwt' +}; + +*Warning*: REMEMBER to set security filed to *jwt* , if it is not configured already. + +* Open the command prompt and execute below command from the base folder, which would download all the required libraries.. + +[source] +devon yarn install + +Run the below command for the front end. + +[source] +devon ng serve + +image:images/howtos/e2e_gen/image44.png[] + +* If the command execution is *successful*, the below screen will *appear* and it would be automatically redirected to the url: +[source, URL] +http://localhost:4200/login + +image:images/howtos/e2e_gen/image45.png[] + +*WebApp Done* + +==== Ionic Mobile App + +* To generate Ionic structure, download or clone _*devon4ng-application-template*_ from +[source, URL] +https://github.com/devonfw/devon4ng-ionic-application-template + +right click on EmployeeEto.java file present under the package com.devonfw.poc.employeemanagement.logic.api.to + +For OpenAPI, Right click on the *_devonfw.yml_* as you already did before in order to use CobiGen. + +* Click on the selected options as seen in the screenshot: + +image:images/howtos/e2e_gen/image46.png[] + +* Click on Finish +* The entire ionic structure will be auto generated. + +image:images/howtos/e2e_gen/image47.png[] + +* Change the server url (with correct serve url) in environment.ts, environment.prod.ts and environment.android.ts files (i.e: itapoc\devon4ng-ionic-application-template\src\environments\). + +The angular.json file inside the project has already a build configuration for android. + +image:images/howtos/e2e_gen/image48.png[] + +* Run npm install in the root folder to download the dependecies +* Run ionic serve + +image:images/howtos/e2e_gen/image49.png[] + +. {blank} ++ + +Once the execution is successful + + +image:images/howtos/e2e_gen/image50.png[] + +* Mobile App Done* + +So: well done + +Starting from an Entity class you’ve successfully generated the Back-End layer (REST, SOAP, DTO, Spring services, Hibernate DAO), the Angular Web App and the Ionic mobile App! + +image:images/howtos/e2e_gen/image51.png[] + + + +===== Build APK + +Since We’re going to create apk remember the following pre-conditions: + +* https://gradle.org/install/[Gradle] +* https://developer.android.com/studio[Android Studio] +* https://developer.android.com/studio/#command-tools[Android sdk] +* https://capacitor.ionicframework.com/docs/getting-started/[Capacitor] + + +[arabic] +. Now, open cmd and type the path where your _devon4ng-ionic-application-template_ project is present. +. Run the following commands: +[loweralpha] +.. npx cap init +.. ionic build --configuration=android +.. npx cap add android +.. npx cap copy +.. npx cap open android +. Build the APK using Android studio. + +image:images/howtos/e2e_gen/image52.png[] +image:images/howtos/e2e_gen/image53.png[] +image:images/howtos/e2e_gen/image54.png[] +image:images/howtos/e2e_gen/image55.png[] + +You can find your apk file in + +/devon4ng-ionic-application-template/android/app/build/outputs/apk/debug + +== Adapt CobiGen_Templates + +After following this tutorial, you will have the CobiGen_Templates downloaded on your local machine. To import these templates you need to do the following: + +Right click in any part of the package explorer, then click on CobiGen -> Adapt templates + +image:images/howtos/e2e_gen/image56.png[] + +Click _Ok_: + +image:images/howtos/e2e_gen/image57.png[] + +Now the CobiGen_Templates project will be automatically imported into your workspace, as shown on the image below: + +image:images/howtos/e2e_gen/image58.png[] + +image:images/howtos/e2e_gen/image59.png[] + +Now you just need to change the Java version of the project to JRE 1.8. Right click on the JRE system library, and then on _Properties:_ + +image:images/howtos/e2e_gen/image60.png[] + +Now change the version to Java 11 + +Now you have successfully imported the CobiGen templates. If you want to edit them, you will find them in the folder _src/main/templates._ For instance, the Java templates are located here: + +image:images/howtos/e2e_gen/image62.png[] + +Now you can adapt the templates as much as you want. Documentation about this can be found on: + +[source, URL] +https://github.com/devonfw/tools-cobigen/wiki/Guide-to-the-Reader diff --git a/docs/modules/ROOT/pages/cobigen.wiki/howto-devonfw-adapt_template.adoc b/docs/modules/ROOT/pages/cobigen.wiki/howto-devonfw-adapt_template.adoc new file mode 100644 index 00000000..be2ab4c2 --- /dev/null +++ b/docs/modules/ROOT/pages/cobigen.wiki/howto-devonfw-adapt_template.adoc @@ -0,0 +1,38 @@ +:doctype: book +:toc: +toc::[] +==Adapt Templates from CobiGen + +== Adapt CobiGen_Templates + +After following this tutorial, you will have the CobiGen_Templates downloaded on your local machine. To import these templates you need to do the following: + +Right click in any part of the package explorer, then click on CobiGen -> Adapt templates + +image:images/howtos/e2e_gen/image56.png[] + +Click OK: + +image:images/howtos/e2e_gen/image57.png[] + +Now the CobiGen_Templates project will be automatically imported into your workspace, as shown on the image below: + +image:images/howtos/e2e_gen/image58.png[] + +image:images/howtos/e2e_gen/image59.png[] + +Now you just need to change the Java version of the project to JRE 1.8. Right click on the JRE system library, and then on _Properties:_ + +image:images/howtos/e2e_gen/image60.png[] + +Now change the version to Java 1.8 +image:images/howtos/e2e_gen/image61.png[] + +Now you have successfully imported the CobiGen templates. If you want to edit them, you will find them in the folder `_src/main/templates._` For instance, the Java templates are located here: + +image:images/howtos/e2e_gen/image62.png[] + +Now you can adapt the templates as much as you want. Documentation about this can be found on: + +[source, URL] +https://github.com/devonfw/tools-cobigen/wiki/Guide-to-the-Reader \ No newline at end of file diff --git a/docs/modules/ROOT/pages/cobigen.wiki/howto-devonfw-ide-CobiGen-PoC-E2E.adoc b/docs/modules/ROOT/pages/cobigen.wiki/howto-devonfw-ide-CobiGen-PoC-E2E.adoc new file mode 100644 index 00000000..fd47a6ea --- /dev/null +++ b/docs/modules/ROOT/pages/cobigen.wiki/howto-devonfw-ide-CobiGen-PoC-E2E.adoc @@ -0,0 +1,396 @@ +:toc: +toc::[] +[.text-center] +==End to End POC Code generation using Entity class +This article helps to create a sample application using cobigen. + +== Prerequisites + +Download and install devonnfw IDE https://devonfw.com/website/pages/docs/devonfw-ide-introduction.adoc.html#setup.adoc[here], + +== Steps to create a Sample Project using Cobigen + +The HOW_TO is divided in 2 parts: +[arabic] +. BE-Back End generator (DB + DAO + services) – CONTRACT FIRST APPROACH +. FE-Front End generator (Web App Angular + Ionic App) – CONTRACT FIRST APPROACH + +image:images/howtos/e2e_gen/image9.png[cobigen ionic code genartion] + +So, ready to go! We’re going to start from the BE part … + +=== Back End + +run \devonfw-ide-scripts-3.2.4\eclipse-main.bat + +It will open eclipse + + +[arabic, start=6] + +create a project using below command from the command prompt + +[source, java] +devon java create com.example.domain.myapp + + +Import the project to eclipse as maven project +image:images/howtos/e2e_gen/image14.png[eclipse devon] + +Click *FINISH* + +Now We have the following 4 projects. + +image:images/howtos/e2e_gen/image15.png[eclipse package explorer] + +*BEFORE to start to create an Entity class, remember to create the tables !* + +[arabic, start=7] +. Create a new *SQL* *file* (i.e: V0005__CreateTables-ItaPoc.sql) inside __myapp-__core and insert the following script: + +[source, sql] + +CREATE TABLE EMPLOYEE ( +id BIGINT auto_increment, modificationCounter INTEGER NOT NULL, +employeeid BIGINT auto_increment, +name VARCHAR(255), +surname VARCHAR(255), +email VARCHAR(255), +PRIMARY KEY (employeeid) +); + + +*_WARNING_*: please note that there are 2 underscore in the name ! + +image:images/howtos/e2e_gen/image16.png[sql file] + +[arabic, start=8] +. Now create another SQL file (i.e: V0006__PopulateTables-ItaPoc.sql) and add following script about the INSERT in order to populate the table created before + +*_WARNING_*: please note that there are 2 underscore in the name ! + +[source, sql] +INSERT INTO EMPLOYEE (id, modificationCounter, employeeid, name, surname,email) VALUES (1, 1, 1, 'Albert','Miller','albert.miller@capgemini.com'); +INSERT INTO EMPLOYEE (id, modificationCounter, employeeid, name, surname,email) VALUES (2, 2, 2, 'Wills','Smith', 'wills.smith@capgemini.com'); +INSERT INTO EMPLOYEE (id, modificationCounter, employeeid, name, surname,email) VALUES (3, 3, 3, 'Jaime','Thomas', 'jaime.thomas@capgemini.com'); + +image:images/howtos/e2e_gen/image17.png[sql insert] + + +*Let's create the Entity Class for the code generation* + +[arabic, start=9] +. Create a package *employeemanagement.dataaccess.api* under the folder myapp-core. Note: It is important to follow this naming convention for CobiGen to work properly. + +image:images/howtos/e2e_gen/poc-entity-package.png[package] + +. Now create a JPA Entity class in this package + +[source, java] +import javax.persistence.Entity; +import javax.persistence.GeneratedValue; +import javax.persistence.GenerationType; +import javax.persistence.Column; +@Entity +@javax.persistence.Table(name = "EMPLOYEE") +public class EmployeeEntity { + @Column(name = "EMPLOYEEID") + @GeneratedValue(strategy = GenerationType.IDENTITY) + private Long employeeId; + @Column(name = "NAME") + private String name; + @Column(name = "SURNAME") + private String surname; + @Column(name = "EMAIL") + private String email; +} + +then generate getters and setters for all attributes … + +[arabic, start=10] +. Use Cobigen to generate code. Right click on EmployeeEntity. CobiGen -> Generate + +It will ask you to download the templates, click on _update_: + +image:images/howtos/e2e_gen/image19.png[cobigen generate] + +It will automatically download the latest version of _CobiGen_Templates_. + +*Attention:* If you want to adapt the CobiGen_Templates, (normally this is not neccessary), you will find at the end of this document a tutorial on how to import them and adapt them! + +[arabic, start=11] +. Click on all the option selected as below: + +image:images/howtos/e2e_gen/image20.png[cobigen option selection] + +[arabic, start=12] +. Click on finish. Below Screen would be seen. Click on continue + +image:images/howtos/e2e_gen/image21.png[cobigen finish] + +*The entire [.underline]#BE layer# structure having CRUD operation methods will be auto generated.* + +Some classes will be generated on the api part (_myapp-api)_, normally it will be interfaces, as shown below: + +image:images/howtos/e2e_gen/image22.png[be layer] + +Some other classes will be generated on the core part (_myapp-core)_, normally it will be implementations as shown below: + +image:images/howtos/e2e_gen/image23.png[core folder] + +*BEFORE to generate the FE*, please start the Tomcat server to check that BE Layer has been generated properly. + +To start a server you just have to right click on _SpringBootApp.java_ -> _run as -> Spring Boot app_ + +image:images/howtos/e2e_gen/image24.png[Eclipse run as] + +image:images/howtos/e2e_gen/image25.png[Spring boot run] + +image:images/howtos/e2e_gen/image26.png[Spring boot run] + +*BE DONE* + +Last but not least: We make a quick REST services test ! + +See in the application.properties the TCP Port and the PATH + +image:images/howtos/e2e_gen/image27.png[application properties] + +Now compose the Rest service URL: + +service class path>/{{ 'description' | transloco }}
+ +{{ 'employeemanagement.Employee.navDataSub' | transloco }}
+
277 Bedford Avenue,
Brooklyn, NY 11211,
New York, USA
277 Bedford Avenue,
Brooklyn, NY 11211,
New York, USA
The .NET Core SDK no longer supports project.json or Visual Studio 2015. Everyone doing .NET Core development is encouraged to migrate from project.json to csproj and Visual Studio 2017.+
+
+
In this walkthrough, you will build an ASP.NET Core MVC application that performs basic data access using Entity Framework. You will use reverse engineering to create an Entity Framework model based on an existing database.+ + +
+ +The following prerequisites are needed to complete this walkthrough:+ + +
+This tutorial uses a Blogging database on your LocalDb instance as the existing database.+ + +
+If you have already created the Blogging database as part of another tutorial, you can skip these steps.+ + +
+CREATE DATABASE [Blogging];
+GO
+
+USE [Blogging];
+GO
+
+CREATE TABLE [Blog] (
+ [BlogId] int NOT NULL IDENTITY,
+ [Url] nvarchar(max) NOT NULL,
+ CONSTRAINT [PK_Blog] PRIMARY KEY ([BlogId])
+);
+GO
+
+CREATE TABLE [Post] (
+ [PostId] int NOT NULL IDENTITY,
+ [BlogId] int NOT NULL,
+ [Content] nvarchar(max),
+ [Title] nvarchar(max),
+ CONSTRAINT [PK_Post] PRIMARY KEY ([PostId]),
+ CONSTRAINT [FK_Post_Blog_BlogId] FOREIGN KEY ([BlogId]) REFERENCES [Blog] ([BlogId]) ON DELETE CASCADE
+);
+GO
+
+INSERT INTO [Blog] (Url) VALUES
+('http://blogs.msdn.com/dotnet'),
+('http://blogs.msdn.com/webdev'),
+('http://blogs.msdn.com/visualstudio')
+GO
+To use EF Core, install the package for the database provider(s) you want to target. This walkthrough uses SQL Server. For a list of available providers see Database Providers.3 +
+Tools > NuGet Package Manager > Package Manager Console
+Run Install-Package Microsoft.EntityFrameworkCore.SqlServer
We will be using some Entity Framework Tools to create a model from the database. So we will install the tools package as well:+ + +
+Install-Package Microsoft.EntityFrameworkCore.ToolsWe will be using some ASP.NET Core Scaffolding tools to create controllers and views later on. So we will install this design package as well:+ + +
+Install-Package Microsoft.VisualStudio.Web.CodeGeneration.DesignNow it's time to create the EF model based on your existing database.+ + +
+The term 'Scaffold-DbContext' is not recognized as the name of a cmdlet, then close and reopen Visual Studio.Scaffold-DbContext "Server=(localdb)\mssqllocaldb;Database=Blogging;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
+The reverse engineer process created entity classes (Blog.cs & Post.cs) and a derived context (BloggingContext.cs) based on the schema of the existing database.+
+
+
The entity classes are simple C# objects that represent the data you will be querying and saving.+ + +
+using System;
+using System.Collections.Generic;
+
+namespace EFGetStarted.AspNetCore.ExistingDb.Models
+{
+ public partial class Blog
+ {
+ public Blog()
+ {
+ Post = new HashSet<Post>();
+ }
+
+ public int BlogId { get; set; }
+ public string Url { get; set; }
+
+ public virtual ICollection<Post> Post { get; set; }
+ }
+}
+The context represents a session with the database and allows you to query and save instances of the entity classes.+ + +
+ +public partial class BloggingContext : DbContext
+{
+ public virtual DbSet<Blog> Blog { get; set; }
+ public virtual DbSet<Post> Post { get; set; }
+
+ protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
+ {
+ if (!optionsBuilder.IsConfigured)
+ {
+ #warning To protect potentially sensitive information in your connection string, you should move it out of source code. See http://go.microsoft.com/fwlink/?LinkId=723263 for guidance on storing connection strings.
+ optionsBuilder.UseSqlServer(@"Server=(localdb)\mssqllocaldb;Database=Blogging;Trusted_Connection=True;");
+ }
+ }
+
+ protected override void OnModelCreating(ModelBuilder modelBuilder)
+ {
+ modelBuilder.Entity<Blog>(entity =>
+ {
+ entity.Property(e => e.Url).IsRequired();
+ });
+
+ modelBuilder.Entity<Post>(entity =>
+ {
+ entity.HasOne(d => d.Blog)
+ .WithMany(p => p.Post)
+ .HasForeignKey(d => d.BlogId);
+ });
+ }
+}
+The concept of dependency injection is central to ASP.NET Core. Services (such as BloggingContext) are registered with dependency injection during application startup. Components that require these services (such as your MVC controllers) are then provided these services via constructor parameters or properties. For more information on dependency injection see the Dependency Injection article on the ASP.NET site.+
+
+
In ASP.NET Core, configuration is generally performed in Startup.cs. To conform to this pattern, we will move configuration of the database provider to Startup.cs.1 +
+Models\BloggingContext.csOnConfiguring(...) methodprotected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
+{
+ #warning To protect potentially sensitive information in your connection string, you should move it out of source code. See http://go.microsoft.com/fwlink/?LinkId=723263 for guidance on storing connection strings.
+ optionsBuilder.UseSqlServer(@"Server=(localdb)\mssqllocaldb;Database=Blogging;Trusted_Connection=True;");
+}
+public BloggingContext(DbContextOptions<BloggingContext> options)
+ : base(options)
+{ }
+In order for our MVC controllers to make use of BloggingContext we are going to register it as a service.+
+
+
using statements at the start of the fileusing EFGetStarted.AspNetCore.ExistingDb.Models;
+using Microsoft.EntityFrameworkCore;
+Now we can use the AddDbContext(...) method to register it as a service.+
+
+
ConfigureServices(...) method// This method gets called by the runtime. Use this method to add services to the container.
+public void ConfigureServices(IServiceCollection services)
+{
+ services.AddMvc();
+
+ var connection = @"Server=(localdb)\mssqllocaldb;Database=Blogging;Trusted_Connection=True;";
+ services.AddDbContext<BloggingContext>(options => options.UseSqlServer(connection));
+}
+In a real application you would typically put the connection string in a configuration file. For the sake of simplicity, we are defining it in code. For more information, see Connection Strings.+ + +
+Next, we'll enable scaffolding in our project.+ + +
+ScaffoldingReadMe.txt file that opensNow that scaffolding is enabled, we can scaffold a controller for the Blog entity.+
+
+
You can now run the application to see it in action.+ + +
+/Blogs
+
+
+
+
+
+