Merhaba arkadaşlar. Harika Gitap
rolarını incelediğim serisinde bugün
Magic UI'ı birlikte inceleyeceğiz.
İçerisinde 150'den fazla animasyonlu
component barındırıyor ve bu
komponentler React, Typescript, Tail and
CSS ve Motion kullanılarak yapılıyor.
Web sitesinde aşağıya indiğiniz zaman bu
şekilde Magic UI kullanılarak yapılan
siteleri görebilirsiniz. Aynı zamanda
Twitter'da insanların bu kütüphane ile
ilgili yorumlarını yine sitesinden
görebilirsiniz arkadaşlar. Detaylı
incelemeye geçmeden önce videoyu beğenip
kanala abone olmayı unutmayın
arkadaşlar. Şimdi detaylı olarak
incelemeye başlayabiliriz. Burada browse
components kısmına tıkladığınız zaman
arkadaşlar içerisinde gerçekten oldukça
fazla component olduğunu göreceksiniz.
Bunların herhangi birine tıkladığınızda
mesela şuna tıkladığınızda ilk olarak en
üstte bir preview yani bu component
sitenize eklediğinizde nasıl
görüneceğini gösteren bir ön izleme
alanı var. Daha sonradan aşağıya doğru
indiğiniz zaman da bu component'ı kendi
projenizde nasıl kullanabileceğinizi
yani kurulumuyla alakalı komutları
burada görebiliyorsunuz. ve aynı zamanda
her component için farklı varyasyonlar
da barındırabiliyor. Aslında burada
gördüğünüz gibi yine her varyasyon için
bir ön izleme alanı olduğu gibi yan
tarafta kod kısmına geldiğinizde bunu
sitenizde kullanmak istediğinizde
kullanmanız gereken kod bloğunu da
buradan kopyalayabiliyorsunuz
arkadaşlar. Şimdi hızlıca bu
kütüphanenin kurulum aşamasına geçelim
arkadaşlar. Sol tarafta bulunan
installation kısmına tıkladığınız zaman
aslında izlemeniz gereken adımları
burada güzel bir şekilde dokümente
etmişler. İlk olarak bir proje
oluşturmamız gerekiyor ve projemizin
içerisinde bu komutu çalıştırmamız
gerekiyor. Hemen bu adımla başlayalım.
Şimdi burada ben bir proje klasörümü
oluşturdum arkadaşlar. Bir next projesi
oluşturdum. Daha sonradan listesinde yer
alan bu komutu kopyalıyorum ve bunu
çalıştırıyorum. İlk olarak bize burada
hangi komponent kütüphanesini kullanmak
istediğimizi soruyor. Bunlardan herhangi
birini seçebilirsiniz arkadaşlar. Şu an
redix ile devam edebiliriz. Yine burada
preset olarak neyi kullanmak
istediğimizi soruyor. Bunları deneyerek
görebilirsiniz arkadaşlar. Hangisi
hoşunuza gidiyorsa onu
kullanabilirsiniz. ya da custom kısmına
gelip şuradaki linke giderek TSN UI
preset'i oluşturabilirsiniz. Ben
şimdilik Nova ile devam edeceğim. Şimdi
kütüphanemiz kurulduktan sonra npm run
dev diyerek aslında lokalde bir projemi
çalıştırıyorum. Şu anda normal bir
nextjess projesi kurulmuş şekilde. Evet
tekrardan dokümantasyona döndüğümüz
zaman ikinci adım olarak componentları
eklemeye başlıyoruz arkadaşlar. Ama
buradaki component'ı eklemek yerine biz
şimdi component sayfasına dönelim ve
istediğimiz componentleri inceleyelim.
Burada mesela ben bent'i çok seviyorum.
Eee, bunu özellikle Apple tasarımlarında
çok fazla kullanıyor. Muhakkak denk
gelmişsinizdir. Mesela bu tarz bir şey
eklemek istiyorum şu anda sayfama. Hemen
burada installation kısmındaki bu komutu
kopyalıyorum. Terminale geliyorum ve bu
komutu buraya yapıştırıyorum. Gördüğünüz
gibi bentogrid component otomatik olarak
burada oluştu. Daha sonra burada örnek
kullanım ile ilgili kodlar bulunuyor
arkadaşlar. Mesela burada ön tanımlı
olarak, ön izleme olarak gördüğünüz
birebir bunun aynısını kendi sitenizde
göstermek istiyorsanız buradaki kod
kısmındaki kodları kopyalayabilirsiniz.
Fakat burada diğer bağlılıkları da
indirmeyi unutmamanız lazım. Yani diğer
bağlılıklardan kastım ne? Mesela e
takvim kütü takvim komponentini de
indirmeniz gerekiyor ya da şu komponenti
de indirmeniz gerekiyor gibi. Aksi halde
buradaki görünümü birebir
alamayabilirsiniz. Biraz daha aşağıya
inersek burada biraz daha farklı
örnekler de var. Yine buradakileri de
deneyebilirsiniz şu an için. Daha en
azından kullanımı kolay olacağı için
diyorum arkadaşlar. Çok fazla ekstra
component yüklemeden de
kullanabilirsiniz. Bunu kopyalayıp daha
sonra projemizde components klasörümüze
mesela yeni bir component oluşturacağım.
Bento.tsx diye ve kopyaladığım kodları
buraya yapıştırdım. Üst tarafa
gittiğiniz zaman şu şekilde bu kısmın
hatalı olduğunu göreceksiniz. Çünkü
bizde bento grid component'ı components
klasörü altındaki UI klasörü altında yer
alıyor. O yüzden burayı ne yapacağız?
düzeltmemiz lazım. Components UI
şeklinde. Daha sonra bunu kaydediyorum
ve ana sayfamın olduğu app componentime
gelip şimdi bu yeni oluşturduğum bento
componentini buraya import ettim. Bu
sayfadaki diğer her şeyi şu an için
kaldırabiliriz aslında. Burada kendi
oluşturduğumuz bento komponentini burada
kullanalım. Şu anda bu şekilde bir hata
aldık. Çünkü bu komponenteki export
edilen componentin adı bento demo
şeklindeymiş. Bunu düzeltmemiz gerekiyor
bento şeklinde ve buradaki hatayı da
düzeltmiş olduk. Şimdi tekrardan
sayfamıza dönüp yenilediğimiz zaman
gördüğünüz gibi site üzerinde gördüğümüz
bu örnek bizim sitemiz içerisinde de
çalışmaya başladı arkadaşlar. Biraz daha
sayfaya yayılmış bir şekilde kullanmak
isteyebiliriz. Tabii ki bunun için
ekstra düzeltmeler yapmamız gerekir.
Mesela burada bento komponentinin
kapsayıcı komponenti şu şekilde
klasslara sahip. tailwin tarafında onu
şöyle yaparsak eğer
container MX oto diyelim ve bu şekilde
bu komponentimizi buraya eklersek
gördüğünüz gibi bu sefer daha düzgün
şekilde bentograde'imizi sayfamıza
eklemiş olduk arkadaşlar. Mesela yine şu
component da çok güzel arkadaşlar. Bunu
da landing sayfamızda kullanmak
isteyebiliriz. Hızlıca bunu da
deneyelim. Yine aslında burada
beğendiğimiz component oldukça
yapacağımız şey aslında şurada
gördüğümüz installation komutunu
çalıştırmak. Bunu kopyalıyorum ve
kısmına döndükten sonra arkadaşlar
burada bu komutu çalıştırıyorum ve bu
komut sayesinde ilgili component aslında
benim components UI klasörüm altına
geliyor. Ve daha sonra benim yapacağım
tek şey aslında bu componenti kullanmak
istediğim yerlerde import ederek
kullanmak. Yine web sitesine döndüğümüz
zaman zaten burada kullanım örneğini de
gösteriyor arkadaşlar. İlk önce şu
şekilde import etmemiz gerekiyor. Bunu
kopyaladım. buraya ekleyelim. Daha sonra
bu şekilde komponentin kullanımını da
aslında bize gösteriyor. İlk önce hangi
yazının gözükeceği, daha sonra o
animasyonlu bir şekilde kelimenin nasıl
hangi kelimeye dönüşeceğini burada
belirtebiliyoruz. Hemen bunu da
kopyaladım. Hemen bentonun altında bunu
da kullanalım. Şu şekilde sayfamıza
döndüğümüz zaman gördüğünüz gibi
hello'dan world kelimesine geçişin
animasyonlu bir şekilde olduğunu
görebiliyoruz. Çok güzel. Yine mesela
benim sevdiğim componentlardan bir
tanesi şu arkadaşlar. Gördüğünüz gibi
burada ikinci kelimedeki renk geçişi
gayet bir dinamizm katıyor siteye. Yani
statik bir görünümdense bu şekilde biraz
daha ilgi çekici renkli bir hale
getirebilirsiniz arkadaşlar. Burada
dediğim gibi components kısmına gelip
tek bunları inceleyerek aslında hangi
componentlar sizin hoşunuza gidiyorsa
ana sayfanıza ekleyebilirsiniz. Yine
burada template'ler var arkadaşlar ama
bunlar ücretli template'ler. hani hızlı
bir şekilde landing page'imi hayata
geçireyim derseniz belki onlara da göz
atmak isteyebilirsiniz. Bu tamamen size
kalmış bir seçenek. Oraya geçiyorum.
Bunun dışında bir de arkadaşlar bu
kütüphanenin MCP sunucusu var. Bunu da
hızlıca inceleyelim. Bu MCP sunucusu
sayesinde aslında tek böyle
komponentleri beğendiğiniz bir
komponente gelip işte installation
komutunu alıp kopyalayayım. Sonra
çalıştırıp projeme o komponenti dahil
edip kullanayım gibi manuel olarak
bunları yapmaktansam MCP sunucusunu
kurduktan sonra normal yapay zekayla
konuşuyor gibi. Blending page'imde şu
komponenti kullan dediğimiz zaman bizim
yerimize aslında tüm işlemleri yapıyor.
Biraz daha otomatik çalışmasını
sağlıyoruz. Mesela burada kullanım
örnekleri olarak ne demiş? Mesela grid
arka plan ekle diyebiliyoruz artık bu
MCP sunucusunu kurduğumuzda. Daha sonra
o gidip kendisi gerekli komponentleri
kurup sayfamızda kullanıyor. Şimdi
burada MCP sunucusunu kurmak için
arkadaşlar burada bizimle paylaştığı bir
konfigürasyon dosyası var aslında. Yani
Jason formatında bir konfigürasyon var.
Bunu kullanmış olduğunuz yapay zeka
agentına söylediğiniz zaman yani bu MCP
sunucusunu nasıl kurabilirim diye zaten
sizi yönlendirecektir. Cloud COD
kullanan arkadaşlar ise burada ekranda
görmüş olduğunuz bu komutu çalıştırarak
Magic UI MCP sunucusunu projenizde
kullanabilir hale gelebilirsiniz
arkadaşlar. MCP sunucusunu kurduktan
sonra tekrardan cloud kodu çalıştırıp
MCP komutunu çalıştırdığınızda
gördüğünüz gibi burada Magic UI MCP'si
kullanıma hazır durumda olduğunu
göreceksiniz. Daha sonra tekrardan cloud
COD'a gelerek şunu diyebiliriz aslında.
Mesela burada örnek göstermiş. Bunları
deneyerek başlayalım. Mesela şunu
kopyalayıp buraya yapıştırdım. Bakalım
ne olacak.
Gördüğünüz gibi direkt Magic UI MCP
sunucusunu çalıştırarak şu anda bu
komponenti arıyor. Daha sonra bu
komponentin henüz kurulu olmaması
sebebiyle ilk önce bu komponenti kuruyor
ve daha sonradan appsx dosyasına bu
komponenti ekleyecek. Şu şekilde ekledi.
Şimdi tekrardan sayfamıza döndüğümüz
zaman arkadaşlar gördüğünüz gibi hemen
şuranın altında bu logoların eklendiğini
görüyorsunuz. Bazı şirket logoları
çalışmamış. Onları düzeltiriz. Onlar çok
önemli değil. Mesela LinkedIn, Microsoft
ve Twitter çalışmamıştı onları
kaldıralım mesela. Şöyle ve gördüğünüz
gibi bu logolardan oluşan animasyonlu
bir görüntü sağlamış olduk. Peki mesela
sonlandırmadan evvel şöyle bir şey
denesek nasıl olur arkadaşlar? Onu da
görmüş olalım beraber. Devnity adında
bir yazılım ajansı için landing page
oluştur. Magic UI componentlerini kullan
diyeceğim.
Bakalım. Bu şekilde tek bir komut
verdiğim zaman magic içerisindeki
komponentleri kullanarak bütün landing
page'i tasarlayıp oluşturabilecek mi?
Bunu da hep beraber görmüş olacağız.
Eğer bu şekilde istediğimiz gibi
çalışırsa aslında tek bu komponentleri
gezerek bir sayfayı oluşturmaya
çalışmaktansa bu şekilde yapmak
istediğimiz sayfanın ne olduğunu
anlatarak ve magic komponentlerini
kullanmasını söyleyerek aslında hızlı
bir şekilde landing sayfalarımızı ortaya
çıkartabiliriz. en azından fikir olarak
ortaya çıkartabiliriz. Daha sonradan
üzerine manuel olarak oynamalar
yapabiliriz arkadaşlar. Evet, şu anda
sanırım eee genel olarak bir plan
çıkardı. Leing page planı çıkardı. Eee
nasıl bir e yapıya sahip olacağını
belirledi ve bununla ilgili eksik olan
magic komponentlerini belirledi
gördüğünüz gibi ve bunları yüklüyor şu
anda. Evet mesela servisler için
bentrade kullanıyor. Yani normalde de
aslında bizim kullanacağımız şey o
olurdu. Bu şekilde işleri bayağı
hızlandırabiliriz gibi duruyor.
Animasyonlar için yine motion
kütüphanesini kullanıyor arkadaşlar.
Harika gidup repoları serisinde
anlattığımız repolardan biri.
Evet. O promptumuzun sonunda aslında şu
şekilde bir web sitesi oluşturdu. Bir
landing page oluşturdu bizim için gayet
de güzel bir başlangıç noktası oldu
aslında. Bu şekilde animasyonda bir
butonumuz var. Buradaki yazı değişiyor.
Aşağı indiğimizde bent grid var. Yine
burada gördüğünüz gibi animasyon mevcut.
Burayı biraz daha farklı renklerde
isterseniz değiştirebilirsiniz vesaire.
Burada istatistikler var. Teknoloji
yığınımız var. Burada Türkçe
karakterleri kullanmasını söyleyebiliriz
sonradan ya da belki de siyi komple
İngilizceye çevirebiliriz. Artık hedef
kitlemize göre değişir. Çalıştığımızı
anlatan kısım var. Ve en son call to
action dediğimiz bir kısımla aslında
insanların bize ulaşmasını
sağlayacağımız kısım var. Gayet güzel
aslında. Yani güzel bir başlangıç
noktası. Yine burada üst kısımdaki
linklere tıkladığımız zaman arkadaşlar
gördüğünüz gibi animasyonlu bir şekilde
ilgili kısma yönlendiriyor bizi. Gayet
güzel olmuş. Eğer ki Magic UI'daki diğer
componentları kullanmak istiyorsak yani
mesela şu anda tamamen özgür bıraktık
yapay zeka agentını ve bu şekilde bir
landing page oluşturdu bizim için.
Özellikle mesela şu komponenti kullan,
böyle bir section oluştur, orada şu
komponenti kullan gibi
yönlendirebiliriz. tamamen artık bizim
yaratıcılığımıza bakıyor. Bu noktadan
sonra yine Magic UI altında yer alan
template'leri örnek olarak belki yapay
zeka agentına vererek ona benzer şekilde
bir sayfa oluşturmasını da
isteyebiliriz. Veya showcase kısmına
gidip Magic UI kullanılarak yapılan
diğer web sitelerini incelerseniz ve
bunu referans olarak verirseniz yapay
zeka agentına buna benzer şekilde
sayfalar çıkartmasını da
isteyebilirsiniz arkadaşlar. Eğer
anlayamadığınız kısımlar varsa
yorumlarda belirtebilirsiniz. Yine
Telegram grubumuza da katılarak
sorularınızı sorabilirsiniz arkadaşlar.
Umarım faydalı bir video olmuştur.
Videoyu beğenip kanala abone olmayı
unutmayın arkadaşlar. Bir sonraki
videoda görüşürüz. Hoşça kalın. Yeah.