ارسال sms به صورت مستقیم در React Native

اخیرا من در حال توسعه یک اپلیکیشن React Native(ری اکت نیتیو) بر پایه sms بودم و نیاز داشتم که یک کتابخونه برای اینکار پیدا کنم.من چندین کتابخونه پیدا کردم اما این کتابخونه ها بدون تعامل با کاربر یا بدون باز شدن phone messaging app اینکار رو انجام نمی داد.بنابراین من تصمیم گرفتم با استفاده از قابلیت native اندروید sms را به صورت مستقیم ارسال کنم.

توجه کنید که در IOS تنها راه ارسال sms بدون تعامل با کاربر استفاده از یک external provider است.

اولین گام برای اینکه بتوانیم از کدهای native جاوا برای ارسال sms استفاده کنیم،ایجاد یک module جدید جاوا است.
*این یکی از نوشته های فاطمه فضلی درusejournal است که من اتفاقی در توئییتر دیدمش و تصمیم گرفتم این مقاله رو با توجه به کاربردی بودنش و سطح بالا اون ترجمه کنم.

Create sendSmsModule.1

در فایل MainActivity.java موجود در android-> app-> src/main-> java/com/yourProject یک کلاس جاوا جدید که از کلاس ReactContextBaseJavaModule ارث برده است را ایجاد کنید.

//DirectSmsModule.java

package com.yourProject;
 
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.uimanager.IllegalViewOperationException;
 
public class DirectSmsModule extends ReactContextBaseJavaModule {
 
    public DirectSmsModule(ReactApplicationContext reactContext) {
        super(reactContext); //required by React Native
    }
 
    @Override
    //getName is required to define the name of the module represented in JavaScript
    public String getName() { 
        return "DirectSms";
    }
 
    @ReactMethod
    public void sendDirectSms(String phoneNumber, String msg) {
        try {      
            SmsManager smsManager = SmsManager.getDefault();
            smsManager.sendTextMessage(phoneNumber, null, msg, null, null);    
        } catch (Exception ex) {
            System.out.println("couldn't send message.");
        } 
    }
}

//DirectSmsModule.java

package com.yourProject;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.Callback;

import com.facebook.react.bridge.ReactMethod;

import com.facebook.react.uimanager.IllegalViewOperationException;

public class DirectSmsModule extends ReactContextBaseJavaModule {

public DirectSmsModule(ReactApplicationContext reactContext) {

super(reactContext); //required by React Native

}

@Override

//getName is required to define the name of the module represented in JavaScript

public String getName() {

return "DirectSms";

}

@ReactMethod

public void sendDirectSms(String phoneNumber, String msg) {

try {

SmsManager smsManager = SmsManager.getDefault();

smsManager.sendTextMessage(phoneNumber, null, msg, null, null);

} catch (Exception ex) {

System.out.println("couldn't send message.");

}

Register DirectSmsModule.2

برای registration، شما باید یک package جدید که ReactPackage پیاده سازی می کند، ایجاد کنید.در کنار DirectSmsModule یک DirectSmsPackage ایجاد کنید:

//DirectSmsPackage.java

package com.yourProject;
 
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.yourProject.DirectSmsModule;
 
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
 
public class DirectSmsPackage implements ReactPackage {
 
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
 
    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        //this is where you register the module
        modules.add(new DirectSmsModule(reactContext));
        return modules;
    }
}

//DirectSmsPackage.java

package com.yourProject;

import com.facebook.react.ReactPackage;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.uimanager.ViewManager;

import com.yourProject.DirectSmsModule;

import java.util.ArrayList;

import java.util.Collections;

import java.util.List;

public class DirectSmsPackage implements ReactPackage {

@Override

public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

@Override

public List<NativeModule> createNativeModules(

ReactApplicationContext reactContext) {

List<NativeModule> modules = new ArrayList<>();

//this is where you register the module

modules.add(new DirectSmsModule(reactContext));

return modules;

}

Register DirectSmsPackage.3

شما نیاز دارید که به درستی package جدید را register کنید.MainApplication.java را باز کنید و آن را مانند زیر تغییر دهید:

//MainApplication.java

package com.yourProject;
 
import android.app.Application;
 
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
 
import java.util.Arrays;
import java.util.List;
 
public class MainApplication extends Application implements ReactApplication {
 
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
 
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new DirectSmsPackage() //add this
      );
    }
 
    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };
 
  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
 
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

//MainApplication.java

package com.yourProject;

import android.app.Application;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import com.facebook.soloader.SoLoader;

import java.util.Arrays;

import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(),

new DirectSmsPackage() //add this

);

}

@Override

protected String getJSMainModuleName() {

return "index";

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this, /* native exopackage */ false);

}

Call sendDirectSms method from javascript.4

در فایل جاوا اسکریپت خودتان:

اشنایی با react js و پا گذاشتن به دنیای react native

import {NativeModules} from 'react-native';
var DirectSms = NativeModules.DirectSms;

export default class App extends Component<Props> {

// async function to call the Java native method
sendDirectSms() {
    DirectSms.sendDirectSms('0935...', 'This is a direct message');
}
render() {
return (
        <View>
            <TouchableOpacity onPress={() => this.sendDirectSms()}>
                <Text>send SMS</Text>
            </TouchableOpacity>
        </View>
       );
    }
}

import {NativeModules} from 'react-native';

var DirectSms = NativeModules.DirectSms;

export default class App extends Component<Props> {

// async function to call the Java native method

sendDirectSms() {

DirectSms.sendDirectSms('0935...', 'This is a direct message');

}

render() {

return (

<View>

<TouchableOpacity onPress={() => this.sendDirectSms()}>

</TouchableOpacity>

</View>

);

}

Set user permission.5

تنها دسترسی ها dangerous نیاز به تایید کاربر دارد.روش سوال از کاربر در اندروید برای دسترسی های dangerous بستگی به ورژن اندرویدی که بر روی گوشی کاربر در حال اجرا است، دارد.

For API level<23

دسترسی را در فایل manifest.xml اضافه کنید:

<uses-permission android:name="android.permission.SEND_SMS"/>

1	<uses-permission android:name="android.permission.SEND_SMS"/>

For API 23 and higher

اگر device بر روی اندروید 6.0 (API level 23) یا بیشتر در حال اجرا است و targetSdkVersion اپلیکیشن 23 یا بیشتر است،کاربر در زمان نصب هیچ گونه مجوزی که برنامه نیاز دارد را نمی داند.اپلیکیشن شما برای دسترسی های dangerous باید به صورت runtime از کابر این موضوع را بپرسد و تایید آن را بگیرد.زمانی که اپلیکیشن شما درخواست دسترسی به کاربر می دهد، کاربر یک پیغام را مشاهده می کند که به او می گوید اپلیکیشن به چه چیزهایی میخواهد دسترسی داشته باشد.این پیغام شامل دو button تایید و عدم تایید است.برای مدیریت کردن دسترسی ها به صورت runtime در جاوا اسکریپت به صورت زیر عمل می کنیم:

sendDirectSms() {
    try {
        const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.SEND_SMS,
            {
                title: 'YourProject App Sms Permission',
                message:
                'YourProject App needs access to your inbox ' +
                'so you can send messages in background.',
                buttonNeutral: 'Ask Me Later',
                buttonNegative: 'Cancel',
                buttonPositive: 'OK',
            },
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            DirectSms.sendDirectSms('0935...', 'This is a direct message');
        } else {
            console.log('SMS permission denied');
        }
    } catch (err) {
        console.warn(err);
    }
}

sendDirectSms() {

try {

const granted = await PermissionsAndroid.request(

PermissionsAndroid.PERMISSIONS.SEND_SMS,

{

title: 'YourProject App Sms Permission',

message:

'YourProject App needs access to your inbox ' +

'so you can send messages in background.',

buttonNeutral: 'Ask Me Later',

buttonNegative: 'Cancel',

buttonPositive: 'OK',

);

if (granted === PermissionsAndroid.RESULTS.GRANTED) {

DirectSms.sendDirectSms('0935...', 'This is a direct message');

} else {

console.log('SMS permission denied');

}

} catch (err) {

console.warn(err);

}

خب همه چی آماده است.فقط کافیه react-native run-android رو اجرا کنید.

اگر قصد یادگیری react native به صورت تخصصی و حرفه ای دارید، پیشنهاد می کنم آموزش جامع و پروزه محور react native رو مشاهده کنید.

مطالب زیر را حتما مطالعه کنید

3 دیدگاه

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

علی گفت:

ژانویه 7, 2020 در 7:02 ب.ظ

ممنون بابت انتشار این مطلب
استفاده از اس ام اس خیلی مهمه. نمیدونم چرا خود react native برای ارسال اس ام اس مستقیم فکری نکرده؟

البته من یه مشکلی با این روش هم دارم که اس ام اس فارسی نمیفرسته. شما این مشکل را داشتید؟

پاسخ
- علی گفت:
  
  ژانویه 7, 2020 در 7:36 ب.ظ
  
  ببخشید اشتباه کردم
  مشکل از فارسی نبود. مشکل این بود که بیشتر از یک پیام ( 70 کاراکتر) نمیفرسته که اینم خودش جای بحث داره
  
  پاسخ
  - مهدی گفت:
    
    ژانویه 7, 2020 در 8:27 ب.ظ
    
    فکر کنم بیشتر از 70 کاراکتر MMS میشه به همین دلیل اجازه نمیده که بفرستی

Create sendSmsModule.1

Register DirectSmsModule.2

Register DirectSmsPackage.3

Call sendDirectSms method from javascript.4

Set user permission.5

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

نمایش عکس های گوشی در react native (ری اکت نیتیو)

3 دیدگاه

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