jHipster etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
jHipster etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

9 Haziran 2020 Salı

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)