Bu eğitimde, Bubble ve AppMaster nasıl entegre edebileceğinize daha yakından bakacağız. Geliştirilmekte olan uygulamanın ön ucunun Bubble yapıldığını, ancak arka uçla çalışma yeteneklerinin yetersiz olduğunu ve AppMaster işlevini kullanmak istediğinizi varsayalım.
Nasıl olduğunu anlayalım:
- AppMaster Bubble için bir veritabanı olarak kullanın
- API isteklerini Appmaster gönder
- Kullanıcı kimlik doğrulaması gerçekleştir
- İstek başlıklarında yetkilendirme belirtecini kullanın
API Connector Yapılandırma
Her şeyden önce, Bubble harici API istekleri gönderme olasılığını yaratmanız gerekir. Bunu yapmak için API Connector eklentisini eklemeniz gerekir.
Hemen AppMaster bir kimlik doğrulama isteği gönderecek şekilde yapılandıralım. Görevimiz, yanıt olarak bir yetkilendirme belirteci almak için bir kullanıcı adı ve şifre göndermektir. Varsayılan olarak her projede oluşturulan standart bitiş noktasını kullanacağız - POST /auth/ (Auth: Authentication) . Bununla ilgili tam bilgi, projenizde talep edilecek tam adresle birlikte Swagger'dan edinilebilir.
API Connector yapılandırmak için Add Another API düğmesine tıklayın ve kullanılacak istek parametrelerini ayarlayın. Anahtar parametreler şunlardır:
- İstek yöntemi. POST
- URL. Swagger Request URL ile aynı
- Use as. Data . Yanıt olarak, yetkilendirme belirteci verilerini almanız gerekir.
- Data type. JSON
- Body . İçindeki en önemli ayar, AppMaster sunucusuna gönderilecek verileri belirtmeniz gerektiğidir. Aynı zamanda <>, karşılık gelen giriş alanlarından alınması gereken dinamik değerleri içerir.
{
"login": "<login>",
"password": "<password>"
}
Doldurduktan sonra, test talebi için verileri belirtmeniz ( Body parameters oturum açma ve şifre değerlerini girin), talebi başlatmanız ve doğru çalıştığından ve cevabın gerçekten geldiğinden emin olmanız gerekir.
Giriş alanları kurulumu
Bir sonraki adım, uygulama için bir arayüz oluşturmaktır. Kendimizi gerekli minimum ile sınırlandırıyoruz. 3 giriş alanı oluşturmamız gerekecek:
- Giriş yapmak
- Şifre
- Yetkilendirme jetonu
İlk ikisi oldukça açık. Kimlik doğrulama için kullanıcının kullanıcı adını ve şifresini belirteceklerdir. En çok ilgi çeken üçüncü alandır - jetonun alanı. Simgenin değeri manuel olarak da girilebilir, ancak bizim görevimiz AppMaster arka ucundan veri almayı ve orada görüntülemeyi mümkün kılmaktır.
Bunu yapmak için İlk içerik değerini yapılandırmanız gerekir:
- API Connector önceden oluşturulmuş isteğin seçimiyle Get data from an External API (bu örnekte adı AppMaster Auth Call )
- (body) login ve (body) password alanlarında, ilgili giriş alanlarından değerleri belirtmeniz gerekir.
- token değerini seçin (talebe yanıt olarak birçok farklı veri gelir, ancak bu örnekte yalnızca token ilgi çekicidir)
Sonuç test edilebilir. Oturum açma ve parola alanlarına veri girerken, AppMaster arka ucuna otomatik olarak bir istek yapılır. Veriler doğru girildiğinde ve istek başarılı bir sonuç verdiğinde, alınan yetkilendirme jetonu üçüncü alanda görünecektir.
veritabanına GET isteği
Sonraki adım, yeni bir API isteği oluşturmaktır. Bu sefer görev veri tabanından veri almak olacaktır. Aynı zamanda, bu verilerin serbestçe erişilebilir olmaması, yalnızca yetkili kullanıcılar tarafından erişilebilir olması durumu karmaşıklaştırmaktadır.
Bunu yapmak için, isteğe özel bir başlık eklemeniz gerekecek. Authorization olarak adlandırılmalı ve değeri " Bearer " ve daha önce alınan yetkilendirme anahtarı olmalıdır.
Pratikte yapalım. API Connector eklentisine geri dönmeniz ve yeni bir API isteği oluşturmanız gerekir. Ekran görüntüsündeki örnekte, bu, yemeklerin bir listesini almak ve bir menü oluşturmak için restoran veritabanına yapılan bir çağrıdır.
Önceki istekten önemli bir fark, parametreler yerine (her ne kadar eklenebilirlerse de) bir başlık kullanılmasıdır:
- Key = Authorization
- Value = Bearer {authorization token} (isteği başlatmak için daha önce aldığınız gerçek belirteci hemen belirtmelisiniz)
Lütfen başlık ayarlarında Private onay kutusunun işaretini kaldırmanız gerektiğini unutmayın; aksi halde dinamik olarak oluşturmak mümkün olmayacaktır. Son olarak, isteği başlatmayı ve çalıştığından emin olmayı unutmayın.
Repeating Group ayarları
Şimdi tasarımcıya geri dönmeli, yeni bir Yinelenen Grup öğesi eklemeli ve onu ayarlamalıyız:
- Type of content - istek verileri AppMaster Get Data .
- Data source - Authorization başlığının doğru bir şekilde belirtilmesi önemlidir. İki bölümden oluşur. İlk sabit " Bearer " dır. İkinci değişken bir yetkilendirme belirteci içermeli ve ilgili giriş alanından alınmalıdır.
Her şey doğru yapılırsa, veriler alınır ve yalnızca son adım kalır - bunları görüntülemeniz gerekir. Bunu yapmak için Repeating Group iki metin alanı ekleyebilir ve bunları özelleştirebilirsiniz. Biri yemeğin adını, ikincisi ise fiyatını gösterecek.
Ortaya çıkan uygulamayı açabilir ve Bubble ve AppMaster entegrasyonunun başarılı olduğunu doğrulayabilirsiniz. Ön uç Bubble.io yapılmıştır ve arka uçla ilgili her şey AppMaster.io tarafından desteklenmektedir:
- Kullanıcı kimlik doğrulaması gerçekleştiriliyor
- Alınan yetkilendirme belirteci görüntülenir
- Veritabanı ile çalışma gerçekleştirilir
- Yalnızca yetkili kullanıcılara açık olan veriler görüntülenir
