ارسال 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 ارث برده است را ایجاد کنید.
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 31 32 |
//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 ایجاد کنید:
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 |
//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 را باز کنید و آن را مانند زیر تغییر دهید:
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
//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
در فایل جاوا اسکریپت خودتان:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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> ); } } |
Set user permission.5
تنها دسترسی ها dangerous نیاز به تایید کاربر دارد.روش سوال از کاربر در اندروید برای دسترسی های dangerous بستگی به ورژن اندرویدی که بر روی گوشی کاربر در حال اجرا است، دارد.
For API level<23
دسترسی را در فایل manifest.xml اضافه کنید:
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 در جاوا اسکریپت به صورت زیر عمل می کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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 رو مشاهده کنید.
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
تفاوت توسعه برنامه های android و ios
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
استفاده از Mapbox در react native (ری اکت نیتیو)
نمایش عکس های گوشی در react native (ری اکت نیتیو)
3 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
ممنون بابت انتشار این مطلب
استفاده از اس ام اس خیلی مهمه. نمیدونم چرا خود react native برای ارسال اس ام اس مستقیم فکری نکرده؟
البته من یه مشکلی با این روش هم دارم که اس ام اس فارسی نمیفرسته. شما این مشکل را داشتید؟
ببخشید اشتباه کردم
مشکل از فارسی نبود. مشکل این بود که بیشتر از یک پیام ( 70 کاراکتر) نمیفرسته که اینم خودش جای بحث داره
فکر کنم بیشتر از 70 کاراکتر MMS میشه به همین دلیل اجازه نمیده که بفرستی