Bu yazımızda, React ile çok basit bir e-ticaret web uygulamasının nasıl oluşturulacağına göz atacağız. Elbette bir Shopify olmayacak, ancak umarız React’in dinamik ve ilgi çekici kullanıcı arayüzleri oluşturmak için ne kadar iyi olduğunu görebileceksiniz. 

React ile oluşturacağımız bu E-Ticaret web uygulaması, temel bir alışveriş sepeti yönetim sisteminin yanında, kullanıcı kimlik doğrulaması için basit bir yönteme de sahip olacak. React Context‘i, Redux veya MobX gibi durum yönetimi çerçevelerine alternatif olarak kullanacağız ve json-server paketini kullanarak sahte bir arka uç oluşturacağız.

Burada inşa edeceğimiz React E-Ticaret uygulamasını görebilirsiniz.

Burada inşa edeceğimiz React E-Ticaret uygulamasını görebilirsiniz.

React E-Ticaret Uygulamasına Başlamadan

Az sonra anlatacaklarım için temel seviyede JavaScript ve React bilgisine ihtiyacınız olacak. Ayrıca uygulamayı oluşturmak için bilgisayarınızda kurulu olan Node‘un güncel sürümüne ihtiyacınız var. Eğer güncel bir Node sürümüne sahip değilseniz buraya tıklayarak, Node’un ana sayfasından sisteminiz için doğru dosyayı indirin ve güncelleme işlemini tamamlayın.

Node, kullanacağımız bazı kütüphaneleri yükleyeceğimiz JavaScript için bir paket yöneticisi olan npm ile birlikte gelir. Konsol, terminal yada komut satırınıza aşağıdaki komutları vererek, ikisinin de doğru kurulup kurulmadığını kontrol edebilirsiniz.

Bunu yaptıktan sonra Create React App aracıyla yeni bir React projesi oluşturarak başlayalım . Bunu global olarak kurabilir veya şu şekilde kullanabilirsiniz:

Bu işlem bittiğinde, oluşturulan yeni klasöre geçin:

Yapacağımız bu uygulamada, yönlendirmeyi yönetmek için React Router kullanacağız . Bu modülü kurmak için şunu çalıştırın:

Kimlik doğrulamasını işlemek için json-server-auth, sahte arka ucumuzu oluşturmak için ise json-server modüllerine ihtiyacımız olacak:

Sahte arka ucumuzda Ajax isteklerini kullanmak için ise axios‘a ihtiyacımız olacak.

Ve arka ucumuzun yanıt vereceği JWT’yi ayrıştırabilmemiz için jwt-decode’a ihtiyacımız olacak:

Son olarak, bu uygulamayı şekillendirmek için Bulma CSS çerçevesini kullanacağız. Bunu kurmak için aşağıdaki komutu çalıştırın:

Başlangıç

Öncelikle, stil sayfasını uygulamamıza eklememiz gerekiyor. Bunun için, src klasöründe bulunan index.js adlı dosyaya import ifadesi ekleyeceğiz. Bu, stil sayfasını, uygulamadaki tüm bileşenlere uygulayacaktır:

Context Kurulumu

Daha önce de belirtildiği gibi, uygulamamız genelinde React Context kullanacağız . React Context, component ağacında istediğimiz veriyi prop’lar üzerinden taşımadan componentlar arasında taşımayı sağlayacak.

Context ihtiyacının genellikle gerekli olduğu karmaşık uygulamalarda, birden fazla Context olabilir. Örneğin, ProductContextürünle ilgili verileri kullanan bileşenlerin işlenmesi için ve ProfileContextkimlik doğrulama ve kullanıcı verileriyle ilgili verilerin işlenmesi için olabilir. Ancak, işleri olabildiğince basit tutmak adına, biz sadece bir adet Context örneği kullanacağız.

Context oluşturmak için, uygulamamızın src dizininde Context.js ve withContext.js isminde dosyalar oluşturalım.

Bu işlemden sonra aşağıdakileri Context.js içerisine ekleyin:

Bu, Context’i oluşturur ve Context verilerini boş bir nesneye başlatır. Ardından, Context verilerini ve yöntemlerini kullanan bileşenleri sarmalamak için kullanacağımız bir bileşen, yani “Wrapper” (Sarmalayıcı) oluşturmamız gerekir:

Bu biraz karmaşık görünebilir, ancak aslında tek yaptığı şey, daha üst düzey bir bileşen yapmaktır.

withContext‘i biraz incelediğinizde, fonksiyonun parametresi olarak bir React bileşenini aldığını görebilirsiniz. Daha sonra, bileşenin props değerini parametre olarak alan bir işlev döndürür.  context={context}{...props} Burada yer alan düzeni, tüm uygulamamız boyunca korumamız gerekiyor.

Uygulamanın Ana Hatlarını Oluşturun

Burada, uygulamamızın temelinde düzgün çalışması için ihtiyaç duyacağımız bileşenlerin iskelet versiyonunu oluşturacağız. Bunlar AddProductsCartLogin veProductList olacak. Şimdi src dizininde components isimli bir klasör oluşturun.

AddProduct.js için:

Cart.js için:

Login.js için:

Ve son olarak şunu ProductList.jsiçin:

Tüm bu işlemlerden sonra artık,  App.js dosyasını düzenleyebiliriz. App.jsdosyanızı aşağıdaki gibi düzenleyin.

Burada oluşturduğumuz Appbileşeni uygulama verilerini başlatıp bunlarda sorumlu olacak. Aynı zamanda bu verileri işlemek için bazı yöntemler tanımlayacak. İlk olarak, Context.Providerbileşenini kullanarak Context verilerini ve yöntemlerini tanımlıyoruz.

Ardından, uygulama navigasyonumuzu oluşturuyoruz. Bunun için Router ve BrowserRouter modüllerini kullandık. Ardından, Switchve Routebileşenlerini kullanarak uygulamamızın yollarını tanımlıyoruz. Link ile her bağlantıya, uygulamanın navigasyon menüsünde yer verilmesini sağlıyoruz. Yönlendiriciye bileşenin içinden erişmemizi sağlamak için Routerbileşenine routerRef  gibi bir referans da ekliyoruz.

Bunu test etmek için, projenin kök dizinine gidin( Örneğin bende: /files/Fatih/Desktop/e-commerce) ve Create React App geliştirici sunucusunu başlatın. Bunun için npm start komutunu kullanabilirsiniz. Sunucu başlatıldıktan sonra, varsayılan tarayıcınızı açın. Uygulamamızın iskelet yapısını görmüş olmalısınız. Sayfada yaptığınız tıklamaların ve tüm gezinmenizin çalıştığından emin olun.

Arka Uç Oluşturalım

Bu adımda, ürünlerimizi depolamak ve kullanıcı kimlik doğrulamasını yönetmek için sahte bir arka uç oluşturacağız. Belirtildiği gibi, sahte bir REST API oluşturmak için json-server‘ı ve uygulamanıza basit bir JWT tabanlı kimlik doğrulama akışı eklemek için json-server-auth‘i kullanacağız.

Konuyu daha iyi anlayabilmeniz için belirtmem de yarar olduğunu düşünüyorum. Json-server şu şekilde çalışır. Dosya sisteminden bir JSON dosyasını okur ve bunu, onunla etkileşimde bulunmak için karşılık gelen uç noktalarla bir bellek içi veritabanı oluşturmak için kullanır.

Şimdi, JSON dosyasını oluşturalım. Projenizin ana dizininde backend isimli klasör ve bu klasörün içerisinde db.json isimli bir dosya oluşturun:

db.json dosyasını açın ve aşağıdaki içeriği ekleyin:

Burada usersve products isimli iki kaynak oluşturuyoruz. Kaynağa baktığınızda, users her kullanıcının bir kimliği, e-posta adresi ve şifresi olduğunu fark edeceksiniz. Parola, bcryptjs kullanılarak şifrelenmiş olduğu için harf ve rakamlardan oluşan karmakarışık bir şekilde görünüyor.

Uygulamanızın hiçbir yerinde şifreleri düz metin olarak saklamamanız önemlidir.

Şimdi, projenin ana dizininden aşağıdaki komutu vererek sunucuyu başlatın:

Bu komut ile uygulama json-server üzerinde başlayacaktır: http://localhost:3001. Bu sayede json-server-auth ara yazılımı, bize uygulamada oturum açmayı simüle etmek için kullanabileceğimiz bir ortam sağlayacaktır.

Bunu https://hoppscotch.io kullanarak deneyelim . Bu bağlantıyı yeni bir pencerede açın, ardından metotuPOSTve URL’yi http://localhost:3001/login olacak şekilde değiştirin. Bilgileri doğru girdiğinizden emin olun. Biraz aşağıda Raw Input adında bir sekme göreceksiniz. Bunu aktif hale getirdikten sonra aşağıdaki komutu buraya yazın.

Send butonuna tıklayın. Sayfa altında aşağıdakine benzer bir yanıt almalısınız.

Bu, bir saat süreyle geçerli olan bir JSON Web Jetonudur. Uygun bir arka uca sahip normal bir uygulamada, bunu istemciye kaydedersiniz ve ardından korumalı bir kaynak talep ettiğinizde sunucuya gönderirsiniz. Sunucu aldığı jetonu doğrular ve her şey kontrol edilirse, talep ettiğiniz verilerle yanıt verir.

Burası gerçekten önemli bir bilgi olduğu için tekrar yinelemek istiyorum. Sunucunuzda korunan bir kaynak için herhangi bir talebi doğrulamanız gerekir. Bunun nedeni, istemcide çalışan kodun potansiyel olarak tersine mühendislik yapılabilmesi ve üzerinde değişiklik yapılabilmesidir.

React E-Ticaret Uygulamasında Kimlik Doğrulamanın Uygulanması

Bu bölüm için uygulamamızdaki axios ve jwt_decode paketlerine ihtiyacımız olacak. Bunları App.jsdosyanın en üstüne ekleyin:

Daha sonra, aşağıda gösterildiği gibi kullanıcıyı ayarlamalı ve uygulama başladığında kullanıcının yüklendiğinden emin olmalıyız. Bu yöntemi,App bileşenine ekleyin:

Ardından, Context’e eklenen loginve logoutyöntemlerini tanımlayalım:

Uç noktadan gelen yanıt 200 durum koduna sahipse, kullanıcının kimlik bilgilerinin doğru olduğunu varsayabiliriz. Daha sonra, e-postayı, belirteci ve kullanıcının durumdaki erişim düzeyini kaydetmeden önce kullanıcının e-postasını almak için sunucunun yanıtında gönderilen jetonun kodunu çözeriz. Her şey yolunda giderse, yöntem geri dönerek true halini alır fakat, aksi bir durumdafalse olacaktır.  Neyin gösterileceğine karar vermek için bu değeri bileşenimizde kullanabiliriz.

Daha sağlam bir çözüm uygulamak istiyorsanız, bir kullanıcı oturum açtığında veya uygulama her yüklendiğinde mevcut kullanıcının izinlerini almak için ikinci bir istekte bulunabilirsiniz. Bunu bir uygulamamızda kullanmayacağız. Ama siz isterseniz deneyebilirsiniz.

logout yöntemi ise her iki durumda yerel depolamada kullanıcıyı temizleyecek.

Oturum Açma Bileşenini Oluşturma

Şimdi Login bileşeni ile ilgilenebiliriz. Bu bileşen, Context verilerini kullanır. Bu verilere ve yöntemlere erişebilmesi için withContext‘i daha önce oluşturduğumuz yöntemle sarmalamamız gerekir.

Bu bileşen, kullanıcınnın oturum açarken kullandığı kimlik bilgilerini toplamak için iki girdiye sahip bir form oluşturur. Gönderildiğinde,  login bileşeni Context’ten geçen yöntemi çağırır. Bu modül ayrıca, kullanıcı zaten oturum açmışsa ürünler sayfasına yönlendirmeyi de sağlar.

Şimdi http://localhost:3000/login adresine giderseniz , yukarıda belirtilen ad/parola kombinasyonlarından biriyle oturum açabilmelisiniz.

E-posta ve şifre alanı içeren giriş sayfası

E-posta ve şifre alanı içeren giriş sayfası bu şekilde gözükmeli

Ürün Görünümlerinin Oluşturulması

Elbette React ile bir E-Ticaret uygulaması yapıyoruz ve uygulamamızda görüntülemek için arka ucumuzdan bazı ürünleri almamız gerekiyor. Oturum açmış kullanıcı için yaptığımız gibi, bunu Appbileşenindeki bileşen bağlayıcısında tekrar yapabiliriz:

Yukarıdaki kod parçacığında, componentDidMountyaşam döngüsü kancasını eş zamansız olarak işaretledik. Bu durum, /productsuç noktamıza bir talepte bulunabileceğimiz ve daha sonra duruma yapıştırmadan önce verilerin geri dönmesini bekleyebileceğimiz anlamına gelir.

Ardından, ürünler sayfasını oluşturabiliriz. Bu aynı zamanda uygulamanın açılış sayfası görevini de üstlenecektir. Bu sayfa iki bileşenden yararlanacaktır. Birincisi ProductList.js; sayfa gövdesini gösterecek olan ve diğeri, ProductItem.js; yani listedeki her ürünün bileşeni.

Productlist, aşağıda gösterildiği gibi olmalı:

Liste veri Context’ine bağlı olduğundan, onu withContextfonksiyonuyla da sarmalıyoruz. Bu bileşen, ürünleri henüz oluşturmadığımız ProductItem bileşenini kullanarak işler.

Şimdi ProductItembileşeni oluşturalım:

Ve aşağıdaki içeriği buraya ekleyelim:

Bu öğe, ürünü bir kart üzerinde görüntülemeyi sağlar. Ayrıca ürünü kullanıcının sepetine eklemek için bir işlem butonu da sağlar.

Products Sayfası Böyle Görünecektir

Products Sayfası Böyle Görünecektir

Bir Ürün Eklemek

Artık mağazamızda sergileyecek ürünlerimiz olduğuna göre, yönetici kullanıcıların yeni ürünler eklemesi için bir arayüz oluşturabiliriz. Öncelikle ürünü ekleyeceğiniz yöntemi tanımlayalım. Bunu aşağıda gösterildiği gibi App bileşeninde yapacağız:

Bu yöntem productyani nesneyi alır ve onu ürün dizisine ekler, ardından uygulama durumuna kaydeder. Ayrıca, ürünü başarıyla ekledikten sonra yürütmek için bir geri arama işlevi alır.

Şimdi AddProductbileşenini doldurmaya devam edebiliriz:

Bu bileşenin bir çok görevi var.  Context üzerinde depolanan geçerli bir kullanıcı olup olmadığını ve bu kullanıcının accessLevel1’den küçük olup olmadığını (yani, bir admin olup olmadığını) kontrol eder. Eğer öyleyse, yeni bir ürün eklemek için formu oluşturur. Değilse, uygulamanın ana sayfasına yönlendirir.

!!!Bir kez daha, lütfen bu kontrolün istemcide kolayca atlanabileceğini unutmayın. Gerçek bir uygulamada, kullanıcının yeni ürünler yaratmasına izin verildiğinden emin olmak için sunucuda fazladan bir kontrol yapmalısınız.

Formun görüntülendiğini varsayarsak, kullanıcının doldurması gereken ( nameve pricegibi) birkaç alan vardır. Kullanıcının girdiği Input, bileşenin durumunda izlenir. Form gönderildiğinde, bileşenin saveyöntemi çağrılır, bu da arka ucumuza yeni bir ürün oluşturmak için Ajax talebinde bulunur.  Ayrıca json-server‘ın beklediği benzersiz bir kimlik oluşturur.

Son olarak, addProduct ile yeni oluşturduğumuz ürünü global durumumuza eklemek ve formu sıfırlamak için Context üzerinden aldığımız yöntemi çağırıyoruz. Tüm bunların başarılı olduğunu varsayalım. Bundan sonra kullanıcıyı ürünün oluşturulduğu konusunda bilgilendirmek için arayüz güncellenir.

Eğernameveya pricealanları eksik ise, biz flashile kullanıcı bilgilendirilip, uyarılır.

Ürün sayfası ekle

 

Tam burada ilerlemenizi kontrol etmek için küçük bir test yapmanızı öneriyorum. Yönetici olarak oturum açın. E-postanız: admin@example.com ve şifreniz: password olacaktır. Başarılı bir şekilde giriş yaptıktan sonra “Ürün Ekle (Add Product)” sayfasına gidin. Ardından birkaç yeni ürün oluşturmak için formu kullanın. Ana sayfaya geri dönün ve yeni ürünlerin ürün listesinde göründüğünden emin olun.

React E-Ticaret Uygulaması İçin Sepet Yönetimi

Artık ürün ekleyebildiğimize ve görüntüleyebildiğimize göre, yapılacak son şey alışveriş sepetini yönetme sorununu çözmek olmalı. Sepetimizi zaten App.js  bileşeninde içinde boş bir nesne olarak başlattık, ancak mevcut sepeti yerel depodan yüklediğimizden de emin olmamız gerekiyor.

App.js içerisinde componentDidMount yöntemini güncellememiz gerekiyor. Bunu aşağıdaki gibi yapabilirsiniz:

Sonra, alışveriş sepeti işlevlerini  App.js içerisinde tanımlamamız gerekir . İlk önce addToCartyöntemi oluşturacağız:

Bu yöntem, alışveriş sepeti nesnesi için anahtar olarak öğe kimliğini kullanır ve böylece öğeyi ekler. Kolay veri erişimini sağlamak için bir dizi yerine bir nesne kullanıyoruz. Bu yöntem, bu anahtara sahip bir öğe olup olmadığını görmek için sepet nesnesini kontrol eder. Varsa miktarı artırır; aksi takdirde yeni bir girdi oluşturur. İkinci ififadesi, kullanıcının gerçekte mevcut olandan daha fazla öğe ekleyememesini sağlar. Yöntem daha sonra alışveriş sepetini, uygulamanın diğer bölümlerine Context aracılığıyla iletilen duruma kaydeder.

Sonrasında ise, removeFromCart ile belirli bir ürünü kullanıcı sepetinden çıkarma ve clearCart ile de tüm ürünleri kullanıcı sepetinden kaldırma yöntemini tanımlayacağız:

Böylece removeCart ürün anahtarını kullanarak bir ürünü kullanıcının sepetinden kaldırır. Daha sonra uygulama durumunu ve yerel depolamayı buna göre günceller. clearCart yöntemi de, boş bir nesneye sepeti sıfırlar ve yerel depolama biriminde sepet girdisini kaldırır.

Sepet React E-Ticaret

Şimdi alışveriş sepeti kullanıcı arayüzüne geçebiliriz. Ürün listesine benzer şekilde, bunu iki öğe kullanarak gerçekleştiriyoruz: Cart.js: sayfa düzenini oluşturan bileşen veCartItem.js: alışveriş sepeti öğelerinin listesini oluşturan bileşen.

Sırada CartItem var. Öncelikle bu bileşeni oluşturalım.

Ardından aşağıdaki içeriği ekleyin:

Bu bileşen, ürün bilgilerini ve seçilen öğelerin sayısını gösterir. Ürünü alışveriş sepetinden çıkarmak için bir de buton sağlar.

Son olarak, Appbileşenine ödeme yöntemini eklememiz gerekiyor:

Bu yöntem, devam etmeden önce bir kullanıcının oturum açıp açmadığını kontrol eder. Kullanıcı oturum açmamışsa, Routerdaha önce bileşene eklediğimiz yönlendirici referansını kullanarak kullanıcıyı oturum açma sayfasına yönlendirir.

Tipik olarak, normal bir e-ticaret sitesinde, faturalandırma işleminin gerçekleşeceği yer burasıdır, ancak uygulamamız için, yalnızca kullanıcının ödeme yaptığını varsayacağız ve bu nedenle satın aldıkları ürünleri mevcut öğeler listesinden kaldıracağız. Bununla, temel alışveriş sepetimizi tamamlamayı başardık.

React E-Ticaret Sitesi Yapımı Sonuç

Özetle

Bu yazımız sırasında, temel bir alışveriş sepetinin arayüzünü oluşturmak için React’i kullandık. Verileri sürdürmek için verileri ve yöntemleri birden çok bileşen ve json-server arasında taşımak için Context kullandık. Ayrıca temel bir kimlik doğrulama akışını uygulamak için json-server kimlik doğrulamasını kullandık.

Bu uygulama elbette hiçbir şekilde bitmiş bir ürün değildir ve birçok yönden geliştirilebilir. Örneğin, bir sonraki adım, bir veritabanı ile uygun bir arka uç eklemek ve sunucuda kimlik doğrulama kontrolleri yapmak olacaktır. Ayrıca yönetici kullanıcılara ürünleri düzenleme ve silme yeteneği de verebilirsiniz.

Umarım bu yazıyı beğenmişsinizdir.

Diğer blog yazılarımız için buraya tıklayabilirsiniz.

Keyifli Kodlamalar…

Kendinize İyi Bakın 🙂

Paylaşmak İster Misiniz?