11 Haziran 2020 Perşembe

JHipster-9 (Yeni yetki(Role) oluşturma ve ekranları oluşturlan yetkiye bağlama)

Herkese merhaba,
bu yazımda JHipster ile yeni bir role'ün nasıl oluşturulacağını paylaşacağım.
Daha önceki yazılarımda paylaştığım üzere JHipster projesi varsayılan olarak ROLE_ADMIN ve ROLE_USER şeklinde tanımlı iki rolle oluşmaktadır.
Bunlarn dışında bir yetkiye ihtiyacınız olduğunda yetkinin nasıl oluşturlacağını ve ekranların bu yetki ile nasıl açılacağını aşağıdaki adımları inceleyerek öğrenebilirsiniz.

Yazının devamında student adında bir entity oluşturulacaktır. Yine student ekranlarını  bağlamak için  "ROLE_MANAGER" diye bir yetki oluştrulup devam edilecektir. Frontend tarafında angularjs kullanılmıştır.

ilk olarak jhipster projesine giderek student adında bir entity oluşturun.

$ jhipster entity student


Wizard üzerindeki soruları aşağıdaki şekilde yanıtlayın.
? Do you want to add a field to your entity? Yes
? What is the name of your field? firstname
? What is the type of your field? String
? Do you want to add validation rules to your field? No
? Do you want to add a field to your entity? No
? Do you want to add a relationship to another entity? No

================= Student =================
Fields
firstname (String)

? Do you want to use separate service class for your business logic? No, the REST controller should use the repository directly
? Is this entity read-only? No
? Do you want pagination on your entity? No

 

Bu adımları tamamladıktan sonra student ekranları ROLE_USER yetkisine sahip kullanıcılara gösterilecektir. Şimdi bu yetkilendirmeyi ROLE_MANAGER'a çekmek için ilk olarak frontend tarafındaki  authority.constants.ts dosyasına yeni role'ü aşağıdaki şekilde ekleyin.

MANAGER = 'ROLE_MANAGER', 

 

Dosyasının son hali aşağıdaki gibi olacaktır.


export enum Authority {
ADMIN = 'ROLE_ADMIN',
USER = 'ROLE_USER',
MANAGER = 'ROLE_MANAGER',

} 


 


student.route.ts dosyasında authorities alanı   authorities: [Authority.MANAGER] şeklinde güncelleyin.

student.route.ts dosyasının son hali aşağıdaki gibi olacaktır.


export const studentRoute: Routes = [
{
path: '',
component: StudentComponent,
data: {
authorities: [Authority.MANAGER],
pageTitle: 'hipsterAngularApp.student.home.title',
},
canActivate: [UserRouteAccessService],
},
{
path: ':id/view',
component: StudentDetailComponent,
resolve: {
student: StudentResolve,
},
data: {
authorities: [Authority.MANAGER],
pageTitle: 'hipsterAngularApp.student.home.title',
},
canActivate: [UserRouteAccessService],
},
{
path: 'new',
component: StudentUpdateComponent,
resolve: {
student: StudentResolve,
},
data: {
authorities: [Authority.MANAGER],
pageTitle: 'hipsterAngularApp.student.home.title',
},
canActivate: [UserRouteAccessService],
},
{
path: ':id/edit',
component: StudentUpdateComponent,
resolve: {
student: StudentResolve,
},
data: {
authorities: [Authority.MANAGER],
pageTitle: 'hipsterAngularApp.student.home.title',
},
canActivate: [UserRouteAccessService],
},

]; 


 

backend tarafında ROLE_MANAGER yetkisini eklemek için AuthoritiesConstants.java dosyasına aşağıdaki satırı ekleyin.

public static final String MANAGER = "ROLE_MANAGER"; 

 

Dosyanın son hali aşağıdaki gibi olmaldır.


public final class AuthoritiesConstants {

public static final String ADMIN = "ROLE_ADMIN";

public static final String USER = "ROLE_USER";

public static final String ANONYMOUS = "ROLE_ANONYMOUS";

public static final String MANAGER = "ROLE_MANAGER";

private AuthoritiesConstants() {
}
}

 

 

Liquebase changeset ler ile role'ün veritabanında oluşması için authority.csv dosyasına ROLE_MANAGER'ı aşağıdaki şekilde ekleyin.


name
ROLE_ADMIN
ROLE_USER
ROLE_MANAGER

 

 

 StudentResource dosyasına giderek buradaki tüm public methodların üstüne aşağıdaki satırı ekleyin.

@PreAuthorize("hasAuthority('ROLE_MANAGER')") 

 

Uygulamayı restart ettiken sonra browser üzerinden aşağıdaki adrese giderek http://localhost:9000/account/register adresinden yeni bir kullanıcı kaydı oluşturun. 
daha sonra admin kullanıcısıyla giriş yaparak http://localhost:9000/admin/user-management sayfasına gidin.
Olulşturduğunuz kullanıcıyı editleyerek status'ünü aktif'e çekip bu kullanıcıyı  ROLE_MANAGER olarak yetkilendirin.

Kullancıyı yetkilendirdikten  sonra signuout olarak yeni kullanıcyla giriş yapın. Browser üzerinden http://localhost:9000/student adresine gittiğinizde ROLE_MANAGER yetkisine sahip kullanıcıyla bu ekranların erişildiğini göreceksiniz. 

Siseme "user" kullanıcısyla login olduktan sonra bu ekranlar yetkilendiremeye takılarak açılmayacaktır.

9 Haziran 2020 Salı

JHipster-8 (Build alma ve Docker deployment)

Merhaba,
bu yazımda jhipster ile oluşturulan bir angular-spring projesinin docker üzerinde nasıl deploy edildiğini inceleyeceğiz.

Paylaşım yapmaya başlamadan önce production image'ı kendi makinemizde ayağa kaldıracağımız için  docker'ın çalışma yaptığınız makinde kurulu olması gerektiğinin hatırlatmasını yapmak isterim.

ilk olarak ptoduction yük almak ve gerekli docker dosyalarını oluşturmak için aşağıdaki komutu terminalden çalıştırın  

jhipster docker-compose 


terminal üzerindnen wizard ile gelen soruları aşağıdaki şekilde yanıtlayın.

? Which *type* of application would you like to deploy? Monolithic application

? Enter the root directory where your applications are located ../
? Which applications do you want to include in your configuration? hipster-angular
? Do you want to setup monitoring for your applications ? No

 

Bu işlemden sonra root(kök) dizinde production yükü almak  için kullanacağımız bir docker-compose.yml dosyası oluşacaktır. oluşan dosya mysql ve geliştirdiğimiz uygulamanın image'ını işaret etmektedir.  Bu işlem sadece ilk build için yapılacaktır. Sonraki buildlere zaten docker-compose.yml elimizde olacağı için tekrardan bu dosyası oluşturmaya gerek yoktur.

Oluşan docker-compose.yml dosyasının içeriği aşağıdaki gibi olacaktır.


version: '2'
services:
hipsterangular:
image: hipsterangular
environment:
- _JAVA_OPTIONS=-Xmx512m -Xms256m
- 'SPRING_PROFILES_ACTIVE=prod,swagger'
- MANAGEMENT_METRICS_EXPORT_PROMETHEUS_ENABLED=true
- 'SPRING_DATASOURCE_URL=jdbc:mysql://hipsterangular-mysql
:3306/hipsterangular?useUnicode=true&characterEncoding=
utf8&useSSL=false&useLegacyDatetimeCode=false&serverTimezone
=UTC&createDatabaseIfNotExist=true'
- JHIPSTER_SLEEP=30
ports:
- '8080:8080'
hipsterangular-mysql:
image: 'mysql:8.0.20'
environment:
- MYSQL_USER=root
- MYSQL_ALLOW_EMPTY_PASSWORD=yes
- MYSQL_DATABASE=hipsterangular
command: mysqld --lower_case_table_names=1 --skip-ssl

    --character_set_server=utf8mb4 --explicit_defaults_for_timestamp 


 

docker compose dosyasını oluşturduktan sonra jib ve maven ile bir docker image'ı oluşturmak için aşağıdaki komutu çalıştırın.

 $ ./mvnw -Pprod verify jib:dockerBuild


jib: docker engine olmadan docker image'ı oluşturamay yarayan bir library dir. 


oluşturulan image'ı görüntülemek için aşağıdaki komutu terminalden çalıştırın.

 $ docker images

 

çıktı aşağıdaki gibi olmalıdır

REPOSITORY              TAG                 IMAGE ID            CREATED              SIZE

hipsterangular          latest              85eb54432ad8        About a minute ago   293MB

 

app.yml dosyasını kaynak göstererek docker image'larını (mysql+app) container olarak ayağa kaldırmak için aşağıdaki docker komutunu çalıştırın.

 $ docker-compose -f src/main/docker/app.yml up -d

 

Tüm bu işlemleri tamamladıktan sorna browser üzerinden http://localhost:8080/ adresine erişince ekrandaki developemnt rozetinin(badge) gittiğini ve production olarak docker üzerinde deploy edildiği görülmektedir.

Yine deployment sonrasında aşağıdaki adresler incelenebilir.
metrikler :  http://localhost:8080/admin/metrics
kullanıcılar : http://localhost:8080/admin/user-management
ayarlar :http://localhost:8080/admin/configuration
eventler : http://localhost:8080/admin/audits
loglar : http://localhost:8080/admin/logs
swagger : http://localhost:8080/admin/docs

JHipster-7 (JDL ile ManyToMany ilişkili ekranlar oluşturma)

Merhaba,
bu yazımda sizlere jhipster ile jdl dosyasından ManyToMany ilişkili entity ve bu entity'nin CRUD ekranlarının nasıl oluşturulacağını paylaşacağım.

ilk olarak terminalden jhipster projenizin bulunduğu dizine gidin.

$ cd  hipster-angular/  

 

touch komuturyla içinde entity tanımlamalarını yapacağımız  many-to-many.jdl adında bir dosya oluşturun.

 $ touch many-to-many.jdl 

 

dosya içeriği aşağıdaki gibi olmalıdır.


entity Car {
name String required,
color String required,
year Integer required
}

entity Driver {
firstName String required,
lastName String required
}

relationship ManyToMany {
Car{driver} to Driver{car}

} 


 

import-jdl komutuyla dosya içindeki entityleri oluşturun.

$ jhipster import-jdl   many-to-many.jdl 

 

Bu komut ile many-to-many.jdl  dosyasında tanımlanan iki entity ve bu entitylerle ilişkili tüm dosyalar oluşturulacaktır.

oluşturma işlemi bittikten sonra Car.java(entity) aşağıdaki gibi olacaktır.


@Entity
@Table(name = "car")
@Cache(usage = CacheConcurrencyStrategy.READ_WRITE)
public class Car implements Serializable {

private static final long serialVersionUID = 1L;

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

@NotNull
@Column(name = "name", nullable = false)
private String name;

@NotNull
@Column(name = "color", nullable = false)
private String color;

@NotNull
@Column(name = "year", nullable = false)
private Integer year;

@ManyToMany
@Cache(usage = CacheConcurrencyStrategy.READ_WRITE)
@JoinTable(name = "car_driver",
joinColumns = @JoinColumn(name = "car_id",
referencedColumnName = "id"),
inverseJoinColumns = @JoinColumn(name = "driver_id",
referencedColumnName = "id"))
private Set<Driver> drivers = new HashSet<>();
...

 

 


Driver.java(entity) dosyasının içeriği de aşağıdaki şekilde olacaktır.


@Entity
@Table(name = "driver")
@Cache(usage = CacheConcurrencyStrategy.READ_WRITE)
public class Driver implements Serializable {

private static final long serialVersionUID = 1L;

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

@NotNull
@Column(name = "first_name", nullable = false)
private String firstName;

@NotNull
@Column(name = "last_name", nullable = false)
private String lastName;

@ManyToMany(mappedBy = "drivers")
@Cache(usage = CacheConcurrencyStrategy.READ_WRITE)
@JsonIgnore
private Set<Car> cars = new HashSet<>();
...

 

 


Yine projede git status ile değişen dosyalara ve yeni oluşan dosyalara bakmanız biraz daha konunun anlaşılmasına yardımcı olabilir

 $ git status

 

işlem tamamlandıktan sonra projeyi ayağa kaldırarak Car ve Driver oluşturarak mutlaka aşıdaki ekranları inceleyiniz.

http://127.0.0.1:8080/driver
http://127.0.0.1:8080/driver/1/view
http://127.0.0.1:8080/car
http://127.0.0.1:8080/car/1/edit


JHipster-6 (JDL ile OneToMany(master-detail) ilişkili ekranlar oluşturma)

Merhaba,
bu yazımda sizlere jhipster ile jdl dosyasından entity oluşturmayı ve iki entity arasında oneToMany ilişkisi kurmayı paylaşacağım.

ilk olarak terminalden jhipster projenizin bulunduğu dizine gidin.
$ cd  hipster-angular/ 

touch komuturyla içinde entity tanımlamalarını yapacağımzı  one-to-many.jdl adında bir dosya oluşturun.
$ touch one-to-many.jdl 

dosya içeriği aşağıdaki gibi olmalıdır.

entity Owner {
    name String required
}
 
entity Pet {
    name String required,
    species String required
}
 
relationship OneToMany {
    Owner{pet} to Pet{owner}
} 


import-jdl komutuyla dosya içindeki entityleri oluşturun.
jhipster import-jdl   one-to-many.jdl 

Bu komut ile one-to-many.jdl dosyasında ilişkisi kurulan  owner ve pet entity lerinin frontend ve backend tarafındaki tüm dosyaları oluşturulacaktır.

projede git status ile değişen dosyalara ve yeni oluşan dosyalara bakmanız biraz daha konunun anlaşılmasına yardımcı olabilir
$ git status  

işlem tamamlandıktan sonra Owner ve Pet oluşturarak mutlaka aşıdaki ekranları inceleyiniz.

Owner Listesi : http://localhost:8080/owner
Yeni Owner : http://localhost:8080/owner/new
Pet Listesi : http://localhost:8080/pet
Pet görüntüle : http://localhost:8080/pet/11/view

NOT: içerik hazırlanırken aşağıdaki adresten faydalanılmıştır.
https://dadtechblog.com/2017/05/27/creating-a-master-detail-relationship-with-jhipster/


JHipster-5 (AngularJS ile frontend tarafında yetki kontrolü)

Merhaba,
bu yazımda sizlere JHipster ile oluşturduğunuz monolitik projelerde angularJS ile frontend tarafında role kontrolünün nasıl yapılacağını palaşcağım.

Aslında angularJS bilenler için işlem çok tanıdık gelecektir. Her nekadar JHipster projesi desekte içinde springboot ve angularJs implementasyonu yapılmış bir yapı kastedilmektedir.

frontend tarafında erişim kontrolü örneği için projedeki anasayfaya bir mesaj yazdırılacaktır. Eğer kullanıcı admin ise mesaj ekranda görüntülenecektir. Admin değilse gizlenecektir.

ilk olarak gösterilecek mesajı projedeki lokalizasyon dosyası içine ekleyin.
./src/main/webapp/i18n/en/home.json dosyasına giderek
home.titleAdmin karşılığına aşağıdaki içeriği ekleyin
  "Welcome, Java Hipster ADMIN!"

son hali aşağıdaki gibi olmaldıır.

{
  "home": {
    "title": "Welcome, Java Hipster!",
    "titleAdmin": "Welcome, Java Hipster ADMIN!",
    "subtitle": "This is your homepage",
    "logged": {
      "message": "You are logged in as user \"{{username}}\"."
},... 


ikinci ve son olarak  ./src/main/webapp/app/home/home.component.html dosyasına giderek <h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1> satırının altına aşağıdaki satırı ekleyin.
<h1 *jhiHasAnyAuthority="'ROLE_ADMIN'" class="display-4" jhiTranslate="home.titleAdmin"></h1>

 son hali aşağıdaki gibi olacaktır.

<h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1>
<h1 *jhiHasAnyAuthority="'ROLE_ADMIN'" class="display-4" jhiTranslate="home.titleAdmin"></h1> 


NOT: Bu dosya üzerinde <div [ngSwitch]="isAuthenticated()"> şeklinde tanımlana bir div bulunmaktadır. Bu div'in içeriği de yine sadece authanticated kullanıcılar için görünür olacaktır.

Browser üzerinde http://localhost:9000/ adresine girerek hem giriş yapmadan hem de giriş yaparak aradaki farkı inceleyebilirsiniz.

kaynak : https://github.com/Tonterias/JhipsterPress


JHipster-4 (Oluşturulan Angular JS sayfasını public erişime açma)

Merhaba,
bu yazımda oluşturulan  monolitik  JHipster projesinin ekranlarının public erişime nasıl açılacağını paylaşacağım.

ilk olarak bir önceki yazımda paylaştığım üzere student adında bir entity oluşturun. Varsayınlan olarak bu student entity'sine ait ekranlara erişebilmek için sisteme login olmak gerekmektedir. Çünkü hem backend tarafında hemde Frontend tarafında erişim kontrolü yapılıp eğer kullanıcı sisteme login olmamışsa bu ekranlar kullanıcıya gösterilmemektedir.

 Ancak JHipster ile proje geliştirirken  register sayfası gibi login olmadan da erişilebilecek sayfalar yapma ihtiyacınız doğabilir. Dolayısıyla böyle bir ihtiyaç doğması durumunda projede aşağıdaki değişiklikleri yaparak erkanları public erişime açabilirsiniz.

Projede forntend ve backend tarafı ayrı olduğu için hem Backend ten hemede Frontend tarafında gereken tanımlamaları yapmanız gerekmektedir.

ilk olarak Backend tarafı için  erişim tanımlamalarının yapıldığı  SecurityConfiguration#configure(HttpSecurity) methoduna giderek      .antMatchers("/api/register").permitAll()  satırının altına aşağıdaki satırları ekleyin.
 .antMatchers("/api/students").permitAll()
.antMatchers("/api/students/*").permitAll()

son hali aşağıdaki gibi olmalıdır.

.authorizeRequests()
.antMatchers("/api/authenticate").permitAll()
.antMatchers("/api/register").permitAll()
.antMatchers("/api/students").permitAll()
.antMatchers("/api/students/*").permitAll()
.antMatchers("/api/activate").permitAll()
.antMatchers("/api/account/reset-password/init").permitAll()
.antMatchers("/api/account/reset-password/finish").permitAll()
.antMatchers("/api/**").authenticated()
.antMatchers("/management/health").permitAll()
.antMatchers("/management/info").permitAll()
.antMatchers("/management/prometheus").permitAll()
.antMatchers("/management/**").hasAuthority(AuthoritiesConstants.ADMIN)


Frontend tarafı içinse aşağıdaki dosyada canActivate olan satırları silin.
src/main/webapp/app/entities/student/student.route.ts

Yine student.route.ts dosyası içinde    authorities alanlarının karşılığını boş array olarak set edin (authorities: []).

son hali aşağıdaki şekilde olmalıdır

export const studentRoute: Routes = [
  {
    path: '',
    component: StudentComponent,
    data: {
      authorities: [],
      pageTitle: 'demoHipster.student.home.title',
    },
  },
  {
    path: ':id/view',
    component: StudentDetailComponent,
    resolve: {
      student: StudentResolve,
    },
    data: {
      authorities: [],
      pageTitle: 'demoHipster.student.home.title',
    },
  },
  {
    path: 'new',
    component: StudentUpdateComponent,
    resolve: {
      student: StudentResolve,
    },
    data: {
      authorities: [],
      pageTitle: 'demoHipster.student.home.title',
    },
  },
  {
    path: ':id/edit',
    component: StudentUpdateComponent,
    resolve: {
      student: StudentResolve,
    },
    data: {
      authorities: [],
      pageTitle: 'demoHipster.student.home.title',
    },
  },
]; 



Bu işlemden sonra angular ekranı aktif etmek için herhangi bir rule ve role aramayacak ve ekranlar public erişime açılmış olacaktır.

kaynak:
https://github.com/Tonterias/JhipsterPress
https://www.jhipster.tech/creating-an-entity/



JHipster-3 (Controller, Service, Language ve Entity oluşturma)

Merhaba, bu yazımda sizlere JHipster projelerinize servis, controller, language ve entity eklemenin nasıl yapılacağını paylaşacağım.

JHipster ile proje oluşturduktan sonra terminali açıp projenin kök(root) dizinine gidin.
 $ cd ./demoJHipster

Foo adında bir controller oluşturmak için aşağıdaki komutu çalıştırın(https://www.jhipster.tech/creating-a-spring-controller/).
 $ jhipster spring-controller Foo

Komut satırındaki wizard ile sorulan soruları  aşağıdaki şekilde yanıtlayın.
? Do you want to add an action to your controller? Yes
? What is the name of your action? getInfo
? What is the HTTP method of your action? GET
? Do you want to add an action to your controller? No

Bu işlemler sonunda hem FooResource adında bir controller hemde FooResourceIT adında bu controller'ın class'ı oluşturulacaktır. Ayrıca controller'a getInfo methodu eklenecektir.

Bar adında bir spring service oluşturmak için aşağıdaki komutu terminalden çalıştırın(https://www.jhipster.tech/creating-a-spring-service/)
 $ jhipster spring-service Bar

Burada Interface eklemeden devam edilmiştir. Siz interface eklemek isterseniz yanıtı "yes" olarak işaretleyin.
 ? (1/1) Do you want to use an interface for your service? No

Bu işlemler sonrunda BarService adında bir spring service oluşturulacaktır.

JHipster projenize dil desteği eklemek için aşağıdaki komutu terminalden çalıştırın(https://www.jhipster.tech/installing-new-languages/)
 $ jhipster languages

Eklemek istediğiniz dil seçimlerini yaparak projenize hem UI(frontend) hemde backend tarafına dil desteği ve dosyalarını eklemiş olacaksınız.

Projenize entity eklemek için aşağıdaki komutu çalıştırın (https://www.jhipster.tech/creating-an-entity/)
 $ jhipster entity student

Yine wizard ile gelen soruları aşağıdaki şekilde yanıtlayın.
? Do you want to add a field to your entity? Yes
? What is the name of your field? name
? What is the type of your field? String
? Do you want to add validation rules to your field? Yes
? Which validation rules do you want to add? Required, Minimum length, Maximum length
? What is the minimum length of your field? 2
? What is the maximum length of your field? 20

? Do you want to add a field to your entity? Yes
? What is the name of your field? age
? What is the type of your field? Integer
? Do you want to add validation rules to your field? No

? Do you want to add a field to your entity? No
? Do you want to add a relationship to another entity? No

================= Student =================
Fields
name (String) required minlength='2' maxlength='20'
age (Integer)

? Do you want to use separate service class for your business logic? No, the REST controller should use the repository directly
? Is this entity read-only? No
? Do you want pagination on your entity? No

Aşağıdaki mesajşarı gördüğünüzde işlem başarılı demektir

Everything is configured, generating the entity...
Entity Student generated successfully.

Bu işlemler sonunda jhipster aşağıdaki adımları uygulayacaktır.
- name ve age alanlarına sahip Student adında bir entity oluşturulur.
- liquebase ile Student tablosu create edilir.
- Bu entity'nin ihtiyaç duyacağı controller,repository  ve servis katmanları eklenir.
- Yine bu entity nin kullanılacağı CRUD ekranlarını  Forntend tarafında oluşturur.
- Sayfalama var ise pagingModeller oluşturulur
- Entity leri frontend tarafına  taşımak için DTO lar oluşturulur.
- CRUD ekranları dummy datalarla birlikte gelecektir. Bu veriler üzerinden değişiklikler yaparak ekranları inceleyebilirsiniz.

oluşturduğunuz entity'e ait ekranları görüntülemek ve incelemek için browser üzerinden aşağıdaki adresi ziyaret edebilirsiniz.

WEB : http://localhost:8080/student

JHipster-2 (Kurulum ve Proje oluşturma)

Merhaba, bu yazımda sizlere JHipster kurulumunu ve JHipster ile bir spring projesinin nasıl oluşturulacağını paylaşacağım.
ilk olarak JHipster'ın çalışabilmesi için kendi işletim siteminize uygun olan  Java'yı bilgisayarnıza indirip kurun (https://www.oracle.com/java/technologies/javase-downloads.html).
JHipster kurulumdan sonra projenizi git'te tutacağınızı varsayarak git tanımlamasını yaparak projedeki tüm dosyaları intial commit ile local repoda commitler. Bunun için git'i de bilgisayarnınıza kurmanız gerekmektedir(https://git-scm.com/).
Diğer bir zorunlulta nodeJs tir. NodeJS'i de bilgisayarınıza kurun (https://nodejs.org/).

Java, NodeJS ve Git kurulumundan sonra bilgisayarnızdan terminal'i açarak aşağıdaki komutu çalıştırarak JHipster kurulumunu başlatırn.

$ npm install -g generator-jhipster 

 

işlem tamamalandıktan sonra yeni jhipster projesi için bilgisarınızda bir dizin oluşrurun ve bu dizine gidin.

$ mkdir jhipster-demo && cd jhipster-demo 

 

jhipster komutuyla proje oluşturmaya başlayın
$ jhipster 

 

Ekrandaki sorulara ihtiyacınız doğrultusunda cevaplar verin. Tüm adımlar tamamlandıktan sonra projeyi bilgisayarınızda çalıştırip inceleyebilirsiniz.

NOT: Frontend tarafının da create edilmesi için "Which type of application would you like to create?" sorusunu "Monolithic application" olarak yanıtlayın. Bu sayede oluşturacağınız projenin bir ekranı olur ve bu ekranlar üzerinde işlemler yapabilirsiniz.

Backend(springboot) tarafını ayağa kaldırmak için aşağıdaki maven komutunu çalıştırın

$ ./mvnw 


Frontend tarafını ayağa kaldırmak için npm start komutunu kullanın

 $ npm start

 

uygulama ayağa kalktıktan sonra browser üzerinden aşağıdaki url leri inceleyebilirsiniz.

root: http://localhost:9000/
kullanıcı yönetimi : http://localhost:9000/admin/user-management
metrikler : http://localhost:9000/admin/metrics
kofigürasyonlar : http://localhost:9000/admin/configuration
swagger API : http://localhost:9000/admin/docs
Database : http://localhost:9000/h2-console

JHipster-1 (JHipster nedir ? Ne işe yarar ?)

Merhaba,
bu yazımda JHipster(Java Hipster) hakkında bir kaç bilgi aktaracağım. Esasen şirket içi eğitim için aldığım kısa notları derleyerek  buradan paylaşacağım.

JHipster bir java geliştirme platformudur. Bir çok geliştirici(developer) aynı şeyleri tekrar tekrar yazmayım diye kendine bir şablon proje(boilerplate) oluşturmayı denemiştir. Github üzerinde beğenilen(star) ve indirme  oranı yüksek olan   birçok dil ve library ile temelleri oluşturulmuş çokça tepmplate proje de bulunmaktadır.  Bu çalışmaların yapılmasında ve bu repoların oluşturulmasındaki maksat ayrnı işleri tekrarlı bir şekilde yapmaktan kaçmaktır. Özetle amaç zaman kaybının önüne geçmektir.

JHipster community de buradaki ihtiyaca çözüm üretmek adına Java ile geliştirme yapan developer'ların sıfırdan proje yaparken ilk adımları hızlı olması adına belli teknolojileri ve kofigurasyonları bir araya getirerek bir şablon proje  hazırlamışlardır. Buradaki paketin içinden ihtiyacınız olanları seçerek kendinize bir geliştirme ortamı hazırlayabilmektesiniz.

Nasıl bir şablon projeden bahsediyorum  örnek olarak açıklamaya çalışayım; mesela oluşturacağınız bir çok yeni projede bir login ekranı kullanmak isteyebilirsiniz. Yada projede  database kullanacaksanız bir migration(değiişikliklerin uygulanması) yapısına ihtiyacınız olacaktır. Yine bir loglama alt yapısına ihtiyac duymanız kuvvetle muhtemeldir. Dolayısıyla bu ve benzeri kofigürasyonlar için her projede yeniden efor sarfetmemek adına kendiniz bir boilerplate proje oluşturabilirsiniz yada bu işi bir standart üzerine inşa etmiş JHipster tan faydalanabilirsiniz. JHipster tam olarak üstte bahsettğim teknolojileri bir araya getirerek size ilk ayarları yapılmış bir proje sunmaktadır.

JHipster üstte paylaştıklarıma ek olarak şağıdaki tanım ve teknolojileri de destekler.

Core
- Java 
- SpringBoot
- SpringSecurity
- SpringMVCRest
- Jackson
- internationalization
- profile(dev,prod)

Frontend
- React With Redux (Redux ile birlikte)
- Angular
- Vue
- Sass
- css
- bootstrap

Database
- mongoDB
- Couchbase 
- Relational DB(H2,MySQL,..)

Cache
- Ehcache
- Hazelcast
- Caffeine

Deployment
- heroku
- openshift
- aws

Build
- maven
- gradle
- grunt
- yeoman
- webpack
- git

JHipster bu kadar teknolojinin hepsini kullanabilir. Ancak CLI üzerinden proje olulturmak istediğinizde veya web arayüzü üzerinden ilerlerken ihtiyacınıza göre üstteki listeden eleme yada ekleme yapabilirsiniz. ÖRN: Microservis için bir frontend framework'e ihtiyacınız olmayacağı gibi monolitic uygulamada da sadece angular'ı veya react'ı seçerek te ilerleyebilmektesiniz.

JHipster ile çalışmaya başlamak için bilgisayarnızda aşağıdaki programların kurulu olması gerekmektedir.
- Java
- NodeJs
- JHipster (npm install -g generator-jhipster)