उदाहरणों में स्पंदन। स्पंदन अनुप्रयोगों में गहरे लिंक

Google का नया मल्टी-प्लेटफ़ॉर्म ढांचा, फ़्लटर, लगातार प्रशंसकों को प्राप्त कर रहा है। अधिक से अधिक लोग इस तकनीक में रुचि रखते हैं और इसे पालतू और व्यावसायिक दोनों परियोजनाओं में आज़माते हैं। RuNet में अधिक से अधिक लेख और उदाहरण दिखाई देते हैं, लेकिन कुछ समय पहले मैंने देखा कि, मध्यम के विपरीत, समीक्षा लेख मुख्य रूप से एक संपूर्ण के रूप में प्रौद्योगिकी के बारे में है और इसके फायदे या नवीनतम संस्करण में प्रस्तुत किए गए हैंबर के बारे में भविष्यवाणी करते हैं। विशिष्ट मामलों पर कुछ ग्रंथ हैं। इसलिए, मैंने तय किया कि वर्तमान स्थिति को ठीक करना आवश्यक है। मैं सबसे सामान्य मामले से नहीं शुरू करता, लेकिन अक्सर पर्याप्त उपयोग किया जाता है - डीप लिंक।


हाल ही में, मुझे गहरे लिंक का उपयोग करके एक स्पंदन एप्लिकेशन लॉन्च करने का कार्य मिला। मुझे फ़्लटर में उनके साथ कैसे काम करना है, इसका पर्याप्त विचार प्राप्त करने के लिए प्रलेखन और प्रयोग के माध्यम से हंगामा करना पड़ा। इस लेख में, मैंने परिणामों को एकत्र किया है, ताकि जो लोग एक ही कार्य के साथ सामना कर रहे हैं, उन्हें समझना आसान था।

डीप लिंक एक यूआरएल है जो उपयोगकर्ताओं को iOS या Android पर एक मोबाइल एप्लिकेशन के भीतर विशिष्ट सामग्री पर नेविगेट करने की सुविधा देता है। इसका मतलब यह है कि हमें ट्रैक करना चाहिए कि एप्लिकेशन को कैसे खोला गया था: मानक तरीके से या किसी लिंक का उपयोग करके, और इसके अलावा, संक्रमण पूरा होने पर आवेदन पहले से ही खुला हो सकता है। इसलिए, हमें क्लिक-थ्रू और एक चल रहे एप्लिकेशन की पृष्ठभूमि में नज़र रखने की आवश्यकता है। आइए देखें कि फ्लटर में यह कैसे करना सबसे अच्छा है।

पहली बात कॉन्फ़िगरेशन है

मूल विकास में डीप लिंक का उपयोग करने के लिए, आपको प्रोजेक्ट में उपयुक्त कॉन्फ़िगरेशन तैयार करने की आवश्यकता है। एक स्पंदन अनुप्रयोग के लिए, यह ठीक उसी तरह से किया जाता है जैसे कि देशी में।

आईओएस

Apple इकोसिस्टम में ऐसे लिंक बनाने के दो तरीके हैं: "कस्टम URL स्कीम्स" और "यूनिवर्सल लिंक्स"।

• कस्टम URL योजनाएँ - आपको एक कस्टम स्कीम का उपयोग करने की अनुमति देती है, इसकी परवाह किए बिना होस्ट निर्दिष्ट है। यह दृष्टिकोण सबसे सरल है, लेकिन बारीकियां हैं: आपको यह सुनिश्चित करना होगा कि यह योजना अद्वितीय है, और, इसके अलावा, लिंक स्थापित एप्लिकेशन के बिना काम नहीं करेगा। यदि आप कस्टम URL योजनाओं का उपयोग करते हैं, तो आप लिंक का उपयोग कर सकते हैं जैसे: your_scheme://any_host
• यूनिवर्सल लिंक थोड़ा अधिक जटिल दृष्टिकोण है। वे आपको केवल https योजना और एक विशिष्ट होस्ट के साथ काम करने की अनुमति देते हैं, लेकिन आपको इस होस्ट का उपयोग करने के अधिकारों की पुष्टि करने की आवश्यकता है, जिसके लिए आपको फ़ाइल को सर्वर पर रखने की आवश्यकता है - ऐप्पल-ऐप-साइट-एसोसिएशन। यूनिवर्सल लिंक आपको URL: https://your_host पर एप्लिकेशन चलाने का अवसर https://your_host , और एक स्थापित एप्लिकेशन की अनुपस्थिति में इसे स्टोर से इंस्टॉल करने या ब्राउज़र में लिंक खोलने की पेशकश करेगा।
  

उदाहरण के लिए, मैं कस्टम URL योजनाओं के दृष्टिकोण का उपयोग करता हूं, क्योंकि यह सरल है। निम्नलिखित टुकड़े को Info.plist फ़ाइल में जोड़ें:

 <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>deeplink.flutter.dev</string> <key>CFBundleURLSchemes</key> <array> <string>poc</string> </array> </dict> </array> 

एंड्रॉयड

एंड्रॉइड इकोसिस्टम में भी समान गुणों के साथ लिंक करने के दो तरीके हैं:

• डीप लिंक - (आईओएस में कस्टम URL स्कीमों की तरह) आप कस्टम स्कीम का उपयोग करने की अनुमति देते हैं, चाहे कोई भी होस्ट निर्दिष्ट हो।
  
• ऐप लिंक - आप केवल https योजना और एक विशिष्ट होस्ट (iOS में यूनिवर्सल लिंक्स की तरह) के साथ काम करने की अनुमति देते हैं, और आपको डिजिटल एसेट लिंक सर्वर पर JSON फ़ाइल रखकर इस होस्ट का उपयोग करने के अधिकारों की पुष्टि करने की भी आवश्यकता है।
  

Android के लिए, मैंने इसे जटिल नहीं करने का निर्णय लिया और डीप लिंक्स का उपयोग किया। इसे AndroidManifest.xml में जोड़ें:

 <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="poc" android:host="deeplink.flutter.dev" /> </intent-filter> 

इस प्रकार, हमने poc योजनाओं के लिए दोनों प्लेटफार्मों के लिए अनुप्रयोगों को कॉन्फ़िगर किया है और उनमें URL poc://deeplink.flutter.dev संसाधित करने में सक्षम होंगे poc://deeplink.flutter.dev

कुकिंग प्लेटफार्म चैनल

तो, प्रत्येक प्लेटफ़ॉर्म के लिए मूल कॉन्फ़िगरेशन तैयार है। लेकिन कॉन्फ़िगरेशन के अलावा, आपको प्लेटफ़ॉर्म चैनल तैयार करने की आवश्यकता है, जिसके लिए मूल भाग फ़्लटर के साथ बातचीत करेगा। और फिर, आपको एंड्रॉइड और आईओएस दोनों के लिए अपना कार्यान्वयन तैयार करने की आवश्यकता है।
शुरुआत करते हैं एंड्रॉइड से। आपको बस कुछ नहीं करने की ज़रूरत है - बस ऑनक्रीट विधि में आने वाले इरादे को संसाधित करें, एक MethodChannel बनाएं और यदि आवेदन डीप लिंक के माध्यम से चल रहा है, तो इसे URI पास करें।

 private static final String CHANNEL = "poc.deeplink.flutter.dev/channel"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); GeneratedPluginRegistrant.registerWith(this); Intent intent = getIntent(); Uri data = intent.getData(); new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler( new MethodChannel.MethodCallHandler() { @Override public void onMethodCall(MethodCall call, MethodChannel.Result result) { if (call.method.equals("initialLink")) { if (startString != null) { result.success(startString); } } } }); if (data != null) { startString = data.toString(); } } 

आईओएस में, सब कुछ थोड़ा अलग होगा, हालांकि सामान्य रूप से एक ही चीज: यूआरआई को मेथडांचेल के माध्यम से आवेदन में पास करना। मैंने इसे स्विफ्ट पर लागू करने का फैसला किया, क्योंकि ऑब्जेक्टिव-सी चीजें मेरे लिए बहुत अच्छी नहीं हैं))। अगला अप संशोधित AppDelegate.swift है

 @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { private var methodChannel: FlutterMethodChannel? override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]? ) -> Bool { let controller = window.rootViewController as! FlutterViewController methodChannel = FlutterMethodChannel(name: "poc.deeplink.flutter.dev/channel", binaryMessenger: controller) methodChannel?.setMethodCallHandler({ (call: FlutterMethodCall, result: FlutterResult) in guard call.method == "initialLink" else { result(FlutterMethodNotImplemented) return } }) GeneratedPluginRegistrant.register(with: self) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } 

इसलिए हम डीप लिंक के माध्यम से एप्लिकेशन के लॉन्च को संभालेंगे। लेकिन क्या होगा अगर आवेदन पहले से ही चल रहा है, तो लिंक का पालन किया गया? इस क्षण को ध्यान में रखना आवश्यक है।

Android में, इसके लिए हम onNewIntent मेथड को ओवरराइड करेंगे और प्रत्येक आने वाले इरादे को प्रोसेस करेंगे। यदि यह एक लिंक क्लिक है, तो हम इसके लिए बनाए गए EventChannel में एक विशेष रूप से बनाए गए BroadcastReceiver के माध्यम से एक घटना को फेंक देंगे।

  private static final String EVENTS = "poc.deeplink.flutter.dev/events"; private BroadcastReceiver linksReceiver; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); GeneratedPluginRegistrant.registerWith(this); new EventChannel(getFlutterView(), EVENTS).setStreamHandler( new EventChannel.StreamHandler() { @Override public void onListen(Object args, final EventChannel.EventSink events) { linksReceiver = createChangeReceiver(events); } @Override public void onCancel(Object args) { linksReceiver = null; } } ); } @Override public void onNewIntent(Intent intent){ super.onNewIntent(intent); if(intent.getAction() == android.content.Intent.ACTION_VIEW && linksReceiver != null) { linksReceiver.onReceive(this.getApplicationContext(), intent); } } private BroadcastReceiver createChangeReceiver(final EventChannel.EventSink events) { return new BroadcastReceiver() { @Override public void onReceive(Context context, Intent intent) { // NOTE: assuming intent.getAction() is Intent.ACTION_VIEW String dataString = intent.getDataString(); if (dataString == null) { events.error("UNAVAILABLE", "Link unavailable", null); } else { events.success(dataString); } ; } }; } } 

आइओएस भाग में ऐसा ही करते हैं। स्विफ्ट में, हमें फ़्लटरस्ट्रीमहैंडलर बनाने और किसी भी लिंक को संसाधित करने की आवश्यकता है जो हमें प्राप्त होती है जबकि एप्लिकेशन पृष्ठभूमि में है। AppDelegate.swift को फिर से बदलने का समय आ गया है

 @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { private var eventChannel: FlutterEventChannel? private let linkStreamHandler = LinkStreamHandler() override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]? ) -> Bool { let controller = window.rootViewController as! FlutterViewController eventChannel = FlutterEventChannel(name: "poc.deeplink.flutter.dev/events", binaryMessenger: controller) GeneratedPluginRegistrant.register(with: self) eventChannel?.setStreamHandler(linkStreamHandler) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } override func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { eventChannel?.setStreamHandler(linkStreamHandler) return linkStreamHandler.handleLink(url.absoluteString) } } class LinkStreamHandler:NSObject, FlutterStreamHandler { var eventSink: FlutterEventSink? // links will be added to this queue until the sink is ready to process them var queuedLinks = [String]() func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? { self.eventSink = events queuedLinks.forEach({ events($0) }) queuedLinks.removeAll() return nil } func onCancel(withArguments arguments: Any?) -> FlutterError? { self.eventSink = nil return nil } func handleLink(_ link: String) -> Bool { guard let eventSink = eventSink else { queuedLinks.append(link) return false } eventSink(link) return true } } 

जब हम दोनों भागों को जोड़ते हैं: एप्लिकेशन लॉन्च करने के लिए भाग और पृष्ठभूमि में एप्लिकेशन के लिए भाग - हम डीप लिंक्स पर सभी उपयोगकर्ता क्लिकों को नियंत्रित करेंगे।

स्पंदन में गहरी कड़ियाँ प्रसंस्करण

प्लेटफ़ॉर्म भाग इसके लिए तैयार है, यह फ़्लटर भाग पर आगे बढ़ने का समय है। जैसा कि आप शायद जानते हैं, आप विभिन्न वास्तु दृष्टिकोणों का उपयोग करके स्पंदन पर अनुप्रयोग बना सकते हैं। इस विषय पर पहले से ही कई लेख लिखे गए हैं ( उदाहरण के लिए, यह एक ), लेकिन व्यक्तिगत रूप से मुझे लगता है कि शुद्ध बीएलओसी सबसे उपयुक्त दृष्टिकोण है। इसलिए, मैं एक अलग बीएलओसी तैयार करूंगा जो इन लिंक्स को हैंडल करेगा। नतीजतन, हमें कोड मिलता है जो यूआई से बिल्कुल जुड़ा नहीं है और जहां भी सुविधाजनक हो, लिंक प्राप्त करना संभाल सकता है।

 class DeepLinkBloc extends Bloc { //Event Channel creation static const stream = const EventChannel('poc.deeplink.flutter.dev/events'); //Method channel creation static const platform = const MethodChannel('poc.deeplink.flutter.dev/channel'); StreamController<String> _stateController = StreamController(); Stream<String> get state => _stateController.stream; Sink<String> get stateSink => _stateController.sink; //Adding the listener into contructor DeepLinkBloc() { //Checking application start by deep link startUri().then(_onRedirected); //Checking broadcast stream, if deep link was clicked in opened appication stream.receiveBroadcastStream().listen((d) => _onRedirected(d)); } _onRedirected(String uri) { // Here can be any uri analysis, checking tokens etc, if it's necessary // Throw deep link URI into the BloC's stream stateSink.add(uri); } @override void dispose() { _stateController.close(); } Future<String> startUri() async { try { return platform.invokeMethod('initialLink'); } on PlatformException catch (e) { return "Failed to Invoke: '${e.message}'."; } } } 

विशेष रूप से उन लोगों के लिए जिन्हें बीएलओसी और स्ट्रीमब्यूल्डर्स के साथ कोई पिछला अनुभव नहीं था, मैं एक उदाहरण विजेट तैयार करूंगा जो इस बीएलओसी के साथ काम करेगा। विजेट StreamBuilder पर आधारित है, जो स्ट्रीम से प्राप्त घटनाओं के आधार पर UI का पुनर्निर्माण करता है।

 class PocWidget extends StatelessWidget { @override Widget build(BuildContext context) { DeepLinkBloc _bloc = Provider.of<DeepLinkBloc>(context); return StreamBuilder<String>( stream: _bloc.state, builder: (context, snapshot) { if (!snapshot.hasData) { return Container( child: Center( child: Text('No deep link was used '))); } else { return Container( child: Center( child: Padding( padding: EdgeInsets.all(20.0), child: Text('Redirected: ${snapshot.data}')))); } }, ); } } 

Tadam! वह सब है। अब सब कुछ काम करता है!

परीक्षण करने के लिए, एप्लिकेशन को तीन अलग-अलग तरीकों से चलाएं। मैन्युअल रूप से और डीप लिंक्स के माध्यम से, पहले URI poc://deeplink.flutter.dev , और फिर poc://deeplink.flutter.dev/parameter । यहाँ स्क्रीनशॉट क्या हुआ:



डीप लिंक्स के साथ काम करने के अन्य तरीके हैं। उदाहरण के लिए, आप इसके लिए फायरबेस डायनेमिक लिंक का उपयोग कर सकते हैं। फ्लटर के साथ उनका उपयोग करने के तरीके पर एक उत्कृष्ट लेख है । डीप लिंक को जोड़ने के लिए एक रेडीमेड 'यूनी-लिंक' लाइब्रेरी भी है - आप इसका उपयोग कर सकते हैं। और यदि आप तीसरे पक्ष के पुस्तकालयों पर निर्भर नहीं होना चाहते हैं, तो आप हमेशा अपना स्वयं का कार्यान्वयन कर सकते हैं। मुझे उम्मीद है कि मेरा लेख आपको इसमें मदद करेगा!

स्रोत कोड

उपरोक्त उदाहरण के लिए स्रोत कोड यहां देखा जा सकता है ।

कुछ उपयोगी जानकारी

यदि आप इस बिंदु तक लेख पढ़ते हैं, तो सबसे अधिक संभावना है कि आप फ़्लटर विकास में रुचि रखते हैं)। मैं कई संसाधनों के बारे में बात करना चाहता हूं जो आपके लिए उपयोगी हो सकते हैं। बहुत समय पहले नहीं, रूसी बोलने वाले पॉडकास्ट की एक जोड़ी बनाई गई थी जो सीधे फ्लटर विकास से संबंधित हैं। मैं उनसे सदस्यता लेने की सलाह देता हूं: स्पंदन देव पोडकास्ट ( टेलीग्राम चैनल ), जहां हम स्पंदन विकास के ज्वलंत मुद्दों पर चर्चा करते हैं, और मोबाइल पीपुल टॉक्स ( टेलीग्राम चैनल ), जहां हम विभिन्न बिंदुओं से, सिद्धांत रूप में मोबाइल विकास समस्याओं पर चर्चा करते हैं। लीडिंग मोबाइल पीपल टॉक्स आईओएस, एंड्रॉइड, रिएक्टनेटिव और स्पंदन हैं।