0

ساخت برنامه های فلاتر با بک اند وردپرس

قسمت یک

 

فلاتر برای رابط کاربری و پلتفرم کراس شناخته شده‌است و اکنون به عنوان شماره یک   برنامه های کراس پلتفرم در تمام زمان‌ها معرفی شده‌است. همچنین، wordpress یک سیستم مدیریت محتوای قوی (CMS)است و تقریبا همه افراد از صنعت فن‌آوری اطلاعات

باید بدانند که وردپرس چیست. وردپرس به ما یک بنیان بسیار قوی از مدیریت محتوا  با میزبانی وب ارایه می‌دهد،‌ و این واقعا برای یک فرد غیر متخصص برای کار کردن با وردپرس آسان است.

 

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

دهید. انجمن وردپرس نیز بسیار قوی و مفید است.

 

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

API عالی JSON است که می تواند برای کار با داده ها در قسمت بک اند مورد استفاده قرار گیرد.

این API مانند یک API معمولی کار می کند که می تواند برای انجام هر نوع عملیات در  پایگاه داده مورد استفاده قرار گیرد. این API واقعاً سازگار با توسعه دهنده است و می تواند با هر فناوری فرانتی از آن استفاده شود.

فلاتر با این API بسیار خوب کار می کند. در چارچوب فلاتر ، ما دو گزینه برای مقابله با API وردپرس داریم.

  1. با استفاده از پکیج flutter_wordpress.
  2. انجام همه کارها توسط خود ما

دومی ترسناک به نظر می رسد اما جالب تر از مورد اول است.  بیایید با استفاده از گزینه 1 ساخت یک برنامه را شروع کنیم.

اول از همه ، ما باید flutter_wordpress و همه بسته های دیگر را با اضافه کردن کد زیر در فایل pubspec.yaml خود نصب کنیم.

 

اکنون ، اگر از بک اند وردپرس استفاده می کنید ، حتماً باید JSON API را برای وردپرس داشته باشید. در حال حاضر ، ما از این نسخه آزمایشی وردپرس استفاده خواهیم کرد که محتوای ساختگی برنامه ما را در اختیار ما قرار می دهد.

 

اول از همه ، ما باید یک صفحه اصلی به نام landing_page.dart در پوشه lib ایجاد کنیم. این صفحه در  ابتدا هنگام شروع برنامه ظاهر می شود. برای صفحه لندینگ ، کد زیر نوشته شده است.

 

import 'package:flutter/material.dart';
import 'package:flutter_wordpress/flutter_wordpress.dart' as wp;
import 'package:flutter_html/flutter_html.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:wordpress_1/details_page.dart';


class LandingPage extends StatelessWidget {
  
  wp.WordPress wordPress = wp.WordPress(
    baseUrl: 'https://demo.wp-api.org',
  );

  _fetchPosts() {
    Future<List<wp.Post>> posts = wordPress.fetchPosts(
      postParams: wp.ParamsPostList(
        context: wp.WordPressContext.view,
        pageNum: 1,
        perPage: 10,        
      ),
      fetchAuthor: true,
      fetchFeaturedMedia: true,
      fetchComments: true
    );

    return posts;
  }

  _getPostImage(wp.Post post) {
    if (post.featuredMedia == null) {
      return SizedBox();
    }
    return Image.network(post.featuredMedia.sourceUrl);
  }
}
 

در کد بالا ، اول از همه ، ما آبجکت  وردپرس را با برخی از خصوصیات اساسی در سازنده وردپرس مقداردهی اولیه کرده ایم. این خصوصیات اساسی را می توان تغییر داد یا برخی از خصوصیات اضافی را اضافه کرد. پس از آن ، ما تابع ()fetchPostsـ  را تعریف کرده

ایم که برای واکشی پست ها از API استفاده می شود. در این روش ، تابع ()fetchPosts تعریف شده در داخل کلاس وردپرس با برخی از پارامترهای کوئری بر روی آبجکت وردپرس فراخوانی می شود. یک بار دیگر ، این پارامترهای پرس و جو می توانند تغییر یا

اضافه شوند.

اکنون ، پس از استفاده از تمام این روش ها ، ما در حال طراحی UI صفحه درون تابع () build  هستیم.

  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WordPress Demo API'),
        centerTitle: true,
      ),
      body: Container(
        child: FutureBuilder(
          future: _fetchPosts(),
          builder: (BuildContext context, AsyncSnapshot<List<wp.Post>> snapshot) {
            if (snapshot.connectionState == ConnectionState.none) {
              return Container();
            }
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                wp.Post post = snapshot.data[index];
                return InkWell(
                  onTap: () {
                    Navigator.push(
                      context, 
                      MaterialPageRoute(
                        builder: (context) => DetailsPage(post)
                      )
                    );
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(5.0),
                    child: Card(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          children: <Widget>[
                            _getPostImage(post),
                            SizedBox(height: 10,),
                            Text(
                              post.title.rendered.toString(), 
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 20
                              ),
                            ),
                            SizedBox(height: 15,),
                            Html(
                              data: post.excerpt.rendered.toString(),
                              onLinkTap: (String link) {
                                _launchUrl(link);
                              },
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Text(post.date.toString().replaceAll('T', ' ')),
                                Text(post.author.name),
                              ],
                            )   
                          ],
                        ),
                      ),
                    ),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
 

در این صفحه لندینگ ، ما هنگام واکشی پست ها ، از یک ویدجت FutureBuilder استفاده می کنیم. در این ابزارک FutureBuilder ، ما در حال ساخت لیستی از کارتها با استفاده از ویدجت ()ListView.builder  هستیم. اکنون ، ما با صفحه لندینگ خود تمام شده

ایم. اکنون، برای راه اندازی یک مرورگر برای کلیک کردن بر روی لینک ها ، ما روشی به نام ()launchUrlـ را تعریف خواهیم کرد. در اینجا برای رندر کردن ، از بسته flutter_html استفاده کرده ایم زیرا گزیده ای از پست موجود در قالب HTML است.

_launchUrl(String link) async {
  if (await canLaunch(link)) {
    await launch(link);
  } else {
    throw 'Cannot launch $link';
  }
}

بنابراین ، پس از آن ، ما باید یک فایل جدید به نام Details_page.dart در داخل پوشه lib تعریف کنیم.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_wordpress/flutter_wordpress.dart' as wp;
import 'package:url_launcher/url_launcher.dart';

class DetailsPage extends StatelessWidget {

  wp.Post post;

  DetailsPage(this.post);

  _getPostImage() {
    if (post.featuredMedia == null) {
      return SizedBox(height: 10,);
    } else {
      return Image.network(post.featuredMedia.sourceUrl);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Colors.blue),    
      ),
      body: Container(
        child: Padding(
          padding: EdgeInsets.all(10.0),
          child: ListView(
            children: <Widget>[
              Text(
                post.title.rendered.toString(),
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 20
                ),
              ),
              _getPostImage(),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(post.date.replaceAll('T', ' ')),
                  Text(post.author.name.toString())
                ],
              ),
              Html(
                data: post.content.rendered,
                onLinkTap: (String url) {
                  _launchUrl(url);
                },
              )
            ],
          ),
        )
      ),
    );
  }
}

_launchUrl(String link) async {
  if (await canLaunch(link)) {
    await launch(link);
  } else {
    throw 'Cannot launch $link';
  }
}
 

در صفحه جزئیات ، ما محتوای کامل پست را نمایش می دهیم. وقتی کاربر روی postcard ضربه بزند ، این صفحه باز می شود. در UI صفحه جزئیات ، ما محتوای پست را با استفاده از بسته flutter_html ارائه داده ایم زیرا محتوای موجود در API در قالب HTML

بود.

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

 

 

حرف نهایی

این برنامه اجرای آزمایشی پکیج flutter_wordpress بود و می توان از این پلاگین به روش های مختلف و همچنین با قابلیت های خاص استفاده کرد. از آنجایی که  وردپرس واقعاً قوی است و برای یک توسعه دهنده آسان است که تمام تنظیمات و تنظیمات را در

قسمت بک اند تنظیم کند ، به گزینه ای عالی برای بک اند هر نوع نرم افزار تبدیل می شود.

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

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *