How to convert my Wordpress website to flutter application? - node.js

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.

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.
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:
Application Passwords
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.

Related

How to make subscription session with prefilled removable promotion code or discount

I've managed to create a checkout page with promotion code like this
const sessionParams: Stripe.Checkout.SessionCreateParams = {
customer_email: user.email,
mode: 'subscription',
line_items: [
{
price: process.env.STRIPE_PRICE_CODE,
quantity: 1,
},
],
metadata: {
userId: user.userId,
},
// {CHECKOUT_SESSION_ID} is a string literal; do not change it!
// the actual Session ID is returned in the query parameter when your customer
// is redirected to the success page.
success_url: `${origin}/account/download-app?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${origin}/account/plan-preview`,
};
if (req.query.coupon === 'special-access') {
sessionParams.allow_promotion_codes = true;
} else {
sessionParams.discounts = [{ promotion_code: '***' }];
}
const session = await stripe.checkout.sessions.create(sessionParams);
But I've noticed that user can't remove the promo code and add his custom code.
I see other companies checkouts that they do have prefilled promo code with an X to remove it and add their own
I've tried using discount object with allow_promotion_codes: true, but it seems not allowed by the API.
Checkout does not currently support pre-filling a promotion code that can be removed by the customer on the payment page. Equally, you cannot pass both the allow_promotions_code parameter and pre-fill a promotion code via the discounts hash. The API will error (as you've discovered). In order for the promotion code to be removable by your customer, you will need to only use the allow_promotion_codes boolean.
Payment Links do support pre-filling of promotion codes via the URL parameter (e.g. https://buy.stripe.com/foo?prefilled_promo_code=bar), which is likely what you're referencing.

res render does not render the index.jade

I build an authentication method in Node which use Azure AD. I use h here fore the "javascript quickstart" template which Microsoft offers. The Goal is that the user(s) start with the login screen. When they successful authenticate with Azure AD then they will redirect to the landing page.
All works accept loading the landing page(index.jade).The user is still on the same page after authentication.
Below code which is responsible to render the (or redirect) the landing page
exports.login = function(req, res){
console.info('Check on User')
var user = req.body.user
if(user){
console.info('user exist')
console.info(user)
console.info('now render the index page jade')
//res.render('../views/index')
res.redirect('../views/index')
}
The location of the index file is "{projectlocation}/views/index.jade" The folder location where the redirect/render take place is "{projectlocation}/routes/login.js".
Below output of the code:
Check on User
user exist
{
'#odata.context': 'https://graph.microsoft.com/v1.0/$metadata#users/$entity',
displayName: 'username',
givenName: 'user',
jobTitle: '',
mail: 'user#user.com',
mobilePhone: '',
officeLocation: '',
preferredLanguage: 'nl-NL',
surname: 'user',
userPrincipalName: 'user#user.nl',
id: '666666-bbb-4444-5555-8tt874yy60oo'
}
now render the index page jade
POST /Aanmelden 200 239.783 ms - -
GET /views/index 404 0.829 ms - 31
I also try base on the comments to change the res.render to res.redirect
see the below code. Now i get some more output but still not the desire result.

Actions on Google card carousel response: Images not being displayed

This is the response I'm sending from the webhook:
conv.ask(new Carousel({
title: 'Carousel Title',
items: {
'AU': {
title: 'Australia',
subtitle: '',
image: new Image({
url: 'https://blocky-host-files.web.app/dc_graphics/au.png',
alt: 'Australia graphic',
}),
},
'CA_US': {
title: 'Americas',
subtitle: 'Canada / United States',
image: new Image({
url: 'https://blocky-host-files.web.app/dc_graphics/ca_us.png',
alt: 'Canada United States graphic',
}),
},
'EU': {
title: 'Europe',
subtitle: '',
image: new Image({
url: 'https://blocky-host-files.web.app/dc_graphics/eu.png',
alt: 'Europe graphic',
}),
}
}
}));
This is how it looks on my phone:
I cannot figure out why the images aren't shown. They are not being displayed on my Google Home Hub too.
However, the Actions on Google simulator displays my images.
I think your issue is coming due to two possible reasons:
There might be a problem with the platform you are using (blocky host). It is possible that this platform is not supported for displaying the carousel, Please check, if you are able to display a card in this platform. If not - then there is some problem with the platform you are are using
It can be due to a network issue
You can try seeing the surface capability in the request. It can help
It works now after moving the images to a different host (imgur).
I've used Firebase Hosting to host the images before and somehow Google couldn't get these images from it's own platform, even though they are public accessible.

Instagram API: How can I search for hashtags?

From what I'm seeing, I can't search for hashtags unless I have the public_content permission.
And I can't get the public_content permission unless I submit an app for review.
And I can't submit an app for review unless I have a video screencast and a very good reason as to why I need this permission. I just build websites for clients and they want to pull in posts that have one of their own hashtags. I don't see this on the list of approved application types.
Or is there another way to search for hashtags without having to go through all this?
while requesting code you may pass scope as public_content
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=redirect_uri=REDIRECT-URI&response_type=code&scope=public_content
I am working with this right now. In your case, if you are only searching by one hashtag at each time you better use instafeed.js
http://instafeedjs.com
I have done this task with this library like this.
var feed = new Instafeed({
get: 'tagged',
tagName: audi',
clientId: 'XXXXX',
accessToken: 'XXXXX',
template: '<li><img src="{{image}}" /></li>'
});
feed.run();
var feed = new Instafeed({
get: 'tagged',
tagName: 'ferrari',
clientId: 'XXXXX',
accessToken: 'XXXXX',
template: '<li><img src="{{image}}" /></li>'
});
feed.run();
var feed = new Instafeed({
get: 'tagged',
tagName: 'BMW',
clientId: 'XXXXX',
accessToken: 'XXXXX',
template: '<li><img src="{{image}}" /></li>'
});
feed.run();
If anyone know how to search by 2 or more hashtags at each time please contact me.
Hope it helps you!

waterlock fb auth - registering with authcode

I have an ember-cli app that authenticates against fb using ember-simple-auth and torii. When the process is finished I end up with an authcode.
I also have an API built with Node / Sails / Waterlock
I thought I would be able to use Waterlock facebook auth to push this code to
http://my-node-app.com:1337/auth/facebook_oauth2?code={{some-code}}
which would then allow it to do the handshake with FB, fetch my profile info, create my user and log me in.
This works I think if I have already registered though the API, and it does log me in on the API except that there is no user data, no fb id nothing.
The response from calling the URL above with a valid code is:
{
auth: {
facebookId: null,
name: null,
createdAt: "2015-01-10T15:05:44.417Z",
updatedAt: "2015-01-10T15:05:44.459Z",
id: 10,
user: 10
},
createdAt: "2015-01-10T15:05:44.447Z",
updatedAt: "2015-01-10T15:05:44.447Z",
id: 10
}
And here is the result of /users
{
users: [
{
attempts: [
12
],
jsonWebTokens: [ ],
auth: 10,
createdAt: "2015-01-10T15:05:44.447Z",
updatedAt: "2015-01-10T15:05:44.447Z",
id: 10
}
]
}
Should I be able to do this? Or do I need to explicitly register users on the api/auth/login?type=facebook url?
[UPDATE]
Looking at the code here https://github.com/waterlock/waterlock-facebook-auth/blob/master/lib/controllers/actions/oauth2.js it looks like I am correct...
The 1st call in the action is:
fb.confirmIdentity(req.query.code, accessTokenResponse);
Inside accessTokenResponse it calls into fb.getMe(userInfoResponse); where in userInfoResponse it calls into the main waterlock framework engine.js to store the user...
So from my digging this should work... I have no idea where it is falling down.
This was working as expected it's just waterlock wasn't returning the fb error passed to it (). I created a pull request so it's easier to debug these sorts of issues.
https://github.com/waterlock/waterlock-facebook-auth/pull/3

Resources