ReactJS

ReactJS ile Text Generator App Build & Deploy

18 Ağustos 2018

Merhabalar,

Son zamanlarda ReactJS üzerinde çok vakit harcamaya başladım ve öğrendiklerimi bir proje üzerinde denemek istedim. Bunun için bir Text Generator uygulaması yazmaya karar verdim. Adım adım projede nerelerde takıldığımı, sorunları nasıl çözdüğümü açıklamaya çalışacağım. Umarım sizin için de faydalı bir yazı olur.

Gereksinimler

Öncelikle ReactJS isminden de anlaşılacağı üzerine aslında JavaScript olduğu için temel JavaScript bilgisine sahip olmanız gerekiyor. Aynı zamanda temel HTML ve CSS bilgisine de ihtiyacınız olacak.

Projede yardımcı olması için bazı kütüphaneler de kullanıldı. Tasarımda yardımcı olması için Foundation Zurb frameworkü kullanıldı. Aynı zamanda kopyalama işlemi için “Copy to Clipboard” kütüphanesi kullanıldı. API kullanımını kolaylaştırmak için de Axios kütüphanesi kullanıldı.

Proje olduğu için temel ReactJS bilgisine de ihtiyaç duyabilirsiniz. Çünkü, ReactJS’i en küçük ayrıntısına kadar anlattığım bir yazı olmayacak.

Aynı zamanda bilgisayarınızda Nodejs kurulu olmalı. Projede Nodejs kurulumunu anlatmayacağım. Bunun yanında bir yazı editörüne ihtiyacınız olacak. Benim tavsiyem: “VS Code“.

Son olarak kodu tamamen İngilizce yazacağım ama muhtemelen anlaşılır olur.

Proje Özeti

Text Generator uygulaması basitçe sizin belirlediğiniz uzunlukta ve formatta bir yazı üretiyor. Buna “dummy text” de diyebilirsiniz. İsterseniz bu uygulamayı web sitelerinizin içeriğini doldurmak için de kullanabilirsiniz. Hemen bir ekran görüntüsü paylaşayım, daha iyi anlaşılacaktır.

Projeyi Oluşturma

Yapmamız gereken ilk şey projeyi oluşturmak. Bunun için isterseniz “cmd” kullanabilirsiniz. Ben VS Code’un terminalini kullanacağım. VS Code’u açıp “CTRL + “” tuşlarına basıyoruz (veya menüdeki “View” sekmesine tıklayıp “Integrated Terminal” seçeneğine de tıklayabilirsiniz). Ben projemi masaüstünde oluşturacağım. Komutumuz şu:

Yukarıdaki kod sırasıyla şunları yapıyor:

  1. “text-gen” adında bir klasörün içinde projemizi oluşturuyor.
  2. “text-gen” klasörüne gidiyoruz.
  3. Projemizi başlatıyoruz.

Bu işlem internet hızınıza göre bir kaç dakika sürebilir. Sabırla bekleyin. Bunu yaptıktan sonra tarayıcınızda varsayılan yani “boilerplate” bir React uygulaması çıkacak.

Projemizi oluşturduk. Artık bir sonraki adıma geçebiliriz.

Kütüphaneleri Ekleme

Yazının başında bazı kütüphanelere ihtiyacımız olacağını söylemiştim. İlk olarak “Axios” kütüphanesini çekelim. Bu kütüphane sayesinde API’dan isteklerimizi kolaylıkla yapabileceğiz. Bunun için yine terminale gidiyoruz ve aşağıdaki kodu yazıyoruz. Bu kütüphaneleri isterseniz npm’in sitesinden bulabilirsiniz.

Daha sonra Foundation Zurb frameworkünü çekiyoruz. Bu kütüphane de ön tasarımda bize bazı avantajlar sağlayacak.

Foundation Zurb aynı zamanda jQuery kütüphanesine ihtiyaç duyuyor. O yüzden biz de projemize eklemeliyiz.

Bir de “Copy to Clipboard” diye bir kütüphaneyi kullanacağız. Bu kütüphaneyi de butona tıklayarak yazıyı kopyalama işlemi için kullanacağız.

Şimdilik tüm kütüphanelerimiz bunlar.

Stateleri Belirleme

Her ReactJS uygulamasında olduğu gibi bunda da bir kaç state’e ihtiyacımız olacak. Öncelikle biz rastgele yazı üreteceğimiz API olarak “Bacon Ipsum” adında bir API kullanacağız. Bunun kullanımını ileride anlatacağım ama istek atmak için bir kaç tane parametreye ihtiyaç duyacağız. Bu parametreleri de uygulamamızın state’inde tutacağız. Aynı şekilde kullanıcıdan paragraf sayısını isteyeceğiz. Doğal olarak bunu da state’te tutacağız. Format bilgisi de state içinde olacak. Son olarak yazı kopyalama için de state’e ihtiyacımız olacak. O zaman hemen başlayalım. Projemizin içindeki “App.js” dosyasını açalım. Tüm düzenlemeyi burada yapacağız.

Başlangıçta kodumuz şöyle:

Constructor oluşturup state’lerimizi ekleyelim. Kodumuz artık böyle olacak:

Başlangıç Ekranının Tasarımı

Öncelikle bir başlık oluşturalım. Bunun için “<h1>” tagini kullanacağım. Daha sonra kullanıcıdan format bilgisini ve paragraf bilgisini almak için bir form oluşturmamız gerekiyor. Bu formdan gelen bilgilere göre yazımızı oluşturacağız. Bunun için kodumuzu yazmaya başlamadan önce bazı kütüphaneleri “App.js” içinde çağırmamız gerekiyor.

En başa şunları ekleyelim:

Artık ana sayfa tasarımını yapabiliriz. Hemen başlık ekleyelim “<div>” taglerimizin arasına.

Şimdi, formumuzu ekleyelim. Formda iki şeye ihtiyacımız olacak. Format bilgisi ve paragraf bilgisi. Format için “select” kullanacağız, paragraf için de “text” kullanacağız. O zaman yazalım:

Bunları yaptıktan sonra şöyle bir ekran olacak ve şu an için formda hiçbir alan çalışmıyor olacak. Ama panik yapmayın, birazdan hepsini düzelteceğiz:

Kodumuz da şu:

Şimdi, ürettiğimiz yazının görüneceği alanı ekleyelim formun hemen altına.

Fonksiyonların Eklenmesi

Bunu da yaptıktan sonra artık programlama kısmına geçebiliriz. Şimdi, kodumuzda iki adet fonksiyon bulunuyor. Bunlardan  biri “handleChange” diğeri ise “handleSubmit“. Bu iki fonksiyonu tanımlamamız lazım. handleChange fonksiyonu kullanıcı formda herhangi bir değeri değiştirirse, state’deki değerleri de ona göre güncelleyecek. handleSubmit de, “Submit” butonuna tıklandığında bize istediğimiz sonuçları getirecek. Bunun için de yine state güncellemesi yapacak. O zaman önce handleChange‘i yazalım. Zaten çok kısa olacak.

Buraya kadar her şey çok güzel. Son olarak bu fonksiyonu bind etmemiz lazım. Bunun için de constructor‘ın içine şunu ekliyoruz:

Bunu yaptıktan sonra artık formumuzda değişiklikler yapabiliriz. Ama handleSubmit ile alakalı bir şey yapmadığımız için herhangi bir sonuç almayız. Şimdi, handleSubmit için kodumuzu yazalım.

Dikkat ederseniz getSampleText diye bir fonksiyonu çağırdım. Ama bu fonksiyonu daha yazmadık. Birazdan bunu yapacağız ama handleChange gibi bunu da bind etmemiz gerekiyor.

getSampleText’i yazmadan önce Bacon Ipsum API’ın nasıl çalıştığına bakalım. Bunun için Bacon Ipsum’un API adresine gidelim:

https://baconipsum.com/json-api/

Orada zaten örnekleri göreceksiniz. Bizim örneğimize göre şöyle bir linke sahip olmamız gerekiyor:

https://baconipsum.com/api/?type=all-meat&paras=4&start-with-lorem=1&format=json

Üstteki link örneğinde, 4 paragraflık, JSON formatında bir yazı üretmesini istiyoruz.

O zaman buna göre fonksiyonumuzu yazalım.

İlk bakışta size karışık gelecektir kod. Adım adım inceleyelimm. Öncelikle getSampleText() { } ile işe başlıyoruz.

Daha sonra axios kütüphanemizi kullanmaya başlayacağız. Bu kütüphanede get adında bir metod bulunuyor. Bunun ile API’dan aldığımız yanıtı saklayıp, state’imizi güncelleyeceğiz. Bu metodun parametresi API linki oluyor. Daha sonrasında promise metodu olan then metodu ile aldığımız yanıta göre state’imizi güncelleyeceğiz. Bunun için de

Satırını ekliyoruz. Son olarak herhangi bir hata alırsak, bunu konsola yazdırmak için de hatayı catch metodu ile yakalıyoruz.

App.js dosyamızın son hali şöyle:

Bunları yaptıktan sonra artık uygulamamız istediğimiz gibi çalışmaya başlayacak. Ancak şu an için uygulamamızın görüntüsü hiç hoş değil. Bunun üzerinde çalışmaya başlamadan önce yapmamız gereken son bir adım daha var. Normalde uygulamamız çalışıyor ama kullanıcı sitemize ilk girdiğinde de uygulamamızın başlangıçta bir yazı üretmesini istiyorum. Yani “Submit” butonuna basmadan önce bir yazı üretsin. Bunun için lifecycle metod olan componentWillMount metodunu kullanacağız. Bu metod, uygulamamız çalıştıktan sonra otomatik olarak çağırılacak. Metodun yaptığı tek şey, getSampleText metodunu çağırmak.

Normalde başlangıç state’lerimiz hep boş olarak belirlenmişti. İsterseniz bu state’lere varsayılan değerler verip, uygulamanın başlangıçta bu şekilde çalışmasını sağlayabiliriz. Ancak bunu yapmasınız bile API’ın kendi varsayılan değerleri de bulunuyor. Örneğin, paragraf sayısı için varsayılan değer 5 iken, varsayılan format da JSON olarak belirlenmiştir. O zaman state’lerimizde herhangi bir güncelleme yapmamıza gerek yok. Bu haliyle uygulamamız tam olarak istediğimiz bir şekilde çalışıyor. Geriye tek bir şey kaldı.

Tasarımda İyileştirme

Uygulamamız için Foundation Zurb kullanmıştık. Bunun bize sağladığı bazı faydalar var tabii ki. Bunları kullanarak tasarımda ufak tefek değişiklikler yapacağız. Mesela başlığı ortalayalım.

Şimdi, tasarımı kafamızda düşünelim. Öncelikle soldan ve sağdan biraz boşluğa ihtiyacımız var. 12’li kolon sistemini düşünürsek eğer, ben soldan ve sağdan 2 kolon boşluk bırakmak istiyorum. Geriye 8 kolonumuz kaldı. Bunun 3’ünü format seçimi olan select kutusu için kullanacağım. 3’ünü paragraf sayımız için kullandığımız text alanı için kullanacağım. Kalan 2’sini ise butona ayıracağım.

Eğer Foundation Zurb’un dokümantasyonuna bakarsanız belli bir düzene uymamız gerektiğini anlarsınız zaten. Öncelikle bir container‘a ihtiyacımız var. Sonra da grid sistemini kullanacağız. Bunun yanında bize verilecek sonucu da düzenli gözükmesi için soldan ve sağdan 2 kolon boşluk kalacak şekilde yazdıracağım. Yani tüm değişiklikleri App.js içindeki render metodunda yapacağız. Son olarak bir ekleme daha yapmak istiyorum. Sonucumuzu bir dikdörtgenin içine alsın. Bunun için de .callout class’ını kullanacağım.

Kodu biraz inceleyince zaten ne yaptığını göreceksiniz.

Şimdi, App.js son halini paylaşalım.

Artık uygulamamız başarılı bir şekilde çalışıyor. Bir adımımız daha var ama bu kısım için kendinizi zorunlu hissetmeyin. Uygulamaya ekstra özellik katmak için bunu yapacağız. Bir buton koyacağız ve butona tıklandığı zaman yazıyı kopyalayacak.

Bunun için 2 şeye ihtiyacımız var. Birisi aslında bizim flag dediğimiz “true” ve “false” arasında giden state’imiz olacak. Başlangıçta false ile başlayacak. Bu sayede kopyalama işlemi yapmadığımızı bileceğiz. Daha sonra butona tıklandığında true olacak ve kopyalama yaptığımızı anlamış olacağız. Bu arada “Copy” yazısı yazan butonumuzun yazısını da “Copied” olarak değiştireceğiz. Son olarak, eğer yazımız değişmişse, o zaman true olan kopyalama durumunu tekrar false yapacağız. Sanırım anlaşılmıştır. Önce CopyToClipboard kütüphanemizi kullanalım. Sonucumuzu yazdırdığımız kısımda şöyle bir düzenleme yapalım:

Kütüphanemiz şöyle çalışıyor. “text={this.state.text}” olan kısım bizim kopyalayacağımız yazı aslında. Doğal olarak state’imizde tuttuğumuz yazıyı buraya yazıyoruz. Bunu da “this.state.text” ile belirliyoruz. onCopy kısmında kopyalama işleminde ne yapacağımızı söylüyoruz. Bunun için de arrow function kullandım. copied state’ini true olarak değiştirirken yazıyı da “Copied” yapıyoruz. Son olarak dikkat ederseniz butonumuz da var ve class olarak “copy-to-clipboard” diye bir isim belirledik. Bunu da “App.css” dosyasında eklememiz gerekiyor. Bunu eklememin sebebi butonu sağ üst köşeye yerleştirmek istiyorum.

Artık geriye son bir adımımız kaldı bu özellik için. O da yazımız değiştiğinde copied durumunu tekrar false yapmak ve yazıyı da “Copy” olarak değiştirmek. Bunun için de aslında API’dan veriyi çektiğimiz kısmı yani getSampleText metodunu düzeltmeliyiz. Onda şöyle bir değişiklik yapalım:

Artık her şey tamam. Bu değişiklerden sonra uygulamamız sorunsuz bir şekilde çalışacaktır. O zaman dosyalarımızın son halini ekleyelim.

Son Durum

App.js

App.css

Deploy Etme

Artık uygulamamız süper bir şekilde çalışıyor. Ama şu ana kadar hep bilgisayarda çalıştık. Herhangi bir site yapmadık aslında. Bunun için projemizi build etmemiz gerekiyor. Yani production kısmına geçmek için bir şeyler yapmamız gerekiyor. Bunu aslında terminalde bize sürekli söylüyor. Aşağıdaki kodu terminale yazıyoruz:

Bu işlem biraz vakit alıyor. Bittikten sonra projemizin olduğu klasörde “build” adında bir klasör oluşturulacak. Bu klasördeki tüm dosyaları hostingimize yükleyeceğiz.

Bunun için de cPanel’e bağlanıyoruz ve dosyalarımızı istediğimiz bir klasöre atıyoruz. Ben kendi sunucuma da attım. İsterseniz http://rawsly.com/textgen adresine giderek uygulamaya bakabilirsiniz.

    Bir Cevap Yazın

    This site uses Akismet to reduce spam. Learn how your comment data is processed.