فراتر از ترکیب پذیری: استفاده از Uniform به عنوان یک ابزار داخلی

طبق گفته Internal، یکی از ارائه‌دهندگان پیشرو Internal Tools، تیم‌های IT و مهندسی 40 درصد از زمان خود را صرف ساختن و نگهداری برنامه‌های داخلی و گردش کار مورد استفاده در سازمان خود می‌کنند. این باعث شده است که سازمان‌ها تیم‌های مهندسی نرم‌افزار اختصاصی داشته باشند یا از پلتفرم‌های ابزار داخلی برای برآوردن نیازهای سازمان خود استفاده کنند.

در این مقاله، ابزار داخلی چیست و چگونه می‌توانیم از Uniform به عنوان یک ابزار داخلی برای ایجاد یک برنامه زمانی News در Flutter استفاده کنیم.

ابزارهای داخلی چیست؟

Internal Tools هر نرم افزار داخلی است که توسط یک شرکت برای پشتیبانی از عملیات داخلی توسعه یافته و مورد استفاده قرار می گیرد. بر اساس نیازهای شرکت، تصمیم گیری در مورد ابزار داخلی معمولاً به ساخت داخلی آن (انعطاف پذیر و بدون قفل فروشنده) یا خرید آن به عنوان یک سرویس خلاصه می شود. در زیر برخی از مزایا ذکر شده است:

• مقرون به صرفه
• امنیت بهبود یافته است
• صرفه جویی در زمان
• کنترل بیشتر و افزایش بهره وری
• کارهای تکراری را خودکار کنید

متداول‌ترین ابزارهای داخلی به شرکت‌ها کمک می‌کنند تا به پرسش‌های مشتری پاسخ دهند، رفتار کاربران را تجزیه و تحلیل کنند، محتوا را مدیریت کنند و APIها و درخواست‌ها را مدیریت کنند.

با وجود ارائه، Internal Tools با چمدان خود نیز همراه است. فراتر از منحنی یادگیری، هزینه اشتراک و نگهداری و سایر موارد. مخصوصاً برای سازمان‌های کوچک با منابع محدود، اختصاص تیم‌های مهندسی نرم‌افزار یا اشتراک در پلت‌فرم Internal Tooling برای کمک به پشتیبانی از عملیات داخلی دشوار است.

بررسی یونیفورم و ارائه آن

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

پشتیبانی از ادغام چندگانه

Uniform بیشتر از 40 ادغام هایی از شبکه های تحویل محتوا، سیستم های مدیریت محتوای بدون سر، ابزارهای تحلیلی، مدیریت ایمیل و مدیریت رسانه. این پلتفرم با از بین بردن نیاز به اتصالات دستی، ادغام را آسان می کند.

راه حل بدون کد

این پلتفرم یک تجربه کاربری بصری را ارائه می‌کند که توسعه‌دهندگان، بازاریابان، توسعه‌دهندگان محتوا و سایر متخصصان به آن نیاز دارند تا عملیات‌های تجاری را بدون دخالت فناوری اطلاعات و عملیات انجام دهند.

منبع حقیقت

Uniform یک تجربه دیجیتالی واقعاً قابل ترکیب را با پشتیبانی از پشته های متعدد از تجارت، CMS، داده، CDN و غیره ارائه می دهد. آن را به عنوان یک منبع حقیقت واحد از طریق API ایمن و سریع خود ارائه می دهد.

بهترین تجربه کاربری در کلاس

فراتر از رابط کاربری بصری، Uniform همچنین با ارائه بهترین اسناد توسعه‌دهنده، SDK و کتابخانه‌ها، به توسعه‌دهندگان پاسخ می‌دهد.

اکنون که می‌دانیم ابزارهای داخلی چیست و چگونه می‌توانیم از عملکردهای Uniform به عنوان یکی استفاده کنیم، بیایید اکنون یک جدول زمانی News با Flutter و Uniform بسازیم.

پیش نیازها

برای درک کامل مفاهیم ارائه شده در این آموزش، موارد زیر مورد نیاز است:

شروع شدن

برای شروع، باید پروژه را با رفتن به دایرکتوری مورد نظر و اجرای دستور زیر کلون کنیم:

git clone https://github.com/Mr-Malomz/news_mobile && cd news_mobile

اجرای پروژه

ابتدا باید وابستگی های پروژه را با اجرای دستور زیر نصب کنیم:

flutter pub get

سپس با استفاده از دستور زیر پروژه را اجرا کنید:

flutter run

دستور بالا برنامه را در دستگاه انتخاب شده اجرا می کند.

منبع یابی تصویر و آپلود در کلودینری

برای شروع ساختن برنامه خود، باید نمونه تصاویر را برای برنامه Timeline News خود آپلود کنیم.

داده های نمونه

در داشبورد Cloudinary خود، تصاویر را با کلیک بر روی آن آپلود کردیم کتابخانه ی رسانه برگه، با کلیک بر روی بارگذاری، انتخاب آدرس وب گزینه، وارد کردن URLو روی آن کلیک کنید دکمه پیکان برای آپلود

پس از آپلود تصویر، شاهد نمایش آن در کنسول خواهیم بود.

قرار دادن همه اینها روی Uniform

با انجام این کار، می توانیم شروع به ایجاد کتابخانه های مؤلفه در Uniform کنیم. برای این کار باید ثبت نام کرده و اطلاعات مورد نیاز را تکمیل کنیم.

سپس نام پروژه مورد نظر را وارد کرده و کلیک کنید ادامه هید.

بعد، به مسیر بروید امنیت برگه، انتخاب کنید کلیدهای APIو روی آن کلیک کنید کلید API را اضافه کنید را فشار دهید تا یکی بسازید. ورودی news_mobile به عنوان نام API، را انتخاب کنید Developer به عنوان Role و روی آن کلیک کنید کلید API ایجاد کنید دکمه ایجاد کلید API.

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

نحوه کار مدل سازی در Uniform

Uniform از مفهوم Components و Compositions برای مدل سازی نیازهای برنامه استفاده می کند. اجزاء در برنامه های کاربردی یکنواخت مشابه کارهای توسعه نرم افزار کار می کنند. به ما این امکان را می دهد که برنامه خود را به بلوک های کوچکتر قابل استفاده مجدد با ویژگی ها تقسیم کنیم، در حالی که a ترکیب بندی ترکیبی از یک یا چند جزء است.

پشتیبانی یکپارچه سازی ابری را اضافه کنید

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

ادغام های موجود را جستجو یا مرور کنید، را انتخاب کنید ابری ادغام، روی آن کلیک کنید به پروژه اضافه کنید را فشار دهید، وارد کنید Cloudname، API Key، تست و ذخیره کنید.

ما می توانیم خودمان را بگیریم نام ابر و کلید ای پی ای از داشبورد Cloudinary ما.

اجزاء ایجاد کنید

برای شروع، به مسیر بروید صفحه اصلی را بزنید و روی پروژه کلیک کنید. سپس بر روی آن کلیک کنید محتوا منو را انتخاب کنید اجزاءو روی آن کلیک کنید کامپوننت اضافه کنید دکمه.

ورودی news_timeline به عنوان نام جزء، را انتخاب کنید گوشی های هوشمند به عنوان نماد، خواص را اضافه کنید news_title، و news_image همانطور که در بالا نشان داده شده است و سپس کلیک کنید خوب.

سپس بر روی آن کلیک کنید ذخیره کن و ببند دکمه.

اکنون که ما آن را ایجاد کرده ایم news_timeline، به عنوان یک طرح اولیه/ساختمان برای ایجاد برنامه جدول زمانی اخبار ما عمل خواهد کرد.

برای شروع، به مسیر بروید جزء روی صفحه کلیک کنید کامپوننت اضافه کنید دکمه، ورودی news_screen به عنوان نام جزء، و بررسی کنید جزء ترکیب. سپس به مسیر بروید شکاف ها بخش، و کلیک کنید اسلات اضافه کنید برای ایجاد یک شکاف

PS: اسلات ها به ما کمک می کنند نمونه هایی از جزء خود را ایجاد کنیم و به آنها اجازه می دهیم داده ها را به صورت پویا بپذیرند.*

ورودی news_screen به عنوان اسلات نام و کلیک کنید خوب.

سپس بر روی آن کلیک کنید ذخیره کن و ببند دکمه.

با انجام این کار، می توانیم شروع به استفاده از آن کنیم news_screen جزء برای نوشتن برنامه جدول زمانی اخبار ما. برای شروع، به مسیر بروید ترکیب بندی را انتخاب کنید news_screen به عنوان نوع ترکیب، ورودی news_mobile به عنوان نام، و ايجاد كردن.

در مرحله بعد، بر روی نماد پلاس برای افزودن یک جزء به ترکیب

انتخاب کنید news_timeline، مربوطه را اضافه کنید name و image برای جزء

برای اضافه کردن بقیه مراحل باید مراحل بالا را تکرار کنیم news_timeline داده ها. سپس بر روی آن کلیک کنید انتشار. این ترکیب ما را در دسترس برنامه های شخص ثالث قرار می دهد.

ما همچنین باید توجه داشته باشیم حلزون ترکیبی; هنگام پرس و جو از Uniform برای داده های اخبار ما مفید خواهد بود.

ادغام یونیفرم با فلاتر

با انجام این کار، می توانیم شروع به ساخت رابط کاربری کنیم و از Uniform برای ارائه لیست اخبار به صورت یکپارچه استفاده کنیم.

ایجاد مدل برنامه

Uniform با یک API پلتفرم مبتنی بر زبان برای مدیریت و نوشتن تجربه ارائه می‌شود. ما می توانیم API را با پر کردن آن تست کنیم کلید ای پی ای، شناسه پروژه، و حلزون حرکت کردن.

با در نظر گرفتن این موضوع، باید مدلی ایجاد کنیم تا پاسخ ارسال شده از Uniform را به یک شی Dart تبدیل کنیم. این مدل همچنین به سریال سازی JSON پاسخ خواهد داد. برای انجام این کار، یک را ایجاد کنید utils.dart فایل داخل libs پوشه و قطعه زیر را اضافه کنید:

class RootComposition {
  Composition composition;
  String created;
  RootComposition({required this.composition, required this.created});
  factory RootComposition.fromJson(Map<String, dynamic> json) {
    return RootComposition(
      composition: Composition.fromJson(json['composition']),
      created: json['created'],
    );
  }
}

class Composition {
  Slots slots;
  Composition({required this.slots});
  factory Composition.fromJson(Map<String, dynamic> json) {
    return Composition(
      slots: Slots.fromJson(json['slots']),
    );
  }
}

class Slots {
  List<NewsScreen> news;
  Slots({required this.news});
  factory Slots.fromJson(Map<String, dynamic> json) {
    var data = json['newsScreen'] as List;
    return Slots(
      news: data.map((news) => NewsScreen.fromJson(news)).toList(),
    );
  }
}

class NewsScreen {
  Parameters parameters;
  NewsScreen({required this.parameters});
  factory NewsScreen.fromJson(Map<String, dynamic> json) {
    return NewsScreen(
      parameters: Parameters.fromJson(json['parameters']),
    );
  }
}

class Parameters {
  NewsImage newsImage;
  NewsTitle newsTitle;
  Parameters({required this.newsImage, required this.newsTitle});
  factory Parameters.fromJson(Map<String, dynamic> json) {
    return Parameters(
      newsImage: NewsImage.fromJson(json['newsImage']),
      newsTitle: NewsTitle.fromJson(json['newsTitle']),
    );
  }
}

class NewsImage {
  Value value;
  NewsImage({required this.value});
  factory NewsImage.fromJson(Map<String, dynamic> json) {
    return NewsImage(
      value: Value.fromJson(json\['value'\][0]),
    );
  }
}

class Value {
  String url;
  Value({required this.url});
  factory Value.fromJson(Map<String, dynamic> json) {
    return Value(
      url: json['url'],
    );
  }
}

class NewsTitle {
  String value;
  NewsTitle({required this.value});
  factory NewsTitle.fromJson(Map<String, dynamic> json) {
    return NewsTitle(
      value: json['value'],
    );
  }
}

در مرحله بعد، ما باید یک فایل سرویس ایجاد کنیم تا منطق هسته برنامه را از UI جدا کنیم. برای انجام این کار، یک را ایجاد کنید uniform_service.dart فایل داخل lib فهرست راهنما. سپس قطعه زیر را اضافه کنید:

import 'package:dio/dio.dart';
import 'package:news_mobile/utils.dart';

class UniformService {
  final dio = Dio();
  static const _apiKey = "REPLACE WITH API KEY";
  static const _projectID = "REPLACE WITH PROJECT ID";
  static const _slug = "newsMobile";

  var headers = {
    "content-type": "application/json",
    "x-api-key": _apiKey,
  };

  Future<RootComposition> getNews() async {
    var response = await dio.get(
      "https://uniform.app/api/v1/canvas?limit=100&projectId=$_projectID&slug=$_slug",
      options: Options(headers: headers),
    );

    if (response.statusCode == 200) {
      var resp = response.data;
      var news = RootComposition.fromJson(resp);
      return news;
    } else {
      throw Exception('Error getting news');
    }
  }
}

قطعه بالا کارهای زیر را انجام می دهد:

• وابستگی های مورد نیاز را وارد می کند
• a را ایجاد می کند UniformService کلاس با _apiKey، _projectID، _slug و headers خواص
• را ایجاد می کند getNews روشی که از Dio بسته ای برای پیکربندی مجوزها و ایجاد درخواست امن HTTPS به Uniform API و پاسخ های مناسب را برمی گرداند.

مصرف سرویس

با انجام این کار، می توانیم از سرویس برای انجام عملیات مورد نیاز استفاده کنیم. برای انجام این کار، باید آن را اصلاح کنیم home.dart فایل در screens دایرکتوری مطابق شکل زیر:

import 'package:flutter/material.dart';
import 'package:news_mobile/uniform_service.dart';
import 'package:news_mobile/utils.dart';

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late RootComposition news;
  bool _isLoading = false;
  bool _isError = false;

  @override
  void initState() {
    _getNews();
    super.initState();
  }
  _getNews() {
    setState(() {
      _isLoading = true;
    });

    UniformService().getNews().then((value) {
      setState(() {
        news = value;
        _isLoading = false;
      });
    }).catchError((onError) {
      setState(() {
        _isLoading = false;
        _isError = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return _isLoading
        ? const Center(
            child: CircularProgressIndicator(
            color: Colors.blue,
          ))
        : _isError
            ? const Center(
                child: Text(
                  'Error getting news',
                  style: TextStyle(
                    color: Colors.red,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              )
            : Scaffold(
                appBar: AppBar(
                  title: const Text('News Timeline'),
                  backgroundColor: Colors.black,
                ),
                body: ListView.builder(
                  itemCount: news.composition.slots.news.length,
                  itemBuilder: (context, index) {
                    return Container(
                      decoration: const BoxDecoration(
                        border: Border(
                          bottom: BorderSide(width: .5, color: Colors.grey),
                        ),
                      ),
                      padding: const EdgeInsets.fromLTRB(10, 20, 10, 20),
                      child: Row(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(5.0),
                            child: Image.network(
                              news.composition.slots.news[index].parameters
                                  .newsImage.value.url,
                              height: 80.0,
                              width: 80.0,
                            ),
                          ),
                          const SizedBox(width: 15.0),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  news.composition.slots.news[index].parameters
                                      .newsTitle.value,
                                  style: TextStyle(
                                      color: Colors.black,
                                      fontWeight: FontWeight.w800),
                                ),
                                SizedBox(height: 10.0),
                                Text(
                                  news.created.substring(0, 10),
                                  style: TextStyle(
                                    color: Colors.grey,
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              );
  }
}

قطعه بالا کارهای زیر را انجام می دهد:

• وابستگی های مورد نیاز را وارد می کند
• خطوط 13-15: ایجاد کنید news، _isLoading، و _isError خواص برای مدیریت وضعیت برنامه
• خطوط 17-39: ایجاد یک _getNews روش دریافت لیست اخبار از Uniform با استفاده از UniformService().getNews و بر این اساس حالت ها را تنظیم کنید
• رابط کاربری را برای استفاده از حالت ها و روش ایجاد شده برای دریافت لیست اخبار تغییر می دهد

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

flutter run

نتیجه

این پست در مورد چیستی ابزارهای داخلی، منحصربه‌فرد بودن Uniform و نحوه ایجاد یک جدول زمانی News با Flutter بحث می‌کند. فراتر از آنچه در بالا مورد بحث قرار گرفت، Uniform همچنین نیازهای عملیاتی بازاریابان و استراتژی های محتوا را با مشارکت کم یا بدون مشارکت تیم مهندسی و فناوری اطلاعات برآورده می کند.

این منابع ممکن است مفید باشند: