Parse ile Web API kimlik doğrulamasında uzmanlaşma – Javascript SDK ve GraphQL tatları

Birçok uygulama, özellikle de web siteleri, içeriklerine erişimi kısıtlamaya ihtiyaç duyar ve yalnızca o kullanıcıyla ilgili bilgileri güvenli bir şekilde gösteren kullanıcı hesaplarına sahip olmak bunu başarmanın en popüler yoludur.

Bugün, çok az kod yazarak ve Parse’ın sizin için tüm ağır işleri yapmasını sağlayarak, zaten var olan bir HTML sayfasına Login işlevini nasıl uygulayacağımızı öğreneceğiz ve bunu yapmak için ücretsiz olarak indirebileceğiniz Login Form şablonunu seçtim.

Aralarından seçim yapabileceğiniz iki farklı teknoloji kullanacağız: Javascript SDK ve Javascript aracılığıyla GraphQL.

GraphQL, yeni piyasaya sürülen yepyeni parlak teknolojimiz ve amacım aynı şeyi yapmanın her iki yolunu da karşılaştırmak, böylece en çok beğendiğinizi seçebilirsiniz.
SPOILER UYARISI!!! GraphQL’i daha çok seveceğinize eminim…

Bu zaten dosyayı görsel olarak görüntülemek için gerekli tüm dosyalara sahip ancak ekleyeceğimiz işlevsellikten yoksun.

GraphQL hakkında daha fazla bilgi edinmek istiyorsanız bu yazıya bir göz atın: GraphQL nedir

Bu oldukça kapsamlı bir makale olacak, bu yüzden size tam olarak ne öğreneceğinizi bölüm bölüm göstereyim:

1. Back4app’te Web Hostinginizi Kurma
2. GraphQL kullanımını etkinleştirin
3. İlk web sitenizi dağıtın
4. İlk Javascript dosyanızı oluşturun
5. Parse SDK’yı yerleştirin
6. Kodunuzda SDK’yı yapılandırın ve örnekleyin
7. Kullanıcıları grafik olarak ekleme
8. Bir kullanıcıyı kaydetmek için Javascript SDK’sını kullanma
9. Kaydolmayı web sitenizle test edin (sabit kodlanmış değerler)
10. Formları okumak ve Javascript kodunuza uygulamak için kod yazın
11. Şarkıyı web sitenizle test edin (dinamik değerler)
12. Javascript SDK ile Oturum Açma işlemini oluşturma
13. Girişi web sitenizle test edin (dinamik değerler)
14. Javascript SDK bölümünün sonucu
15. GraphQL’e Giriş
16. GraphQL kullanmak için neye ihtiyacınız olacak
17. İhtiyacınız olacak kurulum araçları
18. Ön uç için nasıl kod üreteceğimize dair hızlı bir açıklama
19. NodeJS kodunuzda NPM modüllerini kullanma
20. GraphQL’de Sorgulara ve Mutasyonlara Giriş
21. Sorgular
22. Mutasyonlar
23. Kendi GraphQL SingUp yönteminizi oluşturun
24. Kendi GraphQL LogIn yönteminizi oluşturun
25. NodeJS kodunuzu ön uç uyumlu koda dönüştürmek için Browserify’ı kullanın
26. Bu kodu HTML dosyanıza ekleyin
27. Browserify’ın oluşturduğu kodu çağırmak için Javascript işlevlerini kodlayın
28. GraphQL Kaydolma ve Oturum Açma işlemlerinizi test edin
29. GraphQL bölümünün sonucu

1. İlk Adımlar İlk

İlk adım, henüz bir uygulamanız yoksa Back4app’ta uygulamanızı oluşturmaktır. Bu dokümanı kullanarak bir tane oluşturmak için adımları kontrol edebilirsiniz.

Bu adım her iki teknoloji için de ortaktır, bu nedenle hangisini seçerseniz seçin, bunu yapmanız gerekecektir.

Uygulamamızı oluşturduktan sonra Web Hosting özelliğini ayarlamamız gerekiyor. Evet. Statik içerikli web sitelerinizi Back4app üzerinde ücretsiz olarak barındırabilirsiniz. Harika değil mi?

Uygulamanızı oluşturduktan sonra Sunucu Ayarlarına gidin:

Web Hosting ve Canlı Sorgu altında Ayarlar’a tıklayın:

Şimdi Back4app Hosting’i etkinleştirin ve uygulamanız için iyi bir alan adı seçin. Bu alan adına back4app.io içinden doğrudan erişebilir veya dilerseniz DNS’inizde bu alan adını işaret eden bir CNAME kaydı oluşturabilirsiniz:

Artık bazı kodları dağıtmaya başlamaya hazırsınız.

2. GraphQL’e ne dersiniz?

GraphQL kullanmak istiyorsanız, atmanız gereken bir adım daha var. Yalnızca Javascript SDK’sını kullanmayı planlıyorsanız, herhangi bir Parse sürümünü kullanabilirsiniz, ancak neden en son ve en iyisini kullanmayasınız?

Sunucu Ayarları’na gidin:

Ve Ayarlar altında Parse Sunucusunu Yönet:

3.5.0’ın üzerinde bir sürüm seçin. Back4app’te 3.6.0 kullandım:

Şimdi GraphQL’i etkinleştirmiş olmalısınız ve artık hazırız!
Oh, sadece bilmeniz için, GraphQL ve SDK’ları aynı uygulamada kullanabilirsiniz. Seçim yapmanıza gerek yok.

Sadece GraphQL ile ilgileniyorsanız, şimdi bu eğitimin 15. bölümüne ilerleyebilirsiniz.

3. İlk Web Sitenizi Dağıtmak

Artık Web Hosting özelliğini ayarladığımıza göre, web sitemizi dağıtabiliriz.
Bu adım her iki teknoloji için de ortaktır.
Henüz herhangi bir işlevi olmayacak, ancak ilk kez çalıştığını görmek iyi hissettiriyor, o yüzden yapalım.

Bir kez daha Sunucu Ayarlarına gidin:

Ve şimdi Bulut Kodu altında Ayarlar’ı seçin:

Orada iki klasör bulacaksınız: Bulut ve Genel.

Cloud, Back4app sunucularından çalışan NodeJS kodu olan Cloud Code’u dağıtmak içindir, uygulamalarınız için tüm ağır işlem yükünü yapar ve cep telefonlarında pil ve veri planından tasarruf etmek gibi birçok avantaj sağlar, çünkü cep telefonunun kendisi aslında çok fazla işlem yapmak veya tam bir veri yükü almak zorunda kalmaz, yalnızca Back4app sunucuları tarafından sağlanan işlemin nihai sonucuna güvenir.

Genel, HTML, CSS ve statik Javascript dosyaları gibi statik içeriği dağıtmak içindir. Şu anda ilgilendiğimiz klasör budur.
Bu klasörü seçin ve yukarıdaki +ADD düğmesine tıklayın ve ilk bölümde web sitesinden indirdiğiniz şablonumuz için HTML ve CSS dosyalarını ekleyin.

Bu dosyaları seçtikten sonra Deploy düğmesine basın ve dosyaları Public klasöründe görmelisiniz:

Ve şimdi biraz test zamanı.
Web Hosting’de belirlediğiniz URL’ye tıklarsanız, parlak yeni web sitenizin artık tamamen ücretsiz olarak çalıştığını görmelisiniz:

4. Biraz Zeka Getirin

Pırıl pırıl yeni bir web sitesi hazır ve çalışıyor ve bu ne kadar sürdü? 2 dakika mı? Bunu bedavaya getirmek güzel, internet!
Ve size tamamen güvenli olduğunu ve HTTPS’nin zaten yerleşik olduğunu söylemiş miydim? Çünkü Back4app’in ücretsiz olarak vereceği sertifikalar için para ödemeyeceğiz, değil mi?

Şimdi buna biraz zeka katmanın zamanı geldi. Ve bunu sadece 2 dakika daha sürdürebilirsek nasıl olur? Akıllı ve hızlı olmasını seviyorum.

En sevdiğiniz IDE çeşidini başlatın ve biraz Javascript alalım. Benim için Visual Studio Code, lütfen. Ve yanında bir espresso.

Şu andan itibaren sadece Javascript SDK’ya ve daha sonra sadece GraphQL’e odaklanacağım.

Parse.js adında yeni bir dosya oluşturun ve hazırız.

5. Parse Çerçevesini Ekleme

(Yalnızca Javascript SDK)

Parse, çerçevelerini dağıtmayı gerçekten çok kolay hale getiriyor. İlk olarak, index.html dosyanızın Head bölümüne aşağıdaki satırı ekleyerek Javascript çerçevesini örneklemeniz gerekir:

<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>

Artık Parse (küçültülmüş) çerçevesinin tamamına Javascript kodunuzdan erişilebilir ve buradan her şeyi kullanabiliriz.

6. Parse motorlarını çalıştırma

(Yalnızca Javascript SDK)

Artık Parse çerçevesine zaten erişimimiz var, ancak gaza basmadan önce onu çalıştırmamız gerekiyor.

Uygulamamızı Parse’a tanımlamamız gerekiyor ve bunu yapmanın yolu, uygulamamız için AppId ve Javascript Key ile birlikte uygulamamıza Back4app’ta çalıştığımızı söyleyen sunucu URL’sini ayarlamaktır.

Bunu yapmak için Sunucu Ayarları’na gidin:

ve Çekirdek Ayarları altındaki Ayarlar’da

altında ihtiyacınız olan tüm bilgileri bulacaksınız:

Bu bilgileri kopyalayın ve Parse.js dosyamıza aşağıdaki gibi yapıştıralım:

Parse.initialize("YourAppIdHere", "YourJavascriptKeyHere");
Parse.serverURL = 'YourParseAPIAddressHere'

Parse.initialize("5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH", "SchM9sm5W6TpPBr8zyHOwOYAGyPTYf66qxSUCsvE");
Parse.serverURL = 'https://parseapi.back4app.com/';

Artık uygulamamızın Parse’a tam erişimi var ve Parse ayarlarımızı biliyor, böylece çalışabilir.
Greenlight. Tam gaz!

7. Ama sadece birkaç kullanıcım var…

Uygulamanızın kullanıcıların kaydolmasına ihtiyacı yoksa ve onları manuel olarak yönetmeyi tercih ediyorsanız, Parse Dashboard’un Veritabanı Tarayıcısında Satır Ekle düğmesine basarak Kullanıcı sınıfını alabilirsiniz:

Ancak gerçekçi olmak gerekirse, uygulamanız muhtemelen zaman içinde büyüyecektir ve kullanıcıların sisteme kendilerinin kayıt olabilmeleri yardımcı olacaktır.

8. Kullanıcı yok mu? Sorun değil! signUp() kurtarmaya geliyor!

(Yalnızca Javascript SDK)

İlk başta, uygulamanızda hiç kullanıcı olmayacak, bu nedenle kullanıcıların kaydolması için bir yol sağlamalıyız.

Web sitemizde zaten bunun için güzel bir form var. Hadi bunu çalıştıralım, olur mu?
Peki ya size bunu 12 satırdan daha az kodla yapabileceğimizi söylesem? Kulağa daha iyi geliyor mu?

Parse.User sınıfının ayarlayabileceğiniz üç temel özelliği vardır. İsterseniz veya ihtiyaç duyarsanız daha fazlasını ayarlayabilirsiniz, ancak bu üçü kolaylık sağlamak için zaten oluşturulmuştur ve bu üçünden ikisi zorunludur:

• kullanıcı adı (zorunlu)
• şifre (zorunlu)
• e-posta (isteğe bağlı)

Sadece işlemi kontrol etmek için veritabanımıza bir test kullanıcısı ekleyelim. Bunu Parse.js dosyanıza ekleyin:

function singnUp(){
    var user = new Parse.User();
    user.set("username", "alex"); // kullanıcı adı formundaki değeri kullanıcı adı özelliğine ayarlar
    user.set("password", "abc123"); // Password formundaki değeri password özelliğine ayarlar
    user.set("email", "[email protected]"); // E-posta formundaki değeri e-posta özelliğine ayarlar
    dene {
        user.signUp(); // Her şey çalıştı ve kullanıcı oturum açtı
    } catch (hata) {
        alert("Hata: " + error.code + " " + error.message); // Oops... yanlış bir şey oldu
    }
}

Bu, sabit kodlanmış değerlerle yeni bir kullanıcı oluşturacaktır:

kullanıcı adı: alexk
parola: abc123
e-posta: [email protected]

Bu makalenin ilerleyen bölümlerinde bu değerleri formdan nasıl alacağımızı öğreneceğiz, ancak bu test kullanıcısı için bu yeterli olacaktır.

Şimdi index.html dosyanızı açın ve bu satırı arayın:

<input type="submit" class="button" value="Kaydol">

Ve şu şekilde değiştirin:

<input type="submit" class="button" value="Kaydol" onclick="singnUp()">

Temel olarak burada yaptığımız şey, az önce kodladığımız signUp işlevini çalıştırmak için bir onClick olayı ayarlamaktır.

Her iki dosyayı da yukarıda öğrendiğiniz gibi Cloud Code Public klasörüne (yeni Parse.js dosyası ve değiştirilmiş index.html dosyası) dağıtın ve web sitesini tarayıcınızda yeniden açın.

9. Test… Test… 123…

Biraz test zamanı, bebeğim! Bırakın kod kendi kendine konuşsun!

Kaydol bölümüne gidin ve gerçek veri aktarmadığımız, yalnızca kodlanmış bir test yaptığımız için hiçbir şey doldurmanıza gerek yok ve Kaydol düğmesine tıklayın:

ve eğer her şey yolunda gittiyse, Parse Dashboard’unuzda artık bu kullanıcıyı ve kullanıcı için yeni bir Session’ı görmelisiniz:

10. Yaşasın!!! Şimdi onu daha akıllı hale getirelim…

(Javascript SDK & GraphQL)

Artık kullanıcıları kaydedebildiğimize göre, tam operasyonel signUp fonksiyonunu yapalım.
Veritabanına eklemek için formun değerlerini okumamız gerekecek ve bunun için javascript yöntemini kullanacağız:

document.getElementById("idOfTheInput").value

Bu makaleyi yazarken kullandığımız şablonda küçük bir sorun olduğunu fark ettim. Doğru değerleri alabilmemiz için ID’lerin benzersiz olması gerekir ve şablonumuzda muhtemelen oluşturucunun kodu kopyalayıp yapıştırması nedeniyle birkaç tekrar vardır, bu yüzden bunu değiştirelim.

HTML dosyanıza gidin ve sign-up-htm bölümünde aşağıdaki satırları bulun:

<input id="user" type="text" class="input">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="text" class="input">

Bu satırlar için id niteliğinin kod üzerinde birkaç kez tekrarlandığına dikkat edin. Bunu benzersiz olanlar için değiştirelim:

<input id="kullanıcı adı" type="text" class="input">
<input id="password" type="password" class="input" data-type="password">
<input id="passwordverify" type="password" class="input" data-type="password">
<input id="email" type="text" class="input">

    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        alert ('Parolalar eşleşmiyor')
        geri dön;
    }

    user.set("username", "alexk"); // kullanıcı adı formundaki değeri kullanıcı adı özelliğine ayarlar
    user.set("password", "abc123"); // Password formundaki değeri password özelliğine ayarlar
    user.set("email", "[email protected]"); // E-posta formundaki değeri e-posta özelliğine ayarlar

    user.set("username", alexl); // Kullanıcı adı formundaki değeri kullanıcı adı özelliğine ayarlar
    user.set("password", password); // Parola formundaki değeri parola özelliğine ayarlar
    user.set("email", email); // E-posta formundaki değeri e-posta özelliğine ayarlar

11. Tekrar test zamanı. Şimdi gerçekten.

12. Giriş zamanı, bebeğim!

(Yalnızca Javascript SDK)

function logIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;
}

Parse.User.logIn(user, pass).then(() => {
    // Yaşasın! Kullanıcı giriş yaptı
    alert('Yaşasın! Kullanıcı giriş yaptı!');
});

Parse.User.logIn(user, pass).then(() => {
    // Yaşasın! Kullanıcı giriş yaptı
    alert('Yaşasın! Kullanıcı giriş yaptı!');
}).catch(function(error){
    // Oops... yanlış bir şey oldu
    alert("Hata: " + error.code + " " + error.message);
});

13. Ve noooow….

14. Javascript SDK bölümünün sonucu

15. GraphQL’in içeri girmesine izin verin

Javascript SDK ile heyecanlandıysanız, şimdi biraz patlamış mısır alın çünkü gösteri başlamak üzere.

Back4app artık GraphQL’i destekliyor, yani en son ve en büyük trend moda teknolojisine ayak uyduruyoruz ve şimdi Parse her zamankinden daha akıllı!

Yapacağımız sorguları oluşturmak için otomatik tamamlama (evet!!!) ile tamamen çalışan bir GraphQL Playground’a güvenebilirsiniz.

Ayrıca, tam olarak ne almak istediğimizi belirleyebiliriz, bu da daha küçük yükler anlamına gelir, veri dağıtımınızı son kullanıcılara daha hızlı hale getirir ve API’lerin zaman içinde bakımı çok daha kolaydır.

Tamam. Bu kadar konuşma yeter. Bu kadar konuşma yeter. GraphQL o kadar harika ki kendimi durdurmazsam, nasıl kullanılacağını göstermeden üzerine yazmaya devam edeceğim.

16. Neye ihtiyacımız olacak

(Yalnızca GraphQL)

Parse sürümünüzü en az 3.5.0 olarak değiştirmediyseniz (Back4app’de 3.6.0 GraphQL’i destekleyen en eski sürümdür), bu makalenin 2. bölümüne kadar gidin ve bunu yapın.

Modüllerini kullanabilmemiz için NPM ‘nin kurulu olmasına ihtiyacımız olacak.
Bu modüller NodeJS’de yazılmıştır ve başlangıçta arka uç programlama için tasarlanmıştır, bu yüzden bunu değiştirmemiz gerekecek.
NPM’nin nasıl kurulacağını göstermeyeceğim, çünkü yukarıdaki web sitesindeki öğretici bunu oldukça kapsamlı bir şekilde ele alıyor.
Yine de bunları nasıl kullanacağınızı göstereceğim, böylece kodlama yaparken çok fazla çaba harcamaktan kurtulabiliriz.

Hazır mısınız? O halde bu araçları kurun, kemerlerinizi bağlayın ve başlayalım!

17. GraphQL istemcisini ve Browserify’ı yükleme

(Yalnızca GraphQL)

GraphQL’in kullanabileceğiniz birkaç istemcisi vardır. Birini seçemediğim için (çünkü hepsi oldukça iyi), bu ilk derste yapılandırması en kolay olanı seçmeye ve diğerlerini sonraki derslerde kullanmaya karar verdim, böylece onları karşılaştırabiliriz.

Kurulumu en kolay olanın, bir terminal açıp Parse.js’nin bulunduğu klasöre giderek ve yazarak kurabileceğiniz graphql-request olduğunu buldum:

npm install graphql-request

Yükleme başarılı olursa, buna benzer bir şeye sahip olmalısınız:

Browserify adında bir araç da yükleyebiliriz.
Browserify, ön uçta (tarayıcınızda) kullanılacak NPM modüllerinin geçişini yapar. NPM modüllerinin başlangıçta arka uç kullanımı için tasarlandığını söylediğimi hatırlıyor musunuz? Bu araç, minimum çaba ile ön uçta kullanılabilir hale getirecektir.
Her yerden kullanabilmek için global olarak (-g tuşu) yüklemeyi seviyorum:

npm install -g browserify

Ve yine her şey yolunda giderse, böyle bir şeye sahip olmalısınız:

Artık GraphQL istemcimiz kurulu ve onu ön uç kullanımına dönüştürebiliriz. Bunu yapmak 2 dakika sürdü, bu yüzden hızlı ilerliyoruz.

18. Bu tam olarak nasıl çalışacak?

(Sadece GraphQL)

Temel olarak, şunları yapacağız:

1. NPM modüllerini kullanarak biraz NodeJS kodu yazın
2. Browserify kullanarak ön uç uyumlu koda dönüştürün
3. Bu kodu dışa aktarın, böylece diğer dosyalardan çağırabiliriz
4. Bu kodu Javascript kodumuzdan çağırın

Browserify için komut şöyledir:

browserify inputFile.js -o outputFile.js

outputFile.js ön uç uyumlu kodumuzu içerecektir, bu yüzden işleri hızlandıralım, inputFile.js dosyamızı oluşturalım ve favori IDE’mizde açalım.

19. Bazı NodeJS kodları

(Yalnızca GraphQL)

NPM modülümüzü gerekli kılarak kodumuza ekleyerek başlayacağız.

const { GraphQLClient } = require('graphql-request');

Ve fonksiyonumuzu çağırmak için kullanacağımız isimle (bu durumda signUp) global bir dışa aktarım oluşturun:

global.singUp = function() {

}

Bununla birlikte, singUp fonksiyonumuza kod eklemeye başlayabiliriz.
GraphQL Playground’unuzdan alabileceğiniz uç nokta URL’mizi ekleyerek başlayalım:

const endpoint = 'https://parseapi.back4app.com/graphql';

Kimlik doğrulaması yapmamız gerektiğinden, GraphQL istemcimizi bu URL’yi kimlik doğrulama üstbilgileriyle birlikte bir parametre olarak geçirerek örneklendirin: X-Parse-Application-ID ve X-Parse-Javascript-Key. Bunlar, 6. adımda nasıl alınacağını öğrendiğiniz AppId ve Javascript Anahtarına sahip olacaktır.

const { GraphQLClient } = require('graphql-request')

global.singUp = function() {
    constendpoint='https://parseapi.back4app.com/graphql';
    
    constgraphQLClient=newGraphQLClient(endpoint, {
        headers: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Javascript-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    });
}

Şimdi bazı GraphQL sorguları ve mutasyonları yazmamızın zamanı geldi.

20. Sorgular ve Mutasyonlar, Jenerik veya Spesifik

(Yalnızca GraphQL)

Bu belgenin yazıldığı sırada Back4app ve Parse Sorgular ve Mutasyonlarla çalışmaktadır. Zaman içinde yeni yöntemler geliştirilebilir, ancak bu ikisini tartışalım.

Sorgular sadece sunucudan veri alırken kullanılır.

Mutasyonlar, sunucudaki verileri değiştirdiğinizde kullanılır, bu da sonuçları alabilir veya alamaz.

Yani, eğer sadece bilgi tüketiyorsanız, bir Sorgu kullanmalısınız ve eğer bilgi ekliyor ya da değiştiriyorsanız, bir Mutasyon kullanmalısınız.

Basit bir Sorgu ile başlayacağız ve bundan sonra mutasyonlara geçeceğiz.

Bundan bahsederken, GraphQL’de her birinin kendi avantajları ve dezavantajları olan Spesifik ve Jenerik yöntemlerimiz var.

Generic metotlar herhangi bir sınıfta işlem yapmanıza izin verir. Örneğin jenerik bir sorgu yapıyorsanız, istediğiniz sınıfı belirterek verileri alabilirsiniz. Bu harika bir şeydir çünkü neredeyse her şey için aynı sözdizimini kullanabilirsiniz ve Mutasyonları kullanırken, ilk başta var olmayan sınıflar ve nesneler oluşturabilirsiniz.

Dezavantajı ise, Generic metotlar için Şemalarınız olmadığından, Otomatik Tamamlama’ya güvenemezsiniz, bu nedenle ne yaptığınızı bilmeniz gerekir.
Genel yöntemlere örnekler get ve find.
Jenerik Mutasyonlar güncelleme, silme veya oluşturmadır.

Öte yandan, belirli yöntemlerin Şemaları vardır, bu nedenle yalnızca önceden var olan Sınıflar tarafından kullanılabilirler. Bu bir dezavantajdır.
Ancak Spesifik yöntemleri kullanmak, Otomatik Tamamlama’ya güvenmemize ve verilerimizi almak için çok daha güçlü kaynaklara sahip olmamıza izin vererek başka bir harika seviye getiriyor.
Özel sorgular get ve find ile başlar ve hemen yanında sınıf adı yer alır: findPerson, getPerson vb.
Belirli mutasyonlar create, update ve delete ile başlar ve hemen yanında sınıf adı bulunur: createPerson, getPerson, deletePerson:

21. Sorgular

(Yalnızca GraphQL)

GraphQL ile oynamak için basit bir Sorgu yapalım.
Parse Dashboard’unuzda API Console’a, ardından GraphQL Console’a gidin.
Bir Kullanıcı bulmak için Özel sorguyu kullanarak aşağıdaki sorguyu yazın. Herhangi bir noktada, yazarken Otomatik Tamamlama’ya sahip olmak için CTRL + Boşluk Çubuğu (Windows) veya OPTION + Boşluk Çubuğu (Mac) tuşlarına basabilirsiniz.

Sorgular, seçtiğiniz Parse sürümüne bağlı olarak değişebilir:

Parse 3.7.2:

sorgu {
    nesneler{
        find_User{
            sonuçlar{
                kullanıcı adı
                e-posta
            }
        }
    }
}

Parse 3.8:

sorgu {
  kullanıcılar{
      sonuçlar{
          kullanıcı adı
          e-posta
      }
  }
}

Parse 3.9:

sorgu {
  kullanıcılar{
      sonuçlar{
          kullanıcı adı
          e-posta
      }
  }
}

Oynat butonuna tıklayın:

Javascript SDK ile oluşturduğumuz Kullanıcıları görmelisiniz. Bu kısmı atladıysanız, bölüm 7’de açıklandığı gibi birkaç Kullanıcı ekleyin ve Sorgunuzu tekrar çalıştırmayı deneyin. Bunun gibi sonuçlar görmelisiniz:

Tüm kullanıcıları bulmak, kullanıcı adlarını ve e-postalarını almak için find_User özel sorgusunu kullandık. Tam olarak ne almak istediğimizi belirttik, daha küçük bir yük oluşturduk ve süreç boyunca hangi işlemlerin mevcut olduğunu bilmemize yardımcı olması için Otomatik Tamamlama’ya güvendik.

Harika, değil mi?

Hadi daha iyisini yapalım!

22. Mutasyonlar

(Yalnızca GraphQL)

Tıpkı Javascript’teki signUp yöntemimiz gibi çalışması için özel signUp yöntemiyle GraphQL mutasyonumuzu oluşturalım.

Mutasyon bu şekilde olacaktır:

Parse 3.7.2

mutasyon{
  kullanıcılar{
    signUp(fields: {
      kullanıcı adı: "john"
      şifre: "123456"
      e-posta: "[email protected]"
    }){
      objectId
    }
  }
}

Parse 3.8

mutasyon SignUp{
  signUp(fields:{
    kullanıcı adı: "somefolk"
    şifre: "somepassword"
  }){
    objectId
    oluşturulduAt
  }
}

Parse 3.9

mutasyon SignUp{
  signUp(fields:{
    kullanıcı adı: "somefolk"
    şifre: "somepassword"
  }){
    id
    oluşturulduAt
    sessionToken
  }
}

Çalıştırın ve kullanıcının Veritabanı Tarayıcısında Kullanıcı sınıfına eklendiğini kontrol edin.

Yaşasın! Şimdi kodumuz üzerinde çalışmasını sağlayalım.

23. GraphQL ile kendi signUp yöntemimiz

(Yalnızca GraphQL)

Javascript signUp yöntemimiz için, GraphQL Playground’da kullandığımızla neredeyse aynı olan bir Mutasyon kullanacağız, ancak orada sabit kodlanmış değerler kullanırken, burada kullanıcının formlarda yazdığı değerleri varsaymak için değişkenler ayarlamalıyız.

Kullandığımız GraphQL istemcisinde değişkenleri kullanmak için öncelikle metot üzerinde değişken isimlerini ve tiplerini belirtmeliyiz. SignUp metodumuz için 3 değişken aktaracağız: kullanıcı adı, şifre ve e-posta, bunların hepsi string, bu yüzden metodumuz singUp olacak:

const signUpMutation = /* GraphQL */
`
mutation signUp($kullanıcıadı: String! $şifre: String! $e-posta: String!){
    
}
`

Daha sonra bu değişkenleri create_User metodumuzun içinde aşağıdaki gibi kullanmamız gerekir:

Parse 3.7.2

        
        kullanıcılar{
            signUp(fields: {
              kullanıcı adı: $kullanıcıadı
              şifre: $password
              e-posta: $email
            }){
              objectId
            }
        }

Parse 3.8

        
        kullanıcılar{
            signUp(fields: {
              kullanıcı adı: $kullanıcıadı
              şifre: $password
              e-posta: $email
            }){
              objectId
            }
        }

Parse 3.9

        
        kullanıcılar{
            signUp(fields: {
              kullanıcı adı: $kullanıcıadı
              şifre: $password
              e-posta: $email
            }){
              id
            }
        }

Ve son olarak, Mutasyon ile birlikte bir parametre olarak geçirilecek olan farklı bir JSON nesnesinde bunun için değerler ayarlayın:

const değişkenler = {
        kullanıcıadı: formAdı,
        şifre: formPassword,
        e-posta: formEmail
    }

Şimdi, formdan alacağım ve singUp fonksiyonumuza aktaracağım formUsername, form Password ve formEmail olmak üzere 3 değerim olduğuna dikkat edin, bu yüzden bunları fonksiyon parametrelerinde belirtmeliyim:

global.singUp = function(formUsername, formPassword, formEmail)

Ve hazırız!

İşte tam yöntem:

const { GraphQLClient } = require('graphql-request')

global.signUp = function(formUsername, formPassword, formEmail) { 
 
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        headers: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const signUpMutation = /* GraphQL */
    `
    mutation signUp($kullanıcıadı: String! $şifre: String! $e-posta: String!){
        users{
            signUp(fields: {
                kullanıcı adı: $kullanıcıadı
                şifre: $password
                e-posta: $email
            }){
                objectId
            }
        }
    }
    `

    const değişkenler = {
        kullanıcıadı: formAdı,
        şifre: formPassword,
        e-posta: formEmail
    }

    const veri = graphQLClient.request(signUpMutation, değişkenler).then(veri => {
        alert('Yaşasın! Kullanıcı oluşturuldu!')
    }).catch(hata => {
        alert('Hata: ' + error.code + ' ' + error.message)
    })
    
}

24. Ve madem buradayız… Giriş Yap..

(Yalnızca GraphQL)

singUp mutasyonunun her adımını zaten açıkladığım için, tamamen aynı ilkeleri izleyen ancak özel logIn mutasyonunu kullanan logIn yönteminin kodunu bırakacağım:

mutation logIn($kullanıcıadı: String! $parola: String!){
  kullanıcılar{
    logIn(username: $kullanıcıadı password: $parola){
    	sessionToken  
    }
  }
}

Ve tam kod şöyle olacaktır:

global.logIn = function(formUsername, formPassword){
    
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        headers: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const logInMutation = /* GraphQL */
    `
    mutation logIn($kullanıcıadı: String! $parola: String!){
        kullanıcılar{
            logIn(username: $kullanıcıadı password: $parola){
                sessionToken  
            }
        }
    }
    `

    const değişkenlerLogIn = {
        kullanıcıadı: formAdı,
        şifre: formPassword
    }

    const veri = graphQLClient.request(logInMutation, variablesLogIn).then(veri => {
        alert('Yaşasın! Kullanıcı giriş yaptı!')
    }).catch(hata => {
        alert('Hata :' + error.code + ' ' + error.message)
    })
}

25. Browserifying (ne diyorsunuz?)

(Sadece GraphQL)

Bölüm 18’de size Broserify (diğer bir deyişle NPM modüllerimizi ön uç uyumlu hale getirme) komutunu verdiğimi hatırlıyor musunuz?
Eğer hatırlamıyorsanız, işte yine burada:

browserify inputFile.js -o outputFile.js

Bunu inputFile.js dosyamız üzerinde çalıştıralım ve graphql.js adlı bir dosyaya çıktı verelim:

browserify inputFile.js -o graphql.js

Eğer her şey başarılı olursa, hiç çıktı almamamız gerekir:

Ne kadar kolaydı, değil mi?

26. HTML üzerindeki parlak yeni kodumuz dahil

(Yalnızca GraphQL)

HTML dosyamızın head etiketinin içine, oluşturulan graphql.js dosyasını ekleyin.
Hazır oradayken, Parse.js adında yeni bir boş dosya oluşturun ve onu da dahil edin. GraphQL yöntemlerimizi çağırmak için bunu kullanacağız:

<script src="./graphql.js"></script>
<scriptsrc="./Parse.js"></script>

Dikkat! Eğitimin Javascript bölümünü atladıysanız, lütfen bölüm 10’a geri dönün ve HTML etiketlerinin kimliklerini orada açıklandığı gibi değiştirin. Formlardan değerleri almak için bu kısmın çalışmasına ihtiyacımız olacak.

27. Bana biraz hareket gösterin!

(Sadece GraphQL)

Buraya kadar çok ilerleme kaydettik, değil mi? Hadi biraz harekete geçmek için biraz kod ekleyelim!

Yine, Javascript bölümünü atladıysanız, bölüm 10’a geri dönün ve getElementById yöntemini kullanarak formlardan değerleri okumak için Javascript’i nasıl kullandığımıza bir göz atın:

document.getElementById("idOfTheInput").value

Parse.js dosyamızı açalım ve logIn ve singUp olmak üzere iki metodumuzu buraya ekleyelim:

function parseSignUp(){

}

function parseLogIn(){

}

Ayrıca, yine 10. bölümde açıklanan bazı parola eşitliği doğrulama kodlarıyla birlikte formlardan değerleri okumak için gerekli kodu da ekleyelim:

function parseSingnUp(){
    var kullanıcı adı = document.getElementById("kullanıcı adı").value;
    var şifre = document.getElementById("şifre").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        alert ('Parolalar eşleşmiyor')
        geri dön;
    }

}

function parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

}

Ancak bu kez, Javascript SDK’sını kullanmak yerine, signUp ve logIn yöntemlerimizi graphql.js dosyamızdan çağıralım. Bu durumda tam kod şöyle olacaktır:

function parseSingnUp(){
    var kullanıcı adı = document.getElementById("kullanıcı adı").value;
    var şifre = document.getElementById("şifre").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        alert ('Parolalar eşleşmiyor')
        geri dön;
    }

    signUp(kullanıcı adı, şifre, e-posta)
}

function parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

    logIn(kullanıcı, pass)
}

Bunları HTML dosyasındaki onClick olaylarında çağırmayı da unutmayın:

Her şeyi bölüm 3’te açıklandığı gibi dağıtın ve artık bazı şeyler için hazırız…

28. Test

(Yalnızca GraphQL)

Web sitenize erişin ve Kaydol bölümüne gidin. Formu doldurun ve Kaydol düğmesine basın:

Her şey işe yaradıysa, yeni kullanıcınızı Kullanıcılar tablosunda görmelisiniz:

Şimdi Oturum Aç bölümüne geri dönün ve bu kullanıcıyla oturum açmayı deneyin:

Her şey beklendiği gibi çalıştıysa, şimdi oturum açmış olmalısınız:

29. GraphQL bölümünün sonucu

Vay be! Bunun çok fazla bilgi olduğunu biliyorum, ancak artık bir Oturum Açma ve Giriş ustasısınız! Tebrikler!

GraphQL ilk bakışta biraz daha zahmetli görünebilir, kullanılabilmesi için birkaç işlem daha gerekir, ancak inanın bana: geliştirme sürecinize alıştığınızda, çocuk oyuncağı olacak!

Artık çok daha organik, bakımı daha kolay bir kodumuz var, bunu Autocomplete yardımıyla yaptık ve kodlamaya başlamadan önce bile GraphQL Playground’da yanıtları test edip doğrulayabildik. Bu çok önemli çünkü kod üretmeden önce sadece tüm sorgularınızı yazıp test etmekle kalmıyor, aynı zamanda artık bir ekip için geliştirmeyi bölebiliyorsunuz: birkaç geliştirici GraphQL sorgularını yazabilirken diğerleri Javascript kodunu yazarak tüm süreci hızlandırabilir.

Bundan daha da iyisi, bundan sonra kodunuzda herhangi bir şeyi değiştirmeniz gerekirse, sadece sorguları değiştirmeniz yeterlidir ve gitmeye hazırsınız.

Daha iyi olabilir mi? Elbette olabilir!

Aynı sözdizimini kullanarak GraphQL sorgularını her platform için yeniden kullanabilirsiniz. Tüm dillere benzer. Artık kendinize “aşina olmadığım bu dilde bunu nasıl yaparım?” diye sormanıza gerek yok. Aynı sorgular, farklı diller.

Umarım geliştirme sürecinizde GraphQL’e bir şans verirsiniz. Ne kadar çok şeye ulaşabileceğinize şaşıracağınıza eminim!