Jhipster Başlangıç
Yeoman+Maven+Spring+AngularJS
Projelerini
Tek Elde Oluşturmak
2015

Gereklı ARAÇlar



  • NodeJS
  • Yeoman
  • Bower
  • Grunt
  • SpringMVC
  • AngularJS

Kurulumlar

Nodejs
Windows Platformu:

Öncelikle http://nodejs.org adresinden windows setup'ımızı yüklüyoruz.




  • Yeoman
  • npm  install  -g   yo
  • Bower
  • npm install -g bower
  • Grunt
  • npm install -g  grunt-cli
Yada Toptan : npm install  -g  yo bower grunt-cli

Son olarak Jhıpster kurulumu


npm install  -g  generator-jhipster

Örnek Proje 

Oluşturma
  • cmd kısa yolu ile command promtu açalım
  • istenilen bir dizine  : mkdir komutu ile proje klasörümüzü oluşruralım.
  • cd komutu ile oluşturduğumuz klasörün içine girelim
  • yo jhipster komutu ile projemiz için gerekli dosyaları oluşturuyoruz


Proje safhaları

proje dosyalarının istediğimiz dizine yüklenmesi:
yo jhipster
komutu ile gerçekleşir.
Adımlar
  1. Application Adı 



 

2.Java paket isminin oluşturulması


3.Java Versiyonu Seçimi



4.Authotentication seçimi


5.VERITABANI Tipi Seçimi 


6.VERITABANI SÜRÜMÜ SEÇIMI 



7.Geliştirme Ortamı Veritabanı Seçimi



8.Hibernate 2.seviye önbelleği kullanımı seçimi

9.kümelenmiş http oturumları seçimi

10.WebSocket Seçimi

11.Maven veya gradele araçlarının seçimi

12.Grunt veya Gulp Front end olusturma yardımcı programlarının seçimi

13.COMPASS CSS FRAMEWORK SEÇIMI


ProJe Dosyaları


Java Dosya Yapısı


WebAPP Dosya yapısı


Entıty Oluşturma



  • 
Her bir Entity için gereksinimleri şu şekilde sıralayabiliriz:
    








    

  1. Bir DB(veri tabanı) tablosu
    2. 

  2. Bir Liquibase change set
    3. 

  3. Bir JPA(Java Presistance Api) Entity
    4. 

  4. BirSpring Data Repository
    5. 

  5. Bir Spring MVC REST Controller , basit CRUD operasyonları gerçekleştirebilen yapıda
    6. 

  6. Bir AngularJS router.bir controller ve bir servis
    7. 

  7. Bir  de HTML view(Görüntüleme)
    8. 






Eğer birden fazla entitiy'e sahipseniz, bu entity'ler arasında bağlantı kurma ihtiyacı duyabilirsiniz.


O nedenle ayrıca şunlara da ihtiyaç duyabilirsiniz:











  • Bir Veritabanı ikincil anahtarı(foreign key)
 











  • Bu bağlantıyıyı yönetebilecek Spesifik JavaScript Ve HTML kod








"Entitiy" sub-generator gerekli olan dosyaları sizin için oluşturacaktır ve bu entity'ler arasındaki Front-End CRUD operasyonlarını yönetmenizi sağlıyacak mekanizmayı oluşturacaktır.






Eğer aplikasyonunuzu geleneksel RDBMS sistem dışında bir platform olan MongoDB üzeride oluşturduysanız,aynı şekilde yine entity yapınız generator tarafından oluşturulacaktır fakat aralarıdaki bağlantı olmadan bunu yapacaktır.


Entity KoDlama


Entity oluşturma adımları:


İlk Olarak Command Promp'tan(ve ya Bash):

yo jhipster:entity author

komutunu yazıyoruz.Burada "author" adında bir entity oluşturuyoruz.


















"Book" entity oluşturma adımları:






Projemizdeki  Değişiklikler






Bower Kullanımı


Bower nedir ne işe yarar?



Bower Twitter tarafından geliştirilen, Front-end dünyasına hitap eden bir paket yöneticisidir. Web uygulamaları geliştirirken hepimiz Javascript ve CSS kütüphanelerine, framework’lerine yani kısacası bağımlılıklara ihtiyaç duymaktayız.








Örneğin projemizde Jquery kütüphanesine ihtiyaç duyuyoruz diyelim. Geleneksel yöntemlerde yapılan adımlar genel olarak şöyle işlemektedir.




    

  • 
Jquery sayfasına gidilir.
    

    • 

  • 
Download tuşuna basılır.
    

    • 

  • 
İndirilen zip ayıklanır.
    

    • 

  • 
Web sayfasının uygun dizinine kopyalanır.
    

    • 


  • 
<script> tagi içerisinde sayfanıza tanımlanır.
    

    • 


















Ne kadar yıpratıcı değil mi? 


Tek bir Javascript bağımlılığı için 5 adım gerçekleştirdik. 5 bağımlılığa ihtiyaç duysadık eğer 5×5 adım işletiyor olacaktır. İşte bu süreç yazılım geliştiriciler için tam bir israf noktasıdır.












Peki Bower kullanırsak, sürecimiz nasıl olur?



    

  • 
İstediğin lokasyona git.
    

    • 

  • 
“bower install jquery” işlet.
    

    • 

  • 
<script> tagi içerisinde sayfana tanımla.
    

    • 









Bower ile yukarıda işletilen 5 adım, 3 adıma indirgenmiş olur. 


1. ve 3. adım olmazsa olmaz adımlar olduğu için aslında tek bir adımda istenilen bağımlılık edinilmiş olur.


















  • 
Diğer bir senaryo ise örneğin bir backbone uygulaması geliştiriyorsunuz diyelim. 
    






  • 
Backbone kütüphanesi Jquery ve Underscore kütüphanelerine bağımlıdır, bu sebeple Jquery ve Underscore bağımlılıklarını tek tek yüklemenize gerek yoktur. 
    









  • 
Çünkü Bower ile yüklediğiniz bağımlılığın varsa bağımlılıkları da otomatik olarak yüklenmiş olur.
    











Bower komutları





bower install <paket>





Örnek: bower install bootstrap







Bower ile yüklenen bağımlılıklar varsayılan olarak o anda bulunulan dizinde bower_components adında bir dizin oluşturur. Yüklenen tüm bağımlılıklar bu dizin içerisinde alt dizinler olarak tutulur. Bu haliyle istenilen bağımlılığın en son versiyonu yüklenmiş olmaktadır.
<paket> ifadesi yerine paketin adı yazılabileceği gibi versiyon kontrol sistemlerine ait URL adresi de yazılabilmektedir.

Örnek: bower install https://github.com/twbs/bootstrap.git








  • 
bower uninstall <paket>
    








  • 
Tanımlanan paketi sistemden siler.
    






  • 
bower search [<ifade>]
    








  • 
Tanımlanan ifadeye göre Bower sunucularından paket araması yapar ve en önceliklisine göre sıralı olarak listeler. Paket aramaları istenirse http://bower.io/search/ adresinden de yapılabilmektedir.
    








  • 
bower install <paket>#<versiyon>
    






  • 
Örnek: bower install jquery#1.9.1
    








  • 
Tanımlanan paket adı ve versiyonuna göre bağımlılık yüklemek için kullanılır.
    








  • 
Projenizi paketleyin
    








  • 
Her web projesinin kullandığı bağımlılıklar farklı olabilir veya Github üzerinde barındırdığınız kütüphaneyi Bower ekosistemine dahil etmek isteyebilirsiniz. İşte bu işlemler için projenizin paket tanımlayıcısı olması gerekmektedir. Bir bower paketinin kimliğini bower.json adındaki JSON dosyası oluşturur. Bu dosya içerisinde, projenin yazarı, versiyon bilgisi, hangi adreste versiyonladığı, lisans bilgileri ve bağımlılıklar gibi tanımlamalar yer almaktadır.
    






  • 
Örnek bir bower.json dosyası
    








  • 
bower.json front-end bağımlılıklarınızın yüklendiği dizinde bulunmalıdır.
    



{
  "name": "backbone-app",
  "version": "1.2.3",
  "authors": [
    "Rahman Usta "
  ],
  "description": "Backbone App",
  "license": "MIT",
  "homepage": "http://kodcu.com/bakcone-app.git",
  "dependencies": {
    "jquery": "*",
    "foundation": "~5.0.0",
	"backbone":">=1.0.0 <1.1.2",
	"es5-shim":"=3.0.1"
  }
}

  








    

  • 
Yukarıda örnek bir Bower paket dosyası görüyorsunuz. 
    

    • 

  • 
Şimdi bu dosyayı herhangi bir dosya sistemi dizinine ekleyin 
    

    • 

  • 
ve
    

    • 

  • 
 bower install komutunu işletin.
    

    • 

  • 
 “dependencies” elemanı içerisinde tanımlı bağımlılıkların bower_components dizinine kümelendiğini göreceksiniz.
    

    • 








Bower paket yöneticisi bağımlılık yönetiminde SEMVER (Semantic Versioning) yapısını kullanmaktadır. Burada sizlerle ”dependencies” elemanında tanımlı bağımlılıklara dair SEMVER versiyonlarının neye karşılık geldiğini açıklamaya çalışayım;













Herhangi bir versiyon, eğer diğer bağımlılıklarla çakışmıyorsa en güncel versiyonu yükler.


















  • 
~5.0.0
    








  • 
5.0.0 ve yukarısı ile başlayan herhangi bir bağımlılık Bower tarafından yüklenir. 6.0.0’a kadar.
    










  • 
>=1.0.0 <1.1.2
    








  • 
1.0.0 ve yukarısı ve 1.1.2’e kadar olan bir versiyon Bower ile yüklenir.
    







Projeden örnek:











$bower inslall ng-table






GRUNT


Nedir?Ne İşe yarar?






Kısaca Grunt


    

  • 

Grunt bir görev çalıştırıcısı.

    • 

  • 

Web geliştirme sürecinde ihtiyacınız olan operasyonları otomatize etmenize yarayacak bir araç. 
    

    • 

  • Daha çok bir platforma dönüşmüş olan grunt, yüzlerce eklentiyle istediğiniz forma sokabileceğiniz bir yapılandırma aracıdır
    • 








                            Hızlıca bir örnek verelim

Basit bir web sitesi hazırlıyorsunuz ve stillerinizi css yerine less ile yazdınız, javascriptlerinizi cosnole.log debug satırlarıyla ve bir sürü yorum ile yazdınız. 







Sitenizi her yayına alacagınızda bir toparlama ve paketleme işi yapmanız gerekiyor, lessilerinizi css'lere derlemek, belki css-min gibi ufaltma operasyonuna sokmak, imajlarınızı sıkıştırmanız, javascriptlerinizi temizleyip küçültmeniz belki birden fazla kaynağı tek dosyada birleştirmeyi isteyeceksiniz. 











  • Her değişiklik yaptığınızda bu işlemleri tekrarlamanıza imkan yok.



















  • İşte bu noktada grunt devreye giriyor.









Grunt ile neler yapabilirsiniz?


Sonu yok çünkü kendi eklentilerinizi yazarak node.js yeteneklerini kullanarak yapamayacağınız şey yok. Ama eklenti veritabanından erişebileceğiniz o kadar çok şey var ki. 
- Less, Scss, Sass vb... herhangi bir css derleme işinizi
- Kod validasyonu (css, js, html)
- Imaj optimizasyonu
- Birden fazla javascript veya css kaynağını birleştirme
- Css veya javascript sıkıştırma
- Kodunuzdaki yorumları, debug için geriye kalan artıkları temizleme
- Kaynak versiyonlama 
-JavaScript testleri yapma vs...
Daha sayamadığım bir çok operasyonu grunt ile farklı kombinasyonlarda hazırlamanız mümkün.



Grunt KOmutarı


$grunt test






$ grunt serve



				

				

					
				

			

		

	


	

		

		

			
TALIP  AKHAN

			
By Talip Akhan

		

	


	

		

		

			

			

		

	








	

		

			

					

						Made with Slides.com
					

				

					
					
				

			


			

				
				
			

		


		

			
		


		


		

			

				
TALIP  AKHAN

				
Yeoman+Bower+Grunt+Agular JS+Spring

				
    
					
  • 
						
						
					
    • 
					
  • 
						
						
					
    • 
					
  • 
						
						571
					
    • 
				

			


			

			

		

	


	

		
More from Talip Akhan