31 Temmuz 2017 Pazartesi

Angular translate ile çoklu dil desteği olan sayfalar

Bir web sayfası oluşturduğunuzu düşünün. Zaman geçti ve hedef kitlenizi değiştirmek istiyorsunuz. Sayfanıza İngilizce desteği eklemek istiyorsunuz. Eskiden bu durumda her sayfanın bir adet kopyasını yapmamız gerekirdi. Bir de İspanyolca, İtalyanca desteğini de eklediğimizi varsayalım. Tüm dillerle beraber toplam sayfa sayımız katlandıkça katlandı. Şuan bile bu işlem çok zor iken sayfaların sayısı ve içeriği arttıkça bu süreç imkansızlaşacak. Dinamik web sayfalarıyla beraber bu soruna birçok çözüm getirildi. Bu çözümlerden biri de Angular-translate. Angular-translate ile birlikte sayfalar arasında anlık olarak dil değiştirebilecek ve yüzlerce sayfadan kurtulacağız. 

Bu yazımda bir html dosyasında basitçe bir Angular translate işlemi nasıl uygulanır ondan bahsedeceğim. 

Gereksinimler 

  • Bower


Şu şekilde angular-translate i yükleyelim.

bower install angular-translate

Html dosyamızın içeriğinin bu şekilde olduğunu düşünelim. 


<!DOCTYPE html>
<html>
<body>
<div>
<h1> <span style="color:grey">selam</span></h1>
<div>
<br>
<button>English</button>
<button>Turkce</button>
 </div>
</div>
</body>
</html>

Şuan bizim iki butonumuz var. Biz istiyoruz ki butonlara basınca sayfamızın içeriği değişsin. 

Şimdi bu html dosyamıza bir kaç düzenleme yapalım.

Öncelikle <html> tagini <html ng-app="myApp"> olarak değiştirelim ve böylece bir angularjs uygulaması haline dönüştürelim.

Şimdi bulunduğumuz dizinde bir app.js dosyası oluşturalım.

içeriği şu şekilde başlasın.


var app = angular.module("myApp",['pascalprecht.translate']);

Bu şekilde uygulamamızı tanımladık, parametre olarak html dosyamızdaki myApp'ı ve translate modülünü eklemiş olduk.


Hemen peşine şunu ekleyelim.

app.config(["$translateProvider",function($translateProvider){
  
  var en_translations = {
    selam : "Hello World"
  }
  
  var tr_translations = {
    selam : "Merhaba Dunya"
  }
  $translateProvider.translations('en',en_translations);
  
  $translateProvider.translations('tr',tr_translations);
  
  $translateProvider.preferredLanguage('tr');
  
}]);


Burada iki farklı dil seçeneği ekledik. Bunları iki farklı json dosyası gibi düşünelim. Html dosyamızdaki selam yazımız iki farklı dile göre farklı çıktılar sunacak. preferredLanguage kısmında ise tr ayarladık. Böylece varsayılan olarak sayfa yüklenince tr dili ile yüklenecek. 


Bir <head></head> etiketi oluşturalım ve içine az önce bower ile indirdiğimiz angular kütüphanesini ve oluşturduğumuz app.js dosyalarını kaynak olarak gösterelim.

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="app.js"></script>


Geldik <body> kısmına. Burada ilk <div> etiketini Controller yapalım.

<div ng-controller="MainController"> 

Geldik hemen sonrasındaki <span> etiketine. Burada ufacık bir değişiklik yapalım. <span> etiketini <span translate> yapalım ve şu şekilde görünsün. 

<h1> <span translate style="color:grey">selam</span></h1>

Button kısmında da şöyle bir değişiklik yapalım;

<button ng-click="changeLanguage('en')">English</button>
<button ng-click="changeLanguage('tr')">Turkce</button>

Birazdan buradaki ng-click ne işe yaradığından bahsedeceğim.
Şimdi geldik Controller kısmına.

Aynı dizinde MainController.js adında bir dosya oluşturalım ve içerisini şu şekilde dolduralım.

app.controller("MainController" ,["$scope","$translate",function($scope,$translate){
  $scope.changeLanguage = function(lang){
   $translate.use(lang); 
  }
  
}]);

İşte bu da Controller yapımız. Artık html dosyamızın içindeki butona basınca ng-click bu controllerımızı tetikleyecek. Controller ise bu işlem için config dosyamızdaki ayarları uygulayacak üstelik bunların hepsi dinamik bir sayfada hızlı bir şekilde gerçekleşecek.
Olur da Angular için bir stil rehber ararsanız bu adresi tavsiye ederim. Güzel ve açıklayıcı olmasının yanında çoklu dil desteği de var. 😏

İyi günler.


HelloWorld.html 


<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1> <span translate style="color:grey">selam</span></h1>
<div>
<br>
<button ng-click="changeLanguage('en')">English</button>
<button ng-click="changeLanguage('tr')">Turkce</button>
 </div>
</div>
</body>
</html>




app.js

var app = angular.module("myApp",['pascalprecht.translate']);
app.config(["$translateProvider",function($translateProvider){
  
  var en_translations = {
    selam : "Hello World"
  }
  
  var tr_translations = {
    selam : "Merhaba Dunya"
  }
  $translateProvider.translations('en',en_translations);
  
  $translateProvider.translations('tr',tr_translations);
  
  $translateProvider.preferredLanguage('tr');
  
}]);




MainController.js

app.controller("MainController" ,["$scope","$translate",function($scope,$translate){
  $scope.changeLanguage = function(lang){
   $translate.use(lang); 
  }
  
}]);

27 Temmuz 2017 Perşembe

Maven nedir ve nasıl kullanılır ?

Maven nedir?


Maven ; proje adımlarını basitleştirmek, etkili bir belgelemelendirme ve bağımlılıkları ortadan kaldırmaya yarayan bir Java geliştirme aracıdır. 

Kurulumu oldukça kolaydır. Proje kalıpları standart haline getirilmiştir  ve böylece tüm IDE'ler destek vermektedir.


Projedeki tüm bağımlılıklar POM adı verilen bir xml dosyası altında toplanmıştır. Bu dosyaya yazılan kütüphaneler eğer yerel depomuzda yoksa ilgili Maven depolarından indirilir. 

Gereksinimler 

  • JDK 1.7+


Kurulum


Maven dosyalarını şu adresten indirelim.

JAVA_HOME çevresel değişkeninin bu komutu çalıştırarak JDK 'yı gösterdiğine emin olalım.


echo $JAVA_HOME
/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.141-1.b16.el7_3.x86_64/

İndirdiğiniz dosya formatına göre aşağıdaki komutlardan birini çalıştırınız. 


unzip apache-maven-3.5.0-bin.zip
tar xzvf apache-maven-3.5.0-bin.tar.gz

Oluşan apache-maven-3.5.0 dizinindeki bin dosyasını PATH çevresel değişkenine ekleyelim ki maven dizinimiz işletim sistemi tarafından bilinsin.



export M2_HOME=/usr/local/apache-maven/apache-maven-3.3.9 
export M2=$M2_HOME/bin 
export PATH=$M2:$PATH

sonrasında şu komutla kurulumu onaylayın.



mvn -v

çıktımız buna benzer bir şey olacak. 



Apache Maven 3.5.0 (ff8f5e7444045639af65f6095c62210b5713f426; 2017-04-03T19:39:06Z)
Maven home: /home/emre/apache-maven-3.5.0 
Java version: 1.8.0_141, vendor: Oracle Corporation 
Java home: /usr/lib/jvm/java-1.8.0-openjdk-1.8.0.141-1.b16.el7_3.x86_64/jre 
Default locale: en_US, platform encoding: UTF-8 
OS name: "linux", version: "3.10.0-514.26.2.el7.x86_64", arch: "amd64", family: "unix"

Proje oluşturma
Aşağıdaki komutla örnek bir proje oluşturalım.

mvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

komutuyla örnek bir proje oluşturabilirsiniz. İlk kurulum olduğu için biraz vakit alacak çünkü Maven bazı temel şeyleri yerel depomuza indirecek.

Az önce -DartifactId e atadığımız değerle aynı klasör oluştu(my-app). 



my-app/
 ├── pom.xml
 └── src
     ├── main
     │   └── java
     │       └── com
     │           └── mycompany
     │               └── app 
     │                   └── App.java 
     └── test 
         └── java 
             └── com 
                 └── mycompany 
                     └── app 
                         └── AppTest.java

my-app/src/main/java dizini projenin kaynak kodunu,
my-app/test/java ise test kodunu içeriyor.

Ve bir de pom.xml dosyamız var. Bu dosya da Proje nesne modeli(Project Object Model) anlamına geliyor. Projenin ayarlarını içeren geniş bir dosya.



<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion> 
  <groupId>com.mycompany.app</groupId>
  <artifactId>my-app</artifactId>
  <packaging>jar</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>my-app</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
</project>

Bu ise az önce oluşturduğumuz, Maven'in bize sunduğu basit bir prototip, archetype:generate. 

<project> : Maven'in hangi versiyonlarının kullanılacağının belirtildiği kısım. 
<modelVersion> : POM model versiyonu.
<groupId> : Projenin ait olduğu grup veya kuruluş. 
<artifactId> : Projenin kitaplık eserine (JAR ve WAR dosyasının adı) verilecek ad
<version> : Yapım aşamasındaki projemizin versiyonu.
<packaging> : Projenin hangi formatda paketlenmesi gerektiğini belirtir. Varsayılan JAR'dır. WAR paketleme için değeri war dır.
<url>: Projemizi deploy etmek istediğimizde kullanılacak adres.
<dependencies> : Projemizde kullanmak istediğimiz tüm bağımlıkların eklendiği kısım. 
<scope> : Projenin hangi yapılandırmayı kullanacağının belirtildiği kısım.

Projeyi kurmaProjemizi oluşturduk. Şimdi bunu kurulabilir(çalıştırılabilir) bir paket dosyası haline getirelim.



mvn package
Bu komut sonrasında pom.xml de belirtilen dosyalar indiriliyor ve bir jar dosyası olarak paketleniyor. 

Çıktı şu şekilde sona eriyor.



[INFO] BUILD SUCCESS 
[INFO] ------------------------------------------------------------------------ 
[INFO] Total time: 16.272 s [INFO] Finished at: 2017-07-26T14:40:54Z
[INFO] Final Memory: 17M/41M 
[INFO] ------------------------------------------------------------------------

Şimdi jar paketinin test edebilim.



java -cp target/my-app-1.0-SNAPSHOT.jar com.mycompany.app.App

çıktımız ;



Hello World!


Yukarıda kullandığımız mvn package komutundaki package gibi komutlara lifecycle diyoruz. 

İşte bunlardan bazıları ;

clean: Proje derlendikten sonra oluşan target klasörünü siler.

validate: Projede herhangi bir hata olup olmadığını doğrular.
compile: Clean in yaptığı işi yapar, hatalı kısımları tarar ve derleme işlemi yapar.
test: Derlenmiş kaynak kodunu test eder.
package: projeyi test eder ve paketler. 
integration-test: gerektiğinde paketi entegrasyon testlerinin yürütülebileceği bir ortama işlemek ve dağıtmaya yarar.
verify: projenin paketlenmesini tamamlar ve bunların doğruluğunu onaylar.
install: paketi yerel depoya yükler.
deploy: projeyi sunucuya deploy etme işini yapar.

İşte böylece basit bir Maven projesi oluşturmuş ve bununla ilgili temel düzeyde bir şeyler öğrenmiş olduk.

İyi günler.

20 Temmuz 2017 Perşembe

Örnek bir Spring Boot Uygulaması


Daha öncesinde Spring ve Spring Boot nedir onun hakkında yazmıştım.
Bu yazımda beraber basit bir Spring Boot uygulaması oluşturturacağız.

Projemizin dosya yapısı şu şekilde;

proje_adi
    └── src
        └── main
            └── java
                └── hello
                    └──Application.java
                    └──HelloController.java
    └──target
    └──pom.xml


Gereksinimler ;

  • JDK 1.8+
  • Maven 3.0+



Maven ; proje adımlarını basitleştirmek, etkili bir dökümantasyon oluşturmak ve bağımlılıkları ortadan kaldırmaya yarayan bir araçtır.

Eğer daha önce Maven kullanmadıysanız buradan bilgi edinebilirsiniz.

Dosya yapısını oluşturma 


Projemizin ana dizininde şu komutu çalıştırarak alt dizin oluşturalım.

mkdir -p src/main/java/hello

Şimdi projemizin ana dizininde pom.xml dosyası oluşturmalıyız.

pom.xml şu şekilde olmalı:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <artifactId>spring-boot-deneme</artifactId>
    <version>0.1.0</version>
    <name>spring-boot-deneme</name>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.2.RELEASE</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

    <properties>
        <java.version>1.8</java.version>
    </properties>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Şimdi basit bir web uygulaması oluşturalım.

src/main/java/hello/HelloController.java dosyası da şu şekilde olmalı:

package hello;

import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestMapping;

@RestController
public class HelloController {

    @RequestMapping("/")
    public String index() {
        return "Spring Boot Merhaba Dünya";
    }



}

@RestController bayrağı o sınıfın Spring MVC tarafından web istekleriyle ilgilenmek için hazır olduğunu belirtir.
@RequestMapping ise "/" a gelen istekleri index() methoduna eşler. 
Böylece "http://localhost:8080/" sayfasına gelen isteklerde bu servis çalışacak.


Sırada Application sınıfımız var.

src/main/java/hello/Application.java dosyamız da şu şekilde olmalı.

package hello;

import java.util.Arrays;

import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Bean;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Bean
    public CommandLineRunner commandLineRunner(ApplicationContext ctx) {
        return args -> {

            System.out.println("Let's inspect the beans provided by Spring Boot:");

            String[] beanNames = ctx.getBeanDefinitionNames();
            Arrays.sort(beanNames);
            for (String beanName : beanNames) {
                System.out.println(beanName);
            }

        };
    }

}
Şimdi geldik uygulamayı çalıştırmaya;

Öncelikle bir maven paket dosyası oluşturmamış lazım.
Şu komutla target klasörünün altında bir java dosyası oluşturulur ve devamında da bunu çalıştıralım.

mvn package && java -jar target/spring-boot-deneme-0.1.0.jar


Sonrasında http://localhost:8080 adresine girelim. Tebrikler ilk Spring Boot uygulamanızı oluşturdunuz.

Sonrasında Control+c ile bağlantımızı kesebiliriz.

Daha fazlası için bu adrese başvurabilirsiniz.
İyi günler


14 Temmuz 2017 Cuma

War dosyasını Apache Tomcat'e deploy etme ve Reverse-Proxy olarak Nginx'i ayarlamak


Merhabalar bugün bir servera Tomcat kurulumu yapacağız ve nginx'i reverse proxy olarak ayarlayacağız.

Öncelikle Tomcat'i makineye kurmakla başlıyoruz. Bu yazıda ben Centos kurulu bir sunucu kullanacağım. Komutlar gnu/linux dağıtımlarına göre farklılık gösterebilir.  Bunlara sizin bakmanız lazım.
Editör olarak da vim kullanacağım, isterseniz vim yerine nano veya başka editörleri yazarak da kullanabilirsiniz.

Tomcat Kurulumu :
   
sudo yum install tomcat

komutunu çalıştırarak  Tomcat kurulumu yapıyoruz.

sudo vim /usr/share/tomcat/conf/tomcat.conf

komutu ile tomcat.conf dosyasını açabiliriz.

JAVA_OPTS="-Djava.security.egd=file:/dev/./urandom -Djava.awt.headless=true -Xmx512m -XX:MaxPermSize=256m -XX:+UseConcMarkSweepGC"

satırını dosyanın hemen sonuna ekleyelim.

Buradaki Xmx ve MaxPermSize değerlerini değiştirmek Tomcat'in ne kadar hafıza kullanacağını belirleyebilirsiniz.

Şu komutla tomcat servisini başlatabilirsiniz;

sudo systemctl start tomcat


Şu komutla da durumunu sorgulayablirsiniz;

sudo systemctl status tomcat


Şu komutla da sistemin başlangıcında çalışmasını sağlayabilirsiniz.

sudo systemctl enable tomcat


Tamam kurulum işlemimiz bitti.

Şimdi http://localhost:8080 girelim. Adrese tarayıcıdan, curl veya links ile ulaşabilirsiniz.


Şimdi geldik war dosyasını deploy etmeye. Burada war dosyasını nasıl elde ederiz konusuna girmeyeceğim. İnternette bunun hakkına bir sürü yazı var. Yine de burada bir tanesini bulabileceksiniz.

sudo cp hello.war /usr/share/tomcat/webapps/

komutuyla bu dizine kopyalayalım. Tomcat bunu otomatik olarak deploy edecek.

sudo systemctl restart

komutu ile tomcat servisini yeniden başlatıyoruz.

Artık http://localhost:8080/hello adresine war dosyamız deploy edildi.



Nginx ayarları;

Nginx 'i kurmamız lazım. Öncesinde epel 'i yüklemek gerek Centos'da . Başka dağıtımlarda buna gerek olmayabilir.

sudo yum install epel-release

sudo yum install nginx

komutları sonrası nginx kurulmuş olacak.

sudo systemctl start nginx

komutu ile nginx servisi başlatılır.

sudo systemctl enable nginx

komutu ile sistem başlangıcında açılabilir hale geliyor.

Artık http://localhost adresinde bizi kurulmuş nginx bekliyor.


Geldik ayar kısmına;

sudo vim /etc/nginx/nginx.conf

komutu ile düzenlemeye başlayalım.

location / {

}


ile başlayan kısıma gidelim ve şu şekilde değiştirelim;

location / {

        proxy_pass                          http://127.0.0.1:8080/hello/;

        proxy_set_header Host               $host;

        proxy_set_header X-Real-IP          $remote_addr; 

        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;

    }

ve dosyayı kaydedelim.

sudo nginx -t

ile syntax ın doğruluğunu kontrol edelim.

sudo nginx -s reload

komutu ile tekrardan yükleyelim.

Artık http://localhost adresinde bizi war dosyamız bekliyor.


İyi günler 😊



11 Temmuz 2017 Salı

Spring ve Springboot nedir?


Spring nedir?






Spring web ve enterprise uygulamalarının geliştirilmesini  kolaylaştırmak için kullanılan Java tabanlı bir framework'dur.

Spring çatısı altında birçok proje vardır. Bu projeler geliştirici için konfigürasyon, güvenlik gibi konularda altyapı sağlar. Böylece geliştirici bu kısımlarla uğraşmayarak vakit kazanır.

Springboot ise Spring çatısındaki projelerden biridir. Springboot basmakalıp kod işlemlerinden kaçınıp yerine konfigürasyon işlemleri en aza indirgenmiş, standalone Spring projeleri oluşturmamıza olanak sağlar.


Spring'in problemleri ;

    1-) Farklı sorun ve kombinasyonlara karşı farklı çözümler içereceği için devasa bir framework'tur.

    2-) Birçok farklı imkana olanak sağladığı için çokca kurulum ve konfigurasyon aşaması vardır.

    3-) Spring'in kapasitesi ve esnekliği vardır bu da  çokca build ve deploy aşaması demektir. Tam olarak yapmak istediğin şeyi yapmak için çok şey yapmak gerekir. Aslında olasılıklar çok olduğu için bir başlangıç noktası, en iyisinin ne olduğunu söyleyecek bir rehber yoktur. Bu tamamen kullanıcıya kalmıştır.


Tipik olarak bir Spring uygulaması oluşturduğumuzda, tomcat veya başka konteynırlar içeren bir web uygulaması, bir war dosyası oluşturulur.

Springboot ise bize standalone calışabilen, direk çalıştırabildiğin (just run) ve web server'a sahip olan bir Spring projesidir. Deploy etmek için servlet konteynır bulmaya gerek yoktur. Springboot bu ve bunun gibi işleri geliştirici yerine yaparak bu problemlerden geliştiriciyi kurtarmayı hedefler.

 İsterseniz basit bir Spring Boot uygulaması nasıl oluşturulacağını burada bulabilirsiniz.


İyi günler.

LibreOffice, Libreoffice Online Derleme ve Yama Gönderme Süreci

    Libreoffice bir masaüstü ofis paketidir. Yıllar boyunca farklı adlarda geliştirilmiş şu an ise  Libreoffice adıyla devam etmektedir. Lib...