شرح كيفية عمل dynamic link في Flutter باستخدام firebase

شرح كيفية عمل dynamic link في Flutter باستخدام firebase

معظم التطبيقات تستخدم dynamic link وهذا عباره عن توليد رابط لاحد المنشورات او المنتجات الخاصه بك واي شخص يقوم بالنقر على الرابط ينتقل الى رابط العنصر في تطبيقك واذا لم يكن التطبيق موجود في هاتف المستخدم سوف ينتقله الى رابط التطبيق على متجر جوجل بلاي او حتى تحويله على اي صفحة على الانترنت لكي يقوم بتحميل التطبيق الخاص بك وبعدها يستطيع استخدامه بدون مشاكل , وهذا الدرس من اهم الدروس التي على جميع المحترفين تطبيقها بشكل جيد لانها مهمه جدا .

سواء كنت تستهدف iOS أو Android ، أو الويب ، أو Windows ، أو macOS ، أو Linux ، أو تدمجها كمجموعة أدوات واجهة المستخدم لمنصة من اختيارك ، نعتقد أن Flutter سيساعدك على إنشاء تطبيقات جميلة وسريعة مع تطوير منتج وقابل للتوسيع ومفتوح نموذج.

نود أن نوفر للمصممين حرية التعبير عن رؤيتهم الإبداعية بالكامل ، غير المقيدة بقيود الإطار الأساسي. نظرًا لإمكانيات التركيب المعقدة والتصميم متعدد الطبقات لـ Flutter ، يمكنك التحكم الكامل في كل بكسل على الشاشة. يمكنك تراكب وتحريك الرسومات والفيديو والنص وعناصر التحكم دون قيود. سواء كنت تقوم بالتطوير لنظام iOS (Cupertino) أو Android (Material) ، فإن Flutter يتميز بمجموعة كاملة من الأدوات المصغّرة التي توفر تجارب مثالية للبكسل إلى جانب إمكانيات التغيير والتبديل أو إنشاء أنماط مرئية جديدة تمامًا.

ربط التطبيق وتوليد link dymanic

سوف تنتقل الى حسابك في firebase وتتاكد من ربط تطبيقك بالفايربيز وبعدها سوف تتمكن من اخراج وتوليد رابط لتطبيقك ويفضل ان يكون الرابط عباره عن اسم التطبيق وبعدها link واخيرا Page كما هو موضح بالصورة التاليه .

توليد رابط لمنتجاتك في Flutter

قم بوضع الرابط التالي مع تغيير اسم الرابط بالرابط الذي قمت بتوليده وبعدها ضع اسم الpackage واخيرا في خيار link تضع الرابط الذي سوف يتم توليده عند بدء تشغيل الmethode .

cubit.dart

Future<String> createDynamicLink({required String id}) async {
    final dynamicLinkParams = DynamicLinkParameters(
      uriPrefix: "https://benmart.page.link",
      link: Uri.parse(
          'https://benmartproduct.com/Product?id=${id}'),
      androidParameters: const AndroidParameters(
        packageName: "com.shopaa.benmart",
        minimumVersion: 30,
      ),
      iosParameters: const IOSParameters(
        bundleId: "com.shopaa.benmart",
        appStoreId: "123456789",
        minimumVersion: "1.0.1",
      ),
      googleAnalyticsParameters: const GoogleAnalyticsParameters(
        source: "twitter",
        medium: "social",
        campaign: "example-promo",
      ),
      socialMetaTagParameters: SocialMetaTagParameters(
        title: "Example of a Dynamic Link",
        imageUrl: Uri.parse("https://example.com/image.png"),
      ),
    );

    final dynamicLink = await FirebaseDynamicLinks.instance.buildShortLink(dynamicLinkParams);
    return dynamicLink.shortUrl.toString();
  }
  

في هذا الجزء سوف نقوم بإستخدام الوظيفة السابقه من داخل صفحة cubit كما هو موضح بالصورة وبعدها استخدمنا package اخرى لمشاركة الرابط وقد سبق وشرحنا لكم هذه الpackage في دروس سابقة 

ui.dart

MyFavAndShare(
                        topLeft: 0,
                        bottomLeft: 0,
                        bottomRight: 0,
                        color: HexColor(mainColor),
                        topRight: 0,
                        icon: Icons.share_rounded,
                        iconColor: Colors.white,
                        onTap: () async {
                          String url = await cubit.createDynamicLink(id: widget.model.productId!);
                          debugPrint('url is   : $url');
                          await FlutterShare.share(
                              title: 'Share this product with your friends \n ${widget.model.productName}',
                              text: widget.model.productName!,
                              linkUrl: url,
                          );
                        },
                      ),
                      

كيفية فتح التطبيق على العنصر بعد النقر على الرابط

في هذا الجزء والذي يعد الاخير وهو ماذا سوف يحدث عند تشغيل التطبيق بعد النقر على الرابط , في هذا الجزء تأكدت ان المستخدم فعلا قام بعميلة تسجيل دخول للتطبيق وايضا الرابط اذا كان يبدء ب + فهذا جزء زيادة قد لا تلاحظه وبناء على النتيجة سوف انقله لرابط المنتج او سوف اقوم بنقله الى صفحة تسجيل الدخول , وهذا يحدث عند فتح الصفحه من خلال الرابط ويفضل وضعها باول صفحة تظهر عند فتح التطبيق .

main_ui.dart

class _HomeLayoutState extends State<HomeLayout> {
  late MainBloc cubit;
  PendingDynamicLinkData? initialLink;

  Future initDynamicLink() async {
     initialLink = await FirebaseDynamicLinks.instance.getInitialLink();
    if (initialLink != null) {
      final Uri deepLink = initialLink!.link;
      String idProduct = deepLink.toString().split('=')[1];
      if (idProduct.startsWith('+')) {
        idProduct = idProduct.substring(1);
      }

      print('deepLink:home ${deepLink.path} == /Product');
      print('deepLink:home ${deepLink} == link');
      print('deepLink:home ${idProduct} == Id product');

      if (uid != '') {
        await cubit.getProductDetailsById(text: idProduct).then((value)=>
            navigateTo(context, DetailsPage(model: value))
        );
      } else {
        navigateTo(context, const LoginPage());
      }

      FirebaseDynamicLinks.instance.onLink.listen((dynamicLinkData) async {
        await cubit.getProductDetailsById(text: idProduct).then((value)=>
            navigateTo(context, DetailsPage(model: value))
        );
      }).onError((error) {
        // Handle errors
      });

    }
  }

  @override
  void initState()  {
    super.initState();
    cubit = context.read<MainBloc>();
    initDynamicLink();
  }
  

android sdk manager تحميل flutter developers applications create app android android studio mac