Bu yazımda Javascript ile Arduino kontrolünden bahsedeceğim.Node.js'ı muhtemelen duymuşsunuzdur. Ama eğer duymadıysanız  kısaca server tarafında Javascript çalıştırabileceğiniz bir platform olarak tanımlayabiliriz.

Eğer sisteminizde kurulu değil ise

http://nodejs.org/ sitesinden sisteminize uygun olanını indirip kurun.

Kurduktan sonra versiyonunu terminalden kontrol edin. (Emin olmak için)

$ node -v
v0.10.36

Daha sonra ise Johnny-five  paketini kuruyoruz. Johnny -Five  nedir diyebilirisiniz. Johnny-Five  Node.js için yazılmış  Arduino kontrol frameworkudur.  Firmata ile çalışmaktadır. Johnny-Five kullanılarak  Led yakabilir Servoları döndürebilirsiniz. Heyecan verici değil mi ? :D

Şimdi npm kullanarak  Johnny-Five'i yükleyelim.

npm install johnny-five

Johnny-Five'i yükledikten sonra  Arduinomuza Firmata'yi yükleyelim.

Arduino'yu bilgisayara bağlayın. Arduino IDE'sini açın.

File -> Examples -> Firmata -> StandardFirmata

yolunu izleyerek kütüphaneyi Arduino'ya yükleyin.

Daha sonra   ledyak.js  adında bir  dosya oluşturalım.

 var five = require("johnny-five"),board, led;

    board = new five.Board();

    board.on("ready", function() {
      led = new five.Led(13);
      led.strobe(1000);
    });

Daha sonra ledyak.js'in dizinine gelelim.

node ledyak.js

diyerek çalıştıralım.

[embed]https://vine.co/v/O2UAVXVeWKT[/embed]

Şimdilik hepsi bu kadar . Daha fazla örnek ve bilgi için Johnny-Five Github sayfasını ziyaret edebilirsiniz.

Bu kısa yazımda Ubuntu ve türevleri (Linux Mint, elementary OS vb..) için  Android Studio kurulumundan bahsedeceğim.Paolo Rotolo  tarafından oluşturulan PPA sayesinde kurulum oldukça kolaylaşıyor.

Lafı fazla uzatmadan kuruluma geçelim. Terminal'e aşagıdaki komutları yazdığımızda Android Studio yüklenecektir.

sudo add-apt-repository ppa:paolorotolo/android-studio
sudo apt-get update
sudo apt-get install android-studio

Not: Java 6 veya üzerinin  sisteminizde kurulu olduğundan emin olun.

Bu yazımda Phonegap/Cordova uygulamalarında  Network yani ağ bağlantı bilgisinin nasıl öğreniliceğinden bahsedeceğim.

Network Pluginin desteklendiği platformlar

• Amazon Fire OS
• Android
• BlackBerry 10
• Browser
• iOS
• Windows Phone 7 and 8
• Tizen
• Windows
• Firefox OS

Projemizi oluşturup Android'i ekleyelim.

cordova create network com.example.network Network

cd network

cordova platform add android

Daha sonra ise Network Pluginini ekliyoruz.

cordova plugin add org.apache.cordova.network-information

Network Sabitleri

• Connection.UNKNOWN
• Connection.ETHERNET
• Connection.WIFI
• Connection.CELL_2G
• Connection.CELL_3G
• Connection.CELL_4G
• Connection.CELL
• Connection.NONE

Kullanım

Plugini ekledikten sonra aşagıdakileri ekliyoruz. (Bunu sadece Android için ekledim .Diğer platformlar için de başka şeyler eklenecektir. Daha fazla bilgi için )

(app/res/xml/config.xml)
<feature name="NetworkStatus">
    <param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" />
</feature>


( app/AndroidManifest.xml)
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

https://gist.github.com/nazrdogan/da0634f78ad651224414

Network bağlantısını kontrol etmek bu kadar kolay. Umarım faydalı olur. Kolay gelsin  :)

Crosswalk'in ne olduğundan daha önce bahsetmiştim. Bu yazımda ise Crosswalk ile Cordova projesi oluşturma ve bunu Android üzerinde çalıştırmayı anlatacağım.

Crosswalk (crosswalk-cordova-android bundle) paketini buradan indiriyoruz.

yada

X86 için

$ wget https://download.01.org/crosswalk/releases/crosswalk/android/stable/10.39.235.15/x86/crosswalk-cordova-10.39.235.15-x86.zip

Arm için

$ wget https://download.01.org/crosswalk/releases/crosswalk/android/stable/10.39.235.15/arm/crosswalk-cordova-10.39.235.15-arm.zip

indirdiğimiz  .zip dosyasının içindeki dosyayı çıkaralım.

Uygulama oluşturma

Uygulama oluşturmak için ise Crosswalk Cordova tools denen bir araçtan faydalanıyoruz. Bu araç ise çıkardığımız dosya paketinin içerisinde   bin/ klasörü içinde bulunmaktadır.

$ crosswalk-cordova-10.39.235.15-x86/bin/create <proje_yolu> \ <paket_adı> <proje_adı> [<template_path>] [--shared]

Örneğin

$ crosswalk-cordova-10.39.235.15-x86/bin/create HelloWorld \ org.crosswalkproject.sample HelloWorld

Uygulamayı oluşturduktan sonra projenin dizinine gidiyoruz.

$ cd HelloWorld
$ ./cordova/run

Dedikten sonra uygulamamız cihazımız yada emülator üzerinde çalışacaktır.

Hata ayıklama

Chrome DevTools kullanarak hata ayıklama işleminden daha önce bahsetmiştim. Chrome Dev Tools kullanarak hata ayıklama yapabilirsiniz.

Kolay gelsin :)

Cordova/PhoneGap'de  Android için geliştirme yaparken "adb logcat" ile  hata ayıklama  yapabiliriz. Ama logcat ile hata ayıklama oldukça zor ve zahmetli bir iş  .Çünkü hata ayıklama başladığında  uygulamanızla alakalı veya işletim sistemi ile alakalı birçok gereksiz bilgiyi bir arada vermektedir.

Eğer çok iyi Android biliyorsanız belki bunla başa çıkabilirsiniz ama bunu Chrome DevTools kullanarak daha kolay hale getirebilirsiniz.

Chrome ile Hata ayıklama yapmak için bazı gereksinimler var öncelikle onlardan bahsedeyim.

PhoneGap/Cordova 3.3 ve üzeri

Android 4.4 veya üzeri bir cihaz veya emulatör

Chrome 30 veya üzeri tarayıcı

Nasıl yapacağım ?

1- Cihazınız üzerinde "USB Hata ayıklama" (USB Debugging) seçenegini aktif edin.

2. PhoneGap/Cordova uygulamanızın API seviyesini 19 veya üzeri yapın .

AndroidManifest.xml içerisinde  bu kısmı degiştiriyoruz.

<uses-sdk android:minSdkVersion="17" android:targetSdkVersion="19" />

project.properties içerisinde de

target=android-19

olarak değiştiriyoruz.

Daha sonra ise projemizi bir kere çalıştırdıktan sonra

1- Hata ayıklama için

platforms/android/src/com/uygulamaAdı/uygulamaAdı.java

içerisine

import android.os.Build;
import android.webkit.WebView;

onCreate Methodu içerisine  ise

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WebView.setWebContentsDebuggingEnabled(true);
}

ekliyoruz.  Ekledikten sonra tekrar uygulamayı derleyip çalıştıralım.

Değişmiş hali

https://gist.github.com/nazrdogan/24e886e7878251a431b2

Uzak Hata Ayıklama

Chrome'da   adres satırına "about:inspect" yazalım. Yazdıktan sonra eğer diğer şeyleride sorunsuz yaptıysak  artık  Chrome Devtools ile normal web uygulamarı geliştirirken nasıl kullanıyorsak o şekilde kullanabiliriz.

Bu ekranda ise "inspect " butonuna basarak  hata ayıklama ekranını açabilirsiniz.

Ben oldukça başarılı buldum. Umarım sizinde işinize yarar kolay gelsin :)

Sizde Cordova projelerin  iOS üzerinde akıcı bir şekilde çalışırken Android üzerinde  biraz  sorunlu olduğunu farkettiniz mi ?

Bu soruya kişisel cevabım ise kesinlikle evet .Gariptir ki  Apple HTML5 uygulamalara Google'dan daha fazla önem vermektedir.Apple UIWebview yerine koyduğu WKWebview sayesinde gözle görülür bir performans artışı sağlamıştır. (WKWebview  hakkında daha detaylı bilgi için buraya bakabilirsiniz.)

Tamam iOS için güzel şeyler Apple'da  bizim amacımız zaten çapraz platform uygulama yazmak değil mi ? Biz Android tarafında performansı yüksek uygulama yazamayacakmıyız ?  diyebilirsiniz.

Bu soruların cevabı Crosswalk diyebilirim. Crosswalk  açık kaynak geliştirilen Cordova/Phonegap ve Android(projelerin içindeki WebView'lara) projelerine yeni özellikler ve performans getiren HTML5 (runtime) çalışma zamanıdır. Bunun anlamı ise  HTML5 mobil uygulamalarınızı  native webview ile Android 4.0 ve üzeri bütün cihazlar için geliştirebilir ve dağıtabilirsiniz.

Artıları neler?

• Tüm cihazlarda aynı çalışma zamanı  olduğu için her cihaz için farklı çalışma zamanları ile uğraşmak zorunda değilsiniz.
• Daha iyi hafıza yönetimi

Crosswalk ile W3C belirlediği en son HTML5 API standartlarını kullanabilirsiniz. Crosswalk'in desteklediği bazı API'ler ise şunlar

•  WebGL
• WebSockets
• Web Auido API
• WebRTC (Real Time Clock-Gerçek zamanlı saat)

Crosswalk'ta sadece bunlar yok tabiki çok daha fazlasını bulabilirsiniz. CrossWalk işime yarar bende tam bunu arıyordum diyorsanız sizi söyle alalım. https://crosswalk-project.org/

Crosswalk ile ilğili  söyleyecek çok şey var ama şimdilik bu kadar yeterli .Bir sonraki CrossWalk yazısı  Cordova/Phonegap projelerinde kullanımı ile ilgili olacak.

Bu yazımda  Cordova için Barkod pluginin kullanımından bahsedeceğim.Plugin oldukça kullanışlı ve kurulumuda bir o kadar basit. Ayrıca plugin Android,iOS ve Windows 8 'i desteklemektedir.

Plugini kurmak için bir proje oluşturalım.

cordova create barcode com.example.barcode BarcodeReader

Daha sonra sırasıyla bu adımları izleyerek Android'i ve barkod plugini  ekleyelim

cd barcode
cordova platform add android
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git

Kullanım

cordova.plugins.barcodeScanner.scan(
      function (result) {
          alert("We got a barcode\n" +
                "Sonuç: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "iptal: " + result.cancelled);
      },
      function (error) {
          alert("Tarama başarısız oldu: " + error);
      }
   );

https://gist.github.com/nazrdogan/de6e3647e98a62445486

Ekran Görüntüleri

Pluginin Github sayfası

Bu yazımda  Cordova  platformu için konuşma tanıma plugininin (Android ) kullanımından  bahsedeceğim.Pluginin kullanımı oldukça basit. Bunun şimdi sırasıyla bu adımları izleyelim.

Projemizi oluşturalım.

cordova create speech com.example.speech SpeechRecognizer

Daha sonra pluginimizi  ekleyelim.

cd speech

cordova platform add android
cordova plugin add https://github.com/poiuytrez/SpeechRecognizer

Pluginin kullanımı

SpeechRecognizer.startRecognize(success, error, maxMatches, promptString, language);

•  success: olası eşleştirilen sözcükleri döndürür.
• error: hata döndürür.
• maxMatches: Eşleşen sözcüklerin maksimum sayısını döndürür.
• promptString: Google logosu ve mikrofon üzerinde  yazan yazıyı belirlemek için.  Örneğin "Şimdi Konuşun"
• language: Konuşma tanıma motoru için kullanılan dili belirlemek için Örnegin "tr-TR"

Desteklenen Diller

Desteklenen dillerin kodlarının listesini görmek için

SpeechRecognizer.getSupportedLanguages(success, error);

•  success: json dizisi olarak desteklenen dillerin kodlarını döndürür.
• error: hata döndürür.

https://gist.github.com/nazrdogan/ed18f142b655f9b0e0bf

Ekran görüntüleri ise

Ses Tanıma Ekranı

Döndürülen Sonuçlar

Desteklenen Diller.

Plugin oldukça basit ve kullanışlı umarım işinize yarar.  Pluginin Github sayfasına burdan ulaşabilirsiniz.

Bu yazımda Phonegap/Cordova Platformları için   Social Share Pluginin kurulumunu ve kullanımını Android( diger platformlardada çalışacaktır muhtemelen) için anlatmaya çalışacağım.

Öncelikle  Phonegap/Cordova Kurulumunu  yaptığınızı düşünerek proje oluştururak başlamak istiyorum.

Proje oluşturmak için

$cordova create social com.example.social Social

Projemizi oluşturduktan sonra Android Platformunu ekleyelim.

  $ cd social

  $ cordova platform add android

Daha sonra  projemizi çalıştırmak için

$cordova run android

Projemizde  sıkıntı olmadan çalışması lazım ,

boş projemiz çalıştıgına göre  Social Share Pluginini eklemek için

Cordova için

cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

PhoeGap için

phonegap local plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

Ekledikten sonra ,

 cordova prepare

Social Share Plugin hazır olacaktır.

Bazı örnek kullanımlar :

<button onclick="window.plugins.socialsharing.share('Message only')">message only</button>
<button onclick="window.plugins.socialsharing.share('Message and subject', 'The subject')">message and subject</button>
<button onclick="window.plugins.socialsharing.share(null, null, null, 'http://www.x-services.nl')">link only</button>
<button onclick="window.plugins.socialsharing.share('Message and link', null, null, 'http://www.x-services.nl')">message and link</button>
<button onclick="window.plugins.socialsharing.share(null, null, 'https://www.google.nl/images/srpr/logo4w.png', null)">image only</button>
// Beware: passing a base64 file as 'data:' is not supported on Android 2.x: https://code.google.com/p/android/issues/detail?id=7901#c43
// Hint: when sharing a base64 encoded file on Android you can set the filename by passing it as the subject (second param)
<button onclick="window.plugins.socialsharing.share(null, 'Android filename', 'data:image/png;base64,R0lGODlhDAAMALMBAP8AAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUKAAEALAAAAAAMAAwAQAQZMMhJK7iY4p3nlZ8XgmNlnibXdVqolmhcRQA7', null)">base64 image only</button>
// Hint: you can share multiple files by using an array as thirds param: ['file 1','file 2', ..], but beware of this Android Kitkat Facebook issue: [#164]
<button onclick="window.plugins.socialsharing.share('Message and image', null, 'https://www.google.nl/images/srpr/logo4w.png', null)">message and image</button>
<button onclick="window.plugins.socialsharing.share('Message, image and link', null, 'https://www.google.nl/images/srpr/logo4w.png', 'http://www.x-services.nl')">message, image and link</button>
<button onclick="window.plugins.socialsharing.share('Message, subject, image and link', 'The subject', 'https://www.google.nl/images/srpr/logo4w.png', 'http://www.x-services.nl')">message, subject, image and link</button>

Ekran görüntüleri

Social Share Pluginin Github sayfasından daha fazla bilgiye ulaşabilirsiniz.

Oluşturduğum basit projeyi indirmek için

Not :  Bu yazıda  Cordova 4.2.0 versiyonu kullanılmıştır.

Node.js aktif olarak geliştirilen bir proje  olduğu için  versiyon sıklıkla değişmektedir. Bazen kullandığınız bir modül size versiyonunuz eski oldugu için hata verecektir. Ya da son versiyonu kullanmak isteyebilirsiniz.

Node.js  NPM kullanarak yükseltmek için Terminal'e

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Buradaki "stable "  yerine istediğiniz sürüm numarasınıda yazabilirsiniz.

sudo n 0.8.21

Daha sonra  node versiyonunu kontrol edelim.

node -v

Hepsi bu kadar. Aslında NPM'i kullanmak için Node.js yüklü olması gerekirken ,böyle çalışması bana biraz tuhaf geldi. :D