React Native, Expo ve Back4App ile Yapılacaklar Listesi Uygulaması Nasıl Yapılır?

React Native, mobil geliştirmede kullanılan en popüler framework’lerden biridir. Facebook tarafından Javascript tabanlı olarak oluşturulmuştur. Yerel platform özelliklerine sahip iOS veya Android’e uygulamalar oluşturmak için kullanılabilir.

Expo, geliştirme süresini ve testleri hızlandırmanıza yardımcı olan bir araçtır.

Bu makale, bir React Native uygulamasını Back4App ile nasıl entegre edebileceğinizi açıklamaktadır. Bu adım adım öğreticiyi tamamladıktan sonra, Yapılacaklar Listesini işlemek için bir proje oluşturmuş olacaksınız.

Back4App’ı ilk kez mi kullanıyorsunuz? Eğer öyleyse, Kaydolma işlemini yapmanız gerekir.

Isınma

Expo’yu Yapılandırın

React Native talimatlarına göre, aşağıdaki komutu kullanarak Node 10+ ve Expo CLI’yi yüklemeniz gerekir:

npm install -g expo-cli

Daha fazla bilgi için: https://facebook.github.io/react-native/docs/getting-started.html

Başlangıç projesini indirin

ToDoListApp şablon projesini indirmek için aşağıdaki komutları terminalinizde çalıştırın:

wget "https://github.com/templates-back4app/react-native-todoapp/archive/template.zip" -O template.zip; unzip template.zip; rm template.zip && cd react-native-todoapp && npm install

Not: Back4App uygulamanızın anahtarlarını değiştirmeniz gerektiğini unutmayın. constans/Keys.js dosyasını açın ve aşağıdaki tuşlara yapıştırın.

Uygulamanızın Diyagramı

Yukarıda bağlantısı verilen talimatları izlediyseniz, bu akış diyagramını görmeniz gerekir:

diagramreactnative

Yapılacaklar Listesi Uygulamasını Başlatın

Adım 1 – Giriş Sayfasını Oluşturun

Kullanıcıları uygulamamıza giriş yapmak için, hesaplarına erişmelerini sağlamak için yöntemimizi kullanın:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
onLogin = async() =>{
  izin ver  
     kullanıcıadı =(this.state.kullanıcıadı).trim(),
     password =(this.state.password).trim();

  if (kullanıcı adı === "" || şifre === "" ) {
    this.setState(() => ({ nameError: `Alanlarıdoğru şekilde  doldurun.` }));
   } else {
    dene {
       await Parse.User.logIn(username.toString(), password.toString());
      // this.submitAndClear();
      this.props.navigation.navigate('HomeStack');       
     } catch (hata) { 
      this.setState(() => ({ nameError: error.message }));
      return (hata)
     }
   }
 }

Kodun tamamını buradan kontrol edin: https://github.com/templates-back4app/react-native-todoapp/blob/login-page/screens/LogInScreen.js

Adım 2 – Kayıt Sayfası

Bir önceki adımı tamamladıktan sonra, kullanıcılardan uygulamamıza kaydolmalarını istemelisiniz. Aşağıdaki kod tipik bir kayıt işlemini göstermektedir:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
onSignUp = async() => {

  izin ver  
     kullanıcıadı = this.state.kullanıcıadı,
     email = this.state.email,
     şifre = this.state.şifre;

  if (kullanıcıadı.trim() === "" || kullanıcıadı === tanımsız || email.trim() === "" || email === undefined || password.trim() === "" || password === undefined ) {
    this.setState(() => ({ nameError: `Alanlarıdoğru şekilde  doldurun.`}));  
   } else {
    dene {
       Parse.User.logOut();
      let user = new Parse.User();
       user.set("kullanıcı adı", kullanıcı adı);
       user.set("email", email);
       user.set("şifre", şifre);
      const result = await user.signUp();
      
       AsyncStorage.setItem('sessionToken', result.getSessionToken());
       AsyncStorage.setItem('username', result.getUsername());

      this.submitAndClear();

      this.navigateToPage('HomeStack');           
     } catch (hata) {
       console.log(hata)
        this.setState(() => ({ nameError: error.message }));
     }
   }
 }

Kodun tamamını buradan kontrol edin: https://github.com/templates-back4app/react-native-todoapp/blob/signup-page/screens/SignUpScreen.js

Adım 3 – Şifre Sıfırlama Sayfasını Kurun

Bir kimlik doğrulama akışımız olduğu sürece, kullanıcıların parolalarını unutabileceğini düşünün. Parse Server, kullanıcı parolalarının güvenli bir şekilde sıfırlanmasını sağlar. Kullanıcıya e-posta adresini soran bir işlev yapılandırın:

1
2
3
4
5
6
7
8
9
resetPassword = () => {
   Parse.User.requestPasswordReset(this.state.email)
   .then(() => {
    this._alert('Success', 'An email was sent to your address.', 'Log In', 'LogInStack');
    this.submitAndClear();
   }).catch((hata) => {
    this._alert('Error', error.message, 'Log In', 'LogInStack');
   });
 }

Kodun tamamını buradan kontrol edin: https://github.com/templates-back4app/react-native-todoapp/blob/resetpassword-page/screens/RestorePasswordScreen.js

Adım 4 – Yapılacaklar Listesi Sayfası

Bir listeden öğe oluşturmak, okumak, güncellemek ve silmek için Düzeni ve işlevleri yapılandırın.

Adım 4.1 – Öğe oluşturma

Bir öğeyi Parse Cloud’da saklamak için kaydet işlevini kullanın. Bu, uygulamanızda yeni bir nesne oluşturmanızı mümkün kılar. Parse üzerindeki uygulamanızda Veri Tarayıcı’ya bakın:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
createItem = () => {
  let item = this.state.item;

  if (item === "" || item === undefined){
    this.setState(() => ({ nameError: `Alanlarıdoğru şekilde  doldurun.` }));
   } else {
    const Todo = Parse.Object.extend("Todo");
    const todo = new Todo();

     todo.set("görev", this.state.item);
     todo.set("userId", );
    
     todo.save().then(object => {
      this.readAllItems();
      this.setState({item:''})
     }).catch(error=> {alert(error)})
   }
 }

Adım 4.2 – Tüm nesnelerin okunması

Bu fonksiyon birçok kez çağrılır çünkü bir ekranı başlatmak, bir nesneyi güncellemek veya silmek için kullanılır. Veriler aşağıdaki kod kullanılarak alınabilir:

1
2
3
4
5
6
7
8
readAllItems = async() => {
  const idUser = await Parse.User.currentAsync();
  const query = new Parse.Query("Todo");
   query.exists("task");
   query.equalTo('userId', idUser);
  const resultQuery = await query.find();
  this.setState({results:resultQuery});
 }

Adım 4.3 – Bir öğeyi güncelleyin

Bir nesne oluşturulduktan sonra, gelecekte onu güncellemenin bir yolu olmalıdır. Çok basit, tek yapmanız gereken bu öğeyi almak ve bu kodu kullanarak kaydetme yöntemini çağırmak:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
updateItem = () => {
 const query = new Parse.Query("Todo");
   query.get(this.state.idObject).then(object => {
     object.set("task", this.state.updateValueDialog);
     object.save().then(objUpdate => {
      this.setState({updateValueDialog:'', dialogVisible: false})
      this.readAllItems();
     });
   });
}

Adım 4.4 – Bir öğeyi silin

Bir öğe listesi ile çalışmak, kullanıcıların nesnelerini kendi başlarına silmelerine izin vermeyi gerektirir.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
deleteIten = async() => {
  const query = new Parse.Query("Todo");
  const object = await query.get(this.state.idObject);
  try{
     object.destroy();
    this.getAllData();
   } catch (e){
     alert(e)
   }
 }

Kodun tamamını buradan kontrol edin: https://github.com/templates-back4app/react-native-todoapp/blob/home-page/screens/HomeScreen.js

Son Sözler

Yapılacaklar listesi uygulaması için hepsi bu kadar! Not, ekranlarınızı stilize etmek isteyebilirsiniz. Bu nedenle, aşağıdaki bağlantıyı takip ederek tüm depoyu kontrol etmeniz önerilir:

https://github.com/templates-back4app/react-native-todoapp

Herhangi bir yardıma ihtiyacınız olursa veya bir işlev çalışmazsa, lütfen sohbet yoluyla ekibimizle iletişime geçin!

React Native Nedir?

Mobil geliştirme çerçeveleri söz konusu olduğunda, React Native en iyi mobil geliştirme çerçeveleri arasındadır. Facebook tarafından geliştirilmiştir. Yerel platformla aynı yeteneklere sahip iOS veya Android için Uygulamalar oluşturmaya yardımcı olur.

Expo nedir?

Mobil geliştirme bazen zor olabilir. Bir geliştirici olarak zamanınızı boşa harcayabilecek basit bir kodlama hatasıyla karşılaşabilirsiniz. Ayrıca uygulamanızı yayınlamadan önce oluşturduktan sonra test etmeniz gerekir. Expo, hem geliştirmenizi hem de test hızınızı artırma olanağı sağlayacaktır.

React Native uygulamasını Back4App ile entegre etmenin ilk adımı nedir?

İlk adım Expo’nun yapılandırılmasıdır. React Native tarafından verilen talimatlara göre, aşağıdaki iki şeyi yüklemelisiniz.
-Node 10+
-EXPO CLI
EXPO CLI’yi kullanma komutu “npm install -g expo-cli”dir.


Leave a reply

Your email address will not be published.