Google, Android için MVVM mimarisini öneriyor. ViewModel ise bu mimarinin 3 ayağından birisi. Bu yazıda genel anlamıyla MVVM'den ziyade ViewModel'e neden ihtiyaç duyarız sorusuna cevap arayacağız.

Konu ile ilgili örnekler genelde çok detaylı olunca; ben, ya sıkılıyorum ya da konuyu anlayamıyorum. O yüzden eğer size de benim gibiyseniz, bana ViewModel'i en iyi anlatan çok basit bir örneği paylaşmak istiyorum.

State yönetimi, gerek ön yüz gerekse de arka yüz olsun hemen her uygulamanın beynini oluşturur. Activity ise Android'in ön yüzünün önemli bir bileşeni. Eğer state yönetimini Activity üzerinde eski yöntemlerle tutmaya kalkacak olursak Activity'nin durumuna göre state'i kaybedebiliriz. State'i kaybettiğimizde yeniden oluşturmamız gerekecek. Bu hem kaynak hem de zaman kaybı demek. Hatta duruma göre veriyi tamamıyla bile kaybedebiliriz.

Yukarıdaki şemada basitçe Activity'nin durumlarını göstermeye çalıştım. Uygulamayı ilk açtığımızda Activity onCreate, onStart ve onResume durumlarından geçerek normal çalışma şeklini alıyor. Ekranı yan çevirdiğinizde, Activity onPause durumuna geçiyor ve Activity sonlandırılıyor. Çünkü Activity, Android ön yüzünün bir bileşeni. Ekran yan çevrildiğinde haliyle ön yüz ve nesnelerin şekli oldukça değişecek. Android'in Activity'i sonlandırıp tekrar oluşturması gerekiyor. Ancak bu değişikliklerin sadece görsellikte olması gerekiyor. Ekranın tuttuğu verinin aynen saklanması gerekir haliyle.

Telefon ekranı çevrildiğinde kullanıcı için aslında değişen bir şey yok. O, sadece ekranı çevirdiğini zannetse de arka planda Android, Activity'yi önce durduruyor daha sonra yeniden oluşturuyor. Bu durumda eğer Activity'nin kullandığı veriyi örneğin onCreate yordamında oluşturduysanız bu veri tekrardan oluşturulacak.

Çok çok basit bir örnek yapalım:

Empty Activity şablonunu kullanarak yeni bir Android projesi oluşturun. activity_main.xml dosyasındaki TextView kontrolüne bir id ekleyin:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/myTw"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Yukarıda ben android:id="@+id/myTw" satırını ekledim.

Yeni bir Java sınıfı oluşturun. Herhangi bir isim olabilir.

package com.example.basicviewmodelex;

import androidx.lifecycle.ViewModel;

import java.text.SimpleDateFormat;
import java.util.Date;

public class MyDataGenerator {

    private String tarihSaat = null;

    public String getData(){
        if (tarihSaat == null){
            createData();
        }
        return tarihSaat;
    }

    public void createData(){
        SimpleDateFormat formatter = new SimpleDateFormat("dd/MM/yyyy HH:mm:ss");
        Date date = new Date();
        tarihSaat = formatter.format(date);
    }


}

Bu sınıf, bir örneği (instance) oluşturulduğunda oluşturulduğu tarihi tarihSaat değişkenine atıyor. Tek yaptığı bu.

Şimdi de MainActivity.class dosyasında bu sınıfın bir örneğini oluşturalım:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MyDataGenerator myDataGenerator = new MyDataGenerator();
        String data = myDataGenerator.getData();

        TextView tw = findViewById(R.id.myTw);
        tw.setText(data);
    }
}

Şimdi projeyi çalıştırın ve metin kutusuna tarih ve saatin yazılmış olduğunu görün.

Buraya kadar her şey çok normal. Bu tarihi not alın ve telefonu yatay hale getirin.

Tarihe dikkat edin. Activity yatay hale getirildiğinde ben aslında tarihi tekrar oluşturmak istemiyorum. ViewModel bileşeni bu noktada önemli hale geliyor. Uygulamalarımızın kullanıcıları için Activity bir şey ifade etmiyor. Onlar ekranı çevirseler de, uygulamayı geçici olarak kapatsalar da tekrar doğru veriyi görmek istiyorlar.

Şimdi kodumuzda 2 ufak değişiklik yapalım. MyDataGenerator sınıfını ViewModel sınıfını kullanarak oluşturalım. Kalan kısımlar aynen kalsın.

public class MyDataGenerator extends ViewModel

MainActivity dosyasında ise MyDataGenerator sınıfını çağırdığımız yeri aşağıdaki gibi güncelleyelim:

// MyDataGenerator myDataGenerator = new MyDataGenerator();
MyDataGenerator myDataGenerator = new ViewModelProvider(this).get(MyDataGenerator.class);

Hepsi bu kadar. Bu değişikliklerden sonra ekranı ters de çevirsek metin kutusunda hep aynı tarihi görüyoruz.

ViewModel, Activity'nin onStop durumundan hiç etkilenmeden değerini korumayı başardı. ViewModel, Activity tamamen sonlana dek durumunu korumayı başaracak.

Örneği ekranı yan çevirme ile ilgili verdik. Bu en kolay gözlemlenebilir örnek olduğu için. Aslında Android'in Activity'i sonlandırabileceği tek yer yan çevirme değildir. Özellikle uygulama arka planda çalışırken Activity Android tarafından onPause konumuna geçebilir. Yani stabil bir state yapısına ihtiyacımız her durumda vardır.

Navigation (bazen routing) olarak bilinen sayfa/ekran arası geçişler; web, masaüstü, veya mobil farketmeksizin her türlü ön yüz (front-end) geliştiriciliğinin bel kemiğini oluşturur. Android üzerinde bu işler Jetpack ile beraber çok daha kolay hale geldi. Bu yazıda basit bir örnekle fragmentler arası geçişlerin Jetpack kütüphaneleri kullanılarak nasıl yapılacağına bakalım.

Vereceğimiz örneğin omurgasını kısaca listelemek gerekirse:

• activity_main üzerinde NavHostFragment bileşeni
• NavHostFragment üzerinde 2 tane fragment ve bu fragmentler arası geçişler (action)
• Fragment içerisinde action'ı çağıracak düğme kontrolü
• Ekranın üst kısmındaki geri tuşu

Şimdi de adım adım bu bileşenleri ekleyelim:

• Öncelikle yeni bir Android projesi yaratın ve şablon kısmında "Empty Activity"'e tıklayın.
• app kısmına sağ tıklayarak "New > Android Resource File" seçin.
• File name kısmına istediğiniz bir ismi verip Resource type kısmına ise Navigation diyerek devam edin. OK tuşuna bastığınızda Android Studio gradle bağımlılıklarını eklemenizi isteyecek. Ona da tamam diyerek devam edin.

build.gradle (Module:app) dosyasına bakacak olursanız aşağıdaki satırların (versiyon numaraları farklı olabilir elbet) eklenmiş olduğunu göreceksiniz. Eğer bir şekilde Android Studio eklemeyi başaramamış ise dependencies kısmına siz ekleyin.

implementation 'androidx.navigation:navigation-fragment:2.2.0'
implementation 'androidx.navigation:navigation-ui:2.2.0'

• Daha sonra New > Fragment > Fragment (Blank) kullanarak 2 adet fragment ekleyin. Birine ListeFragment öbürüne DetayFragment diyebilirsiniz. Burada "Include fragment factory methods" ve "Include interface callbacks" seçeneklerinin seçili durumunu kaldırın.
• Android Studio her fragment için biri java öbürü xml olmak üzere 2 dosya oluşturacak. (ör. ListeFragment.java ve fragment_liste.xml)
• fragment_liste.xml içerisindeki metin kontrolünü silin ve yerine bir tane düğme ekleyin. Ben FloatingActionButton ekledim. Verdiğimiz basit örnek için hangi kontrol olduğunun çok önemi yok. Benim fragment_liste.xml dosyam aşağıdaki gibi oldu:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ListFragment">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:src="@android:drawable/btn_star_big_on"
        android:focusable="true"
        android:layout_gravity="bottom|right"
        android:layout_margin="10dp"
        />
</FrameLayout>

• activity_main.xml dosyasını açın ve içerisindeki metin bileşenini silin ve bir NavHostFragment ekleyin. Eklerken bu hostun hangi resource dosyasından geleceğini soran bir pencere açılacak. Bu örnekte sadece 1 navigation kontrolü olduğu için listedeki tek elemanı seçin ve devam edin.
• Şimdi ise app > res > navigation içerisindeki xml dosyasını açın ve yeşil artı ikonu bulunan "New Destination" tuşuna basarak 2 fragmenti ekleyin. Liste fragmentinden detay fragmentine sürükle bırakla bir action ekleyin. Aşağıdaki gibi bir görüntü oluşması gerekiyor.

Artık kodlamaya geçebiliriz. Öncelikle FloatingActionButton'ın işlemini gerçekleştirelim. Tuşa bastığımızda yukarıda okla gösterilen action'ı çağıracağız ve liste fragmentinden detay fragmentine geçiş yapacağız. Çoğu işlemi Android arka planda gerçekleştiriyor. Bize sadece action'ı çağırmak düşüyor. Benim kodum aşağıdaki gibi oldu. İsimlendirmelerimiz farklı olacağı için olduğu gibi yapıştırırsanız hata alabilirsiniz.

public class ListFragment extends Fragment implements View.OnClickListener {


    public ListFragment() {

    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View vw = inflater.inflate(R.layout.fragment_list, container, false);
        FloatingActionButton fab = vw.findViewById(R.id.fab_list);
        fab.setOnClickListener(this);
        return vw;
    }

    @Override
    public void onClick(View v) {

        NavDirections action = new ActionOnlyNavDirections(R.id.action_listFragment_to_detailFragment);
        Navigation.findNavController(v).navigate(action);
    }
}

FloatingActionButton'ın ID'sini kullanarak referansına eriştik ve OnClickListener yardımıyla ekran geçişini tanımlayan action'ı çağırdık.

Şimdi de MainActivity.java'yı aşağıdaki gibi değiştirerek geri tuşunu aktif hale getirelim.

public class MainActivity extends AppCompatActivity {

    private NavController navController;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        navController = Navigation.findNavController(this, R.id.fragment);
        NavigationUI.setupActionBarWithNavController(this, navController);

    }

    @Override
    public boolean onSupportNavigateUp() {
        return NavigationUI.navigateUp(navController, (DrawerLayout) null);
    }
}

Sonuç aşağıdaki gibi:

Sonuç olarak Jetpack Navigation, standart işlemleri çok kolaylaştırıyor. En güzel yanı da neredeyse her yazılım geliştirici bunu benzer şekilde kullanıyor ve başkasının yazdığı kodu okumayı da oldukça kolay hale getiriyor.

Blog yazmaya başlamadan önce hobilerim ve mesleğim hakkında yazılar yazmak istemiştim ancak 1 yılın sonunda sadece meslek hakkında yazdığımı görüyorum. Biraz da sörf hakkında yazalım.

Dalga sörfü Türkiye'de çok yaygın bir spor değil. Elbette, bunun en büyük sebebi; Türk sularının iç deniz olması sebebiyle dalgalı olmamasıdır. Yine de Türkiye'de dalga bulmak imkansız değildir. Karadeniz ve Akdeniz'de pek çok noktada dalga sörfü yapılmaktadır; ama, pek istikrarlı olmadığından bir kültür halini alması pek mümkün gözükmüyor. Elbette bu bizim başlamamamız için bir sebep değil.

Dalga sörfüne nasıl başlarız? Nasıl bir sörf tahtası almamız gerekir? Boy, kilo önemli mi? Tehlikeli bir spor mu? Şimdi bunları inceleyelim.

Yeni Zelanda'ya ilk taşındığımda, denize gittiğimde biraz hayal kırıklığına uğramıştım. Büyük Okyanus, bizim Akdeniz ve Karadeniz'e göre çok daha dalgalı. Yüzmek pek mümkün değildi. Zaten denize baktığınızda da yüzen(ya da yüzmeye çalışan) insan sayısı pek fazla değildi. İnsanlar ya sörf yapıyor ya da denize girmeden plajda oturuyorlardı. İlk gözlemlerim sonunda kendimi sörf fikrine alıştırmaya başlamıştım.

Motivasyon

Sörf biraz futbola benziyor. Hemen herkes futbol oynayabilir. İyi ya da kötü. Mesela basketbol böyle değil. Kötü basketbol oynayan birisi zaten ya kendisi oynamak istemez ya da oynatmazlar. Sörf böyle değil. Profesyonel sörf çok zor bir spordur. Fakat; amatör olarak yüzmeyi bilen herkes, sörf tahtasını satın alıp denize girdiği anda sörfçüdür. Amaç eğlenmek. Ünlü bir laf var:

"En iyi sörfçü, dalgaların içinde eğlenmesini en iyi bilendir"

Denizi ve suyu seven birisi, denge konusunda çok kötü de olsa; pek dalga yakalayamasa da sörften çok keyif alabilir. Müzik aleti öğrenmek mesela, oldukça zordur. Yetenekten ziyade sabır ister. Çalamadığınız zaman sıkılırsınız. Sıkıldığınız için de kendinizi geliştiremezsiniz. Sörf böyle değil. En başta pek beceremeseniz de sıkılmazsınız. Ertesi gün tekrar gitmek istersiniz. En sonunda iyi ya da kötü sörf yapar hale gelirsiniz.

Sörf Tahtası seçimi

Sörfe başlamak için ihtiyacınız olan ilk şey elbette ki sörf tahtası. Sörf tahtaları genel olarak ikiye ayrılıyor:

1. Longboard
2. Shortboard

Ancak tanım konusu biraz karışık. Genellikle 8-foot (2.43m) ve üzeri longboard, 7 foot(2.13m) ve aşağısı ise shortboard olarak kabul edilir. 7-8 foot ise ne shortboard ne de longboard adlandırılır. Bunlara da mini mal ya da funboard denilir. Pratikte 8 foot oldukça uzun bir tahta olmasına rağmen resmi longboard turnuvalarına genellikle 9 foot altında bir tahta ile katılamazsınız. Bu yüzden resmi olarak longboard boyutu 9ft ve üzeridir ancak pratikte 8ft ve üzerine longboard derler.

İnsanlar genellikle, boy ile kullanılacak sörf tahtasının uzunluğu arasında bir ilişki olması gerektiğini düşünürler, özellikle de kayak yapanlar. Sörfte böyle bir ilişki yoktur. Ya da hem vardır hem yoktur diyebiliriz. Ancak uzun boylular uzun tahta, kısa boylular kısa tahta kullanır düşüncesi yanlıştır. Boydan ziyade kilo ve deneyim daha önemlidir.

Başlangıç aşamasında shortboard ile dalga yakalamak oldukça zordur. Shortboard çeviktir ancak hacminin düşük olması sebebiyle ayağa kalktığınız anda tahta suya gömülmeye başlayacaktır. Ayağa ne kadar erken kalkarsanız tahtayı dalganın akışına daha etkili bir şekilde yönlendirirsiniz. Ayrıca dalganın henüz kırılmadan sahip olduğu potansiyel enerjiyi tümüyle kullanabilirsiniz. Ayağa kalkma, dengeyi sağlama, sörf tahtasını gereken konuma getirme gibi eylemler deneyimsiz birisi için biraz zor olacağından shortboard yeni başlayanlar için önerilmez.

Longboard, yüksek hacmi sebebiyle kolay kolay batmaz. Bu da size dalgayı yakalayıp kontrol etme konusunda kolaylık sağlar. O yüzden başlangıç seviyesi için longboard veya funboard oldukça idealdir. Ancak bu da demek değildir ki her longboard kullanan sörfçü deneyimsizdir. Bu biraz da tercih meselesidir. Kimileri çok deneyimli olsa da uzun tahtadan daha çok hoşlanmaktadır. Kariyerini longboarder olarak sürdüren pek çok profesyonel sörfçü vardır.

Gerçek anlamda başlangıç sörf tahtası 7 ile 9 ft arası değişen ve yumuşak maddeden yapılmış olandır. Sörf tahtaları genellikle sert maddelerden yapılır. Çarptığı zaman acı verebilir. Sörf yaparken elbet başkasının da size çarpma ihtimali vardır ama çoğunlukla size kendi sörf tahtanız çarpar. Bu sebeple hiç sörf yapmadıysanız yumuşak sörf tahtalarını öneririm

Bu tahtalara foamie de denilir. Oldukça yumuşaktır ve hacmi de oldukça geniştir. Bu yüzden oldukça stabildir ve beyaz dalga üzerinde bile kolaylıkla hareket imkanı sağlar. Bu tahta üzerine düştüğünüzde veya tahta size çarptığında canınız çok yanmaz.

Başlangıç için tavsiyem yukarıdaki gibi bir sörf tahtası bulmanızdır. 1 sene sonunda daha küçük tahtalarla devam edebilirsiniz. Ancak longboard ile sörf yapmanın tadı da başkadır. Ayrıca küçük dalgalarda shortboard ile dalga yakalamanız imkansıza yakındır. Yakalasanız bile çok kısa sürede yavaşlar.

İlerleyen zamanlarda dalga sörfü ile ilgili daha fazla bilgi vermeye çalışacağım.

JavaScript gerçek anlamda "fullstack" bir dil. Kolaylıkla hem önyüz hem de arkayüz programları yazabiliyoruz. Peki JavaScript kullanarak çip programlamayı düşündünüz mü? Espruino buna imkan veren bir platform.

https://www.espruino.com/

Espruino ücretsiz bir firmware ve ESP8266 ve ESP32'nin yanında pek çok çipi de destekliyor. Aslında bu firmware'i (aygıt yazılımı) oluşturanların resmi olarak destekledikleri kendi donanımları da var. Ancak bunlar biraz daha pahalı. Biz fiyatı 2-5 dolar civarı olan ESP8266 ve ESP32 çiplerini kullanacağız.

Çip içerisinde JavaScript dilini kullanabilmek için öncelikle çipe bu dili tanıtmamız gerekiyor. Yani firmware kurmamız gerekiyor. Firmware (aygıt yazılımı), bir nevi çipin işletim sistemi. Tüm bu işlemleri yapmak için de sistemimizde NodeJS ve NPM'in kurulu olması gerekiyor. Eğer kurulu değilse aşağıdaki adresten son sürümünü indirip kurabilirsiniz

https://nodejs.org

Tüm kurulumu terminal üzerinden gerçekleştireceğiz. Kurulumu tamamladıktan sonra hem node hem de npm kurulumunun sorunsuz geçtiğini anlamak için aşağıdaki komutları kullanalım. npm, Nodejs'in resmi paket yöneticisi olduğu için node ile birlikte sisteme yüklenecektir.

node -v
npm -v

Şimdi ise Espruino'nun resmi sayfasına giderek seçtiğimiz çipe firmware'i yükleyebiliriz.

https://www.espruino.com/Download

Ancak bu işlemler oldukça karmaşık. Ben bu karmaşayı azaltmak amacıyla aşağıdaki paketi oluşturdum.

https://www.npmjs.com/package/espruino-create-project

npm install -g espruino-create-project

Bu paket global olarak (-g parametresi ile) sisteme yükledim.

Daha sonra bu paketi kullanarak yeni bir proje oluşturalım:

espruino-create-project init my-esp8266-project --chip esp8266 --baud 115200 --port PORT1 --author 'Cuneyt Aliustaoglu'

Buradaki bazı parametreler sisteminize ve isteğinize göre değişebilir. chip parametresini çipinizi seçin. Şimdilik sadece esp8266 veya esp32 desteklenmekte. Port, Windows üzerinde genellike PORT1, PORT2 vs. şeklindedir. Ben mac kullandığım için portun adı cu.SLAB_USBtoUART şeklinde oldu.

Bu işlem biraz zaman almakta. Aygıt yazılımı indiriliyor ve klasör oluşturuluyor. Klasör oluşturulduktan sonra `cd my-esp8266-project` komutu ile klasörün içine girelim. Şimdi aygıt yazlımı kuruluma hazır.

Öncelikle çip içindeki aygıt yazılımını silelim.

npm run erase

Şimdi de Espruino'yu yükleyelim:

npm run flash

Bu işlemler sırasında hata alırsanız büyük ihtimal yanlış port numarası kullanıyorsunuz. Portu değiştirmek için aşağıdaki komutu kullanabilirsiniz:

espruino-create-project update --port PORT2

Artık programımızı yazmaya hazırız. Arduino IDE'ye ihtiyacımız olmayacak. vscode, atom hatta notepad veya sevdiğiniz bir editörü kullanabilirsiniz.

Şimdi src klasörü içerisindeki main.js dosyasını aşağıdaki gibi düzenleyin:

E.on('init', function () {
  var led = 0
  setInterval(function () {
    digitalWrite(2, led)
    led = !led
  }, 1000)
})

Ve bu dosyayı ESP8266 üzerinde yükleyelim:

npm run upload

Espruino'da Arduino'daki gibi setup() ve main() fonksiyonları bulunmuyor. Çipe yalnızca tek bir dosya gönderiyoruz. Ancak geliştirme aşamasında çok sayıda dosya kullanabiliriz. npm run upload dediğimiz zaman, tüm dosyalar tek bir dosya içerisine sıkıştırılıyor ve tek bir dosya olarak gönderiliyor. JavaScript olaya dayalı (event-driven) bir dil. Dolayısıyla Arduino'daki loop görevini eventler ya da zamanlayıcılar ile yapmamız gerekiyor.

Yukarıdaki çok basit bir program. Bu yazıda sadece Espruino aygıt yazılımını nasıl kuracağımızı ve JavaScript'i ESP8266 ile nasıl kullanacağımızı anlatmak istedim. Gelecek yazılarda JavaScript ve ESP8266 veya ESP32 ile sensörden nasıl veri okunur, OLED ekranlara nasıl yazı yazılır gibi örnekleri vermeyi düşünüyorum.

Google Haritalar servisinin, React için özelleştirilmiş resmi bir kütüphanesi yok. JS kütüphanesi mevcut. Ancak bu kütüphaneyi direkt React içerisinde React bileşeni gibi kullanabilmek için bazı yöntemlere başvurmamız gerekiyor. Yani direk import { GoogleMap } from 'google-maps' gibi bir kullanım yok. Bu işi yapan bazı resmi olmayan kütüphaneler var, fakat bu yazıda harici kütüphanelere başvurmadan bu işlemleri gerçekleştireceğiz.

Şimdi nedir bu yöntemler onlara bakalım. 2 temel adım var:

1. Tembel yükleme (lazy loading): DEMO
2. React bileşenlerini harita içersine entegre etmek: DEMO

1. Tembel yükleme

Aslında eğer javascript dosyalarınızı senkron olarak yüklüyorsanız bu yönteme ihtiyacınız yok. Google kütüphanesini <head> içerisine dahil ederseniz React kodunuz yüklenmeden önce Haritalar kütüphanesi erişebilir durumda olacaktır. Ancak tüm kütüphaneleri senkron olarak yüklerseniz sayfanızın ilk açılışı biraz uzun sürebilir. Bu süre React gibi tek sayfa uygulamaları için pek de problem değildir aslında.

Senkron yüklemek:

<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" />
</head>

daha sonra ise React bileşeninden kütüphaneyi çağırmanız yeterli:

class Map extends Component {
  componentDidMount() {
    const map = new window.google.maps.Map(document.getElementById('map'), {
      center: { lat: 41.0082, lng: 28.9784 },
      zoom: 8
    });
  }

  render() {
    return (
      <div style={{ width: 500, height: 500 }} id="map" />
    );
  }
}

Ancak eğer kütüphaneyi tembel olarak yüklemek isterseniz çalışma anında script'i kod içerisine gömmemiz gerekecek:

Şimdi, Map adında bir React bileşeni oluşturalım ve bu bileşenin görevi, eğer Google Maps yüklü değilse önce yüklemek; daha sonra da props değerlerine göre haritayı oluşturmak olsun. Eğer başka bir bileşen kütüphaneyi zaten yüklemiş ise tekrar yüklemesin.

import React, { Component } from 'react';
import { render } from 'react-dom';

class Harita extends Component {
  constructor(props) {
    super(props);
    this.onScriptLoad = this.onScriptLoad.bind(this)
  }

  onScriptLoad() {
    const map = new window.google.maps.Map(
      document.getElementById(this.props.id),
      this.props.options);
    this.props.onMapLoad(map)
  }

  componentDidMount() {
    if (!window.google) {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
      // Below is important. 
      //We cannot access google.maps until it's finished loading
      s.addEventListener('load', e => {
        this.onScriptLoad()
      })
    } else {
      this.onScriptLoad()
    }
  }

  render() {
    return (
      <div style={{ width: 500, height: 500 }} id={this.props.id} />
    );
  }
}

export default Harita

render() {
    return (
      <Harita
        id="myMap"
        options={{
          center: { lat: 41.0082, lng: 28.9784 },
          zoom: 8
        }}
        onMapLoad={map => {
          var marker = new window.google.maps.Marker({
            position: { lat: 41.0082, lng: 28.9784 },
            map: map,
            title: 'Merhaba İstanbul!'
          });
        }}
      />
    );
  }

Şimdi de bu ana dek neler yaptık açıklayalım:

Harita bileşeni bir div etiketi oluşturuyor. Bu etiketin ID'si üst bileşenden geliyor. React, Harita bileşenini oluşturduktan sonra öncelikle window.google objesinin ulaşılabilir olup olmadığını kontrol ediyor. Eğer ulaşılır durumda ise tekrardan yüklemeye çalışmıyor. Ancak kütüphane yüklenmemişse script etiketi oluşturup bu etiketi kod içerisine enjekte ediyor. Bu işlem senkron gerçekleşemez. Yani, bu koddan sonra gelen satırda window.google.maps'e erişmeye çalışırsanız hata alırsınız. Bu yüzden bir dinleyici yani listener eklememiz gerekiyor. Bu dinleyici script eklendikten sonra aktif hale gelecek. Ancak bu durumda google.maps API erişilebilir duruma gelecektir.

Google maps API erişilebilir durumda ancak üst bileşenin bundan haberi yok. Üst bileşeni haberdar etmek için props kullanacağız. onMapLoad'u bu sebeple tanımladık. Harita, onScriptLoad'ı, o da onMapLoad'u çağırıyor ve oluşturulan map nesnesini parametre olarak gönderiyor. onMapLoad çağırıldığında da artık haritaya her işi yaptırabiliriz. Burada örnek olarak Marker oluşturduk. Ancak aklınıza gelebilecek her harita nesnesi oluşturulabilir.

2. React bileşenlerini harita içersine entegre etmek

Google kütüphanesi InfoWindow ve Özel bileşen oluşturmaya izin veriyor ancak bu nesneler HTML metni olarak tanımlı. Yani her türlü HTML markup kullanabilirsiniz ancak oluşturacağınız nesneler React tarafından tanınmayacaktır. Örneğin bir InfoWindow oluşturdunuz. İçerisine bir düğme eklediniz bu düğmeye basıldığında bir Redux fonksiyonunu çalıştırmak istiyorsunuz. Bu pek mümkün gözükmüyor. Ancak çözümü basit. HTML markup ile oluşturulan nesneyi react-dom yardımıyla React bileşenine dönüştürebiliriz. Bu <div id="root" /> etiketine yaptığımız dönüşümden farksız.

createInfoWindow(e, map) {
    const infoWindow = new window.google.maps.InfoWindow({
        content: '<div id="infoWindow" />',
        position: { lat: e.latLng.lat(), lng: e.latLng.lng() }
    })
    infoWindow.addListener('domready', e => {
      render(<InfoWindow />, document.getElementById('infoWindow'))
    })
    infoWindow.open(map)
  }

  render() {
    return (
      <Harita
        id="myMap"
        options={{
          center: { lat: 41.0082, lng: 28.9784 },
          zoom: 8
        }}
        onMapLoad={map => {
          const marker = new window.google.maps.Marker({
            position: { lat: 41.0082, lng: 28.9784 },
            map: map,
            title: 'Merhaba Istanbul!'
          });
          marker.addListener('click', e => {
            this.createInfoWindow(e, map)
          })
        }}
      />
    );
  }

InfoWindow React bileşeni:

import React from 'react';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';

const styles = {
card: {
  maxWidth: 345,
},
media: {
  height: 0,
  paddingTop: '56.25%',
},
};

function InfoWindow(props) {
const { classes } = props;
return (
  <div>
    <Card className={classes.card}>
      <CardMedia
        className={classes.media}
image="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Bosphorus.jpg/397px-Bosphorus.jpg"
        title="Contemplative Reptile"
      />
      <CardContent>
        <Typography gutterBottom variant="headline" component="h2">
          Istanbul
        </Typography>
        <Typography component="p">
          Istanbul is a major city in Turkey that straddles Europe and Asia across the Bosphorus Strait. Its Old City reflects cultural influences of the many empires that once ruled here.

        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  </div>
);
}


export default withStyles(styles)(InfoWindow);

Bu örneğin çalışabilir haline aşağıdan ulaşabilirsiniz.

https://stackblitz.com/edit/react-rdevxo?file=InfoWindow.js

Sonuç olarak, harita içerisine gömmek istediğimiz her React bileşenini benzer şekilde oluşturup Google Maps'i Reactlaştırabiliriz :) NPM üzerinde bu işlemleri sizin için yapan kütüphaneler var. Projenize göre bu tip bir kütüphane kullanmak faydalı olabilir, ancak bu durumda Google API dökümantasyonunu direk olarak kullanamıyorsunuz ve kütüphaneye bağımlı hale geliyorsunuz. Zaten bu kütüphanelerin kaynak kodlarını alıp incelerseniz bu iki temel adımı kullandıklarını göreceksiniz.

ESP8266-12E ya da kısaca ESP-12E, ESP-01'e göre daha giriş portu bulundurduğundan daha büyük projeler için daha elverişli. Ancak, ESP-12E breadboard dostu bir bileşen değil. Ayak aralıkları daha dar ve dolayısıyla bir adaptör olmadan kullanmak zor. ESP-01 de direk olarak breadboard üzerine konulamıyordu ancak ayak aralıkları standard olduğundan pinleri kablo yardımıyla bağlamak oldukça kolaydı. Ancak, ESP-01'ler uzun süreli kullanımlarda pek stabil değil. Neyse, FTDI yardımıyla ESP8266-12E'yi nasıl programlayacağımıza bir bakalım:

Kullanacağımız bileşenler:

1. ESP8266 12-E
   
2. YP-05 FTDI
   
3. ESP ayakları için tabaka (kendiniz de benzer bir şey yapabilirsiniz)
   

Tabaka, Aliexpress'ye tanesi 50-60 kuruş gibi bir fiyata satılıyor. Elinizin altında bir tane yoksa kendiniz de lehimleyerek oluşturabilirsiniz elbet.

ESP'ler 3.3 Volt ile çalışıyor. Bu yüzden harici kaynak kullanmakta fayda var. FTDI'ın VCC'sini kullanmıyoruz, sadece GND'yi tüm devrenin GND'sine bağlıyoruz. FTDI'ın RX ve TX'ini ESP'nin TX ve RX'ine çapraz olarak bağlıyoruz. ESP'nin CH_PD ayağını 5-10K direnç yardımıyla 3.3 Volt'a çekiyoruz. ESP'nin GPIO-0 ve GPIO-15 ayaklarını da gene 5-10K direnç yardımıyla toprağa bağladıktan sonra ESP-12E programlama moduna geçiyor.

Devremiz hazır.

Şimdi ESP8266'yı programlayabiliriz. Arduino IDE'yi ESP-01'i programlarken kullandığımız ayarlarla kullanıyoruz. Eğer Arduino IDE ayarları yapılmamışsa:

Dosya>Tercihler>Ek Devre Kartları Yöneticisi URL'leri kısmına aşağıdaki adresi ekleyelim

http://arduino.esp8266.com/stable/package_esp8266com_index.json

Daha sonra Araçlar>Kart>Kart Yöneticisinden ESP8266'yı bulup kuralım:

Şimdi ESP-12E programlanmaya hem donanımsal hem de yazılımsal olarak hazır durumda. Bu yazıda yalnızca ESP-12'nin nasıl programlandığını göstermek istedim. O yüzden karmaşık bir program yazmayacağız. Klasik LED yak-söndür uygulamasını yükleyelim. Burada LED_BUILTIN, ESP üzerinde bulunan LED olduğundan harici bir LED ve direnç bağlamamıza gerek yok.

void setup() {
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  digitalWrite(LED_BUILTIN, HIGH);
  delay(1000);
  digitalWrite(LED_BUILTIN, LOW);
  delay(1000);
}

ÖNEMLİ Programlama bittikten sonra ESP'yi çalıştırma moduna almanız gerekiyor. Bu da GPIO-0 ayağını VCC'ye GPIO-15 bacağını da toprağa bağlayarak gerçekleştiriliyor.

Bu yöntemleri kullanarak kendime de oldukça amatör bir programlama kartı oluşturdum. Böylece her seferinde breadboard, kablo ve dirençlerle uğraşmak durumunda kalmayacağım. ESP-12 ile gerçek uygulamalar yapmaya devam edeceğim.

Digistump'ın ufacık ATtiny modülü ile Arduino'nun yaptığı pek çok işi daha az enerji ile küçük bir devrede yapmak mümkün. Hatta Nano bile ATtiny yanında tam donanımlı bilgisayar gibi duruyor. ATtiny'nin kullanımı Arduino'dan çok farksız değil ancak programlanması biraz ayar gerektiriyor. Şimdi bu ayarları inceleyelim.

Öncelikle Windows için aşağıdaki sürücüyü yüklemek gerekiyor:
https://github.com/digistump/DigistumpArduino/releases/download/1.6.7/Digistump.Drivers.zip

Daha sonra DigiSpark kartını Arduino'ya tanıtmamız gerekiyor. Ayarlardan Ek Devre Kartları Yöneticisi URL'leri kısmından aşağıdaki adresi eklemek gerekiyor:

http://digistump.com/package_digistump_index.json

Bu kart daha sonra Kart Yöneticisinde erişebilir olacak. Araçlar>Kart>Kart Yöneticisi menüsünden Digistump araması yaparak ilgili kartı bulup yükleyelim.

Daha sonra Araçlar>Kart menüsünden Digistump AVR Boards bölümünün aktif olduğunu göreceksiniz. Buradan Digispark (Default 16.5 Mhz) seçimini yapalım.

Artık ilk programımızı yüklemeye hazırız. Öncelikle test etmek için çok basit bir uygulama hazırlayalım. Klasik yanıp sönen LED uygulaması:

void setup() {                
  pinMode(0, OUTPUT);
  pinMode(1, OUTPUT);
}

void loop() {
  digitalWrite(0, HIGH);
  digitalWrite(1, LOW);
  delay(1000);
  digitalWrite(0, LOW);
  digitalWrite(1, HIGH); 
  delay(1000);
}

!!DİKKAT!!: Bu kısım önemli. Arduino'dan farklı olarak ATtiny-85'i USB'ye (henüz) bağlamıyoruz. Eğer USB girişini takar ve Yükle düğmesine basarsanız yükleme işlemi başarısız olacaktır. Önce Yükle düğmesine basalım ve daha sonra Arduino konsolunda aşağıdaki uyarıyı göreceksiniz.

Bu uyarıdan sonra Arduino, sizden Digistump ATtiny-85'i bağlamanızı bekleyecek. Bağladığınız anda programlama işlemi başlayacak ve her şey başarılı olursa aşağıdaki gibi bir mesaj alacaksınız.

Şimdi biraz daha yararlı bir uygulama yapalım. 0.96 OLED ekranında sensörden gelen analog veriyi işleyelim.

Nokia 5110 ekranı; Arduino, ESP vs. ile yapacağınız hemen her uygulamada kullanabileceğiniz, kullanımı kolay ve oldukça da ucuz bir donanım. Internet'te bolca örnek var ancak genelde başka bileşenler de kullanıldığı için örnekler biraz karmaşıklaşıyor. Bana en başta lazım olan en basit "Merhaba Dünya" uygulaması.

Bileşenler:

1. Arduino Nano (Uno da kullanılabilir)
2. Nokia 5110 LCD
3. u8glib kütüphanesi: https://bintray.com/olikraus/u8glib/Arduino

u8glib kütüphanesini ilgili linkten indirdikten sonra Sketch>Include Library>Add .zip Library menüsünden ekleyebilirsiniz.

Ayrıca u8glib ile ile Page Loop kullanımını daha önce anlatmıştım:
http://cuneyt.aliustaoglu.biz/tr/u8glib-kutuphanesi-ve-page-loop-ile-arduino-uno-i2c-oled-kullanimi/

Ancak bu uygulamamızda sadece Nokia 5110 ekranının kullanımına yoğunlaşacağız.

Ve aşağıda olabilecek en sade ve basit haliyle Merhaba Dünya. Daha sonra biraz daha gelişmiş uygulamalar yapmak istiyorum ancak en basit devre şemasının ve kodunun elimizin altında bulunmasında fayda var.

#include "U8glib.h"

U8GLIB_PCD8544 u8g(11, 10, 8, 9, 7); // Clk, Din, DC, CE, RST

void draw()
{
    u8g.setFont(u8g_font_unifont);
    u8g.drawStr(0, 20, "Merhaba ");
    u8g.drawStr(12, 36, "Dunya");
}

void setup()
{
    u8g.setColorIndex(1);
    u8g.setRot180(); // Ekranı 180 derece çevir
}

void loop()
{
    u8g.firstPage();

    do
    {
        draw();
    }
    while(u8g.nextPage());

    delay(1000);
}

Şimdi biraz daha karmaşık projelere hazırız. Sensörden okuttuğumuz değerleri ekrana yansıtacak havalı projeler...

React Native sayesinde React kullanan herkes aslında bir mobil yazılımcıya dönüşüyor. Aslında kurulumu çok problemli değil ancak aşağıdaki notların elimizin altında bulunmasında fayda var.

MacOS için kurulum

Mac kullanıcılarında brew ve cask kurulumlarının yapıldığını varsayıyorum. Eğer yapmadıysanız:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew tap caskroom/cask

Daha sonra ise node, android-sdk, android-platform-tools, java8 ve watchman kurulumlarını brew ve cask yardımıyla gerçekleştiriyoruz.

brew tap caskroom/cask
brew install node
brew cask install android-sdk
brew cask install android-platform-tools
brew cask install caskroom/versions/java8
brew install watchman

Elimizin altında Android olsa da emulatörden çalışmak daha hızlı ve pratik bu yüzden bir emülatöre ihtiyacımız olacak. Genymotion kişisel kullanımlar için ücretsiz. Ücretsiz bir hesap yaratıp aşağıdan Genymotion'u indirelim.

https://www.genymotion.com/fun-zone/

Eğer Virtual Box ile birlikte gelmiyorsa Virtual Box'ı da kurmak lazım:
https://www.virtualbox.org/wiki/Downloads

Genymotion açılışında 'Personal Use' seçip kullanıcı adımızla giriş yaptıktan sonra bir sanal telefon oluşturmamız gerekecek. Android 4, 5, 6, 7 vs. ve favori telefonunuzu seçip emulatörü başlatın.

React uygulamasında create-react-app kullanmıştık. Benzer şekilde yine Facebook'un resmi installer'ı olan create-react-native-app uygulamasını da global olarak yükleyelim:

npm install -g create-react-native-app

Daha sonra boş bir uygulama yaratalım ve bu uygulamayı çalıştıralım:

create-react-native-app ilkUygulama
cd ilkUygulama
npm install
npm start

Genymotion'ın arka planda çalıştığından emin olduktan sonra, çıkan menüde android için a'ya basıyoruz ve ilk uygulamamız hazır.

Elbette emülatörü sallamak pek gerçekçi değil. Sallama olayını ise command+m tuş kombinasyonu ile gerçekleştirebilirsiniz.

Windows için kurulum

Windows üzerinde node ve java kurulumlarını sitesinden indirdiğiniz kurulum dosyaları ile gerçekleştirin. Windows üzerinde sdk ve platform-tools kurulumu bende oldukça sorunlu oldu. Eğer sorun yaşarsanız direk Android Studio'yu da kurabilirsiniz.

Bunun dışında yine Genymotion'a ihtiyaç duyacağız ve create-react-native-app ile ilgili kısımlar MacOS ile aynı şekilde olacaktır:

npm install -g create-react-native-app

create-react-native-app ilkUygulama
cd ilkUygulama
npm install
npm start

Mac ve Linux işletim sistemlerindeki bash terminal, varsayılan özellikleri ile kullanılırken pek de kullanışlı değildir. bash yerine zsh kullanırsanız otomatik tamamlama, renklendirme gibi pek yok yararlı özellikten yararlanabilirsiniz. Ayrıca git ile çalışırken içinde bulunduğunuz branch ile ilgili bilgileri alır ve otomatik tamamlamanın tüm nimetlerinden yararlanırsınız.

git checkout cok-uzun-branch-adi

yerine

git che [tab] cok [tab]

gibi bir kullanımla çalışırken verimliliğinizi artırırsınız. Prezto aslında bir ohmyzsh forku ancak bence daha sade ve kullanışlı. Şimdi nasıl kurulur ona bakalım.

Oncelikle ZSH kurulur

brew install zsh zsh-completions

(ya da Linux için apt-get install zsh)

Daha sonra Prezto'yu kopyalayalım:

git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"

şimdi bash konsoluna which zsh yazıp çıkan sonucu kopyalayalım: /usr/local/bin/zsh ve default login shell yerine zsh kullanalım:

Terminali açıp kapattığınızda

This is the Z Shell configuration function for new users,
zsh-newuser-install.
You are seeing this message because you have no zsh startup files
(the files .zshenv, .zprofile, .zshrc, .zlogin in the directory
~).  This function can help you with a few settings that should
make your use of the shell easier.

You can:

(q)  Quit and do nothing.  The function will be run again next time.

(0)  Exit, creating the file ~/.zshrc containing just a comment.
     That will prevent this function being run again.

(1)  Continue to the main menu.

şeklinde bir uyarı görebilirsiniz. Henüz .zshrc dosyasını oluşturmadığımız için bu uyarıyı aldık. (q) ile devam edebilirsiniz.

Daha sonra ise sırasıyla

setopt EXTENDED_GLOB

ve

for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done

komutlarını terminalde çalıştırarak .zshrc dosyasını oluşturalım.

Daha sonra da zpreztorc içeriğini görüntüleyelim:

nano ~/.zpreztorc

ve içeriği tamamen silip aşağıdaki ile değiştirelim:

zstyle ':prezto:load' pmodule \
  'environment' \
  'terminal' \
  'editor' \
  'history' \
  'directory' \
  'spectrum' \
  'utility' \
  'completion' \
  'git' \
  'syntax-highlighting' \
  'history-substring-search' \
  'prompt'

zstyle ':prezto:module:prompt' theme 'steeef'

Ben en çok steeef temasını seviyorum ancak seçim size kalmış. steeef yerine prezto kurulumu ile gelen 21 temadan herhangi birini kullanabilir ya da kendi temanızı yaratabilirsiniz.

Bu 21 temanın listesi aşağıdaki gibidir. Tema adı yerine herhani birini seçin:

zstyle ':prezto:module:prompt' theme 'THEME_NAME'

minimal
nicoulaj
peepcode
sorin
step
adam1
adam2
bart
bigfade
clint
elite
elite2
fade
fire 
off
oliver
pws
redhat
suse
walters
zefram

İster web, ister mobil, isterse de masaüstü yazılımı olsun; kullanıcının kimliğini doğrulama işlemi hemen her uygulamada gerekli bir altyapıdır. Milyonlarca kullanıcı, kendi uygulamaları için aynı şeyi farklı şekillerde defalarca yeni baştan yazdılar. Bu sebeple bazı standartlar oluştu. Auth0 veya Cognito gibi yapılar bu standartları yönetmek amacıyla oluşturulmuş servislerdir. Daha önce çalıştığım bir şirkette Auth0 kullanmıştım, fakat kendi kişisel projelerimde halihazırda AWS kullandığım için başka bir üçüncü parti modülünü kullanmak istemedim. Bu sebeple Amazon'un Cognito servisini tercih ettim.

Auth0 gerçekten çok güçlü bir şirket ve tamamen kullanıcı yönetimi üzerinde yoğunlaşıyorlar. JWT standardını yaratanlar da Auth0 mühendisleri. Bu sebeple AWS Cognito, fonksiyonellik açısından Auth0'nun yanına bile yaklaşamaz. Ancak, küçük ve orta boyutlu projelerde Auth0'nun pek çok özelliği size lüks gelecektir. Hatta bazı büyük uygulamalarda bile AWS Cognito yeterli olacaktır.

Auth0 için ilk 7000 aylık aktif kullanıcı için bedava iken, AWS Cognito'da bu sayı 50,000'dir. Neyse konumuz AWS Cognito. AWS Cognito ile NodeJS kullanarak kullanıcı oluşturma, email adresini doğrulama ve giriş yapan kullanıcının parolasının nasıl kontrol edileceğini açıklayalım.

Sunucu kullanmadığım için herşeyi AWS Lambda üzerinde gerçekleştiriyorum ancak aynı kodlar elbette(ufak bir modifikasyonla) sunucuda çalışan NodeJS ile de çalışacaktır.

AWS Cognito

Öncelikle AWS Cognito yapılandırmamızı hazırlayalım. Cognito anasayfasında 2 adet seçenek göreceksiniz.

• Manage User Pools
• Manage Federated Identities

Federated Identities kullanıcıların Facebook veya Twitter hesaplarıyla giriş yapıp AWS kaynaklarına(S3, EC2 vs.) erişmelerini sağlayan bir modül. Biz web sayfamız için kullanıcı kontrolü yapmak istiyoruz. Bu yüzden kullanacağımız modül "Manage User Pools".

"Create a User Pool" diyerek yeni bir kullanıcı havuzu oluşturalım. Havuz adını belirttikten sonra "Step Through Settings" ile sihirbazı kullanarak havumuzu adım adım oluşturabiliriz. Aşağıdaki alanlar OAuth standard alanları. Bu alanları zorunlu ya da seçimlik alan olarak belirtebilirsiniz. Bu alanlar dışında eklemek istediğimiz alanlar var ise "Custom" olarak eklenebilir.

OAuth standard özellikleri

• address
• nickname
• birthdate
• phone number
• email
• picture
• family name
• preferred username
• gender
• profile
• given name
• zoneinfo
• locale
• updated at
• middle name
• website
• name

Sonraki adımda kullanıcıların email adresini doğrulamak isteyip istemediğinizi belirtiyorsunuz. Eğer istiyorsanız e-mail mesajının içeriğini de değiştirebiliyorsunuz. Daha sonra "App Clients" kısmında bir ID oluşturmamız gerekiyor. Bu ID önemli. Çünkü daha sonra programımıza hangi havuza bağlanmak istediğimizi bu ID'yi kullanarak belirteceğiz. "App Client Secret" kısmını ise boş bırakıyoruz. Cognito SDK bunu desteklemiyor. Eğer Client Secret yaratırsak Javascript SDK ile kullanamıyoruz. (https://github.com/aws/amazon-cognito-identity-js/issues/2). Bu sanırım güvenlik için özel olarak bu şekilde tasarlanmış. Çünkü Javascript SDK istemci üzerinde çalışabilir. Bu da demek oluyor ki şifreyi herkesin görebileceği şekilde açık etmemiz gerekiyor. Lambda ise sunucu üzerinde çalışıyor elbet, ancak JS SDK kullandığı için bu özelliği kullanamıyoruz. Bu sebeple Lambda'yı yaratırken AWS Cognito kaynaklarına erişebilecek şekilde yaratmamız gerekiyor.

Triggers ya da Analytics gerekli değil. Eğer kullanıcı login olmadan önce, ya da kullanıcı yaratıldıktan sonra vs. gibi durumlar için belli bir kod parçası çalıştırmak istiyorsanız ilgili yerleri kullanabilirsiniz ancak ben gerek duymadım.

Kullanıcı havuzumuzu yarattıktan sonra kodlama işlemine geçebiliriz:

AWS Cognito nedenini bilmediğim bir şekilde Lambda için "aws-sdk" içerisine dahil edilmemiş bu sebeple amazon-cognito-identity.min.js dosyasını indirip lambda klasörüne eklememiz lazım.

Kullanıcı oluşturma

'use strict';

exports.handler = function(event, context, callback) {
  // Burası önemli. Aşağıdaki dosyayı yukarıdaki adresten indirdim
  // ve bu dosya ile aynı klasöre kopyaladım
  const AWSCognito = require('./amazon-cognito-identity.min');

  const payload = JSON.parse(event.body);

  const poolData = {
    UserPoolId: 'us-east-1_*******',
    ClientId: '70do*************ak'
  };
  const userPool = new AWSCognito.CognitoUserPool(poolData);

  let attributeList = [];
  const emailAttribute = {
    Name: 'email',
    Value: payload.email
  };
  const websiteAttribute = {
    Name: 'website',
    Value: payload.website
  };
  const memleketAttribute = {
    Name: 'custom:memleket',
    Value: payload.memleket
  };

  attributeList.push(new AWSCognito.CognitoUserAttribute(emailAttribute));
  attributeList.push(new AWSCognito.CognitoUserAttribute(websiteAttribute));
  attributeList.push(new AWSCognito.CognitoUserAttribute(memleketAttribute));

  userPool.signUp(payload.username, payload.password, attributeList, null, function(err, result) {
    if (err) {
      const errorResponse = httpResponse.getResponse(400, { err });
      callback(null, errorResponse);
    } else {
      const signUpDetails = {
        userConfirmed: result.userConfirmed,
        userSub: result.userSub,
        userName: result.user.username
      };
      const successResponse = getResponse(200, { signUpDetails });
      callback(null, successResponse);
    }
  });
};

const getResponse = (statusCode, body) => {
  const response = {
    statusCode: statusCode,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true
    },
    body: JSON.stringify(body)
  };
  return response;
};

Yukarıda API Gateway kullanarak Lambda'ya POST isteği gönderdik. Bu POST isteğinin içeriğini const payload = JSON.parse(event.body) ile okuduk. POST içeriğinde ise username, password ikilisinin dışında OAuth standard özellikleri (claims) de bulunabilir. Yukarıdaki örnekte "email" ve"website" özellikleri ile bir de custom "memleket" özelliğini gönderdiğimizi de varsaydık. Daha çok standard ve custom claim eklenebilir. Ancak kodu basit tutmak amacıyla bu iki özelliği ekledim. Bu örnek için payload'ım aşağıdaki gibi:

{
   "email": "email@example.com",
   "website": "www.example.com",
   "memleket": "Giresun"
}

Herhangi bir problem olmadığı taktirde kullanıcı Cognito üzerine kaydediliyor ve eğer email onaylanması istendiyse onay emaili gönderiliyor.

Kullanıcı Onayı

Kullanıcı onayını iki şekilde gerçekleştirebilirsiniz. Eğer

Message Customizations > Verification type

üzerinden "Link" seçeneğini seçerseniz, AWS bu işi kendisi hallediyor. Ancak kendi kullanıcı deneyiminiz sebebiyle "Code" seçeneğini seçerseniz bu işi kendiniz halletmelisiniz. Bu da demek oluyor ki yeni bir gateway endpoint (ya da mevcut endpoint'e yeni bir parametre) ve yeni bir fonksiyon.

Benzer şekilde 'aws-cognito-identitiy' kütüphanesini kullanıyorum

/**
 * Enable user status
 * Conginot user status is UNCONFIRMED initially
 */

'use strict';

exports.handler = function(event, context, callback) {
  const AWSCognito = require('./amazon-cognito-identity.min');

  const payload = JSON.parse(event.body);
  const confirmationCode = payload.code;

  const poolData = {
    UserPoolId: 'us-east-1_*********',
    ClientId: '70*******************ak'
  };
  const userPool = new AWSCognito.CognitoUserPool(poolData);
  const userData = {
    Username: payload.username,
    Pool: userPool
  };
  const cognitoUser = new AWSCognito.CognitoUser(userData);
  cognitoUser.confirmRegistration(confirmationCode, true, (err, result) => {
    if (err) {
      const errorResponse = getResponse(400, err);
      callback(null, errorResponse);
      return;
    }
    const successResponse = getResponse(200, result);
    callback(null, successResponse);
  });
};

const getResponse = (statusCode, body) => {
  const response = {
    statusCode: statusCode,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true
    },
    body: JSON.stringify(body)
  };
  return response;
};

Payload'ım ise aşağıdaki gibi

{
  "username": "cuneyt",
  "code": "ABCDEFGH"
}

Kullanıcı girişi

Kullanıcı girişi kontrolünü ise aşağıdaki gibi yapıyoruz. Elbette normalde kullanıcı girişi yaptıktan sonra kullanıcının onay yaptığını sunucuda Session(oturum) üzerinde tutmamız gerekiyor. Ancak AWS üzerinde tüm istekler tek oturumluk olduğu için bir sonraki istekte kullanıcının giriş yapıp yapmadığını bilemeyeceğiz. Bu nedenle JWT token oluşturmamız gerekiyor fakat bu yazıda sadece Cognito'nun nasıl çalıştığını anlatmak istedim. O yüzden kodumu basit tutuyorum ve sadece kullanıcının onayını yapıyoruz.

'use strict';

exports.handler = function(event, context, callback) {
  const AWSCognito = require('./amazon-cognito-identity.min');

  const body = JSON.parse(event.body);
  const payload = body.payload;
  const authenticationData = {
    Username: payload.username,
    Password: payload.password
  };
  const authenticationDetails = new AWSCognito.AuthenticationDetails(authenticationData);
  const poolData = {
    UserPoolId: 'us-east-1_*********',
    ClientId: '70*******************ak'
  };
  const userPool = new AWSCognito.CognitoUserPool(poolData);
  const userData = {
    Username: payload.username,
    Pool: userPool
  };
  const cognitoUser = new AWSCognito.CognitoUser(userData);
  cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess: function(result) {
      const token = { login: true }
      const successData = getResponse(200, mySurfToken);
      callback(null, successData);
    },
    onFailure: function(err) {
      const failData = getResponse(400, err);
      callback(null, failData);
    }
  });
};

const getResponse = (statusCode, body) => {
  const response = {
    statusCode: statusCode,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true
    },
    body: JSON.stringify(body)
  };
  return response;
};

Burada payload'ımız ise:

{
  "username": "cuneyt",
  "password": "123456"
}

Yukarıdaki 3 özelliğin hemen her online uygulamada bulunması gerekiyor. AWS Cognito bize gerekli minimum fonksiyonelliği sağlıyor. Auth0 gibi uygulamalar çok daha kapsamlı ancak eğer halihazırda AWS kullandığınız bir uygulama var ise Cognito ile çok ucuza hatta büyük ihtimalle (50,000'i aşmayan aktif kullanıcı sayısına sahipseniz) bedavaya bu özelliklere kavuşabiliyorsunuz.

Eğer Redux'a giriş yaptıysanız redux-thunk'ı duymuşsunuzdur. Thunk; saf olmayan fonksiyonlarımızı, saf Redux actionlarımızla kaynaştıran bir middleware'dir. Redux reducer'larımızın her daim saf olması, uygulamamızın sağlıklı işlemesi açısından çok önemlidir. Peki nedir bu "saf" fonksiyonlar ve bu saflık neden önemlidir?

Kısaca saf fonksiyon, aynı girdilere her zaman aynı çıktıyı üreten fonksiyonlara denir.

function topla(a, b) {
    return a+b;
}

Örneğin topla fonksiyonu bir saf fonksiyondur 2+3 zamandan, mekandan ve veritabanındaki herhangi bir veriden bağımsız olarak 5'tir.

function rastgeleTopla(a){
    return Math.random() + a;
}

Fakat yukarıdaki bu fonksiyon, her çağırdığımızda farklı sonuçlar üretebileceği için saf değildir. Benzer şekilde tarihe bağlı fonksiyonlar, veritabanından aldığı veriye göre sonuç üreten fonksiyonlar da saf değildir. Ancak hesap makinası dışında bir uygulama geliştiriyor isek elbette saf olmayan fonksiyonlarımız olacak.

Aslında asenkron fonksiyonlarımızı yazmak için herhangi bir middleware yapısına ihtiyacımız yok. Ancak Redux yapısını 'saf' tutabilmek için asenkron fonksiyonları veya genel olarak yan etkiye sahip fonksiyonları redux-thunk (veya saga) gibi middleware içerisinde işlememiz gerekir.

Yapınızı saf tuttuğunuzda öncelikle kodunuzun okunması çok daha kolay olacaktır. Asenkron cevapların olduğu fonksiyonlar için unit test yazmak oldukça zordur. Saf olmayan reducer kullandığınızda buna bağlı olan değişkenler değiştiğinde DOM üzerinde beklediğiniz güncellemeyi göremeyebilirsiniz. Ayrıca hot-reloading, time-travel gibi yazılım geliştirirken oldukça yararlı olan fonksiyonları devre dışı kalacaktır.

Eğer NodeJS ile Express.JS üzerinde uygulamalar geliştirdiyseniz middleware kavramı sizin için yeni değildir. Middleware Redux'ta da benzer şekilde işliyor. Action yerine function dispatch ettiğinizde middleware devreye giriyor. Redux-thunk'ın kaynak koduna bakarsak bunun nereden geldiğini görebiliriz.

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

Evet redux-thunk'ın tüm olayı bu 15 satırlık koddan ibaret. Redux'ta dispatch edilen tüm işlemler öncelikle middleware yapısına uğrar. Thunk da bir middleware olduğundan öncelikle gelen action'a bakıyor. Function tipinde bir işlem dispatch edildiğinde devreye giriyor. Thunk'ın ana sayfasında hiç anlayamadığım şu cümleyi ancak kaynak koduna baktıktan sonra anlayabildim:

Redux Thunk middleware allows you to write action creators that return a function instead of an action.

Redux thunk middleware yapısı action yerine fonksiyon dönebilmenizi sağlar.

İyi de neden fonksiyon dönmemi sağlıyor? Amacım neden fonksiyon döndürmek olsun? Bunun hakkında pek bir şey söylemediğinden kafa karıştırıcı. Aslında fonksiyon dönmek zorunda olmayabilirdik. Middleware o şekilde dizayn edildiği için fonksiyon dönmek zorundayız. Yani tanımı aslında çok kafa karıştırıcı. Ben başka bir middleware yazıp örneğin adı hasan ile başlayan tüm fonksiyonların middleware'i tetiklemesini sağlayabilirdim.

if (action.name.startsWith("hasan")) {
      return action(dispatch, getState, extraArgument);
    }

Bu durumda redux-thunk adı hasan ile başlayan fonksiyonlar dönmenizi sağlayan bir yapıdır mı diyecektim. Neyse absürd bir örnek oldu ancak demek istediğim thunk'ta action yerine fonksiyon dönmemizin tek amacı middleware'e bir nevi sinyal göndermek.

Middleware devreye girdiğinde, Redux kontrolü bir süreliğine middleware'e verecek; middleware asenkron işlemini tamamladığında Redux da tüm veri ağacını güncelleyip React'e gönderecek. Bu şekilde Redux fonksiyonlarımız saf kalacak ve React uygulamamız stabil çalışacak.

Şimdi de ufak bir örnekle thunk'ı nasıl kullanacağımıza bakalım:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Thunk middleware'i reducerlarımızla birlikte Redux'a ilettik.

export const asenkronIslem = params => {
  return (dispatch, getState) => {
    fetch('http://example.com').then(
        response => {
            dispatch(senkronIslem(response));
        }
    );
  };
};

Burada senkron işlem, asenkron isteğin tamamlanmasına bağlı olduğundan öncelikle asenkronIslem'i dispatch etmemiz gerekiyor. Asenkron işlem tamamlandığında gelen cevaba göre istediğimiz senkron işlemi devreye sokabiliriz.

Ev kullanıcıları için yazıcılara çalıştığınız masada yer ayırmak gerçekten zor iştir. Her zaman ihtiyaç duymadığınız ve en küçüğünün bile yeterince büyük olduğu bir yazıcı için çalıştığınız masada yer ayırmak istemezsiniz. Eğer yeterince şanslıysanız USB kablosunun uzanabildiği yerde uygun bir yer olabilir. Ancak böyle bir alan yoksa Linux yüklü bir OrangePi ile standard yazıcınızı ağ yazıcısına dönüştürüp istediğiniz yerden erişebilirsiniz.

OrangePi modelleri Aliexpress'te 7 dolardan başlayan fiyatlarla bulunuyor. Ben 9 dolar olan 512MB versiyonunu kullandım.

OrangePi'ın kurulumunu ve kablosuz ağa nasıl bağlandığını aşağıdaki yazımda anlatmıştım.

http://cuneyt.aliustaoglu.biz/tr/orange-pi-zero-kurulumu-ve-dinamik-dns-ile-dunyaya-acilmak/

Elimizde SSH ile bağlanabileceğimiz Ubuntu yüklü OrangePi var. Şimdi sıra yazıcımızı buna bağlamak ve ağ üzerinde paylaştırmakta. Bunun için CUPS kullacağız.

OrangePi ile SSH

CUPS (Common UNIX Printing System), Apple'ın geliştirdiği açık kaynak kodlu bir yazıcı yönetim sistemidir diyebiliriz. Sistemimizi hazırlamaya başlayalım:

Öncelikle sistemimizi güncelleyelim ve genel yazıcı sürücülerini yükleyelim. Daha sonra CUPS yazılımını ekleyelim. Burada 2. satırda eklediğimiz yazıcı sürücüleri çoğu yazıcı için çalışacaktır.

sudo apt-get update
sudo apt-get install -y printer-driver-escpr
sudo apt-get install -y cups cups-client cups-common cups-pdf

SSH ile Orange Pi'a bağlandığımız ekran çıktısına bakarsanız 'login as cuneyt' ile bağlandım. Bu kullanıcı Ubuntu kurarken oluşturduğum admin kullanıcısı. Hangi kullanıcıyla bağlanıyorsak bu kullanıcıya CUPS kullanma yetkisini verelim. Daha sonra yönetici paneline uzaktan erişim yetkisi verelim.

usermod -a -G lpadmin cuneyt 
sudo cupsctl --remote-any

ve CUPS servisini yeniden başlatalım.

sudo service cups restart

Yukarıdaki usermod adımları aslında cupsd.conf dosyasınının içeriğini değiştiriyor. Eğer elle ayarlıyorsanız aşağıdaki gibi bir yapıda olması gerekiyor. Eğer yukarıdaki komutları kullanıyorsanız aşağıdaki dosya üzerinde herhangi bir değişiklik yapmanıza gerek yok. Sadece referans olması açısından bırakıyorum:

LogLevel warn
PageLogFormat
MaxLogSize 0
# Allow remote access
Port 631
Listen /var/run/cups/cups.sock
Browsing Off
BrowseLocalProtocols dnssd
DefaultAuthType Basic
WebInterface Yes
<Location />
  # Allow remote access...
  Order allow,deny
  Allow all
</Location>
<Location /admin>
</Location>
<Location /admin/conf>
  AuthType Default
  Require user @SYSTEM
</Location>
<Location /admin/log>
  AuthType Default
  Require user @SYSTEM
  Order allow,deny
</Location>
<Policy default>
  JobPrivateAccess default
  JobPrivateValues default
  SubscriptionPrivateAccess default
  SubscriptionPrivateValues default
  <Limit Create-Job Print-Job Print-URI Validate-Job>
    Order deny,allow
  </Limit>
  <Limit Send-Document Send-URI Hold-Job Release-Job Restart-Job Purge-Jobs Set-Job-Attributes Create-Job-Subscription Renew-Subscription Cancel-Subscription Get-Notifications Reprocess-Job Cancel-Current-Job Suspend-Current-Job Resume-Job Cancel-My-Jobs Close-Job CUPS-Move-Job CUPS-Get-Document>
    Require user @OWNER @SYSTEM
    Order deny,allow
  </Limit>
  <Limit CUPS-Add-Modify-Printer CUPS-Delete-Printer CUPS-Add-Modify-Class CUPS-Delete-Class CUPS-Set-Default CUPS-Get-Devices>
    AuthType Default
    Require user @SYSTEM
    Order deny,allow
  </Limit>
  <Limit Pause-Printer Resume-Printer Enable-Printer Disable-Printer Pause-Printer-After-Current-Job Hold-New-Jobs Release-Held-New-Jobs Deactivate-Printer Activate-Printer Restart-Printer Shutdown-Printer Startup-Printer Promote-Job Schedule-Job-After Cancel-Jobs CUPS-Accept-Jobs CUPS-Reject-Jobs>
    AuthType Default
    Require user @SYSTEM
    Order deny,allow
  </Limit>
  <Limit Cancel-Job CUPS-Authenticate-Job>
    Require user @OWNER @SYSTEM
    Order deny,allow
  </Limit>
  <Limit All>
    Order deny,allow
  </Limit>
</Policy>
<Policy authenticated>
  JobPrivateAccess default
  JobPrivateValues default
  SubscriptionPrivateAccess default
  SubscriptionPrivateValues default
  <Limit Create-Job Print-Job Print-URI Validate-Job>
    AuthType Default
    Order deny,allow
  </Limit>
  <Limit Send-Document Send-URI Hold-Job Release-Job Restart-Job Purge-Jobs Set-Job-Attributes Create-Job-Subscription Renew-Subscription Cancel-Subscription Get-Notifications Reprocess-Job Cancel-Current-Job Suspend-Current-Job Resume-Job Cancel-My-Jobs Close-Job CUPS-Move-Job CUPS-Get-Document>
    AuthType Default
    Require user @OWNER @SYSTEM
    Order deny,allow
  </Limit>
  <Limit CUPS-Add-Modify-Printer CUPS-Delete-Printer CUPS-Add-Modify-Class CUPS-Delete-Class CUPS-Set-Default>
    AuthType Default
    Require user @SYSTEM
    Order deny,allow
  </Limit>
  <Limit Pause-Printer Resume-Printer Enable-Printer Disable-Printer Pause-Printer-After-Current-Job Hold-New-Jobs Release-Held-New-Jobs Deactivate-Printer Activate-Printer Restart-Printer Shutdown-Printer Startup-Printer Promote-Job Schedule-Job-After Cancel-Jobs CUPS-Accept-Jobs CUPS-Reject-Jobs>
    AuthType Default
    Require user @SYSTEM
    Order deny,allow
  </Limit>
  <Limit Cancel-Job CUPS-Authenticate-Job>
    AuthType Default
    Require user @OWNER @SYSTEM
    Order deny,allow
  </Limit>
  <Limit All>
    Order deny,allow
  </Limit>
</Policy>

Orange Pi'a SSH ile bağlanırken kullandığımız adrese (benim için 192.168.1.70) 631 portu üzerinden bağlanıyoruz ve karşımıza CUPS konsolu çıkıyor.

CUPS konsolu

Daha sonra Administration kısmında OrangePi'a bağladığımız yazıcıyı görüyoruz.

CUPS Yönetici Konsolu

Daha sonra devam ettiğimizde 'Share' seçeneğini dahil etmeyi unutmayalım ve ilerleyelim. Model kısmında ben Generic PCL Laser Printer seçeneğini işaretledim ve hiçbir sıkıntı çıkarmadı.

CUPS Generic PCL Laser Printer

Yazıcımızı verdiğimiz isme bağlı olarak aşağıdaki aşağıdaki gibi bir adresten görüntüleyebiliriz:

Yazıcı kurulumu başarılı

Şimdi sıra geldi son adıma. Başka bir odadaki ya da yazıcıya fiziksel olarak bağlı olmayan herhangi bir bilgisayar üzerinden bu yazıcıya nasıl erişeceğiz? Yukarıdaki şekliyle görüntüleyebildiğiniz sayfanın adresini kopyalayın ve "Yazıcı Ekle" kısmına aynen yapıştırın. (https yerine http kullanmanız gerekebilir)

OrangePi yerine elbette Raspberry Pi da kullanılabilir ancak Raspberry Pi yalnızca yazıcı sunucusu olarak kullanmak için oldukça pahalı bence. Ancak halihazırda web sunucusu ya da başka bir amaçlı kullanıyorsanız ekstra bir görev daha ekleyebilirsiniz.

NodeMCU, ESP8266-12 versiyonunu kullanan ve nesnelerin programlanmasını sanırım olabilecek en kolay hale getiren bir mikroişlemci. Hakkında pek çok kaynak var o yüzden fazla açıklama yapmayacağım ve direk uygulamaya geçeceğim. Zaten 8266-01'de olduğu gibi programlayıcı yapmamıza gerek yok çünkü NodeMCU'nun kendi üzerinde USB girişi zaten bulunuyor tek yapmak gereken programı yazıp mikroişlemciye yüklemek.

Bu yazıda Arduino IDE'nin, NodeMCU'yu programlayabilecek ayarlarının yapılmış olduğunu varsayıyorum. Eğer değilse http://cuneyt.aliustaoglu.biz/tr/esp8266webserver-kullanarak-kolay-yolla-web-sunucusu-kurmak/ adresinden "Arduino IDE" kısmına giderek ayarların nasıl yapılacağına bakabilirsiniz.

Gerekli donanımlar:

• NodeMCU ESP8266-12E
• 128x64 0.96 Inch OLED

Bağlantı Şeması:

Kullanacağımız kütüphaneler:

• ESP8266WebServer.h
• SD1306.h

Kodu olabildiğince sade tutmaya çalıştım. İki tane ana işlem var. İlki modülü internete bağlamak, ikincisi ise NodeMCU ile OLED ekranına yazı yazdırmak. Bunları yaptıktan sonra; bu işlemleri birleştirecek, birbiriyle etkileşime sokacak mantığı kurmak gerekiyor.

Kodu biraz açıklayalım. Kod ve bağlantı şemasına ilk baktığımızda bir şeyler yanlış gibi duruyor:

SSD1306 display(0x3c, 5, 4);

Bağlantı şemasında OLED'in girişlerini NodeMCU'nun D1, D2 bacaklarına bağladık ama neden display(0x3x,1,2) değil de display(0x3x,5,4) şeklinde kullanma ihtiyacı duyduk. NodeMCU, ESP-8266 tabanlı bir geliştirme kiti. Ayak bağlantıları ESP ile birebir eşleşmiyor. IO1-D1, IO2-D2 şeklinde bir eşleşme bekliyoruz ancak durum bu şekilde değil. Kullandığımız kütüphane NodeMCU'nun ayaklarına göre değil de ESP8266'nın ayaklarına göre düzenlenmiş. Bu düzem şu şekilde:

static const uint8_t D0   = 16;
static const uint8_t D1   = 5;
static const uint8_t D2   = 4;
static const uint8_t D3   = 0;
static const uint8_t D4   = 2;
static const uint8_t D5   = 14;
static const uint8_t D6   = 12;
static const uint8_t D7   = 13;
static const uint8_t D8   = 15;
static const uint8_t D9   = 3;
static const uint8_t D10  = 1;

Yani OLED'i D1, D2'ye değil de D4, D5'e bağlamak isteseydik display(0x3x,2,14) şeklinde bir atama yapmamız gerekecekti.

display.flipScreenVertically();

Bir tek bana mı öyle geliyor ama OLED ekranına varsayılan ayarlarla yazdırdığınızda yazılar ters basılıyor. Bana göre ekranın üst kısmı pinlerin bulunduğu kısım. O yüzden flip komutuyla ekranın üst kısmını istediğim şekilde ayarladım burada.

void mesajYaz(String message)

Burası gönderilen mesajı ekrana basan fonksiyon.

WiFi.begin(ssid, password);

server.on("/", ana_sayfa);

server.begin()

kısımlarıyla ise kablosuz ağa bağlanıyor ve ufak bir web sunucusu oluşturuyoruz. Bu sunucumuzun tek bir route'ı var ve kullanıcı bu route'a eriştiğinde ilgili fonksiyonu devreye sokuyoruz. İlgili fonksiyon "mesaj" querystring'ini okuyor ve OLED ekranına bastırıyor.

Denememizi yapalım. İlk önce ağa bağlanan mikroişlemcinin IP adresini bir şekilde edinmemiz gerekiyor. Bunun için Arduino'nun "Serial Monitor" aracını kullanabilir ya da "Advanced Port Scanner" gibi uygulamalarla arama yapabiliriz. Bende 192.168.1.65 adresine bağlandı. Sizde daha farklı bir adres olabilir. Bundan sonra ekran üzerindeki mesajı değiştirmek için tek yapmamız gereken aşağıdaki GET isteğini göndermek ya da tarayıcının adres çubuğuna yazmak.

http://192.168.1.65/?mesaj=iyi günler

Burada NodeMCU'ya yerel ağ üzerinden eriştik. Ancak router'ınıza gerekli ayarları yaparak evinizdeki OLED'e iş yerinde iken mesaj gönderebilirsiniz. Hatta chat uygulaması bile yapabilirsiniz. Bu ayarların nasıl yapılacağını Orange PI için anlatmıştım. Ancak Orange PI ya da ESP fark etmez ayarlar aynı. Aşağıdaki linkten bu ayarların nasıl yapıldığına bakabilirsiniz.

http://cuneyt.aliustaoglu.biz/tr/orange-pi-zero-kurulumu-ve-dinamik-dns-ile-dunyaya-acilmak/

NPM her yazılımcının, en çok da full stack yazılımcının sıkılıkla başvurduğu bir kaynak. Yeterince kullandığımız bu kaynağa artık ufak da olsa bir katkı yapmamızın zamanı geldi. "Neden" üzerinde değil de "Nasıl" üzerinde durmak istiyorum.

Öncelikle https://www.npmjs.com/ üzerinden bir kullanıcı yaratalım. Kullanıcı adımızı da aktifleştirdikten sonra:

npm adduser

komutu ile kullanıcı adı ve parolamızı sisteme tanıtalım. Daha sonra boş bir klasör yaratıp bu klasör içinden init komutunu çalıştıralım:

npm init

Bu komut, klasör içerisinde ilgili package.json dosyasını yaratacaktır. Aslında yalnızca "package.json" içeren bir klasör başlı başına bir NPM paketidir, ya da daha doğru bir ifade ile Node JS uygulamasıdır. Hemen şimdi:

npm publish

komutunu çalıştırarak boş bir NPM modülü yaratabilirsiniz. Tavsiyem bunu 0.0.1 versiyon adıyla yapmanızdır. Unutmayın ki bir kere eklediğiniz NPM paketini artık kaldıramazsınız. NPM 24 saat içinde eklenen paketleri silmeye izin veriyor ancak bu sürenin sonunda NPM'in isteği dışında kendi paketinizi dahi silemezsiniz. Ancak boş NPM modülü yaratıp modül adını rezerve etmek NPM'in şartlarına uymamaktadır. Kısa süre içinde kodunuzu göndermeniz gerekiyor. Ya da kodunuz bitene dek bekleyin eğer o süre içerisinde modül adı alınmış olursa başka bir ad seçebilirsiniz.

Herhangi bir NodeJS uygulamasını eklemek aslında oldukça kolay. Çünkü NPM'in açılımı da zaten Node Paket Yöneticisi. Her Node uygulaması aslında bir NPM paketidir. Ancak ben React kütüphanemi eklemek ve daha sonra başka bir React uygulamasından importkomutuyla kullanmak istiyorum. Üstelik ES5 değil ES6 kullanmak istiyorum. O halde Babel ve Webpack ayarları yapmam gerekiyor.

package.json dosyasının bulunduğu klasör üzerinde .babelrc dosyası yaratıp içeriğini aşağıdaki gibi oluşturalım:

Daha sonra webpack.config.js dosyasını ekleyelim:

Olabilecek en basit React bileşenini de src/index.js konumuna ekleyelim. Çünkü bir önceki webpack ayarında modülün başlangıç noktası olarak burayı seçmiştik.

İlk adımda yarattığımız package.json dosyası React ile kullanmak için yeterli bir dosya değil. Bu dosyanın içeriğini aşağıdaki şekilde değiştirelim:

DİKKAT Aşağıdaki dosya yalnızca örnek olması açısından konulmuştur. name, description, author, repository ve homepage gibi yerleri değiştirmeniz gerekecektir.

Şimdi paketimizi npm'e göndermeden önce derlememiz gerekiyor. Çünkü daha önceden de belirttiğim gibi React bileşeni bir Node paketi değil. Webpack'in bunu derlemesi gerekiyor.

npm run build

Bu komutu çalıştırdıktan sonra build klasörü ve bu klasörün içinde index.js dosyasının yaratıldığını göreceksiniz. Bunun ayarını webpack.config.js dosyasının 5. ve 6. satırlarında yapmıştık. Ayrıca öbür tarafta package.json dosyasının 5. satırında da bu dosyayı kullanacağımızı belirtmiştik. Dosya içerisine bakarsanız bunun Node paketlerine benzediğini (module.exports = .. şeklinde) göreceksiniz. Artık ilk npm modülümüzü yaratmaya hazırız.

npm publish

Bir kere publish ettikten sonra değişiklikler yapmak isterseniz, yeni bir versiyon yaratmanız gerekecektir. package.json dosyasının ilgili yerini güncellemeniz gerekiyor. Örneğin 0.0.2. Versiyon adı ve nasıl çoğaltılacağı sizin takdirinize kalmış.

Bu işleme yazılım dünyasında boilerplate deniyor. Bir uygulamayı çalıştırmak için yapmak gereken minimum ayar. Bu sebeple boilerplate'ler otomasyon için uygundur. Daha da ötesi otomasyon gereklidir. Ben bu boilerplate'i otomatik yapan başka bir npm paketi hazırladım. Yalnız, bu paketi global olarak kullanıyorum (create-react-app gibi).

https://www.npmjs.com/package/create-npm-module

create-npm-module olarak eklediğim bu modülü aşağıdaki gibi kullanabilirsiniz:

1. npm install -g create-npm-module
2. create-npm-module my-awesome-module
3. cd my-awesome-module
4. npm install
5. npm run build
6. npm publish

Ancak genel olarak tavsiyem bütün boilerplate'leri öncelikle kendiniz elle yapın daha sonra otomasyon kullanın.

Not: Unutmayın. Eğer publish etmeden önce modülünüzü test etmek isterseniz bir React uygulamasına

npm install --save C:\benim-npm-modülüm

şeklinde ekleyip sonuçlarını görebilirsiniz.