{"id":1033,"date":"2020-04-06T14:32:20","date_gmt":"2020-04-06T11:32:20","guid":{"rendered":"http:\/\/hilmibilici.com\/blog\/?p=1033"},"modified":"2020-04-06T14:32:20","modified_gmt":"2020-04-06T11:32:20","slug":"bolum-3-frameworkler-ders-3-cordova","status":"publish","type":"post","link":"http:\/\/hilmibilici.com\/?p=1033","title":{"rendered":"B\u00f6l\u00fcm 3 (Frameworkler) Ders 3: Cordova"},"content":{"rendered":"<h3 class=\"course-item-title question-title\">Cordova<\/h3>\n<div class=\"content-item-description lesson-description\">\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-834 size-full\" src=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/1_GKQA_F4CfFmxRoOpuSsAnA-e1556376399957.jpeg\" sizes=\"(max-width: 957px) 100vw, 957px\" srcset=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/1_GKQA_F4CfFmxRoOpuSsAnA-e1556376399957.jpeg 957w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/1_GKQA_F4CfFmxRoOpuSsAnA-e1556376399957-300x137.jpeg 300w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/1_GKQA_F4CfFmxRoOpuSsAnA-e1556376399957-768x350.jpeg 768w\" alt=\"\" width=\"957\" height=\"436\" \/><\/p>\n<p>21 Nisan 2015 tarihinde, Cordova ekibi (eski ad\u0131 ile PhoneGap), web geli\u015ftiricilerin ayn\u0131 anda birka\u00e7 platform i\u00e7in mobil uygulamalar geli\u015ftirmesine olanak tan\u0131yan ara\u00e7lar\u0131n\u0131n 5.0 s\u00fcr\u00fcm\u00fcn\u00fc yay\u0131mlad\u0131.<\/p>\n<p>Cordova, mobil uygulamaya bir taray\u0131c\u0131 yerle\u015ftirerek farkl\u0131 platformlarda mobil uygulamalar geli\u015ftirmenize izin veren bir platformdur.\u00a0Dolay\u0131s\u0131yla, uygulama asl\u0131nda tek bir siteyi g\u00f6steren bir mini taray\u0131c\u0131d\u0131r.\u00a0\u0130ndirmeyi h\u0131zland\u0131rmak i\u00e7in t\u00fcm kaynaklar uygulaman\u0131n da\u011f\u0131t\u0131lm\u0131\u015f paketine yerle\u015ftirilebilir ve gerekirse sunucudan indirilebilir.<br \/>\n<!--more--><\/p>\n<p>K\u0131saca Cordova(<a href=\"http:\/\/cordova.apache.org\/\">http:\/\/cordova.apache.org\/<\/a>), yaz\u0131lan HTML, CSS ve JS kodlar\u0131n\u0131 mobil uygulama olarak ekrana \u00e7\u0131karan bir framework. A\u00e7\u0131k kaynak kodlu ve tamamen \u00fccretsiz arkas\u0131nda Apache\u2019nin bulundu\u011fu bir yap\u0131d\u0131r.<\/p>\n<p>Uygulama Geli\u015ftirme<\/p>\n<ul>\n<li><a href=\"https:\/\/git-scm.com\/downloads\">https:\/\/git-scm.com\/downloads<\/a>\u00a0adresinden i\u015fletim sisteminiz i\u00e7in istedi\u011finiz y\u00fckleme se\u00e7ene\u011fini se\u00e7in.<\/li>\n<li>js<\/li>\n<\/ul>\n<p><a href=\"https:\/\/nodejs.org\/\">Node.js<\/a>\u00a0, javascript \u00fczerinde \u00e7al\u0131\u015fan bir web uygulamas\u0131d\u0131r.\u00a0Geli\u015ftiriciler taraf\u0131ndan ara\u00e7lar\u0131 ve kitapl\u0131klar\u0131 da\u011f\u0131tmak i\u00e7in kullan\u0131lan\u00a0<a href=\"https:\/\/www.npmjs.com\/\">Node Package Manager veya npm<\/a>\u00a0adl\u0131 bir paket y\u00f6neticisi ile birlikte gelir.\u00a0Cordova ve eklentileri npm kullan\u0131larak da\u011f\u0131t\u0131lm\u0131\u015ft\u0131r, bu y\u00fczden y\u00fcklenmelidir.<\/p>\n<p>Resmi Y\u00fckleme Sitesi:\u00a0<a href=\"https:\/\/nodejs.org\/en\/download\/\">https:\/\/nodejs.org\/en\/download\/<\/a><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-835\" src=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/40.png\" sizes=\"(max-width: 1440px) 100vw, 1440px\" srcset=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/40.png 1440w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/40-300x188.png 300w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/40-768x480.png 768w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/40-1024x640.png 1024w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/40-400x250.png 400w\" alt=\"\" width=\"1440\" height=\"900\" \/><\/p>\n<p><a name=\"_Toc1736731\"><\/a>\u015eekil 40: Node Js y\u00fckleme ekran\u0131<\/p>\n<ul>\n<li>Java<\/li>\n<\/ul>\n<p>Yerel Android uygulamalar\u0131 Java ile yaz\u0131lm\u0131\u015ft\u0131r, bu y\u00fczden y\u00fcklemeliyiz.<br \/>\nJava\u2019y\u0131 y\u00fcklemek\u00a0<a href=\"https:\/\/java.com\/en\/download\/\">i\u00e7in indirme sayfas\u0131na<\/a>\u00a0gidin\u00a0ve \u00fccretsiz olarak Java \u0130ndir d\u00fc\u011fmesine t\u0131klay\u0131n, i\u015fletim sisteminiz i\u00e7in istedi\u011finiz y\u00fckleme se\u00e7ene\u011fini se\u00e7in.\u00a0\u0130\u015fletim sisteminizin y\u00fckleyicisini indirin ve Java\u2019y\u0131 y\u00fckleyin.<\/p>\n<ul>\n<li>Android SDK<\/li>\n<\/ul>\n<p>Uygulamay\u0131 bir Android cihaza da\u011f\u0131taca\u011f\u0131m\u0131zdan, Android Yaz\u0131l\u0131m Geli\u015ftirme Kitini (SDK) kurmak gerekiyor.\u00a0Git\u00a0<a href=\"http:\/\/developer.android.com\/sdk\/index.html#Other\">Android Studio ve SDK Ara\u00e7lar\u0131<\/a>\u00a0ve Tek i\u015fletim sisteminiz i\u00e7in SDK Ara\u00e7lar\u0131 indirin.<\/p>\n<p>Windows i\u00e7in, gerekli paketleri se\u00e7mek ve y\u00fcklemek i\u00e7in kullanabilece\u011finiz haz\u0131r bir y\u00fckleyici var.<\/p>\n<ul>\n<li>Cordova y\u00fckleme<\/li>\n<\/ul>\n<p>Gerekli bile\u015fenleri bilgisayar\u0131n\u0131za y\u00fckledikten sonra, Cordova\u2019n\u0131n kurulumuna devam edebilirsiniz.\u00a0A\u015fa\u011f\u0131daki komutu komut sat\u0131r\u0131ndan \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<p><em>sudo npm install -g cordova<\/em><\/p>\n<p>Ya da Komut sat\u0131r\u0131 kullanarak ikinci y\u00f6ntem:<\/p>\n<p>Kurulum i\u00e7in komut: npm install -g cordova<\/p>\n<p>Proje i\u00e7in Komut:\u00a0 cordova create merhaba com.ornek.merhaba merhabaDunya<\/p>\n<p>Proje klas\u00f6r\u00fcne girme: cd merhaba<\/p>\n<p>Klas\u00f6r i\u00e7eri\u011fini g\u00f6rme komutu: dir<\/p>\n<p><strong>Platformlar\u0131n Eklenmesi<\/strong><\/p>\n<p>Projenin hangi platformda\/i\u015fletim sisteminde \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirlemek i\u00e7in ilgili platform ad\u0131 bu kodlar yard\u0131m\u0131 ile eklenir:<\/p>\n<ul>\n<li>Android i\u015fletim sitemi i\u00e7in:<\/li>\n<\/ul>\n<p>cordova platform add android<\/p>\n<ul>\n<li>iOS i\u015fletim sitemi i\u00e7in:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-836\" src=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/41-e1556375957694.png\" sizes=\"(max-width: 687px) 100vw, 687px\" srcset=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/41-e1556375957694.png 687w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/41-e1556375957694-300x290.png 300w\" alt=\"\" width=\"687\" height=\"665\" \/><\/p>\n<p>\u015eekil 41: Cordova kurulumu<\/p>\n<p>cordova platform add ios<\/p>\n<p>Platform kontrol komutu:<\/p>\n<p>cordova platform ls<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-837\" src=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/42-e1556376026797.png\" sizes=\"(max-width: 680px) 100vw, 680px\" srcset=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/42-e1556376026797.png 680w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/42-e1556376026797-300x218.png 300w\" alt=\"\" width=\"680\" height=\"493\" \/><\/p>\n<p>\u015eekil 42: Platform kontrolu<\/p>\n<p><strong>Derleme i\u00e7in \u00f6n gereksinim kontrol\u00fc komutu:<\/strong>\u00a0cordova requirements<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-838\" src=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/43-e1556376118382.png\" sizes=\"(max-width: 673px) 100vw, 673px\" srcset=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/43-e1556376118382.png 673w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/43-e1556376118382-300x266.png 300w\" alt=\"\" width=\"673\" height=\"597\" \/><\/p>\n<p>\u015eekil 43:Platfom kontrolleri<\/p>\n<p><strong>Platform derlemesi yapmak i\u00e7in gerekli kod:<\/strong>\u00a0cordova build<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-839 size-full\" src=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/44-e1556376215468.png\" sizes=\"(max-width: 659px) 100vw, 659px\" srcset=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/44-e1556376215468.png 659w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/44-e1556376215468-300x168.png 300w\" alt=\"\" width=\"659\" height=\"370\" \/><\/p>\n<p>\u015eekil 44: Gereksinim Kontrolleri<\/p>\n<p><strong>Uygulaman\u0131n Test edilmesi:<\/strong>\u00a0cordova emulate android<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-841\" src=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/45-e1556376320962.png\" sizes=\"(max-width: 274px) 100vw, 274px\" srcset=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/45-e1556376320962.png 274w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/04\/45-e1556376320962-153x300.png 153w\" alt=\"\" width=\"274\" height=\"537\" \/><\/p>\n<p><strong>Uygulama olu\u015fturma<\/strong><\/p>\n<p>\u015eimdi Cordova ile basit bir Hello World uygulamas\u0131 geli\u015ftirmeye haz\u0131r\u0131z.\u00a0Yeni bir Cordova uygulamas\u0131 olu\u015fturmak i\u00e7in bir terminal a\u00e7\u0131n ve Cordova uygulamas\u0131 olu\u015fturma komutunu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<p><em>cordova create photosharer com.yourname.photosharer PhotoSharer<\/em><\/p>\n<p>Kod:<\/p>\n<blockquote><p>&lt;!DOCTYPE html&gt;<\/p>\n<p>&lt;html&gt;<\/p>\n<p>&lt;head&gt;<\/p>\n<p>&lt;meta http-equiv=\u201dContent-Security-Policy\u201d content=\u201ddefault-src \u2018self\u2019 data: gap: https:\/\/ssl.gstatic.com \u2018unsafe-eval\u2019; style-src \u2018self\u2019 \u2018unsafe-inline\u2019; media-src *\u201d&gt;<\/p>\n<p>&lt;meta name=\u201dformat-detection\u201d content=\u201dtelephone=no\u201d&gt;<\/p>\n<p>&lt;meta name=\u201dmsapplication-tap-highlight\u201d content=\u201dno\u201d&gt;<\/p>\n<p>&lt;meta name=\u201dviewport\u201d content=\u201duser-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width\u201d&gt;<\/p>\n<p>&lt;link rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d href=\u201dcss\/index.css\u201d&gt;<\/p>\n<p>&lt;title&gt;Merhaba D\u00fcnya&lt;\/title&gt;<\/p>\n<p>&lt;\/head&gt;<\/p>\n<p>&lt;body&gt;<\/p>\n<p>&lt;div class=\u201dapp\u201d&gt;<\/p>\n<p>&lt;h1&gt;Apache Cordova&lt;\/h1&gt;<\/p>\n<p>&lt;div id=\u201ddeviceready\u201d class=\u201dblink\u201d&gt;<\/p>\n<p>&lt;p class=\u201devent listening\u201d&gt;Ayg\u0131ta ba\u011flan\u0131l\u0131yor&lt;\/p&gt;<\/p>\n<p>&lt;p class=\u201devent received\u201d&gt;Ayg\u0131t haz\u0131r&lt;\/p&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>&lt;script type=\u201dtext\/javascript\u201d src=\u201dcordova.js\u201d&gt;&lt;\/script&gt;<\/p>\n<p>&lt;script type=\u201dtext\/javascript\u201d src=\u201djs\/index.js\u201d&gt;&lt;\/script&gt;<\/p>\n<p>&lt;\/body&gt;<\/p>\n<p>&lt;\/html&gt;<\/p>\n<p>&nbsp;<\/p><\/blockquote>\n<p>\u0130kinci\u00a0komut dosyas\u0131\u00a0index.js\u00a0dosyas\u0131n\u0131\u00a0i\u00e7erir\u00a0.\u00a0Bu, yeni bir Cordova projesi olu\u015ftururken varsay\u0131lan olarak olu\u015fturulan belirli bir uygulama dosyas\u0131d\u0131r.\u00a0Belirli bir olayda belirli bir kodu y\u00fcr\u00fct\u00fcr.<\/p>\n<p>Bu dosyay\u0131 a\u00e7arsan\u0131z, fonksiyon g\u00f6receksiniz\u00a0receivedEvent\u00a0gizleme ve iki element g\u00f6steren sorumlu\u00a0p, yukar\u0131da tan\u0131mlad\u0131\u011f\u0131m\u0131z. Sonra\u00a0onDeviceReady olay\u0131\u00a0\u00e7a\u011fr\u0131l\u0131r. B\u00f6ylece, fonksiyon ge\u00e7irilir etkinlik tan\u0131mlay\u0131c\u0131 receivedEvent olacakt\u0131r\u00a0deviceready.<\/p>\n<p>onDeviceReady: function() {<\/p>\n<p>app.receivedEvent(\u2018deviceready\u2019);<\/p>\n<p>},<\/p>\n<p>receivedEvent: function(id) {<\/p>\n<p>var parentElement = document.getElementById(id);<br \/>\nvar listeningElement = parentElement.querySelector(\u2018.listening\u2019);<br \/>\nvar receivedElement = parentElement.querySelector(\u2018.received\u2019);<\/p>\n<p>listeningElement.setAttribute(\u2018style\u2019, \u2018display:none;\u2019);<\/p>\n<p>receivedElement.setAttribute(\u2018style\u2019, \u2018display:block;\u2019);<\/p>\n<p>console.log(\u2018Received Event: \u2018 + id);<\/p>\n<p>}<\/p>\n<p>Sonunda uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rma zaman\u0131 geldi.\u00a0\u00d6ncelikle, Ratchet\u00a0mobil web uygulamalar\u0131 olu\u015fturmak i\u00e7in bir \u00f6n platform eklenmelidir.\u00a0\u00a0<a href=\"http:\/\/goratchet.com\/\">indirme sayfas\u0131nda<\/a>n\u00a0veya komut kullanarak\u00a0<a href=\"http:\/\/bower.io\/\">Bower<\/a>\u00a0kurun\u00a0:<\/p>\n<p>bower install ratchet<\/p>\n<\/div>\n<blockquote><p>Bu ve devam edecek anlat\u0131mlar\u0131n tamam\u0131 ve s\u0131navlar<\/p>\n<p><a href=\"http:\/\/tez.hilmibilici.com\">tez.hilmibilici.com\u00a0<\/a><\/p>\n<p>alt domaininde yay\u0131ndad\u0131r. Tezimi payla\u015f\u0131ma a\u00e7\u0131yorum. Al\u0131n teridir, l\u00fctfen payla\u015f\u0131rken kaynak belirtmeyi unutmay\u0131n.<span style=\"font-size: 16px;\">\u00a0<\/span><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Cordova 21 Nisan 2015 tarihinde, Cordova ekibi (eski ad\u0131 ile PhoneGap), web geli\u015ftiricilerin ayn\u0131 anda birka\u00e7 platform i\u00e7in mobil uygulamalar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":83425,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[42],"tags":[53,120,121,122,123,202,307,346],"class_list":["post-1033","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobprog","tag-2020-mobil-programlama","tag-cordova","tag-cordova-framework","tag-cordova-kurulumu","tag-cordova-platform","tag-frameworkler","tag-mobil-pyazilim-gelistirme","tag-phonegap"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/posts\/1033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1033"}],"version-history":[{"count":0,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/posts\/1033\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/"}],"wp:attachment":[{"href":"http:\/\/hilmibilici.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1033"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}