Buradasın
Bravo Studio ile Figma'dan Native Uygulama Oluşturma Eğitimi
youtube.com/watch?v=D_tBkqOPxdMYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Bravo Studio uygulamasının Figma ile nasıl kullanılacağını anlatan kapsamlı bir eğitim içeriğidir.
- Eğitim, Bravo Studio'nun Figma için iOS ve Android platformlarında native app çıkarma özelliğini adım adım göstermektedir. İlk bölümde Bravo Studio'nun web sitesi ve temel özellikleri tanıtılmakta, Figma'da bir tasarım oluşturma süreci anlatılmaktadır. İkinci bölümde ise Figma'da yeni bir collection oluşturma, REST API kullanarak dinamik veri çekme ve bu verileri uygulamada kullanma adımları gösterilmektedir.
- Eğitim içeriğinde sabit bir video alanı ve dinamik olarak gelen kullanıcı listesi içeren bir uygulama prototipinin oluşturulması, Bravo Text kodlarının kullanımı, Jason Place Holder Type Code platformundan kullanıcı verilerinin çekilmesi ve Android için APK dosyasının oluşturulması gibi konular detaylı olarak ele alınmaktadır.
- Bravo Studio Tanıtımı
- Bravo Studio, Figma için iOS ve Android platformlarında native bir app çıkarmayı sağlayan bir araçtır.
- Bu araç sayesinde kod yazmaya gerek kalmadan, Bravo'nun kendisi bu işlemi gerçekleştirir.
- Bravo Studio'nun sitesinde, hangi adımlarla işlemlerin gerçekleştiğini gösteren bilgiler ve detaylı tanıtım yazıları bulunmaktadır.
- 01:27Bravo Studio'ya Giriş
- Bravo Studio'ya Figma, Google veya Apple hesaplarıyla giriş yapılabilir.
- Yeni bir üyelik oluşturmak isteyenler için "Sign Up" seçeneği bulunmaktadır.
- Site üzerinden detaylı bilgilere ulaşmak için her bölümün altında "Get Started" ve "More" gibi kısımlar bulunmaktadır.
- 02:00Figma'da Tasarım Oluşturma
- Figma'da "Bravo Live App" adında yeni bir proje oluşturulmuştur.
- iPhone 11 Pro Max ölçümü girilerek kapsayıcı frame oluşturulmuştur.
- Üst kısımda sabit kalacak bir video alanı ve alt kısımda kullanıcı adı ve email adreslerinden oluşan bir liste oluşturulmuştur.
- 02:54Tasarım Detayları
- Video alanına "Hoş Geldiniz" yazısı eklenmiş, boyutu 24, bold ve beyaz renk olarak ayarlanmıştır.
- Kullanıcı listesi ad soyad ve email adresi bölümlerinden oluşacak şekilde tasarlanmıştır.
- İçerikler dinamik olarak REST API'den veya Google E-Tablolardan çağrılabilir.
- 04:10Tasarım Düzenlemeleri
- Ad, soyad ve email adresi alanlarını kapsayan açık gri bir dikdörtgen oluşturulmuştur.
- Dikdörtgene drop shadow uygulanarak gölge efekti verilmiştir.
- Tüm öğeler birlikte seçilerek frame haline getirilmiş ve video alanı için "header" ismi verilmiştir.
- 06:21Bravo Kodları ve Tasarım İçe Aktarımı
- Bravo text kısmından video alanı için gerekli kodlar kopyalanmıştır.
- Figma'da "üst" olarak isimlendirilen frame'e Bravo kodları yapıştırılmıştır.
- Bravo paneline dönülerek "Import Figma File" kısmından tasarım içe aktarılmıştır.
- 08:23Figma'da Collection Oluşturma
- Data kütüphanesine giderek yeni bir collection oluşturuluyor ve ismi "test figma" olarak belirleniyor.
- Collection için bir request belirlenmesi gerekiyor ve bu örnekte JSON Place Holder Type Code.com kullanılıyor.
- JSON Place Holder'dan "user" kısmından ad soyad (name) ve email adresi alanları seçiliyor.
- 09:54Verileri Figma'ya Aktarma
- Projeler kısmından "test figma request" collectionu seçiliyor ve add elements kısmına tıklanıyor.
- Dinamik olarak çağrılacak liste için data seçiliyor ve ad soyad ile email adresi alanları belirleniyor.
- Veriler kaydedildikten sonra preview düğmesine basılarak önizleme alınabiliyor.
- 11:37APK Dosyası Oluşturma
- APK dosyası oluşturmak için publish kısmından platform seçimi yapılıyor.
- Android seçildikten sonra get debug apk butonuna tıklanıyor ve mail adresine download linki geliyor.
- Download android versiyon düğmesine basarak APK dosyası dışarıya çıkartılıyor.