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

9 Haziran 2020 Salı

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-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)

22 Temmuz 2017 Cumartesi

Angular Js ile hello world (Mac OSx üzerine)

Merhaba, bu yazımda sizlere Angular4  ile bir  helloworld uygulamasının nasıl yapılacağını adım adım paylaşacağım. Angular dünyasında aslında çok fazla deneyimim yok ancak bir projede kullanabilir miyiz diye bir araştırma yapmıştım. Bu araştırmanın notlarını aşağıda bulabilirsiniz. Adımları sırayla takip ederek ilerleyebilirsiniz.


Npm versiyonuna bakın (min:node 6.9.x)
# npm -v


Node versiyonuna bakın(min:3.x.x) ve son versiyonunu yükleyin.
# node -v

# brew update

# brew upgrade node

# brew update && brew upgrade node && npm install -g npm


angular'ı global olarak(her yerden erişmek için) -g parametresiyle yükleyin.
# npm install -g @angular/cli


Yeni bir angularJs Projesi oluşturun
# ng new my-app


Oluşturduğunuz projenin kök dizinine gidin.
# cd my-app/


Angular projesini web server'ı çalıştırarak açın.
# ng serve --open


NOT: daha önceden bu port kullanıldıysa aşağıdaki gibi bir hata mesajı göreceksiniz. Çözüm için --port parametresiyle  farklı bir portta uygulamanızı çalıştırın.
Port 4200 is already in use. Use '--port' to specify a different port.


Projenizi port parametresi vererek farklı bir portta açın
# ng serve --open --port 4201



bu işlemin ardından web browser üzerinde aşağıdaki adresi yazarak projenize erişebilirsiniz 

http://localhost:4201