واردکردن اطلاعات در دیتابیس 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

پاسخ

با عرض سلام و خسته نباشید خدمت شما من موقع نصب پکیج 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
پاسخ
سلام.
همونطور که در error به شما اعلام کرده،شما به eslint نیاز دارید که با دستور زیر میتونید نصبش کنید
npm install eslint –save-dev
البته باید Node.js (>=4.x), npm version 2 باشه

Mohamad badalpour

دی 8, 1397

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

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

یاسر

بهمن 15, 1397

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

مهدی
بهمن 16, 1397
پاسخ
سلام.چه خطایی میده؟؟

آموزش متنی

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

نصب دیتابیس Realm در React Native

نمایش اطلاعات دیتابیس Realm در React Native

6 نظر

نظر بدهید لغو پاسخ

آموزش متنی

ممکن است همچنین دوست داشته باشید

6 نظر

نظر بدهید لغو پاسخ

ورود به حساب کاربری

ایجاد حساب کاربری