ÇANAKKALE ONSEKĠZ MART ÜNĠVERSĠTESĠ MÜHENDĠSLĠK-MĠMARLIK FAKÜLTESĠ BĠLGĠSAYAR MÜHENDĠSLĠĞĠ BÖLÜMÜ

ÇANAKKALE ONSEKĠZ MART ÜNĠVERSĠTESĠ MÜHENDĠSLĠK-MĠMARLIK FAKÜLTESĠ BĠLGĠSAYAR MÜHENDĠSLĠĞĠ BÖLÜMÜ BĠTĠRME ÖDEVĠ BAġLIĞI AKILLI EV OTOMASYONU PROTOTĠPĠ BĠLEġENLERĠNĠN, WEB TABANLI UYGULAMA VE MOBĠL ĠġLETĠM SĠSTEMĠ UYGULAMASI ĠLE UZAKTAN KONTROLÜNÜ SAĞLAMAK. Yazarın Adı SOYADI Semih ERDEM DanıĢmanın Adı SOYADI Cengiz TOGAY Mayıs, 2012 ÇANAKKALE

BĠTĠRME ÖDEVĠ BAġLIĞI AKILLI EV OTOMASYONU PROTOTĠPĠ BĠLEġENLERĠNĠN, WEB TABANLI UYGULAMA VE MOBĠL ĠġLETĠM SĠSTEMĠ UYGULAMASI ĠLE UZAKTAN KONTROLÜNÜ SAĞLAMAK. Çanakkale Onsekiz Mart Üniversitesi Mühendislik-Mimarlık Fakültesi Bitirme Ödevi Bilgisayar Mühendisliği Bölümü Yazarın Adı ve SOYADI Semih ERDEM DanıĢmanın Adı ve SOYADI Cengiz TOGAY Mayıs, 2012 ÇANAKKALE ii

SEMĠH ERDEM, tarafından YRD. DOÇ. DR. CENGĠZ TOGAY yönetiminde hazırlanan AKILLI EV OTOMASYONU PROTOTĠPĠ BĠLEġENLERĠNĠN, WEB TABANLI UYGULAMA VE MOBĠL ĠġLETĠM SĠSTEMĠ UYGULAMASI ĠLE UZAKTAN KONTROLÜNÜ SAĞLAMAK başlıklı çalışma tarafımızdan okunmuş, kapsamı ve niteliği açısından bir Bitirme Ödevi olarak kabul edilmiştir. Jüri Başkanı Jüri Üyesi Jüri Üyesi Bölüm Başkanı Bilgisayar Mühendisliği Bölümü iii

TEġEKKÜR Bitirme ödevi projesinde kendisiyle çalışma imkanı sunan, bilgilerini ve yardımlarını bizden esirgemeyen değerli hocam Yrd. Doç. Dr. Cengiz Togay a teşekkür ederim. Projenin prototipinin hazırlanmasında emeği geçen, değerli zamanını bize ayıran Öğr. Gör. Utku Bayram a ve bulunduğum konuma gelmemi sağlayan aileme, tüm hocalarıma, arkadaşlarıma teşekkür ederim. Semih Erdem iv

SĠMGELER VE KISALTMALAR JSF (Java Server Faces): Java Sunucu Yüzü. IDE(Integrated Development Environment): Tümleşik Geliştirme Ortamı. Winmo(Windows Mobile): Windows Mobile İşletim Sistemi v

BĠTĠRME ÖDEVĠNĠN ADI Akıllı ev otomasyonu prototipi bileşenlerinin, web tabanlı uygulama ve mobil işletim sistemi uygulaması ile uzaktan kontrolünü sağlamak. ÖZET Çalışma bir client/server modelidir. Projede bir ev prototipi oluşturuldu. Prototipe ısı sensörü, ledler, parolalı kapı girişi, alarm sensörü, klima yerine kullanılacak fan ve kapı otomatı eklendi. Yani bir evde olması gereken temel bileşenler yerleştirildi. Amacım bu çalışmada yer alan bileşenleri, internet bağlantısı ile uzaktan kontrolünü sağlamak. Bunu mobile işletim sistemi ve web tabanlı bir uygulama ile başardım. Client tarafta JSF ve PrimeFaces kullanarak web tabanlı bir uygulama arayüzü geliştirdim. Mobil tarafta ise Windows Mobile 6.5 işletim sisteminde uygulama geliştirdim. Prototipte veri durumlarını bir internet bağlantısı ile ağa sunmak gerekiyordu. Bu nedenle bir Java Web Servis yazdım. Web Servis ile Java Communication Api kullanarak, prototipte yer alan bileşenlerin durum bilgilerini seri porttan çekip ağa sundum. Böylece bileşenlerin durum bilgilerini clientlara iletmeyi başardım. Akıllı ev 16877 Pic Web Servis Mobil uygulama ġekil 1. Proje şeması vi

ĠÇĠNDEKĠLER BİTİRME ÖDEVİ ONAY SAYFASI TEŞEKKÜR SİMGELER VE KISALTMALAR ÖZET Sayfa iii iv v vi BÖLÜM 1-GĠRĠġ 1 1.1 Yazılım Geliştirme Ortamlarının Kurulması 1 1.1.1 Eclipse Geliştirme Ortamı Kurulumu 2-5 1.1.1.1 Dinamik Web Projesi Oluşturulması 5 1.1.1.2 Dinamik Web Projesine Primefaces Kütüphanesinin Eklenmesi 5 1.1.2 Microsoft Visual Studio 2008 Ortamının Kurulması 5 1.1.2.1 Windows Mobile 6.5 Uygulaması Oluşturulması 5-6 BÖLÜM 2- ANA BÖLÜM 7 2.1 Web Servisin Oluşturulması 7-16 2.1.1 Java Communication Api Nedir ve Kurulumu 16-17 2.1.2 Apache Axis2 ile Web Servis Oluşturma 17-18 2.2 JSF ve Primefaces Kullanarak Web Tabanlı Uygulama Oluşturma 18 2.2.1 Login Ekranının Oluşturulması 18 2.2.1.1 Login Ekranı View Katmanının Oluşturulması 18-20 2.2.1.2 Login Ekranı Model Katmanının Oluşturulması 20-21 2.2.2 Kullanıcının Login Olabilmesi İçin Veri Tabanı Kontrolü 22-23 2.2.3 Anasayfanın Oluşturulması 24 2.2.3.1 Anasayfanın View Katmanının Oluşturulması 24-26 2.2.3.2 Anasayfanın Model Katmanının Oluşturulması 26-32 2.2.4 Ayarların Oluşturulması 32 2.2.4.1 Ayarların View Katmanının Oluşturulması 32-33 2.2.4.2 Ayarların Model Katmanının Oluşturulması 33-37 vii

2.3 Oluşturulan Web Tabanlı Uygulamaya Web Client Özelliği Eklenmesi 37-38 2.4 Mobil İşletim Sistemi Uygulamasının Oluşturulması 39 2.4.1 Mobil Uygulamanın Arayüzünün Oluşturulması 39-41 2.4.2 Mobil Uygulamaya Web Servisin Eklenmesi 42 2.4.3 Mobil Uygulamanın Akıllı Telefonlar İçin Hazır Hale Getirilmesi 42-43 2.5 Devre Şeması 43 2.5.1 16F877 PIC Program 44-49 KAYNAKLAR 50 ġekiller 51 viii

ix

BÖLÜM 1 GĠRĠġ Yazılım geliştirmek için gereken ortamın oluşturulması. 1.1 Yazılım Geliştirme Ortamlarının Kurulması. Web tabanlı uygulama ve web servis geliştirimi, Java programlama dili ile gerçekleştirilmesi nedeniyle yazılım geliştirme ortamı olarak Eclipse IDE for Web Developer (Version Indigo Release) seçildi. Winmo 6.5 mobil işletim sistemi uygulaması için yazılım geliştirme ortamı olarak Microsoft Visual Studio 2008 seçildi. 1.1.1 Eclipse Geliştirme Ortamı Kurulumu. Öncelikle Windows işletim sistemi için Eclipse geliştirme ortamında Java programlama dili ile uygulama geliştirme istiyorsak, bilgisayarımızda Java Runtime Environment ve Java Development Kit yüklü olmalıdır. Bunları http://www.oracle.com/technetwork/java/javase/downloads/index.html adresinden elde edebiliriz. Daha sonra http://www.eclipse.org/downloads/ bağlantısından Eclipse IDE for Java EE Developer (Version Indigo 3.7) indirilir. İndirilen dosya sıkıştırılmış dosya şeklindedir ( zip ya da tar.gz ). Bu dosyayı sizin seçiminiz olan bir dizene sıkıştırılmış halden dışarı çıkarılır. Eclipse.exe çalıştırılır. Şekil 1.1 deki görüntü elde edilir. 1

ġekil 1.1. Eclipse geliştirme ortamı arayüzü. 1.1.1.1 Dinamik Web Projesi Oluşturulması. Dinamik web projesi oluşturmak için öncelikle bir uygulama sunucusuna ve gerekli jar dosyalarına ihtiyacımız var. Uygulama sunucusu olarak Tomcat 6.0 seçildi. http://tomcat.apache.org/download-60.cgi adresinden uygulama elde edilebilir. Gerekli olan jstl-1.2.jar http://download.java.net/maven/1/jstl/jars/ sayfasından bilgisayarımıza indiriyoruz. Öncelikle uygulama sunucumuzu kuralım. Şekil 1.1 de görülen en alt panelde Servers kısmına sağ tıklayın New > Server diyerek Tomcat v6.0 Server ı seçip Next diyoruz. Sonraki ekrandan Browse diyerek indirdiğimiz Tomcat uygulama sunucusu dosyasının yolunu gösteririz. JRE yi jr6 olarak seçip Finish diyoruz. Sonra Servers panelinden Tomcat i çift tıklarız ve açılan ekrandan Use Tomcat Installation seçilir. Ardından kaydedilir. Şekil 1.2 de gösterilmektedir. 2

ġekil 1.2. Use Tomcat installation. Servers panelinden Tomcat i başlattığımızda bir tarayıcıya http://localhost:8080/ yazarız ve karşımıza şekil 1.3 teki gibi görüntü ortaya çıkar. ġekil 1.3. Tomcat başlatıldığında alınan ekran görüntüsü. 3

Şimdi dinamik web projesi oluşturabiliriz. Eclipse ekranından File -> New -> Dynamic Web Project diyoruz. Sırasıyla aşağıdaki şekilleri izliyoruz. ġekil 1.4. Dynamic web project başlangıç görünümü. Gelecek iki ekranı da next diyerek geçelim. JSF kütüphanelerini ekleyeceğimiz kısma geçelim. ġekil 1.5. JSF kütüphane ekranı. 4

Şekil 1.5 deki ekrandan dosya yükleme butonuna tıklarız. JSF için Oracle ın son sürüm kütüphanelerini yükleriz. Yükleme işlemi bittikten sonra Finish deriz. Projeye sağ tıklayıp Run As > Run on Server dersek projemizi çalıştırırız. 1.1.1.2 Dinamik Web Projesine Primefaces Kütüphanesinin Eklenmesi. Projede web tabanlı uygulamada kullanışlı ve güzel bir arayüz oluşturmak amacıyla JSF için Primefaces kütüphanesini kullandım. Peki nedir Primefaces? Primefaces bileşenleri sayesinde yazılımcıyı HTML, CSS, Javascript ile ilgili detaylardan kurtarıyor ve yapılacak ana işe odaklanmasını sağlıyor. Primefaces açık kaynak kodlu bir yazılım ve Türkiye de geliştirilip uluslararası pazarda kendine yer edinmiş nadir projelerden. Daha detaylı bilgileri http://primefaces.org/ adresinden alabilirsiniz. http://primefaces.org/downloads.html adresinden son versiyonları indirilip, bu jar dosyalarını(kütüphane) projeye sağ tıklayıp Build Path > Configure Build Path deriz ve Libraries kısmından projeye import ederiz. 1.1.2 Microsoft Visual Studio 2008 Ortamının Kurulması. http://www.microsoft.com dan MVS 2008 i indirip kuruyoruz. http://www.microsoft.com/en-us/download/details.aspx?id=17284 adresinden Windows Mobile 6.5 Professional Developer Tool Kit (USA).msi indirilir ve bilgisayarımıza kuruyoruz. 1.1.2.1 Windows Mobile 6.5 Uygulaması Oluşturulması. Visual Studio ya gerekli kurulumları yaptıktan sonra File -> Project diyoruz ve Visual C# kısmından Smart Device ı seçip gerekli proje ismini verdikten sonra karşımıza şekil 1.6 daki ekran geliyor. 5

ġekil 1.6. Winmo 6.5 yeni proje oluşturma. Gelen ekrandan yukarıdaki işlemleri yapıp Device Application seçilir ve Ok a basılır. Böylece Windows Mobile 6.5 uygulaması oluşturmaya hazırız. 6

BÖLÜM 2 ANA BÖLÜM 2.1 Web Servisin Oluşturulması. Giriş bölümünde IDE üzerine uygulama sunucusu kurma ve dinamik web projesi oluşturma olayını anlattık. Web servis implementasyonu için Apache Axis2 kullandım. Proje oluşturmadan önce web servis için gerekli jar dosyalarını http://axis.apache.org/axis2/java/core/download.cgi adresinden indirelim. Daha sonra Eclipse de Open -> Window -> Web Services -> Axis2 Preferences diyerek indirdiğimiz dosyaların yolunu gösterelim. Şimdi web servis için Axis2 özellikleriyle desteklenen bir web projesi oluşturmaya hazırız. Yeni bir adı Axis2WebService olan web projesi oluşturalım. Bu Bölüm 1.1.1.1 de anlatıldı. Çıkan ekrandan Modify butonuna tıklayalım karşımıza çıkan ekran Şekil 2.1 de gösterilmektedir. Çıkan ekrandan Axis2 Web Services i işaretleyelim. Sonrasında Bölüm 1.1.1.1 de anlatılan prosedürleri uygulayalım. ġekil 2.1. Axis2 web servis seçimi. 7

Projeyi oluşturduktan sonra projeye Service paketi ekleyelim. Pakete WP7Service sınıfımızı ekleyelim. Oluşturulan sınıfımızın kaynak kodları şu şekildedir. package Service; import java.io.serializable; import java.util.vector; import comport.javacomport; public class WP7Service { private static final long serialversionuid = 1L; private static boolean doorstatus; private static boolean windowstatus; private static boolean airconditionerstatus; private static boolean alarmstatus; private static boolean lightstatus; private static int roomtemperature; private Vector servicevector; private static int kontrol = 0; private static int kontrol1 = 0; private static JavaComport jcomport; public WP7Service() { public String semih() { return "Deneme"; public void yazdir() { kontrol++; if (kontrol == 1) { jcomport = new JavaComport(); try { servicevector = new Vector(); servicevector = jcomport.baslat(); 8

catch (InterruptedException e) { // TODO Auto-generated catch block e.printstacktrace(); if (Integer.parseInt((String) servicevector.get(servicevector.indexof("@") + 1)) == 1) { airconditionerstatus = true; else { airconditionerstatus = false; if (Integer.parseInt((String) servicevector.get(servicevector.indexof("$") + 1)) == 1) { lightstatus = true; else { lightstatus = false; if (Integer.parseInt((String) servicevector.get(servicevector.indexof("%") + 1)) == 1) { doorstatus = true; else { doorstatus = false; int a=integer.parseint((string) servicevector.get(servicevector.indexof("&") + 1)); int b=integer.parseint((string) servicevector.get(servicevector.indexof("&") + 2)); roomtemperature=(a*10)+b; int room =Integer.parseInt( (String) (servicevector.get(servicevector.indexof("<") + 1))); roomtemperature = Integer.parseInt(room); 9

System.out.println("room: " + room); public static boolean isdoorstatus() { return doorstatus; public static void setdoorstatus(boolean doorstatus) { if (WP7Service.doorStatus == false) { WP7Service.doorStatus = true; try { jcomport.mywrite("d"); catch (InterruptedException e) { e.printstacktrace(); else if (WP7Service.doorStatus == true) { WP7Service.doorStatus = false; try { jcomport.mywrite("e"); catch (InterruptedException e) { e.printstacktrace(); public static boolean isairconditionerstatus() { return airconditionerstatus; public static void setairconditionerstatus(boolean airconditionerstatus) { if (WP7Service.airConditionerStatus == false) { WP7Service.airConditionerStatus = true; try { jcomport.mywrite("f"); 10

catch (InterruptedException e) { e.printstacktrace(); else if (WP7Service.airConditionerStatus == true) { WP7Service.airConditionerStatus = false; try { jcomport.mywrite("g"); catch (InterruptedException e) { e.printstacktrace(); public static boolean isalarmstatus() { return alarmstatus; public static void setalarmstatus(boolean alarmstatus) { WP7Service.alarmStatus = alarmstatus; public static boolean islightstatus() { return lightstatus; public static void setlightstatus(boolean lightstatus) { if (WP7Service.lightStatus == false) { WP7Service.lightStatus = true; try { jcomport.mywrite("l"); catch (InterruptedException e) { e.printstacktrace(); else if (WP7Service.lightStatus == true) { WP7Service.lightStatus = false; try { 11

jcomport.mywrite("k"); catch (InterruptedException e) { e.printstacktrace(); public static int getroomtemperature() { return roomtemperature; public static void setroomtemperature(int roomtemperature) { WP7Service.roomTemperature = roomtemperature; public static boolean iswindowstatus() { return windowstatus; public static void setwindowstatus(boolean windowstatus) { WP7Service.windowStatus = windowstatus; Sınıfımız bu şekilde yazıldıktan sonra bir comport paketi yaratalım. Sınıfımızın ismini JavaComport olarak verdikten sonra aşağıdaki kodları ekleyelim. JavaComport sınıfı port üzerinden bileşenlerimizin donanımsal olarak bağlı olduğu PIC ile haberleşen sınıf. MyWrite fonksiyonu seri porttan yazma, myread fonksiyonu seri porttan okuma işlemini gerçekleştirir. package comport; import java.io.*; import java.util.*; import javax.comm.*; public class JavaComport implements Runnable, SerialPortEventListener { static CommPortIdentifier portid; static String messagestring; 12

static SerialPort serialport; static OutputStream outputstream; Thread readthread; InputStream inputstream; private static int kontrol = 1; private Vector vector ; 2000); public Vector baslat() throws InterruptedException { messagestring = "+b"; vector = new Vector(); mywrite(""); myread(); kontrol++; Thread.sleep(500); for (int i = 0; i < vector.size(); i++) { System.out.print(vector.get(i)); System.out.println(); return vector; public JavaComport() { try { portid = CommPortIdentifier.getPortIdentifier("COM4"); catch (NoSuchPortException e1) { // TODO Auto-generated catch block e1.printstacktrace(); try { serialport = (SerialPort) portid.open("simplewriteapp", catch (PortInUseException e) { e.printstacktrace(); 13

public void mywrite(string string) throws InterruptedException { if(string == "f") messagestring = "+f"; else if(string == "g") messagestring = "+g"; else if(string == "l") messagestring = "+l"; else if(string == "k") messagestring = "+k"; else if(string == "d") messagestring = "+d"; else if(string == "e") messagestring = "+e"; try { outputstream = serialport.getoutputstream(); catch (IOException e) { try { serialport.setserialportparams(2400, SerialPort.DATABITS_8, SerialPort.STOPBITS_1, SerialPort.PARITY_NONE); catch (UnsupportedCommOperationException e) { try { outputstream.write(messagestring.getbytes()); catch (IOException e) { Thread.sleep(500); public void myread() throws InterruptedException { try { inputstream = serialport.getinputstream(); catch (IOException e) { System.out.println(e); 14

try { if (kontrol == 1) serialport.addeventlistener(this); catch (TooManyListenersException e) { System.out.println(e); serialport.notifyondataavailable(true); try { serialport.setserialportparams(2400, SerialPort.DATABITS_8, SerialPort.STOPBITS_1, SerialPort.PARITY_NONE); catch (UnsupportedCommOperationException e) { System.out.println(e); readthread = new Thread(this); readthread.start(); public void run() { try { Thread.sleep(20000); catch (InterruptedException e) { System.out.println(e); public void serialevent(serialportevent event) { switch (event.geteventtype()) { case SerialPortEvent.BI: case SerialPortEvent.OE: case SerialPortEvent.FE: 15

case SerialPortEvent.PE: case SerialPortEvent.CD: case SerialPortEvent.CTS: case SerialPortEvent.DSR: case SerialPortEvent.RI: case SerialPortEvent.OUTPUT_BUFFER_EMPTY: break; case SerialPortEvent.DATA_AVAILABLE: byte[] readbuffer = new byte[1]; try { while (inputstream.available() > 0) { int numbytes = inputstream.read(readbuffer); vector.add(new String(readBuffer)); catch (IOException e) { System.out.println(e); break; Aslında JavaComport sınıfını kullanabilmek için Java Communication Api yi projeye tanıtmamız gerekiyor. 2.1.1 Java Communication Api Nedir ve Kurulumu. Java Communication Api Windows İşletim Sistemi nde COM portlara erişimi sağlar. Bu Api ile her port için bir nesne yaratabiliriz, portları açabiliriz, asenkron ve senkron iletişim sağlayabiliriz. Biz de prototipteki bileşenlerin durumlarına erişmek ve durumlarını değiştirmek için COM portları kullanacağız. Bunu ise RS-232 donanımı ile sağlarız. http://www.oracle.com/technetwork/java/index-jsp- 141752.html adresinden Api yi indirelim. Api dosyasında bulunan dosyalar 16

comm.jar, win32com.dll, javax.comm.properties. Win32com.dll dosyası Windows işletim sisteminde System32 klasörüne atılır. Comm.jar ve javax.comm.properties dosyaları ise projeye import edilir. 2.1.2 Apache Axis2 ile Web Servis Oluşturma. Sınıflarımızı oluşturup, Java Communication Api yi projemize eklendikten sonra WP7Service sınıfımıza sağ tıklıyoruz ve New -> Other -> Web Service diyoruz. Şekil 2.2 deki görüntüyü elde ederiz. ġekil 2.2. Web servis uygulaması için ilk adım. Şekil 2.2 deki ekrandan Web service runtime: Apache Axis i tıklarız. Karşımıza çıkan Service Deployment Configuration ekranından Apache Axis2 yi seçelim. Gelecek ekranları Next diyerek geçelim ve böylece web servisimiz oluşturulmuş oldu. Projeyi Tomcat uygulama sunucumuzda çalıştırdığımız zaman, tarayıcıya eğer 8080 portundan çalışıyorsak http://localhost:8080/axis2webservice/ yazarsak Şekil 2.3 teki ekran bizi karşılar. 17

ġekil 2.3. Apache Axis2 web servis karşılama ekranı. 2.2 JSF ve Primefaces Kullanarak Web Tabanlı Uygulama OluĢturma. Bölüm 1.1.1.2 de dinamik web uygulamasına Primefaces kütüphanesi nasıl eklenir anlatıldı. Dinamik web tabanlı uygulamamız, prototipte yer alan bileşenlerin durumlarını gösteren ve bu durumları değiştirmemizi sağlayacak arayüzü bize sunar. Primefaces ise görsellik açısından kullanıldı. Client4 adında bir dinamik web uygulaması oluşturalım. 2.2.1 Login Ekranının Oluşturulması. 2.2.1.1 Login Ekranı View Katmanının Oluşturulması. View katmanında son kullanıcıların gördüğü, xhtml sayfalarımızın vb. bulunduğu görsel sayfalardır. Öncelikle Login ekranının Projede webcontent dizinine sağ 18

tıklayalım. New -> HTML File diyelim. Çıkan ekrandan Login.xhtml dosyası oluşturalım ve aşağıdaki kodları ekleyelim. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.prime.com.tr/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <title>primefaces with facelet</title> </h:head> <h:body onload="dlg.show()"> <p:dock position="top"> <p:menuitem value="ayarlar" icon="/images/settings1.png" url="settings.xhtml" /> <p:menuitem value="yenile" icon="/images/refresh.png" url="login.xhtml" /> </p:dock> <p:growl id="growl" showdetail="true" life="3000" /> *" /> <p:dialog id="dialog" header="login" width="420" widgetvar="dlg"> <h:form> id="username" hatası: Boş değer girilemez." /> <h:panelgrid columns="2" cellpadding="5"> <h:outputlabel for="username" value="kullanici Adi: <p:inputtext value="#{loginbean.username" required="true" label="username" requiredmessage="kullanıcı adı: Doğrulama Boş değer girilemez." label="password" /> <h:outputlabel for="password" value="parola: * " /> <h:inputsecret value="#{loginbean.password" requiredmessage="parola: Doğrulama hatası: id="password" required="true" action="#{loginbean.login" status, args)" ></p:commandbutton> <f:facet name="footer"> <p:commandbutton value="giriş" oncomplete="handleloginrequest(xhr, 19

<p:commandbutton value="temizle" onclick="this.form.reset()"></p:commandbutton> </f:facet> </h:panelgrid> </h:body> </html> </h:form> </p:dialog> <script type="text/javascript"> function handleloginrequest(xhr, status, args) { if (args.validationfailed!args.loggedin) { jquery('#dialog').parent().effect("shake", { times : 3, 100); </script> 2.2.1.2 Login Ekranı Model Katmanının Oluşturulması. JSF de model katmanında java beanler bulunur. Yani view katmanından gelen istekler java sınıfları tarafından gerçekleştirilir. Login ekranının model katmanını aşağıdaki şekilde oluştururuz. package client; import java.math.biginteger; import java.security.messagedigest; import java.security.nosuchalgorithmexception; import javax.faces.application.facesmessage; import javax.faces.bean.managedbean; import javax.faces.bean.requestscoped; import javax.faces.validator.validatorexception; import persistence.loginpersistence; @ManagedBean(name = "Login") @RequestScoped public class Login { private boolean giris; private String username; 20

private String password; public String getusername() { return username; public void setusername(string username) { this.username = username; public String getpassword() { return password; public void setpassword(string password) { this.password = password; public String login() { String md5password = getmd5sum(password); LoginPersistence loginpersistence = new LoginPersistence(); giris = loginpersistence.login(username, md5password); System.out.println("Deneme package Login username:"+username+" "+password); if (username!= null && password!= null && giris) { FacesMessage message = new FacesMessage(); message.setsummary("parola eşleşme hatası tekrar deneyiniz\nnot: Parola 50 karakterden fazlasını ve @ karakteri içermez "); throw new ValidatorException(message); else { System.out.println("else"); FacesMessage message = new FacesMessage(); message.setsummary("parola eşleşme hatası tekrar deneyiniz\nnot: Parola 50 karakterden fazlasını ve @ karakteri içermez "); throw new ValidatorException(message); 21

2.2.2 Kullanıcının Login Olabilmesi İçin Veri Tabanı Kontrolü. Kullanıcının prototipteki bileşenleri yönetebilmesi yetkilendirilmeye tabi tutulmuştur. Bu nedenle kullanıcının login olabilmesi için veri tabanı kontrolüne ihtiyaç duyulur. Veri tabanı olarak MySQL kullanıldı. Smarthouse isimli bir veritabanına, logintable adlı bir tablo oluşturuldu. ID(int), username(string), password(string) özelliklerlerinden oluşan tabloya kullanıcılar eklenir. Bu bizim JSF deki Controller katmanına denk gelmektedir. Kalıcı katman için persistence paketi oluşturuldu ve aşağıdaki sınıflar eklendi. package persistence; import java.sql.connection; import java.sql.drivermanager; import java.sql.sqlexception; import java.sql.statement; public class Baglanti { public static Statement baglanti() { try { Class.forName("com.mysql.jdbc.Driver"); Connection baglanti = DriverManager.getConnection("jdbc:mysql://localhost:3306/smarthouse","root","080 401009"); Statement ifade = baglanti.createstatement(); return ifade; catch (ClassNotFoundException e) { e.printstacktrace(); catch (SQLException e) { e.printstacktrace(); return null; 22

package persistence; import java.sql.resultset; import java.sql.sqlexception; import java.sql.statement; public class LoginPersistence { private boolean giris; public boolean login(string username, String password){ Statement st = Baglanti.baglanti(); String sql = "select *from logintable where username='" + username + "' and password='" + password + "' "; ResultSet set = null; try { set = st.executequery(sql); catch (SQLException e) { e.printstacktrace(); try { giris = set.next(); catch (SQLException e) { e.printstacktrace(); return giris; 23

2.2.3 Anasayfanın Oluşturulması. 2.2.3.1 Anasayfanın View Katmanının Oluşturulması. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.prime.com.tr/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <title>smart House Main Page</title>.yazi { <style type="text/css"> text-decoration: none; font-size: medium; font-family: monospace; font-weight: bolder; color: gray;.tarih { float: left; text-decoration: none; font-size: medium; font-family: monospace; font-weight: bolder; color: red; </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', { packages : [ 'gauge' ] ); </script> <script type="text/javascript"> function drawvisualization() { var sicaklik = '<h:outputtext value="#{client.roomtemperature" />'; var data = new google.visualization.datatable(); var a = 4; data.addcolumn('string', 'Label'); data.addcolumn('number', 'Value'); data.addrows(2); 24

data.setvalue(0, 0, 'Oda Sıcaklığı'); data.setvalue(0, 1, parseint(sicaklik)); // Create and draw the visualization. new google.visualization.gauge(document.getelementbyid('visualization')).draw(data); google.setonloadcallback(drawvisualization); </script> </h:head> <h:body> <h:outputtext value="son Güncelleme: #{Client.tarih" styleclass="tarih"></h:outputtext> <p:dock position="top"> <p:menuitem value="anasayfa" icon="/images/home.png" url="main.xhtml" /> <p:menuitem value="ayarlar" icon="/images/settings1.png" url="settings.xhtml" /> <p:menuitem value="yenile" icon="/images/refresh.png" url="main.xhtml" /> <p:menuitem value="çıkış" icon="/images/exit.png" url="login.xhtml" /> </p:dock> <div style="margin: 50px auto auto auto; width: 200px; height: 200px;" id="visualization"></div> <h:form prependid="false" id="form"> <p:growl id="growl" showdetail="true" /> <center> <h:graphicimage width="104" height="98" value="#{client.picture" /> </center> <p:panel style="width:600px;margin: 80px auto auto auto;" header="smart House"> <div style="float: left;"> <p:commandlink update="aircon" action="#{client.clientaircondition"> <p:graphicimage width="104" height="98" value="/images/air.png" /> </p:commandlink> <br /> <h:outputtext id="aircon" styleclass="yazi" value="#{client.airconstring"></h:outputtext> </div> <div align="right"> 25

<p:commandlink action="#{client.clientlightstatus" update="light"> <h:graphicimage width="104" height="98" value="/images/light.png" /> </p:commandlink> <br /> <h:outputtext id="light" styleclass="yazi" value="#{client.lightstring"></h:outputtext> </div> <br></br> <br></br> <div style="float: left"> <p:commandlink action="#{client.clientdoorstatus" update="door"> <h:graphicimage width="104" height="98" value="/images/door.jpg" /> </p:commandlink> <br /> <h:outputtext id="door" styleclass="yazi" value="#{client.doorstring"></h:outputtext> </div> <div align="right"> <h:commandlink action="#"> <h:graphicimage width="104" height="98" value="/images/wake.jpg" /> <br /> <h:outputtext value="#"></h:outputtext> <f:ajax execute="@all" render="@form" /> </h:commandlink> <h:outputtext></h:outputtext> </div> </p:panel> </h:form> </h:body> </html> 2.2.3.2 Anasayfanın Model Katmanının Oluşturulması. package client; import java.rmi.remoteexception; import java.text.dateformat; import java.text.simpledateformat; import java.util.date; import javax.faces.bean.managedbean; import javax.faces.bean.requestscoped; 26

import javax.faces.bean.viewscoped; import Service.WP7ServicePortTypeProxy; @ManagedBean(name = "Client") @RequestScoped public class Client { private boolean doorstatus; private String doorstring; private boolean windowstatus; private boolean airconditionerstatus; private String airconstring; private boolean alarmstatus; private boolean lightstatus = true; private String lightstring; private int roomtemperature; private String picture; private WP7ServicePortTypeProxy proxy; private DateFormat dateformat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss"); Date date = new Date(); private String tarih = dateformat.format(date); public Client() throws RemoteException, InterruptedException { proxy = new WP7ServicePortTypeProxy(); proxy.yazdir(); Thread.sleep(2000); loadairconditioner(); loadlight(); loadroomtemperature(); loaddoor(); public void loadroomtemperature() { try { 27

roomtemperature = proxy.getroomtemperature(); catch (Exception e) { System.out.println("Web Servise ulaşılamadı loadroom"); e.printstacktrace(); if (roomtemperature <= 0) { picture = "images/snow.gif"; else if (roomtemperature > 0 && roomtemperature <= 10) { picture = "images/weather_storm.png"; else if (roomtemperature > 10 && roomtemperature <= 20) { picture = "images/weather_st.png"; else picture = "images/weather_fog.png"; public void loadairconditioner() { try { airconditionerstatus = proxy.isairconditionerstatus(); catch (RemoteException e) { System.out.println("Web Servise ulaşılamadı loadair"); e.printstacktrace(); if (airconditionerstatus) airconstring = "Klima Açık"; else airconstring = "Klima Kapalı"; public void ClientAirCondition() throws InterruptedException { try { proxy.setairconditionerstatus(!airconditionerstatus); catch (RemoteException e) { e.printstacktrace(); 28

Thread.sleep(1500); // WEB SERVISTEKI METHOD SET EDILMEDEN ONCE // LOADAIRCONDITIONER SET EDILIYORDU BU NEDENLE // THREAD KULLANILDI // 1000 keyfi olarak secildi. loadairconditioner(); public void loadlight() { try { lightstatus = proxy.islightstatus(); catch (RemoteException e) { System.out.println("Web Servise ulaşılamadı loadlight"); e.printstacktrace(); if (lightstatus) lightstring = "Işıklar Açık"; else lightstring = "Işıklar Kapalı"; public void ClientLightStatus() throws InterruptedException { try { proxy.setlightstatus(!lightstatus); catch (RemoteException e) { e.printstacktrace(); Thread.sleep(1500); loadlight(); public void loaddoor() { try { doorstatus = proxy.isdoorstatus(); 29

catch (RemoteException e) { System.out.println("Web Servise ulaşılamadı loaddoor"); e.printstacktrace(); if (doorstatus) doorstring = "Kapı Açık"; else doorstring = "Kapı Kapalı"; public void ClientDoorStatus() throws InterruptedException { try { proxy.setdoorstatus(!doorstatus); catch (RemoteException e) { e.printstacktrace(); Thread.sleep(1500); loaddoor(); public String getairconstring() { return airconstring; public void setairconstring(string airconstring) { this.airconstring = airconstring; public String getlightstring() { return lightstring; public void setlightstring(string lightstring) { this.lightstring = lightstring; public int getroomtemperature() { return roomtemperature; 30

public void setroomtemperature(int roomtemperature) { this.roomtemperature = roomtemperature; public String getpicture() { return picture; public void setpicture(string picture) { this.picture = picture; public boolean iswindowstatus() { return windowstatus; public void setwindowstatus(boolean windowstatus) { this.windowstatus = windowstatus; public String gettarih() { return tarih; public void settarih(string tarih) { this.tarih = tarih; public boolean isdoorstatus() { return doorstatus; public void setdoorstatus(boolean doorstatus) { this.doorstatus = doorstatus; public String getdoorstring() { return doorstring; 31

public void setdoorstring(string doorstring) { this.doorstring = doorstring; 2.2.4 Ayarların Oluşturulması. 2.2.4.1 Ayarların View Katmanının Oluşturulması. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.prime.com.tr/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <title>settings</title> </h:head> <h:body> <p:dock position="top"> <p:menuitem value="anasayfa" icon="/images/home.png" url="main.xhtml" /> <p:menuitem value="ayarlar" icon="/images/settings1.png" url="settings.xhtml" /> <p:menuitem value="yenile" icon="/images/refresh.png" url="settings.xhtml" /> <p:menuitem value="çıkış" icon="/images/exit.png" url="login.xhtml" /> *" /> </p:dock> <h:form> <p:growl id="growl" showdetail="true" /> <p:panel style="width:500px;margin: 80px auto auto auto;" header="ayarlar" cellpadding="5"> <h:panelgrid columns="2"> <h:outputlabel for="username" value="kullanici Adi: id="username" hatası: Boş değer girilemez." /> <p:inputtext value="#{settingsbean.username" required="true" label="username" requiredmessage="kullanıcı adı: Doğrulama 32

<h:outputlabel for="password" value="parola: * " /> Boş değer girilemez." label="password" /> Parola: * " /> Boş değer girilemez." label="newpassword" /> <p:password value="#{settingsbean.password" requiredmessage="parola: Doğrulama hatası: id="password" required="true" <h:outputlabel for="newpassword" value="yeni <p:password value="#{settingsbean.newpassword" requiredmessage="parola: Doğrulama hatası: id="newpassword" required="true" <h:outputlabel for="password1" value="parola Doğrula: * " /> <p:password value="#{settingsbean.confirmpassword" requiredmessage="parola: Doğrulama hatası: Boş değer girilemez." id="password1" required="true" label="password1" /> <p:commandbutton value="gonder" update="growl" action="#{settingsbean.dogrula"></p:commandbutton> </h:panelgrid> </p:panel> </h:form> </h:body> </html> 2.2.4.2 Ayarların Model Katmanının Oluşturulması. package settings; import javax.faces.application.facesmessage; import javax.faces.bean.managedbean; import javax.faces.bean.requestscoped; import javax.faces.context.facescontext; import persistence.loginpersistence; import persistence.settingspersistence; 33

@ManagedBean(name = "SettingsBean") @RequestScoped public class Settings { private String username; private String password; private String newpassword; private String confirmpassword; private boolean confirmupdate; private boolean user; private SettingsPersistence spersistence; private LoginPersistence loginpersistence; private FacesMessage message; public String getusername() { return username; public void setusername(string username) { this.username = username; public String getconfirmpassword() { return confirmpassword; public void setconfirmpassword(string confirmpassword) { this.confirmpassword = confirmpassword; public String getpassword() { return password; public void setpassword(string password) { this.password = password; 34

public void kaydet() { if (!newpassword.equals(confirmpassword)) { message = new FacesMessage(FacesMessage.SEVERITY_WARN, "Giriş Hatası", "Parola eşleşme hatası"); FacesContext.getCurrentInstance().addMessage(null, message); else { dogrula(); public String dogrula() { if (!newpassword.equals(confirmpassword)) { message = new FacesMessage(FacesMessage.SEVERITY_WARN, "Giriş Hatası", "Parola eşleşme hatası"); FacesContext.getCurrentInstance().addMessage(null, message); else { spersistence = new SettingsPersistence(); loginpersistence = new LoginPersistence(); user = loginpersistence.login(username, password); if (user) { confirmupdate = spersistence.update(username, password, newpassword); if (confirmupdate) { message = new FacesMessage(FacesMessage.SEVERITY_WARN, "Giriş Başarılı", "Parola güncellendi"); 35

FacesContext.getCurrentInstance().addMessage(null, message); return "Main.xhtml?faces-redirect=true"; else { message = new FacesMessage(FacesMessage.SEVERITY_WARN, "Giriş Hatası", "Parola güncellenemedi tekrar deneyiniz"); FacesContext.getCurrentInstance().addMessage(null, message); return "basarisiz"; else { message = new FacesMessage(FacesMessage.SEVERITY_WARN, "Giriş Hatası", "Kullanıcı Adı/Parolanızı kontrol ediniz"); FacesContext.getCurrentInstance().addMessage(null, message); return "basarisiz"; return "basarisiz"; public String getnewpassword() { return newpassword; public void setnewpassword(string newpassword) { 36

this.newpassword = newpassword; package persistence; import java.sql.resultset; import java.sql.sqlexception; import java.sql.statement; public class SettingsPersistence { public boolean update(string username, String password, String newpassword) { Statement st = Baglanti.baglanti(); try { st.executeupdate("update logintable SET password='" + newpassword + "' where username='"+username+"' "); System.out.println("UPDATE YAPILDI"); return true; catch (SQLException e) { // TODO Auto-generated catch block e.printstacktrace(); return false; 2.3 Oluşturulan Web Tabanlı Uygulamaya Web Client Özelliği Eklenmesi. Web tabanlı uygulamızdan web servisteki olayları tetikleyebilmek amacıyla web client eklenmesi gerekmektedir. Projemize sağ tıklayarak New -> Other -> Web Service Client diyoruz. Karşımıza şekil 2.4 teki gibi bir ekran geliyor. 37

ġekil 2.4. Uygulamaya web servis client ekleme ekranı. Buradan Browse diyerek Select Service Implementation ekranı bizi karşılar. Browse tuşunun yanına http://localhost:8080/axis2webservice/services/wp7service?wsdl yazarak web servisimizi ekleriz. Bu arada web servisimiz uygulama sunumuzda çalışıyor durumda olmalıdır ki bu işlemi yapabilelim. Finish dediğimiz anda web uygulamamızın paketlerinde Service adlı paket oluşmalı ve şu sınıfları içermelidir. WP7Service.java WP7ServiceLocator WP7ServicePortType WP7ServicePortTypeProxy WP7ServiceSoap11BindingStub 38

2.4 Mobil İşletim Sistemi Uygulamasının Oluşturulması. 2.4.1 Mobil Uygulamanın Arayüzünün Oluşturulması. Bölüm 1.1.2.1 de anlatılan şekilde bir proje oluşturuyoruz. Form1.cs dosyasına ToolBox dan ısı sensörünün değeri için bir progressbar ve diğer bileşenler için 4 button ve değerlerin güncellenmesi için bir button sürükleriz. Form1.cs dosyasının arka planına şu kodları yazarız. using System; using System.Linq; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.Threading; namespace _15Ocak2012 { public partial class SmartHouse : Form { private bool airconditionerstatus; private bool airconditionerstatus1; private bool lightstatus; private bool lightstatus1; private bool doorstatus; private bool doorstatus1; private int roomtemperature; private bool roomt; WebReference.WP7Service proxy; public SmartHouse() { InitializeComponent(); proxy = new WebReference.WP7Service(); proxy.yazdir(); Thread.Sleep(2000); label1.text = "Son Güncelleme: " + DateTime.Now.ToString("t"); loadairconditioner(); loadlight(); loaddoor(); // loadroomtemperature(); 39

public void loadroomtemperature() { proxy.getroomtemperature(out roomtemperature,out roomt); label2.text = roomtemperature.tostring() + " C"; if (roomtemperature > 0) progressbar1.value = (2 * roomtemperature); else progressbar1.value = 0; public void loadairconditioner() { proxy.isairconditionerstatus(out airconditionerstatus, out airconditionerstatus1); if (airconditionerstatus) { button1.text = "Klima Açık"; button1.backcolor = Color.Green; else { button1.text = "Klima Kapalı"; button1.backcolor = Color.Red; public void ClientAirCondition(object sender, EventArgs e) { proxy.setairconditionerstatus(!airconditionerstatus, airconditionerstatus1); loadairconditioner(); public void loadlight() { proxy.islightstatus(out lightstatus, out lightstatus1); if (lightstatus) { button2.text = "Işık Açık"; button2.backcolor = Color.Green; else { button2.text = "Işık Kapalı"; button2.backcolor = Color.Red; public void ClientLightStatus(object sender, EventArgs e) { 40

proxy.setlightstatus(!lightstatus, lightstatus1); loadlight(); public void loaddoor() { proxy.isdoorstatus(out doorstatus, out doorstatus1); if (doorstatus) { button3.text = "Kapı Açık"; button3.backcolor = Color.Green; else { button3.text = "Kapı Kapalı"; button3.backcolor = Color.Red; public void ClientDoorStatus(object sender, EventArgs e) { proxy.setdoorstatus(!doorstatus, doorstatus1); loaddoor(); public void guncelle(object sender, EventArgs e) { proxy.yazdir(); Thread.Sleep(2000); loadairconditioner(); loadlight(); loaddoor(); MessageBox.Show("Güncelleme Yapıldı"); label1.text = "Son Güncelleme: " + DateTime.Now.ToString("t"); 41

2.4.2 Mobil Uygulamaya Web Servisin Eklenmesi. Projeye sağ tıklarız ve Add Web Reference deriz ve bizi şekil 2.5 ekranı karşılar. ġekil 2.5. Add web reference ekranı. URL yazan kısma çalışır şekilde bulunan web servisin yolu http://localhost:8080/axis2webservice/services/wp7service?wsdl verilir. Go tuşuna basılır ve Add Reference dediğimizde uygulamamız artık emülatörde çalışmaya hazır. 2.4.3 Mobil Uygulamanın Akıllı Telefonlar İçin Hazır Hale Getirilmesi. Solution Explorer a sağ tıklarız. Add -> New Project deriz. Project types panelinden Other Project Type -> Setup and Deployment sonra templates panelinden Smart Device CAB Project seçilir. Name verildikten sonra Ok a tıklarız. Şimdi isimlendirdiğimiz CAB projesi Solution Explorer da görünür. CAB projesine sağ tıklayıp Add > Project Output denilir. Gelen ekrandan Primary Output seçilir Ok a tıklanır. Sonra Build menüsünden CAB dosyası build edilir. Sonra hepsi kaydedilir. Projemizin bulunduğu dizinde CAB dosyamız bulunur, bu dosya artık Windows 42