Pelacakan geografis di Bereaksi Asli

Aplikasi seluler dapat bertindak sebagai "tempat kerja" seorang karyawan, sementara itu mungkin diperlukan untuk mentransfer koordinat geografis dan data lainnya. Dalam pengembangan aplikasi lintas platform di iOS dan Android, kerangka kerja seperti Flutter atau React Native sering digunakan untuk tugas ini. Dalam artikel ini, kita berbicara tentang fitur bekerja dengan geolokasi di React Native menggunakan contoh kasus kami.



Keandalan, kecepatan, dan kematangan React Native terkadang dikritik oleh pengembang, dan sekitar tiga tahun lalu keraguan semacam itu bisa disebut dibenarkan. Namun, selama ini, teknologi telah menjadi lebih maju, dan React Native telah diakui sebagai alat praktis untuk membuat berbagai aplikasi. Secara khusus, React Native cocok untuk aplikasi yang menggunakan koordinat geografis - misalnya, berbagai pelacak, aplikasi untuk kurir, dll.

Juga di toko-toko dikembangkan pada aplikasi React Native dari toko online, menu restoran, feed berita, aplikasi pengiriman, pelanggan untuk jejaring sosial - dengan demikian, sejumlah besar React Native terus digunakan, bahkan tanpa memikirkannya. Contoh sederhana adalah Facebook, Instagram, Skype, Uber Eats, Wallmart. Menurut perkiraan, Microsoft dapat mengisi kembali daftar ini dan mentransfer aplikasi selulernya ke React Native, terutama setelah menerapkan dukungan untuk platform Windows. Ada dukungan React Native untuk aplikasi Weechat Qt , macOS , "built-in" , meskipun dukungan dan dokumentasi untuk platform ini masih agak langka.

React Native dapat melakukan hampir semua hal yang sama dengan aplikasi asli. Misalnya, menerima informasi dari sensor perangkat, seperti yang dilakukan aplikasi Java / Kotlin atau ObjC / Swift, atau mengirim data di latar belakang menggunakan Foreground Service atau Background fetch. Satu-satunya perbedaan adalah bahwa dalam Bereaksi Asli Anda perlu mengimplementasikan antarmuka untuk interaksi antara bagian asli dan Javascript. Untuk tugas sehari-hari, antarmuka ini sering sudah diimplementasikan. Ini juga berlaku untuk melacak lokasi dan operasi Javascript di latar belakang: sudah ada solusi dalam bentuk perpustakaan open source independen. Kebetulan bahwa komunitas secara mandiri "menarik" Javascript ke depan, baik programmer dan perusahaan secara aktif menggunakan solusi Open Source. Beberapa komunitas bahasa memiliki jumlah perpustakaan, kerangka kerja yang sama,utilitas kualitas. Namun, dalam React Native, beberapa fitur yang ada dalam pengembangan asli masih terbatas, dan ini harus diingat.

Bekerja dengan Bereaksi Asli


Pertimbangkan beberapa faktor utama yang memastikan kecepatan pengembangan aplikasi lintas platform di React Native:

Basis kode umum


Begitu logika tertulis, layar tata letak dan komponen pada platform yang berbeda berfungsi dan terlihat sama mungkin (misalnya, di Android, alih-alih bayangan yang biasa, mereka menggunakan gagasan kegembiraan). Praktis tidak ada sakit kepala abadi untuk pengembang dengan versi lama - misalnya, mudah untuk menambahkan dukungan bahkan untuk Android 4.4, meskipun dalam praktiknya pelaksanaan tugas ini juga tergantung pada penggunaan modul asli tambahan.

Alur Kerja Optimal


Seringkali, Bereaksi menyediakan alur kerja yang optimal yang membuat pengembangan fitur baru beberapa kali lebih cepat daripada dalam bahasa asli. Ini berlaku untuk tata letak, pendekatan komponen, instalasi ketergantungan, solusi arsitektur umum untuk React.

Hot reload


Pengembang tidak perlu membangun kembali aplikasi setiap kali untuk melihat perubahannya. Berkat Hot Reload, hanya perlu beberapa detik untuk memperbarui aplikasi ke keadaan saat ini. Dan dalam versi 0.61 Live Reload (sekarang Fast Refresh) juga diingatkan, sekarang ketika mengedit perubahan pengaturan huruf ditarik "on the fly", tanpa mengatur ulang keadaan komponen saat ini.

Saat membuat aplikasi, beberapa bidang utama memerlukan perhatian khusus:

1) Javascript

React Native bertujuan untuk bekerja dengan Javascript, memungkinkan Anda untuk dengan cepat menggambarkan logika dan antarmuka. Ada banyak modul siap pakai dari dunia Web dan Node.js yang dapat digunakan dengan cara biasa (tentu saja, jika mereka tidak terhubung ke DOM atau ke sisi server). Meskipun kecepatannya tinggi, Javascript terkadang kalah dengan bahasa asli. Tidak ada multithreading. Di Bereaksi Asli, kami tidak dapat langsung mengakses API Asli, meskipun pembatasan ini dapat segera dihapus. Javascript terutama menjelaskan apa yang perlu dilakukan dan ditampilkan di bagian asli.

2) Jembatan

Bus yang menerima panggilan Javascript melalui antarmuka khusus yang disediakan oleh perpustakaan reaksi-asli. Panggilan adalah pesan berseri reguler. Untuk setiap komponen - Tampilan sederhana, bidang input atau panggilan ke dialog sistem - ada antarmuka yang dijelaskan dalam Javascript dengan logika yang diterapkan di bagian asli. Bus adalah bagian yang paling lambat, asinkron, mentransfer data antara Javascript dan asli memerlukan waktu (kemungkinan besar, Facebook dapat sepenuhnya menghilangkannya ). Seringkali, masalah kinerja aplikasi pada React Native disebabkan justru oleh pengoperasian jembatan, tetapi jika Anda menggunakannya dengan benar (mengurangi transfer data bolak-balik ke minimum yang diperlukan), maka kinerja dalam aplikasi React Native tidak akan berbeda secara signifikan.

3) Bagian asli

Aplikasi pada React Native pada awalnya merupakan aplikasi asli biasa. Keunikannya adalah bahwa semua perpustakaan yang diperlukan sudah terhubung di dalamnya sehingga Anda dapat menulis semua logika di Bereaksi JS. Di sini kita dapat menulis logika asli kita sendiri untuk menggunakan (atau tidak menggunakannya) di JS, tambahkan pustaka asli yang biasa (misalnya, untuk mendukung TLS v1.2 pada KitKat dan sebelumnya). Di aplikasi asli yang sudah jadi, Anda dapat menambahkan dukungan untuk React Native.

Bekerja dengan pelacakan geografis di Bereaksi Asli


Di salah satu proyek, kami perlu mengembangkan "tempat kerja seluler" untuk karyawan klien kami, khususnya, untuk memastikan transfer koordinat geografis mereka di latar belakang.

Ada beberapa alat untuk bekerja dengan geolokasi di React Native. Misalnya, ini adalah paket dari komunitas React Native @ react-native-community / geolocation , yang mencakup sebagian besar kasus penggunaan, namun, tidak berfungsi di latar belakang.

Untuk mengimplementasikan tugas kami, kami menggunakan beberapa solusi, termasuk perpustakaan dengan nama yang berbicara @ mauron85 / react-native-background-geolocation. Awalnya, perpustakaan ini adalah plugin untuk Cordova, tetapi kemudian penulis memisahkan basis dan membuat pembungkus terpisah untuk React Native. Ada juga perpustakaan berbayar dengan nama yang sama dari transistorsoft, tetapi pada saat kami mengerjakan proyek ini, ia hanya menang dengan dokumentasinya.

Perpustakaan memungkinkan kami untuk mengatur pengaturan yang fleksibel untuk lokasi pelacakan. Misalnya, dengan frekuensi apa untuk menginterogasi layanan sistem, bagaimana tepatnya bekerja di latar belakang, dalam radius apa posisi akan dianggap tidak bergerak. Pengaturan dan metode untuk mengirim koordinat ini ke server dapat digunakan "di luar kotak", tetapi kami memutuskan untuk tidak mengirim permintaan spam, tetapi untuk mengagregasi koordinat yang diterima dalam repositori dan mengirimkannya dengan interval besar. Pada saat yang sama, perpustakaan memungkinkan kami untuk meluncurkan aplikasi kami sebagai foregroundActivity, menyelamatkan kami dari sakit kepala yang tidak perlu, karena pada banyak perangkat Android aplikasi di latar belakang hanya dapat bekerja dengan pengaturan tambahan ( Huawei, MIUI, Samsung baru-baru ini ).

Setelah instalasi, Anda dapat membuat komponen atau hanya pembantu yang mengelola layanan. Kami memutuskan untuk menggunakan komponen untuk memasangnya dengan kondisi di router dan dengan mudah menghubungkannya ke redux. Siapkan layanan kami:

import BackgroundGeolocation, {
  Location,
} from '@mauron85/react-native-background-geolocation';
 
class ForegroundService extends PureComponent<Props> {
//...
startBackgroundService = (config: GeotrackerConfig) => {
     //    
	BackgroundGeolocation.configure({
  	desiredAccuracy: BackgroundGeolocation.HIGH_ACCURACY,
  	stationaryRadius: 50,
  	distanceFilter: config.distance,
  	notificationTitle: Strings.Geolocation.NOTIFICATION_TITLE,
  	notificationText: Strings.Geolocation.NOTIFICATION_DESCRIPTION,
  	debug: false,
  	startOnBoot: false,
  	stopOnTerminate: true,
  	locationProvider: BackgroundGeolocation.ACTIVITY_PROVIDER,
  	interval: this.runnerInterval,
  	fastestInterval: 10000,
  	activitiesInterval: 30000,
  	stopOnStillActivity: false,
  	notificationIconColor: Colors.primary,
  	notificationIconSmall: 'notification_icon',
	});
 
     //    start()      
                    	BackgroundGeolocation.on('authorization', status => {
  	if (status !== BackgroundGeolocation.AUTHORIZED) {
    	//   
  	} else if (status.hasPermissions) {
        // hasPermission -  ,    
  	}
	});
 
     //  
                    	BackgroundGeolocation.start();
};


Kami melihat bahwa di sini Anda juga dapat mengatur pengaturan untuk pemberitahuan, ikon (dari aset asli). Bagaimana dengan izin? Untuk Android, setelah menginstal paket, tidak ada yang diperlukan, perpustakaan akan mengambil alih permintaan untuk akses ke geolokasi sistem. Tetapi untuk operasi normal pada iOS di Xcode, Anda juga harus mengaktifkan Pemrosesan latar belakang dan Pembaruan lokasi di tab Penandatanganan & Kemampuan proyek.



Kami menerapkan metode utama untuk menyimpan dan mengirim koordinat di acara di ('lokasi') dengan metode yang sama. Ini akan berfungsi baik dengan aplikasi aktif dan dalam keadaan diminimalkan:

BackgroundGeolocation.on('location', location => {
    BackgroundGeolocation.startTask(async taskKey => {
     //       ,
     //     iOS-
      const batteryLevel = this.isSimulator
        ? 100
        : (await DeviceInfo.getBatteryLevel()) * 100;
      const updateDelta = location.time - this.lastUpdateAt;

     //      
      this.props.locationUpdate(location);
      this.props.locationAddTrackerData({
        altitude: location.altitude,
        batteryChargeLevel: batteryLevel,
        latitude: location.latitude,
        longitude: location.longitude,
        course: location.bearing,
        accuracy: location.accuracy,
        speed: location.speed,
        timestamp: Number(String(location.time).substr(0, 10)),
        isAlertOn: false,
      });

     //  ?
      if (updateDelta / 1000 > config.sendInterval) {
        this.syncDataWithInterval();
        this.lastUpdateAt = location.time;
      }

     //    AsyncStorage,    
      Storage.setLastKnownLocation(location);
      BackgroundGeolocation.endTask(taskKey);  //   !
    });
});


Di sini kami memanggil tindakan dari toko, tempat kami mentransfer data koordinat dalam format khusus, juga menyimpan data pada pembacaan baterai, menggunakan perpustakaan info-perangkat-asli-info. Semua ini bekerja dengan baik di Android dan iOS saat aplikasi aktif atau di latar belakang.

Selain itu, ada metode untuk mendapatkan lokasi saat ini (tetapi ini hanya berfungsi ketika layanan sedang berjalan), berlangganan transisi dari status aplikasi dari aktif ke latar belakang, beralih ke pengaturan sistem aplikasi. Namun, pada umumnya, yang paling penting diberikan dalam contoh-contoh ini.

Hasilnya adalah komponen yang dapat dipasang, misalnya, hanya untuk bagian yang diotorisasi:

class ForegroundService extends PureComponent<Props> {
	//...
	componentDidMount() {
		this.startBackgroundService(this.props.config);
	}

	componentWillUnmount() {
    BackgroundGeolocation.stop();
    BackgroundGeolocation.removeAllListeners();
  }

	startBackgroundService = (config: GeotrackerConfig) => {
    BackgroundGeolocation.configure({
		// ...
	};

	render() {
    return null;
  }
} 


Jika navigasi reaksi digunakan, Anda dapat membuat navigasi untuk bagian yang diotorisasi sebagai berikut:

//  StackNavigator   
const Navigator = createStackNavigator(RouteConfigs, NavigatorConfig);


class AppNavigator extends PureComponent<Props> {
  static router: NavigationRouter = Navigator.router;

  componentDidMount(): void {
    SplashScreen && SplashScreen.hide();
  }

  render() {
    return (
      <>
        <ForegroundService navigation={this.props.navigation} />
        <Navigator {...this.props} />
      </>
    );
  }
}

export default AppNavigator;


Selanjutnya, navigator ini dapat digunakan dengan cara biasa di navigator root:

const RootNavigator = createSwitchNavigator(
  {
    Auth: AuthNavigator,
    App: AppNavigator,
  },
  {
    initialRouteName: 'Auth',
  },
);

export default createAppContainer(RootNavigator);


Dengan demikian, layanan geolokasi dan pertukaran data hanya akan berfungsi di bagian resmi aplikasi.

Untuk meringkas


Pada artikel ini, kami memeriksa fitur menggunakan React Native dalam aplikasi geolokasi. Seperti yang kami ketahui, menggunakan kerangka kerja ini, pengembang sekarang dapat dengan mudah melacak koordinat geografis perangkat - misalnya, di pelacak sepeda, aplikasi untuk kurir dan forwarder, aplikasi untuk memilih real estat, dll. Perpustakaan mencakup sebagian besar kasus yang terkait dengan geotracking, khususnya, memungkinkan Anda untuk menyesuaikan interval dan menghemat daya perangkat, ini bekerja secara stabil di latar belakang pada kedua platform, dan mendukung autorun di Android. Pada saat yang sama, untuk aplikasi yang kompleks, sebagai aturan, pengembangan asli lebih cocok (misalnya, untuk bekerja dengan perhitungan dan widget, seperti yang sudah kami tulis di artikel sebelumnya ).

Terima kasih atas perhatian Anda, semoga artikel ini bermanfaat bagi Anda!

All Articles