واردکردن اطلاعات در دیتابیس Realm در React Native

دیتابیس Realm رو میشه نسل جدید دیتابیس های موبایل دانست که در اپلیکیشین های React Native برای هر دو پلتفرم Android و Ios استفاده میشه.این پایگاه داده با SQLite منطبق نیست و در بسیاری از موارد از SQLite به دلیل مستقل بودنش از پلتفرم بهتر است.در آموزش متنی قبلی نحوه نصب Realm در React Native رو یاد گرفتیم و این مقاله نحوه وارد کردن اطلاعات در Realm رو یاد میگیریم.در این آموزش با استفاده از یک کامپوننت TextInput و در رویداد کلیک button اطلاعات رو در Realm ذخیره میکنیم.

1.در اولین گام باید دیتابیس realm رو در پروژه نصب کنیم.برای این منظور دایرکتوری پروژه رو در command prompt / Terminal باز میکنیم و دستور زیر رو اجرا میکنیم.

npm install --save realm

1	npm install --save realm

2.بعد از نصب موفقیت آمیز کتابخانه از دستور زیر برای refresh شدن کامل پروژه و ایندکس شدن Realm به پروژه استفاده میکنیم.

react-native link realm

1	react-native link realm

3.ایمپورت کردن کامپوننت های StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity و Alert در پروژه.

import React, { Component } from 'react';
 
import { StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert } from 'react-native';

import React, { Component } from 'react';

import { StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert } from 'react-native';

4.ایمپورت کردن ماژول Realm و ایجاد یک متغیر به نام let .با استفاده از این متغیر دیتابیس رو باز و بسته میکنیم.

var Realm = require('realm');
 
let realm ;

var Realm = require('realm');

let realm ;

5.ایجاد سازنده و تعریف 3 State به نام های Student_Name, Student_Class و Student_Subject . این state ها برای نگه داری داده های TextInput مورد استفاده قرار میگیره.

constructor(){
 
    super();
 
    this.state = {
 
      Student_Name : '',
 
      Student_Class : '',
 
      Student_Subject : ''
 
  }
 
}

constructor(){

super();

this.state = {

Student_Name : '',

Student_Class : '',

Student_Subject : ''

}

6.یک Schema(Table) درون سازنده به نام Student_Info با چهار ستون به نام های student_id, student_name, student_class و student_subject ایجاد میکنیم.

constructor(){
 
    super();
 
    this.state = {
 
      Student_Name : '',
 
      Student_Class : '',
 
      Student_Subject : ''
 
  }
 
    realm = new Realm({
      schema: [{name: 'Student_Info', 
      properties: 
      {
        student_id: {type: 'int',   default: 0},
        student_name: 'string', 
        student_class: 'string',
        student_subject: 'string'
      }}]
    });
 
  }

constructor(){

super();

this.state = {

Student_Name : '',

Student_Class : '',

Student_Subject : ''

}

realm = new Realm({

schema: [{name: 'Student_Info',

properties:

{

student_id: {type: 'int', default: 0},

student_name: 'string',

student_class: 'string',

student_subject: 'string'

}}]

});

}

7.ایجاد یک تابع به نام ()add_Student .ما این تابع رو در رویداد کلیک button فراخوانی میکنیم.در این تابع ما یک record جدید در دیتابیس Realm اضافه میکنیم.مقدار ID رو بصورت اتوماتیک افزایش میدیم و این ستون برای همیشه unique است.

add_Student=()=>{
 
 
    realm.write(() => {
 
      var ID = realm.objects('Student_Info').length + 1;
 
       realm.create('Student_Info', {
         student_id: ID, 
         student_name: this.state.Student_Name, 
         student_class: this.state.Student_Class, 
         student_subject : this.state.Student_Subject
        });
        
    });
 
    Alert.alert("Student Details Added Successfully.")
 
  }

add_Student=()=>{

realm.write(() => {

var ID = realm.objects('Student_Info').length + 1;

realm.create('Student_Info', {

student_id: ID,

student_name: this.state.Student_Name,

student_class: this.state.Student_Class,

student_subject : this.state.Student_Subject

});

Alert.alert("Student Details Added Successfully.")

}

8.ایجاد یک متغیر به نام A درون بلاک render’s و دخیره کردن تمامی objects های درون دیتابیس در این متغیر.همه داده ها رو به JSON با استفاده از ()JSON.stringify تبدیل میکنیم.

render() {
 
    var A = realm.objects('Student_Info');
 
    var myJSON = JSON.stringify(A);
      
    return (
    
        
              
    );
  }

render() {

var A = realm.objects('Student_Info');

var myJSON = JSON.stringify(A);

return (

);

}

9.اضافه کردن 3 کامپوننت TextInput ،یک Button و یک Text درون بلاک render’s return

TextInput : برای گرفتن اطلاعات کاربر در اپلیکیشن مورد استفاده قرار میگیرد.

Button : از این کامپوننت برای فراخوانی تابع ()add_Student و ثبت اطلاعات در دیتابیس استفاده میکنیم.

Text : برای نمایش تمامی object های موجود در دیتابیس که با موفقیت ثبت شده اند،استفاده میکنیم.

 render() {
 
    var A = realm.objects('Student_Info');
 
    var myJSON = JSON.stringify(A);
      
    return (
    
        <View style={styles.MainContainer}>
          
          <TextInput 
                placeholder="Enter Student Name"
                style = { styles.TextInputStyle } 
                underlineColorAndroid = "transparent" 
                onChangeText = { ( text ) => { this.setState({ Student_Name: text })} } 
              />
 
          <TextInput  
                placeholder="Enter Student Class"
                style = { styles.TextInputStyle } 
                underlineColorAndroid = "transparent" 
                onChangeText = { ( text ) => { this.setState({ Student_Class: text })} } 
              />
 
          <TextInput 
                placeholder="Enter Student Subject"
                style = { styles.TextInputStyle } 
                underlineColorAndroid = "transparent" 
                onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} } 
              />
 
 
          <TouchableOpacity onPress={this.add_Student} activeOpacity={0.7} style={styles.button} >
 
            <Text style={styles.TextStyle}> CLICK HERE TO ADD STUDENT DETAILS </Text>
 
          </TouchableOpacity>
 
 
          <Text style={{marginTop: 10}}>{myJSON}</Text>
 
             
        </View>
              
    );
  }

render() {

var A = realm.objects('Student_Info');

var myJSON = JSON.stringify(A);

return (

<TextInput

placeholder="Enter Student Name"

style = { styles.TextInputStyle }

underlineColorAndroid = "transparent"

onChangeText = { ( text ) => { this.setState({ Student_Name: text })} }

<TextInput

placeholder="Enter Student Class"

style = { styles.TextInputStyle }

underlineColorAndroid = "transparent"

onChangeText = { ( text ) => { this.setState({ Student_Class: text })} }

<TextInput

placeholder="Enter Student Subject"

style = { styles.TextInputStyle }

underlineColorAndroid = "transparent"

onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} }

<Text style={styles.TextStyle}> CLICK HERE TO ADD STUDENT DETAILS </Text>

</TouchableOpacity>

<Text style={{marginTop: 10}}>{myJSON}</Text>

</View>

);

}

10.ایجاد استایل سفارشی.

const styles = StyleSheet.create({
    
 MainContainer :{
 
  flex:1,
  alignItems: 'center',
  justifyContent: 'center',
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  margin: 10
    
  },
 
  TextInputStyle:
    {
      borderWidth: 1,
      borderColor: '#009688',
      width: '100%',
      height: 40,
      borderRadius: 10,
      marginBottom: 10,
      textAlign: 'center',
    },
 
  button: {
    
      width: '100%',
      height: 40,
      padding: 10,
      backgroundColor: '#4CAF50',
      borderRadius:7,
      marginTop: 12
    },
     
  TextStyle:{
      color:'#fff',
      textAlign:'center',
    }
    
});

const styles = StyleSheet.create({

MainContainer :{

flex:1,

alignItems: 'center',

justifyContent: 'center',

paddingTop: (Platform.OS) === 'ios' ? 20 : 0,

margin: 10

TextInputStyle:

{

borderWidth: 1,

borderColor: '#009688',

width: '100%',

height: 40,

borderRadius: 10,

marginBottom: 10,

textAlign: 'center',

button: {

width: '100%',

height: 40,

padding: 10,

backgroundColor: '#4CAF50',

borderRadius:7,

marginTop: 12

TextStyle:{

color:'#fff',

textAlign:'center',

}

});

11.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert } from 'react-native';
 
var Realm = require('realm');
 
let realm ;
 
export default class App extends Component{
 
  constructor(){
 
    super();
 
    this.state = {
 
      Student_Name : '',
 
      Student_Class : '',
 
      Student_Subject : ''
 
  }
 
    realm = new Realm({
      schema: [{name: 'Student_Info', 
      properties: 
      {
        student_id: {type: 'int',   default: 0},
        student_name: 'string', 
        student_class: 'string',
        student_subject: 'string'
      }}]
    });
 
  }
 
  add_Student=()=>{
 
 
    realm.write(() => {
 
      var ID = realm.objects('Student_Info').length + 1;
 
       realm.create('Student_Info', {
         student_id: ID, 
         student_name: this.state.Student_Name, 
         student_class: this.state.Student_Class, 
         student_subject : this.state.Student_Subject
        });
        
    });
 
    Alert.alert("Student Details Added Successfully.")
 
  }
 
  render() {
 
    var A = realm.objects('Student_Info');
 
    var myJSON = JSON.stringify(A);
      
    return (
    
        <View style={styles.MainContainer}>
          
          <TextInput 
                placeholder="Enter Student Name"
                style = { styles.TextInputStyle } 
                underlineColorAndroid = "transparent" 
                onChangeText = { ( text ) => { this.setState({ Student_Name: text })} } 
              />
 
          <TextInput  
                placeholder="Enter Student Class"
                style = { styles.TextInputStyle } 
                underlineColorAndroid = "transparent" 
                onChangeText = { ( text ) => { this.setState({ Student_Class: text })} } 
              />
 
          <TextInput 
                placeholder="Enter Student Subject"
                style = { styles.TextInputStyle } 
                underlineColorAndroid = "transparent" 
                onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} } 
              />
 
 
          <TouchableOpacity onPress={this.add_Student} activeOpacity={0.7} style={styles.button} >
 
            <Text style={styles.TextStyle}> CLICK HERE TO ADD STUDENT DETAILS </Text>
 
          </TouchableOpacity>
 
 
          <Text style={{marginTop: 10}}>{myJSON}</Text>
 
             
        </View>
              
    );
  }
}
    
const styles = StyleSheet.create({
    
 MainContainer :{
 
  flex:1,
  alignItems: 'center',
  justifyContent: 'center',
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  margin: 10
    
  },
 
  TextInputStyle:
    {
      borderWidth: 1,
      borderColor: '#009688',
      width: '100%',
      height: 40,
      borderRadius: 10,
      marginBottom: 10,
      textAlign: 'center',
    },
 
  button: {
    
      width: '100%',
      height: 40,
      padding: 10,
      backgroundColor: '#4CAF50',
      borderRadius:7,
      marginTop: 12
    },
     
  TextStyle:{
      color:'#fff',
      textAlign:'center',
    }
    
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

import React, { Component } from 'react';

import { StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert } from 'react-native';

var Realm = require('realm');

let realm ;

export default class App extends Component{

constructor(){

super();

this.state = {

Student_Name : '',

Student_Class : '',

Student_Subject : ''

}

realm = new Realm({

schema: [{name: 'Student_Info',

properties:

{

student_id: {type: 'int', default: 0},

student_name: 'string',

student_class: 'string',

student_subject: 'string'

}}]

});

}

add_Student=()=>{

realm.write(() => {

var ID = realm.objects('Student_Info').length + 1;

realm.create('Student_Info', {

student_id: ID,

student_name: this.state.Student_Name,

student_class: this.state.Student_Class,

student_subject : this.state.Student_Subject

});

Alert.alert("Student Details Added Successfully.")

}

render() {

var A = realm.objects('Student_Info');

var myJSON = JSON.stringify(A);

return (

<TextInput

placeholder="Enter Student Name"

style = { styles.TextInputStyle }

underlineColorAndroid = "transparent"

onChangeText = { ( text ) => { this.setState({ Student_Name: text })} }

<TextInput

placeholder="Enter Student Class"

style = { styles.TextInputStyle }

underlineColorAndroid = "transparent"

onChangeText = { ( text ) => { this.setState({ Student_Class: text })} }

<TextInput

placeholder="Enter Student Subject"

style = { styles.TextInputStyle }

underlineColorAndroid = "transparent"

onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} }

<Text style={styles.TextStyle}> CLICK HERE TO ADD STUDENT DETAILS </Text>

</TouchableOpacity>

<Text style={{marginTop: 10}}>{myJSON}</Text>

</View>

);

}

const styles = StyleSheet.create({

MainContainer :{

flex:1,

alignItems: 'center',

justifyContent: 'center',

paddingTop: (Platform.OS) === 'ios' ? 20 : 0,

margin: 10

TextInputStyle:

{

borderWidth: 1,

borderColor: '#009688',

width: '100%',

height: 40,

borderRadius: 10,

marginBottom: 10,

textAlign: 'center',

button: {

width: '100%',

height: 40,

padding: 10,

backgroundColor: '#4CAF50',

borderRadius:7,

marginTop: 12

TextStyle:{

color:'#fff',

textAlign:'center',

}

});

اسکرین شات در Android device:

اسکرین شات در iOS device :

6 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

hamidreza abasi گفت:

خرداد 28, 1397 در 1:36 ب.ظ

با عرض سلام و خسته نباشید خدمت شما من موقع نصب پکیج Relam به خطای زیر برخورد می کنم از فیلتر شکنم استفاده می کنم
npm WARN eslint-plugin-react-native@3.2.1 requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Error: EPERM: operation not permitted, rename ‘C:\Users\HamidReza\Desktop\test\node_modules\.staging\fsevents-1d059d22\node_modules\concat-map’ -> ‘C:\Users\HamidReza\Desktop\test\node_modules\.staging\concat-map-10d4c5c2’

npm ERR! path C:\Users\HamidReza\Desktop\test\node_modules\bl
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename ‘C:\Users\HamidReza\Desktop\test\node_modules\bl’ -> ‘C:\Users\HamidReza\Desktop\test\node_modules\.bl.DELETE’
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\HamidReza\AppData\Roaming\npm-cache\_logs\2018-06-18T09_05_08_392Z-debug.log

پاسخ
- مهدی گفت:
  
  خرداد 29, 1397 در 8:23 ق.ظ
  
  سلام.
  همونطور که در error به شما اعلام کرده،شما به eslint نیاز دارید که با دستور زیر میتونید نصبش کنید
  npm install eslint –save-dev
  البته باید Node.js (>=4.x), npm version 2 باشه
  
  پاسخ
Mohamad badalpour گفت:

دی 8, 1397 در 12:25 ب.ظ

با سلام و عرض خسته نباشید خدمت شما بابت آموزش های خوبتون بنده این قطعه کد رو که اجرا میکنم ارور زیر برام میاد :
Error:Error:Migration is required due to the following errors :
-property ‘Users.nickname’ has been added

پاسخ
- آرش گفت:
  
  بهمن 17, 1397 در 12:59 ب.ظ
  
  این خطا واسه اینه که شما schema رو تغییر دادید. توی مستندات realm به صورت واضح گفته که وقتی schema رو تغییر می دید، باید چه کنید. اینجا رو بخونید.
  https://realm.io/docs/javascript/latest#migrations
  
  پاسخ
یاسر گفت:

بهمن 15, 1397 در 6:31 ب.ظ

عملا نمیشه از ماژولهاش استفاده کرد وقتی نصب می کنی موقع ران گرفتن به کتابخونه ای که خودش تو فایل settings.gradle ایجاد کرده خطا میده ): دلخوش بودم از دست اندروید استودیو راحت میشیم ولی صد رحمت به استودیو

پاسخ
- مهدی گفت:
  
  بهمن 16, 1397 در 7:57 ق.ظ
  
  سلام.چه خطایی میده؟؟
  
  پاسخ

واردکردن اطلاعات در دیتابیس Realm در React Native

مطالب زیر را حتما بخوانید

کتابخانه react-native-draggable-flatlist

ساخت منوی دایره ای (circular-action-menu)

Style در react native

کتابخانه react-native-indicators

طرح تخفیف تابستانه reactapp | فرصت ویژه یادگیری

6 دیدگاه

پاسخی بگذارید لغو پاسخ

ورود

مطالب زیر را حتما بخوانید

کتابخانه react-native-draggable-flatlist

ساخت منوی دایره ای (circular-action-menu)

Style در react native

کتابخانه react-native-indicators

طرح تخفیف تابستانه reactapp | فرصت ویژه یادگیری

6 دیدگاه

پاسخی بگذارید لغو پاسخ