How to convert my Wordpress website to flutter application?

user_14830932 0
Viewed 105

I am a college student and during my intern my client gave me this project to convert his wordpress website into a mobile application while including existing features as well as some new features. The website is news website. I am also provided with wordpress admin panel credentials.
However, I am having hardtime fetching all data of website in json form. I tried using the wordpress api url: "https://example.com/wp-json/wp/v2/posts" as well as
"https://example.com/wp-json/wp/v2/posts?perpage=100" and
"https://example.com/wp-json/wp/v2/posts/?filter[limit]=100"
but none of them provided with whole data, it only rendered 10 latest news posts. I am looking to get whole access to the website data myself. Is there any possible way for that? I want comments from the users on that news post, number of shares, likes, the related news section below post, everything.
Do I have to ask for the organization's main api or is there any other way? I am fluent in flutter and node js.

wordpress-rest-api flutter mobile-application node.js wordpress
1 Answers

Flutter WordPress

Flutter WordPress is a library that allows for easy communication between a Flutter app and the WordPress backend. It uses WordPress REST API v2 for this interaction.

enter image description here

If your app is going to make use of authentication or other admin level APIs then the developer recommends you use these two authenthentication wordpress plugins:

  1. Application Passwords
  2. JWT Authentication for WP REST API (recommended)

How to use Flutter WordPress

1.Go to your pubspec.yaml then add the following as a dependency:

flutter_wordpress: ^0.1.4

You can check for the latest version here.

2.Import it in your code:

import 'package:flutter_wordpress/flutter_wordpress.dart' as wp;

3.You instantiate WordPress:

wp.WordPress wordPress;

// adminName and adminKey is needed only for admin level APIs
wordPress = wp.WordPress(
baseUrl: 'http://localhost',
authenticator: wp.WordPressAuthenticator.JWT,
adminName: '',
adminKey: '',
);

4.You then authenticate the user:

Future<wp.User> response = wordPress.authenticateUser(
username: 'ChiefEditor',
password: 'chiefeditor@123',
);

response.then((user) {
createPost(user);
}).catchError((err) {
print('Failed to fetch user: $err');
});

5.Here's how you can fetch wordpress posts and show them in your flutter app:

 Future<List<wp.Post>> posts = wordPress.fetchPosts(
 params: wp.ParamsPostList(
 context: wp.WordPressContext.view,
 pageNum: 1,
 perPage: 20,
 order: wp.Order.desc,
 orderBy: wp.PostsOrderBy.date,
 ),
 fetchAuthor: true,
 fetchFeaturedMedia: true,
 fetchComments: true,
 );

6.And here's how you can fetch users:

Future<List<wp.User>> users = wordPress.fetchUsers(
params: wp.ParamsUserList(
context: wp.WordPressContext.view,
pageNum: 1,
perPage: 30,
order: wp.Order.asc,
orderBy: wp.UsersOrderBy.name,
role: wp.UserRole.subscriber,
),
);

7.And here's how to fetch comments:

 Future<List<wp.Comment>> comments = wordPress.fetchComments(
 params: wp.ParamsCommentList(
 context: wp.WordPressContext.view,
 pageNum: 1,
 perPage: 30,
 includePostIDs: [1],
 ),
 );

8.Then creating a wordpress post via flutter is easy:

  void createPost(wp.User user) {
  final post = wordPress.createPost(
  post: new wp.Post(
  title: 'First post as a Chief Editor',
  content: 'Blah! blah! blah!',
  excerpt: 'Discussion about blah!',
  author: user.id,
  commentStatus: wp.PostCommentStatus.open,
  pingStatus: wp.PostPingStatus.closed,
  status: wp.PostPageStatus.publish,
  format: wp.PostFormat.standard,
  sticky: true,
),
);

post.then((p) {
print('Post created successfully with ID: ${p.id}');
postComment(user, p);
}).catchError((err) {
print('Failed to create post: $err');
});
}

Then to post a comment:

void postComment(wp.User user, wp.Post post) {
final comment = wordPress.createComment(
 comment: new wp.Comment(
  author: user.id,
  post: post.id,
  content: "First!",
  parent: 0,
),
);

comment.then((c) {
print('Comment successfully posted with ID: ${c.id}');
}).catchError((err) {
print('Failed to comment: $err');
});
}

Download full example here.

user_94315710
Related