این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

افزودن WebView به برنامه Flutter خود

۱. مقدمه

آخرین به‌روزرسانی: 2021-10-19

با افزونه WebView Flutter می‌توانید یک ویجت WebView به برنامه اندروید یا iOS Flutter خود اضافه کنید. در iOS، ویجت WebView توسط یک WKWebView پشتیبانی می‌شود، در حالی که در اندروید، ویجت WebView توسط یک WebView پشتیبانی می‌شود. این افزونه می‌تواند ویجت‌های Flutter را روی نمای وب رندر کند. بنابراین برای مثال، می‌توان یک منوی کشویی را روی نمای وب رندر کرد.

آنچه خواهید ساخت

در این آزمایشگاه کد، شما یک برنامه موبایل را گام به گام با استفاده از وب ویو و با استفاده از Flutter SDK خواهید ساخت. برنامه شما:

نمایش محتوای وب در WebView
نمایش ویجت‌های فلاتر به صورت انباشته روی WebView
واکنش به رویدادهای پیشرفت بارگذاری صفحه
کنترل WebView از طریق WebViewController
مسدود کردن وب‌سایت‌ها با استفاده از NavigationDelegate
ارزیابی عبارات جاوا اسکریپت
مدیریت فراخوانی‌های برگشتی از جاوا اسکریپت با JavascriptChannels
تنظیم، حذف، اضافه یا نمایش کوکی‌ها
بارگذاری و نمایش HTML از فایل‌ها، فایل‌ها یا رشته‌های حاوی HTML

شبیه‌ساز آیفون که یک برنامه Flutter را با یک نمای وب جاسازی‌شده که صفحه اصلی Flutter.dev را نشان می‌دهد، اجرا می‌کند.

شبیه‌ساز اندروید که یک برنامه Flutter را با یک نمای وب جاسازی‌شده که صفحه اصلی Flutter.dev را نشان می‌دهد، اجرا می‌کند.

آنچه یاد خواهید گرفت

در این آزمایشگاه کد، نحوه استفاده از افزونه webview_flutter را به روش‌های مختلفی از جمله موارد زیر خواهید آموخت:

نحوه پیکربندی افزونه webview_flutter
نحوه گوش دادن به رویدادهای پیشرفت بارگذاری صفحه
نحوه کنترل پیمایش صفحه
چگونه به WebView دستور دهیم که در طول تاریخچه خود به عقب و جلو حرکت کند
نحوه ارزیابی جاوا اسکریپت، از جمله استفاده از نتایج برگشتی
نحوه ثبت فراخوانی‌های برگشتی برای فراخوانی کد دارت از جاوا اسکریپت
نحوه مدیریت کوکی‌ها
نحوه بارگذاری و نمایش صفحات HTML از فایل‌ها یا رشته‌های حاوی HTML

آنچه نیاز دارید

اندروید استودیو ۴.۱ یا بالاتر (برای توسعه اندروید)
Xcode نسخه ۱۲ یا بالاتر (برای توسعه iOS)
کیت توسعه نرم‌افزار فلاتر
یک ویرایشگر کد، مانند اندروید استودیو یا ویژوال استودیو کد .

۲. محیط توسعه فلاتر خود را تنظیم کنید

برای تکمیل این آزمایشگاه به دو نرم‌افزار نیاز دارید - SDK فلاتر و یک ویرایشگر .

شما می‌توانید codelab را با استفاده از هر یک از این دستگاه‌ها اجرا کنید:

یک دستگاه فیزیکی اندروید یا iOS که به رایانه شما متصل شده و روی حالت توسعه‌دهنده (Developer mode) تنظیم شده باشد.
شبیه‌ساز iOS (نیاز به نصب ابزارهای Xcode دارد).
شبیه‌ساز اندروید (نیاز به راه‌اندازی در اندروید استودیو دارد).

۳. شروع کار

شروع کار با فلاتر

روش‌های مختلفی برای ایجاد یک پروژه جدید Flutter وجود دارد که هم اندروید استودیو و هم ویژوال استودیو کد ابزارهایی برای این کار ارائه می‌دهند. یا می‌توانید رویه‌های مرتبط را برای ایجاد یک پروژه دنبال کنید، یا دستورات زیر را در یک ترمینال خط فرمان مفید اجرا کنید.

$ flutter create --platforms=android,ios webview_in_flutter
Creating project webview_in_flutter...
Resolving dependencies in `webview_in_flutter`...
Downloading packages...
Got dependencies in `webview_in_flutter`.
Wrote 74 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd webview_in_flutter
  $ flutter run

Your application code is in webview_in_flutter/lib/main.dart.

افزودن افزونه WebView Flutter به عنوان یک وابستگی

افزودن قابلیت‌های اضافی به یک برنامه Flutter به بهترین شکل با استفاده از بسته‌های Pub انجام می‌شود. در این آزمایشگاه کد، افزونه webview_flutter را به پروژه خود اضافه خواهید کرد. دستورات زیر را در ترمینال اجرا کنید.

$ cd webview_in_flutter
$ flutter pub add webview_flutter
Resolving dependencies...
Downloading packages...
  collection 1.18.0 (1.19.0 available)
  leak_tracker 10.0.5 (10.0.7 available)
  leak_tracker_flutter_testing 3.0.5 (3.0.7 available)
  material_color_utilities 0.11.1 (0.12.0 available)
+ plugin_platform_interface 2.1.8
  string_scanner 1.2.0 (1.3.0 available)
  test_api 0.7.2 (0.7.3 available)
+ webview_flutter 4.9.0
+ webview_flutter_android 3.16.7
+ webview_flutter_platform_interface 2.10.0
+ webview_flutter_wkwebview 3.15.0
Changed 5 dependencies!
6 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

اگر فایل pubspec.yaml خود را بررسی کنید، خواهید دید که در بخش وابستگی‌ها، خطی برای افزونه webview_flutter وجود دارد.

پیکربندی minSDK اندروید

برای استفاده از افزونه webview_flutter در اندروید، باید minSDK را روی 20 تنظیم کنید. فایل android/app/build.gradle خود را به صورت زیر تغییر دهید:

اندروید/اپلیکیشن/ساخت.گرادل

android {
    //...

    defaultConfig {
        applicationId = "com.example.webview_in_flutter"
        minSdk = 20                                         // Modify this line
        targetSdk = flutter.targetSdkVersion
        versionCode = flutterVersionCode.toInteger()
        versionName = flutterVersionName
    }

۴. افزودن ویجت WebView به برنامه Flutter

در این مرحله شما یک WebView به برنامه خود اضافه خواهید کرد. WebViewها، نماهای داخلی میزبانی شده هستند و شما به عنوان یک توسعه‌دهنده برنامه می‌توانید نحوه میزبانی این نماهای داخلی را در برنامه خود انتخاب کنید. در اندروید، می‌توانید بین Virtual Displays، که پیش‌فرض اندروید است، و Hybrid composition یکی را انتخاب کنید. با این حال، iOS همیشه از Hybrid composition استفاده می‌کند.

برای بحث عمیق‌تر در مورد تفاوت‌های بین نمایشگرهای مجازی و ترکیب ترکیبی، مستندات مربوط به میزبانی نماهای بومی اندروید و iOS در برنامه Flutter خود با استفاده از Platform Views را مطالعه کنید.

قرار دادن یک وب ویو روی صفحه نمایش

محتویات lib/main.dart را با موارد زیر جایگزین کنید:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

اجرای این برنامه در iOS یا اندروید، یک WebView را به عنوان یک پنجره مرورگر با حاشیه کامل (full bleed) در دستگاه شما نشان می‌دهد، به این معنی که مرورگر در دستگاه شما به صورت تمام صفحه و بدون هیچ گونه حاشیه یا حاشیه‌ای نمایش داده می‌شود. هنگام اسکرول کردن، متوجه قسمت‌هایی از صفحه خواهید شد که ممکن است کمی عجیب به نظر برسند. دلیل این امر غیرفعال بودن جاوا اسکریپت است و رندر صحیح flutter.dev به جاوا اسکریپت نیاز دارد.

اجرای برنامه

برنامه Flutter را در iOS یا اندروید اجرا کنید تا یک Webview را ببینید که وب‌سایت flutter.dev را نمایش می‌دهد. همچنین می‌توانید برنامه را در یک شبیه‌ساز اندروید یا یک شبیه‌ساز iOS اجرا کنید. می‌توانید آدرس اولیه WebView را مثلاً با وب‌سایت خودتان جایگزین کنید.

$ flutter run

با فرض اینکه شبیه‌ساز یا امولاتور مناسب را اجرا کرده‌اید، یا یک دستگاه فیزیکی به آن متصل است، پس از کامپایل و استقرار برنامه روی دستگاه خود، باید چیزی شبیه به موارد زیر را ببینید:

شبیه‌ساز آیفون که یک برنامه Flutter را با یک نمای وب جاسازی‌شده که صفحه اصلی Flutter.dev را نشان می‌دهد، اجرا می‌کند.

۵. گوش دادن به رویدادهای بارگذاری صفحه

ویجت WebView چندین رویداد پیشرفت بارگذاری صفحه را ارائه می‌دهد که برنامه شما می‌تواند به آنها گوش دهد. در طول چرخه بارگذاری صفحه WebView ، سه رویداد بارگذاری صفحه مختلف اجرا می‌شوند: onPageStarted ، onProgress و onPageFinished . در این مرحله شما یک نشانگر بارگذاری صفحه پیاده‌سازی خواهید کرد. به عنوان یک مزیت، این نشان می‌دهد که می‌توانید محتوای Flutter را روی ناحیه محتوای WebView رندر کنید.

افزودن رویدادهای بارگذاری صفحه به برنامه شما

یک فایل منبع جدید در lib/src/web_view_stack.dart ایجاد کنید و آن را با محتوای زیر پر کنید:

lib/src/web_view_stack.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewStack extends StatefulWidget {
  const WebViewStack({super.key});

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setNavigationDelegate(NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
      ))
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: controller,
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

این کد، ویجت WebView را در یک Stack قرار داده است و به طور مشروط، زمانی که درصد بارگذاری صفحه کمتر از ۱۰۰٪ باشد، WebView با یک LinearProgressIndicator همپوشانی می‌دهد. از آنجایی که این شامل وضعیت برنامه است که با گذشت زمان تغییر می‌کند، شما این وضعیت را در یک کلاس State مرتبط با StatefulWidget ذخیره کرده‌اید.

برای استفاده از این ویجت جدید WebViewStack ، lib/main.dart خود را به صورت زیر تغییر دهید:

lib/main.dart

import 'package:flutter/material.dart';

import 'src/web_view_stack.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebViewStack(),
    );
  }
}

وقتی برنامه را اجرا می‌کنید، بسته به شرایط شبکه و اینکه آیا مرورگر صفحه‌ای را که به آن هدایت می‌شوید، ذخیره کرده است یا خیر، یک نشانگر بارگذاری صفحه در بالای ناحیه محتوای WebView مشاهده خواهید کرد.

۶. کار با WebViewController

ویجت WebView امکان کنترل برنامه‌نویسی را با یک WebViewController فراهم می‌کند. این کنترلر پس از ساخت ویجت WebView از طریق یک فراخوانی مجدد در دسترس قرار می‌گیرد. ماهیت ناهمزمان در دسترس بودن این کنترلر، آن را به کاندیدای اصلی برای کلاس ناهمزمان Completer<T> در Dart تبدیل می‌کند.

lib/src/web_view_stack.dart را به صورت زیر به‌روزرسانی کنید:

lib/src/web_view_stack.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewStack extends StatefulWidget {
  const WebViewStack({required this.controller, super.key}); // MODIFY

  final WebViewController controller;                        // ADD

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;
  // REMOVE the controller that was here

  @override
  void initState() {
    super.initState();
    // Modify from here...
    widget.controller.setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
      ),
    );
    // ...to here.
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: widget.controller,                     // MODIFY
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

ویجت WebViewStack اکنون از یک کنترلر ایجاد شده در ویجت اطراف استفاده می‌کند. این امر امکان اشتراک‌گذاری کنترلر WebViewWidget را با سایر بخش‌های برنامه فراهم می‌کند.

داشتن یک WebView کارآمد یک چیز است، اما امکان حرکت به عقب و جلو در تاریخچه صفحه و بارگذاری مجدد صفحه، مجموعه‌ای از امکانات مفید خواهد بود. خوشبختانه، با یک WebViewController می‌توانید این قابلیت را به برنامه خود اضافه کنید.

یک فایل منبع جدید در lib/src/navigation_controls.dart ایجاد کنید و آن را با موارد زیر پر کنید:

lib/src/navigation_controls.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class NavigationControls extends StatelessWidget {
  const NavigationControls({required this.controller, super.key});

  final WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () async {
            final messenger = ScaffoldMessenger.of(context);
            if (await controller.canGoBack()) {
              await controller.goBack();
            } else {
              messenger.showSnackBar(
                const SnackBar(content: Text('No back history item')),
              );
              return;
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.arrow_forward_ios),
          onPressed: () async {
            final messenger = ScaffoldMessenger.of(context);
            if (await controller.canGoForward()) {
              await controller.goForward();
            } else {
              messenger.showSnackBar(
                const SnackBar(content: Text('No forward history item')),
              );
              return;
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.replay),
          onPressed: () {
            controller.reload();
          },
        ),
      ],
    );
  }
}

این ویجت از WebViewController که در زمان ساخت با آن به اشتراک گذاشته شده است، استفاده می‌کند تا کاربر بتواند WebView را از طریق مجموعه‌ای از IconButton ها کنترل کند.

با WebViewStack به‌روزرسانی‌شده و NavigationControls تازه ساخته‌شده، اکنون زمان آن رسیده است که همه چیز را در یک WebViewApp به‌روزرسانی‌شده کنار هم قرار دهید. اینجاست که WebViewController مشترک را می‌سازیم. با توجه به اینکه WebViewApp در بالای درخت ویجت‌ها در این برنامه قرار دارد، ایجاد آن در این سطح منطقی است.

فایل lib/main.dart را به صورت زیر به‌روزرسانی کنید:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';  // ADD

import 'src/navigation_controls.dart';                  // ADD
import 'src/web_view_stack.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  // Add from here...
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }
  // ...to here.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
        // Add from here...
        actions: [
          NavigationControls(controller: controller),
        ],
        // ...to here.
      ),
      body: WebViewStack(controller: controller),       // MODIFY
    );
  }
}

اجرای برنامه باید یک صفحه وب با کنترل‌های زیر را نمایش دهد:

شبیه‌ساز آیفون که یک برنامه Flutter را با یک نمای وب جاسازی‌شده اجرا می‌کند که صفحه اصلی Flutter.dev را با کنترل‌های صفحه قبل، صفحه بعد و بارگذاری مجدد صفحه نشان می‌دهد.

شبیه‌ساز اندروید که یک برنامه Flutter را با یک نمای وب تعبیه‌شده اجرا می‌کند که صفحه اصلی Flutter.dev را با کنترل‌های صفحه قبل، صفحه بعد و بارگذاری مجدد صفحه نشان می‌دهد.

۷. پیگیری ناوبری با NavigationDelegate

WebView یک NavigationDelegate, در اختیار برنامه شما قرار می‌دهد که به برنامه شما امکان می‌دهد پیمایش صفحه از ویجت WebView را ردیابی و کنترل کند. وقتی یک پیمایش توسط WebView, مثلاً وقتی کاربر روی یک لینک کلیک می‌کند، NavigationDelegate فراخوانی می‌شود. فراخوانی NavigationDelegate می‌تواند برای کنترل اینکه آیا WebView پیمایش را ادامه می‌دهد یا خیر، استفاده شود.

یک NavigationDelegate سفارشی ثبت کنید

در این مرحله، شما یک فراخوانی NavigationDelegate برای مسدود کردن ناوبری به YouTube.com ثبت خواهید کرد. توجه داشته باشید که این پیاده‌سازی ساده، محتوای درون‌خطی یوتیوب را نیز مسدود می‌کند، که در صفحات مختلف مستندات API فلاتر ظاهر می‌شود.

فایل lib/src/web_view_stack.dart را به صورت زیر به‌روزرسانی کنید:

lib/src/web_view_stack.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewStack extends StatefulWidget {
  const WebViewStack({required this.controller, super.key});

  final WebViewController controller;

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;

  @override
  void initState() {
    super.initState();
    widget.controller.setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
        // Add from here...
        onNavigationRequest: (navigation) {
          final host = Uri.parse(navigation.url).host;
          if (host.contains('youtube.com')) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text(
                  'Blocking navigation to $host',
                ),
              ),
            );
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
        // ...to here.
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: widget.controller,
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

در مرحله بعد، یک آیتم منو اضافه خواهید کرد تا بتوانید NavigationDelegate خود را با استفاده از کلاس WebViewController آزمایش کنید. به عنوان یک تمرین، به خواننده واگذار می‌شود تا منطق فراخوانی را طوری تکمیل کند که فقط ناوبری کامل صفحه به YouTube.com مسدود شود و همچنان محتوای درون‌خطی YouTube در مستندات API مجاز باشد.

۸. افزودن دکمه منو به AppBar

در چند مرحله بعدی، یک دکمه منو در ویجت AppBar ایجاد خواهید کرد که برای ارزیابی جاوا اسکریپت، فراخوانی کانال‌های جاوا اسکریپت و مدیریت کوکی‌ها استفاده می‌شود. در مجموع، یک منوی واقعاً مفید.

یک فایل منبع جدید در lib/src/menu.dart ایجاد کنید و آن را با موارد زیر پر کنید:

افزودن WebView به برنامه Flutter خود

۱. مقدمه

آنچه خواهید ساخت

آنچه یاد خواهید گرفت

آنچه نیاز دارید

۲. محیط توسعه فلاتر خود را تنظیم کنید

۳. شروع کار

شروع کار با فلاتر

افزودن افزونه WebView Flutter به عنوان یک وابستگی

پیکربندی minSDK اندروید

۴. افزودن ویجت WebView به برنامه Flutter

قرار دادن یک وب ویو روی صفحه نمایش

اجرای برنامه

۵. گوش دادن به رویدادهای بارگذاری صفحه

افزودن رویدادهای بارگذاری صفحه به برنامه شما

۶. کار با WebViewController

دسترسی به WebViewController از طریق ویجت WebView

ساخت کنترل‌های ناوبری

افزودن کنترل‌های ناوبری به AppBar

۷. پیگیری ناوبری با NavigationDelegate

یک NavigationDelegate سفارشی ثبت کنید

۸. افزودن دکمه منو به AppBar

۹. ارزیابی جاوا اسکریپت

۱۰. کار با کانال‌های جاوا اسکریپت

۱۱. مدیریت کوکی‌ها

دریافت لیست تمام کوکی‌ها

پاک کردن تمام کوکی‌ها

اضافه کردن کوکی

تنظیم کوکی با CookieManager

حذف یک کوکی

افزودن آیتم‌های منوی CookieManager

اجرای CookieManager

۱۲. بارگذاری فایل‌های Flutter، فایل‌ها و رشته‌های HTML در WebView

بارگذاری دارایی فلاتر

بارگذاری فایل محلی

بارگذاری رشته HTML

موارد منو را اضافه کنید

۱۳. همه چیز تمام شد!