LORENSTEWART

Using Node.js to Interact with Facebook’s Graph API

admin — Mon, 22 Jun 2020 18:28:09 +0000

Facebook has a JavaScript SDK for interacting with their Graph API, but it’s for client-side JavaScript – there is no Node.js SDK.Although there are several NPM packages for working with Facebook’s Graph API, no NPM package seems to be as mature as packages for other social media platforms like Twit for the Twitter API. The best of the few seems to be facebook-node-sdk, but I hesitate to rely on it for a business critical app.The Graph API docs have no examples using vanilla JavaScript (although there are a few examples using their client-side SDK)

This blog post is filled with useful examples using Node/Express!
Contents:
-Authorization & Access Tokens
-Querying the Search Route
-Querying a Single Graph Object
-Querying for the Pages a User Manages
-Posting Content.

1. Authorization & Access Tokens
To get started, you need an access token obtained through Facebook authentication. If you have an access token at your disposal, you can skip the rest of this section. If you need to get one, read on

Generally, an app acquires a user access token through an authentication procedure. Passport.js is a great authentication package for Node.js apps.The Passport.js Facebook authentication strategy comes with a very useful demo app that uses Express.js. If you need to acquaint yourself with Passport, this repo is a great place to start.

Getting a token
Unfortunately, it isn’t as easy as merely firing up the example linked to above and authenticating. You must to have an app registered with Facebook. Instructions for doing so can be found here.

Once you have a registered app, you’ll need to use the app_id and app_secret in the config file of your authentication app. Adjust the code in the demo app so you console.log() the returned access token, as you’ll need the token for the requests outlined below.

Getting POST permissions
No all access tokens are created equal. If you intend to post to a user’s feed or to a page managed by a user, you need to specifically ask for ‘publish_actions’ and ‘manage_pages’ permissions through a scope object in your authentication.

When you ask for these permissions, a user logging in will see a prompt stating your app is requesting these permissions. If the user clicks the okay button, an access token with the specified permissions is generated

Facebook’s App Review Process
Without submitting your app to an official FB review process, the above code will only give you ‘public_profile’ access. To request additional permissions you have to prove that you’re a well-intentioned developer with a well-intentioned app.For the right to obtain access tokens with additional permissions, you’ll have to fill out the ‘App Review’ section of your app’s settings page in the Facebook Developers website.

The review process is quite an endeavor, and requires you to describe your app and submit a video walk-through of how your app is used.

2. Graph API Search
If have an access token, you’re ready to get startedAlthough the Node/Express route is a POST route, the request we are sending to the Graph API is a GET.For the app we are building, the value assigned to searchType could be ‘page’ or ‘user’, and each type will return different properties. In reality, the search Type could be any of the objects listed above.

Notice the the fields property and the userFieldSet and pageFieldSet constants. When searching pages, the code above requests the ‘name, category, link, picture, is_verified’ fields to be returned. These are all part of the page public profile and do not require special permissions.The fields requested when searching users are part of the user public profile. Although these fields are all publicly available, this data will not be returned unless specified in the fields property of the request.

The Graph API’s search end point only returns publicly available information (I think), and there’s a good chance that you’ll want more than this; you’ll probably want the additional information your user access token permits you.

3. Querying a Single Graph Object
This section covers what you’ll need to do to get information about a single object. The section starts with querying a single user, and ends with querying a single photo.

When querying the search route (see above), an id is returned regardless of the object type and fields specified. You need this id to make a single object request(e.g. ‘page’, ‘user’, ‘event’, ‘photo’, ‘post’, etc.).

Below is an example of querying a single user by id.

Permissions: If you have a Graph object’s id, you can request detailed data as long as the access token you’re using has permissions for the fields you are requesting.

Although a lot of information is returned, much important information is left out. For example, no urls are provided for the photos in my photo library. To get a photo’s url, you have to ask for the link field of the photo. photos is a field of a User node; link is field of photo. To get the link of each photo in our response, we need to request a field (link) of a field (photo).

The syntax for requesting the field of a field is field{nestedField}. To request more than one nested field, separate them by commas like so: field{nestedField1, nestedField2, nestedField3}. While we’re on the topic of cool syntax to work with the Graph API, there’s also a way to limit the number of items returned

4. Querying for the Pages a User Manages
This request is probably not one you need to use very frequently, but if your app needs to manage the pages for which the user has admin permissions, this example will be useful.

In the example below, notice the fields property is not included because the data you’re requesting is implicit in the url.The user query in section #3 above also returned this information because the user access token that is used has permissions for this information, and ‘accounts’ is specified in the fields property of the request.

If you have accounts permissions, and only want a list of accounts the user manages (rather than all user data), then this is the query you want to perform.

Twitter API: Uploading Videos using Node.js

admin — Mon, 22 Jun 2020 18:27:04 +0000

I work for an influencer marketing and data company, Speaker, and we work with social media APIs all the time. This can be… challenging (to put it lightly!).One particularly difficult task has been posting videos to Twitter. If you search the internet, it seems we’re all trying to figure this out and there isn’t a clear answer. In my opinion, the best Twitter package for Node.js is Twit, but uploading videos using Twit isn’t explained well in the docs. Good news for you – I’ve gone through the pain, and frustration so you don’t have to.

Here’s how I upload videos to Twitter using Node.js (version 6 or greater) and Twit (version 2.2.5).

Below, I provide two solutions (both use Twit):

Uploading to Twitter when you have the video saved to disk already.
Uploading a video when you need to first retrieve the video from remote storage, like an AWS S3 bucket.
Video Format Warning
Make sure the video is the correct format. Smartphone videos are often a safe bet, but they don’t always work. The requirements are outlined in the infamously unhelpful

Formatting a Video for Testing Purposes
Here’s a great trick I learned from my web searches:

Open your video in QuickTime.
From the File menu, select Export.
Choose the iPad, iPhone, iPod Touch… export option.
Choose any iPhone format.
Once it’s converted, change the file type to .mp4 by renaming the file.

Twitter Video Upload: Three Steps
Uploading a video to Twitter involves three steps:

ONE: POST (upload) the video (line 33 below).

Then, using the data returned from #1…
TWO: POST the returned meta-data (line 38 below).

THREE: POST the status, i.e. the actual tweet (line 44 below).

I haven’t included my error handling, because it is specific to the app I’m working on. Be sure to include error handling for all three steps (also for retrieving and reading the file, if you’re fetching it from remote storage)

1. Install the Necessary Packages: To upload videos using Node.js, you will need to install a few packages. First, install the Node.js package manager, npm. Then, install the Node.js file uploader package, multer. Finally, install the Node.js video streaming package, m3u8.

2. Create a Server: Create a server using Node.js and Express. This will be the starting point of your application.

3. Create a Route for the file Upload: Create a route in your server to handle file uploads. This route should be able to accept an uploaded file and save it to a specific location.

4. Create a file upload form: Create an HTML form that allows users to select and upload a video file. This form should use the route you created in step 3.

5. Process the Uploaded Video File: Once the video file has been uploaded to the server, you will need to process it so that it can be streamed. This can be done using the m3u8 package. You will need to convert the file into an HLS stream, which is a standard streaming format.

6. Stream.

Node.js is an open source server–side platform for building web applications. It is a powerful and efficient language that is well suited for developing video uploading applications. To upload videos using Node.js, you will need to use a library such as Multer or Formidable. These libraries provide useful methods that allow you to upload files from a form or directly from a browser. Additionally, you can use streaming APIs such as Streams to upload videos directly to a remote server. Once you have the library set up, you can start programming the upload process. You will need to create an endpoint in your server that will accept the video file and save it to a local directory or to a cloud service such as Amazon S3. After the video is uploaded, you can use an API to store its metadata such as title, description, and tags. Finally, you can use a library such as FFmpeg or VideoJS to encode the video in a web–ready format (such as MP4) and store it in a remote server. By following these steps, you can easily create a video uploading application with Node.js.

A Practical Guide to Redux

admin — Mon, 22 Jun 2020 18:07:44 +0000

What is Redux?
Redux is a state management library that lets you connect directly to application state from anywhere in your app. It also allows you manipulate application state from anywhere in your app. But, to work its magic, Redux requires that your app have a single data store.

This post focuses on using Redux in a React app.

This post has three parts:

Boilerplate
Elements of Redux (the bulk of this post)
Sample app (an adorable, err, I mean super-tough Most Wanted list app)
Clone the repo.

Check out the Demo.

If you want type out the code yourself, you can get started by initializing a new project with:create-react-app

When create-react-app is done setting up, cd into the folder and:npm install –save redux react-redux axios.Axios has nothing to do with Redux, but it’s the library used for AJAX calls in the demo app.

(If you don’t have create-react-app installed, first run npm install -g create-react-app.)

What problem does Redux solve?
In a React app, data is fetched in an parent component and then passed down to child components through props.

Things get complicated when there are many layers of components and data/state (and the functions that modify this state) are passed through numerous components to get from origin to destination. This path can be difficult to remember and it leaves many places for errors to be introduced.

With Redux, any component can be connected directly to state.
This isn’t to say that data is no longer passed down from parent components to child components via props. Rather, this path can now be direct, no passing props down from parent to great-great-great-great-great-great-grandchild.

It’s not good practice to have all components connect to application state. It is best to have parent/container components connect to state and pass state directly to children.

Terminology: Components connected to state are usually called ‘container’ or ‘smart’ components, and they usually execute logic too. Components that do not have state of their own, and receive state from container components care called ‘dumb’ components. Sometimes these dumb components are functional components. Both container components and functional components are implemented in the demo app. (NewUserFace.js and Toast.js are functional components.)

Technically an action creator only needs to fire off Redux’s dispatch function along with an object. That’s not quite what’s going on here. In the code above, the main function (addPerson) dispatches another function (addPersonAync). This second function is called a thunk, and it returns the object/action.

Terminology: In the context of redux-thunk, a thunk is a second function that performs delayed logic by being asynchronously returned by a first function.

What’s up with that? That’s the Thunk middleware at work. This double function strategy allows us to wait for an asynchronous operation (like fetching data) to complete, and then the action is returned by the thunk.

The adjusted order, including reducers, is: dispatch action creator thunk action reducer.

In this case the double function strategy isn’t necessary, but it’s a general pattern to follow so if an operation is asynchronous, you’re already set up to deal with it.

Here’s a case in which an async operation is actually taking place. Below is the code for fetching the data for the demo app’s Most Wanted List.