Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat aplikasi berita yang menampilkan data api dari wordpress. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Wordpress menyediakan api yang dapat kita olah untuk berbagai kebutuhan aplikasi. https://domain.com/wp-json/wp/v2/posts adalah endpoint untuk mendapatkan berita dari sebuah website yang menggunakan wordpress. Tidak perlu otentikasi, kita dapat dengan mudah mengolah datanya. Pada tutorial kali ini kita akan membuat aplikasi berita yang menampilkan berita dari webiste hipwee.com. Silahkan scroll ke bagian paling bawah artikel ini untuk melihat hasil akhirnya.

Membuat Aplikasi Berita dengan API Wordpress

1. Buatlah sebuah project flutter baru dengan nama yang kalian inginkan. Gunakan flutter versi terbaru atau flutter yang mendukung null safety.

2. Buka pubspec.yaml. Lalu tambahkan http: dan flutter_widget_from_html_core: seperti contoh di bawah ini.

Menambahkan Paket

3. Kemudian buat sebuah file baru di dalam folder lib dengan nama news_model.dart sebagai model datanya. Ikuti scriptnya seperti di bawah ini.

class News {
  final String title;
  final String content;
  final String imageUrl;

  News({required this.title, required this.content, required this.imageUrl});

  factory News.fromJson(Map<String, dynamic> json) {
    return News(
      title: json['title']['rendered'],
      content: json['content']['rendered'],
      imageUrl: json['featured_media'] != 0
          ? json['_embedded']['wp:featuredmedia'][0]['source_url']
          : '',
    );
  }
}

4. Kemudian buat sebuah file baru di dalam folder lib dengan nama wordpress_api.dart. File ini berfungsi untuk menangkan data api dari wordpress. Ikuti scriptnya di bawah ini.

  import 'dart:convert';
  import 'package:http/http.dart' as http;
  
  import 'news_model.dart';
  
  class WordPressAPI {
  
    Future<List<News>> fetchNews() async {
      final response = await http.get(Uri.parse('https://hipwee.com/wp-json/wp/v2/posts?_embed'));
      if (response.statusCode == 200) {
        final List<dynamic> jsonResponse = jsonDecode(response.body);
        return jsonResponse.map((data) => News.fromJson(data)).toList();
      } else {
        throw Exception('Failed to load news');
      }
    }
  }

5. Buat sebuah file baru di dalam folder lib dengan nama detail.dart. File ini berfungsi untuk menampilkan detail berita. Ikuti scriptnya di bawah ini.

  import 'package:flutter/material.dart';
  import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
  
  class Detail extends StatelessWidget {
    final String title;
    final String content;
    final String image;
    final VoidCallback? onPressed;
  
    Detail({required this.title, required this.content, required this.image, this.onPressed});
  
    @override
    Widget build(BuildContext context) {
  
      //menghilangkan text 'data' pada 'data-src' ini biasa terdapat pada <img>
      String modifiedHtmlString = this.content.replaceAll('data-src', 'src');
  
      return Scaffold(
        appBar: AppBar(
          title: Text('Detail'),
        ),
        body: ListView(
          padding: EdgeInsets.zero,
          children: [
            Container(
              width: double.infinity,
              height: MediaQuery.of(context).size.height * 0.33,
              decoration: BoxDecoration(
                // color: Colors.grey[400],
                image: DecorationImage(
                  image: NetworkImage(this.image),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Padding(
              padding: EdgeInsets.only(left: 16, right: 16, top: 5, bottom: 16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    this.title,
                    style: TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  HtmlWidget(
                    modifiedHtmlString //teks html diubah menjadi teks yang bisa dibaca
                  ),
                ],
              ),
            )
          ],
        ),
      );
    }
  }

6.  Buka file  lib/main.dart lalu ikuti scriptnya di bawah ini.

import 'package:flutter/material.dart';
  import 'detail.dart';
  import 'wordpress_api.dart';
  import 'news_model.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'WordPress News',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: NewsScreen(),
      );
    }
  }
  
  class NewsScreen extends StatefulWidget {
    @override
    _NewsScreenState createState() => _NewsScreenState();
  }
  
  class _NewsScreenState extends State<NewsScreen> {
    late Future<List<News>> futureNews;
  
    @override
    void initState() {
      super.initState();
      futureNews = WordPressAPI().fetchNews();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('WordPress News'),
        ),
        body: Center(
          child: FutureBuilder<List<News>>(
            future: futureNews,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) {
                    final news = snapshot.data![index];
                    return ListTile(
                      contentPadding:
                          EdgeInsets.only(top: 16, left: 16, right: 16),
                      title: Text(
                        news.title,
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                      leading: news.imageUrl != ''
                          ? Image.network(
                              news.imageUrl,
                              fit: BoxFit.cover,
                              width: 80,
                              height: 80,
                            )
                          : Container(),
                      trailing: IconButton(
                        onPressed: () {
                          Navigator.push(
                            context,
                            // DetailPage adalah halaman yang dituju
                            MaterialPageRoute(
                              builder: (context) => Detail(
                                title: news.title,
                                content: news.content,
                                image: news.imageUrl,
                              ),
                            ),
                          );
                        },
                        icon: Icon(
                          Icons.open_in_new,
                        ),
                      ),
                    );
                  },
                );
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      );
    }
  }

Sekarang kita lakukan uji coba. Jalankan emulator. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Mudah bukan?, sekarang kalian bisa membuat aplikasi berita dengan berita yang bersumber dari wordpress. Kalian bisa menambahkan pilihan berita lain dengan menggunakan sumber website yang berbeda. Syaratnya harus wordpress dan apinya dapat diakses. Lakukan juga improvisasi dengan menambahkan widget lain dan state management ke dalam aplikasi kalian.

Baca Artikel Lain ✨

📰 1. Membuat Restful Api di Laravel Tanpa Library Tambahan Part 1 read more

📰 2. Menampilkan Data dengan API dan Token di Laravel Part 2 read more

📰 3. Cara Membuat Custom Registrasi dan Prosesnya di Laravel Part 1 read more

📰 4. Cara Membuat Custom Login di Laravel Part 2 read more

Sekian tutorial cara membuat aplikasi berita denga menggunakan api wordpress. Semoga tutorial singkat ini bermanfaat. Jika ada yang ingin ditanyakan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.