اتصال نقاط: کاوش پیوند عمیق فلوتر برای تجربیات کاربر بدون درز بدون Firebase. (قسمت 1)

به دنیای عجیب و غریبی که در آن ویجت ها می رقصند، بارگذاری مجدد داغ حکومت می کنند و اشکالات از ترس چارچوب قدرتمند فلاتر می لرزند، خوش آمدید! خود را برای سفر در سرزمین رمز و خنده آماده کنید تا جنبه خنده دار توسعه فلاتر را کشف کنیم. بنابراین شنل اشکال زدایی خود را بپوشید، یک فنجان قهوه مجازی بردارید و آماده شوید تا از طریق این ماجراجویی لذت بخش در مسیر خود حرکت کنید.

ما در آستانه سفری برای یادگیری و پیاده سازی Deep-linking در فلاتر هستیم. اما قبل از حرکت، اجازه دهید یک لحظه به بررسی اصول اولیه بپردازیم.

Deep-linking چیست؟

بیایید با آن روبرو شویم: انسان ها ذاتا موجوداتی تنبل هستند. ما همه چیز را فوراً می خواهیم، ​​با ضربه زدن انگشتانمان، یا بهتر است بگوییم، ضربه نمایشگرمان. وقتی در رسانه های اجتماعی به یک پست جذاب یا یک ویدیوی جذاب از گربه برخورد می کنیم، آخرین چیزی که می خواهیم این است که به وب سایت تصادفی در یک مرورگر هدایت شویم. پیوند عمیق برای صرفه جویی در روز به ما امکان می دهد به طور یکپارچه از فیدهای رسانه های اجتماعی خود به محتوای شادابی که میل می کنیم، انتقال پیدا کنیم، همه در محدوده برنامه های مورد علاقه ما.

تفاوت بین App-link و لینک های عمیق؟

ادامه مطلب

توجه داشته باشید که ما با App Links شروع خواهیم کرد و پیوندهای عمیق در قسمت بعدی با استفاده از پیوند پویا firebase یکپارچه خواهند شد.

شروع با پیوندهای برنامه

بنابراین اساساً ما می خواهیم از وب سایت وبلاگ با react js که روی vercel میزبانی شده است استفاده کنیم که مسیرهای زیر را دارد:

این کاملاً مستقل از چارچوب وب است که می توانید از هر فناوری وب برای وب سایت استفاده کنید.

راه اندازی وب سایت:

• شما می توانید وب سایت خود را بسازید یا برای مثال محتوای زیر را کپی کنید.

• همانطور که در بالا ذکر شد، پیوندهای برنامه نیاز به پیوندهای دارایی دیجیتال دارند که در وب سایت شما میزبانی می شوند.

برای اطلاعات بیشتر

• ايجاد كردن /.well-known/assetlinks.json فایل و باید با آدرس زیر قابل دسترسی باشد your-domain.com/.well-known/assetlinks.json. (برای ReactJS این فایل را اضافه کنید public پوشه)

[
    {
        "relation": [
            "delegate_permission/common.handle_all_urls"
        ],
        "target": {
            "namespace": "android_app",
            "package_name": "package_name",
            "sha256_cert_fingerprints": [
               "SHA256KEY"
            ]
        }
    }
]

package_name: نام بسته اپلیکیشن فلاتر خود را اضافه کنید.

sha256_cert_fingerprints: کلیدهای SHA256 خود را اضافه کنید. چگونه ایجاد کنیم؟

• حالا این فایل را در دسترس قرار دهید

کار ما با بخش وب سایت تمام شد.

راه اندازی پروژه فلاتر

برای flutter، ما از ابتدا پروژه ایجاد نمی کنیم، من فقط می خواهم نحوه مدیریت پیوند را به اشتراک بگذارم.

• وابستگی های زیر را اضافه کنید:

dependencies:
  uni_links: ^0.5.1

Uni Links از دو نوع پیوند اندروید پشتیبانی می کند: “پیوندهای برنامه” و “پیوندهای عمیق”.

- App Links only work with https scheme and require a specified host, plus a hosted file - assetlinks.json. Check the Guide links below.
- Deep Links can have any custom scheme and do not require a host, nor a hosted file. The downside is that any app can claim a scheme + host combo, so make sure yours are as unique as possible, eg. HST0000001://host.com.

شما باید حداقل یکی از دو فیلتر قصد را در آن اعلام کنید android/app/src/main/AndroidManifest.xml:

<manifest ...>
  <!-- ... other tags -->
  <application ...>
    <activity ...>
      <!-- ... other tags -->

      <!-- Deep Links -->
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
        <data
          android:scheme="[YOUR_SCHEME]"
          android:host="[YOUR_HOST]" />
      </intent-filter>

      <!-- App Links -->
      <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with https://YOUR_HOST -->
        <data
          android:scheme="https"
          android:host="[YOUR_HOST]" />
      </intent-filter>
    </activity>
  </application>
</manifest>

توجه داشته باشید که android:host ویژگی برای Deep Links اختیاری است.

• برای iOS: به دامنه معتبر مرتبط با اپل نیاز دارد، می توانید برای iOS به این مراجعه کنید.

اجازه می دهد تا به لینک برنامه شیرجه بزنیم

اگر از مسیرهای ایجاد شده استفاده می‌کنید که مطابق/دقیقاً با پیوند اشتراک‌گذاری شده مطابقت دارند، دیگر نیازی به مدیریت لینک ندارید، به طور خودکار شما را به مسیر دریافتی هدایت می‌کند. route. اما اگر از پیوند استفاده نمی کنید یا می خواهید به صورت دستی آن را مدیریت کنید، ما این کار را انجام می دهیم

• getInitialLink(): پیوندی را که برنامه با آن شروع شده است، در صورت وجود، برمی‌گرداند.

شما باید خیلی زود در زندگی برنامه خود با این کار کنار بیایید و فقط یک بار آن را مدیریت کنید.

import 'dart:async';
import 'dart:io';

import 'package:uni_links/uni_links.dart';
import 'package:flutter/services.dart' show PlatformException;

// ...

  Future<void> initUniLinks() async {
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      final initialLink = await getInitialLink();
      // Parse the link and warn the user, if it is not correct,
      // but keep in mind it could be `null`.
    } on PlatformException {
      // Handle exception by warning the user their action did not succeed
      // return?
    }
  }

// ...

import 'dart:async';
import 'dart:io';

import 'package:uni_links/uni_links.dart';

// ...

  StreamSubscription _sub;

  Future<void> initUniLinks() async {
    // ... check initialLink

    // Attach a listener to the stream
    _sub = linkStream.listen((String? link) {
      // Parse the link and warn the user, if it is not correct
    }, onError: (err) {
      // Handle exception by warning the user their action did not succeed
    });

    // NOTE: Don't forget to call _sub.cancel() in dispose()
  }

// ...

آزمایش پیوندهای عمیق شما

از ابزار ADB برای ارسال پیوندهای عمیق آزمایشی به برنامه خود استفاده کنید و تأیید کنید که آنها محتوای صحیح را باز می کنند.

adb shell 'am start -W -a android.intent.action.VIEW -c android.intent.category.BROWSABLE -d "unilinks://host/path/subpath"'

از Xcode برای شبیه‌سازی لینک‌های عمیق آزمایشی استفاده کنید و تأیید کنید که محتوای صحیح را باز می‌کنند.

/usr/bin/xcrun simctl openurl booted "unilinks://host/path/subpath"

بیایید نمونه پروژه را بررسی کنیم:

• با استفاده از مواد onGeneratedRoutes در فلوتر به صورت زیر:

• اشتراک لینک: با استفاده از share_plus بسته برای اشتراک گذاری لینک

 onPressed: () {
                Share.share(
                    'check out my blog "https://blogs-deeplink-example.vercel.app/blog/${blog?.id}');
              },

• مدیریت پیوند یا گوش دادن به AppLinks:

خروجی

قسمت دوم به زودی!!!!!

کد منبع:

Github Repo

من را دنبال کنید