After establishing Facebook and Twitter share in Phimpme, our next goal was to integrate more social networking sites. Pinterest is an ideal website for us as it is widely used among various photography enthusiasts. Our goal was to share the image on the Pinterest website without the use of any other native android application.
Note: First, we added Phimpme app in the developer section https://developers.pinterest.com/apps/. This step is crucial as it generates APP ID and it is necessary for authentication.
Adding Pinterest option in Accounts Activity in Phimpme
In accounts activity, we have added a list of accounts that we have integrated in a Recyclerview. Currently, we have integrated Facebook and Twitter. We need to add Pinterest App icon and Pinterest option in the Recyclerview.
To add Pinterest app icon I downloaded the icon from iconfinder in SVG format. Using SVG format allows icon to resize itself according to the screen sizes of the users. We saved the icon file name as ic_pinterest_black.xml
Pinterest icon SVG:
<vector android:height="24dp" android:viewportHeight="32.0" android:viewportWidth="32.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#231F20" android:pathData="M16,0.27C7.16,0.27 0,7.43 0,16.27c0,6.55 3.94,12.18 9.58,14.65c-0.05,-1.12 -0.01,-2.46 0.28,-3.67c0.31,-1.3 2.06,-8.72 2.06,-8.72s-0.51,-1.02 -0.51,-2.53c0,-2.37 1.37,-4.14 3.08,-4.14c1.46,0 2.16,1.09 2.16,2.4c0,1.46 -0.93,3.65 -1.41,5.68c-0.4,1.7 0.85,3.08 2.53,3.08c3.03,0 5.07,-3.89 5.07,-8.51c0,-3.51 -2.36,-6.13 -6.66,-6.13c-4.85,0 -7.88,3.62 -7.88,7.66c0,1.39 0.41,2.38 1.05,3.14c0.29,0.35 0.34,0.49 0.23,0.89C9.51,20.37 9.33,21.08 9.26,21.36c-0.11,0.4 -0.44,0.55 -0.8,0.4c-2.23,-0.91 -3.28,-3.36 -3.28,-6.11c0,-4.55 3.83,-9.99 11.44,-9.99c6.11,0 10.13,4.42 10.13,9.16c0,6.28 -3.49,10.97 -8.63,10.97c-1.73,0 -3.35,-0.93 -3.91,-1.99c0,0 -0.93,3.69 -1.13,4.4c-0.34,1.23 -1,2.46 -1.61,3.43C12.9,32.04 14.43,32.27 16,32.27c8.84,0 16,-7.16 16,-16S24.84,0.27 16,0.27z"/> </vector> |
We made an array of all the accounts list in the Accounts Activity. I added Pinterest in the array list. This array list is inflated in the Accounts Activity.
public static String[] accountName = {"Facebook", "Twitter", "Drupal", "NextCloud", "Wordpress", "Pinterest"};
|
To add the icon the recyclerview, we have to get the resource id from the drawable folder and then set is in the recyclerview. We have done it dynamically so that we don’t have to fetch the id of every accounts icons.
Integer id = getContext().getResources().getIdentifier(context.getString(R.string.ic_) + (accountName[position].toLowerCase()) + "_black" , context.getString(R.string.drawable) , getContext().getPackageName()); holder.accountAvatar.setImageResource(id); |
Importing Pinterest SDK in Phimpme project
To import the Pinterest SDK in the project, please download the Pinterest SDK from the link: http://assets.pinterest.com/sdk/android-pdk.tar. Go to File->import new module->Import Gradle Project. Build the project, if there is any error resolve the error and then build Gradle again.
compile project(‘:pdk’)
|
Add APP ID in the manifest file of the project
We need to add the APP ID that was generated while making the app the Pinterest in the manifest folder of the Phimpme Android. In the case of Phimpme, we have added the APP ID in the intent filter in the Accounts Activity. This is necessary for the interaction of the Phimpme with the Pinterest website.
<activity android:name=".accounts.AccountActivity" android:screenOrientation="portrait" android:theme="@style/Theme.AppCompat.NoActionBar"> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="pdk4910600717739247160" /> </intent-filter> </activity> |
Establishing Pinterest authentication in Accounts Activity
First, we need to import all the necessary class from the Pinterest SDK. These class includes callback functions, PDKClient which manages the interface between the Phimpme app and the Pinterest website. We need to pass the APP ID in the PDKClient function as an argument and also the view in the onConnect function in PDKClient.
pdkClient = PDKClient.configureInstance(this, getResources().getString(R.string.pinterest_app_id)); pdkClient.onConnect(this); pdkClient.setDebugMode(true); |
Before signing In we need to check if we are already signed in or not. This is how we have done in Phimpme app. If the app is already signed In a Toast will pop up showing that it already signed In.
if (accountPresenter.checkAlreadyExist(accountName[5])) {
Toast.makeText(this, R.string.already_signed_in,
Toast.LENGTH_SHORT).show();
}
|
Authentication happens in these following steps:
Adding permissions in the List These include the following permissions:
- Read permission
- Write permission
- Read relationship
- Write relationship
List scopes = new ArrayList<String>(); scopes.add(PDKClient.PDKCLIENT_PERMISSION_READ_PUBLIC); scopes.add(PDKClient.PDKCLIENT_PERMISSION_WRITE_PUBLIC); scopes.add(PDKClient.PDKCLIENT_PERMISSION_READ_RELATIONSHIPS); scopes.add(PDKClient.PDKCLIENT_PERMISSION_WRITE_RELATIONSHIPS); |
Passing the view, scope array and PDKCallback as arguments in the login function
I have passed the view, scope array list and PDKCallback as arguments in the login function in PDKClient class. This will initiate the authentication process and the user will be redirected to the Pinterest web page after the user has filled up the credentials properly and logged in to the Pinterest the user will be redirected to the Phimpme accounts page. If the user has logged In successfully onSuccess function with being called where PDKResponse will pass an argument. This response object can be used to fetch the username of the logged In user or the Pin and the BoardID of the user.
@Override
public void onSuccess(PDKResponse response) {
Log.d(getClass().getName(), response.getData().toString());
// Begin realm transaction
realm.beginTransaction();
// Creating Realm object for AccountDatabase Class
account = realm.createObject(AccountDatabase.class,
accountName[5]);
// Writing values in Realm database
account.setUsername(String.valueOf(response.getUser()));
// Finally committing the whole data
realm.commitTransaction();
Toast.makeText(AccountActivity.this, R.string.success, Toast.LENGTH_SHORT).show();
}
|
If the user fails to log in to the account onFailure function will be called and a Toast will pop up.
@Override
public void onFailure(PDKException exception) {
Log.e(getClass().getName(), exception.getDetailMessage());
Toast.makeText(AccountActivity.this, R.string.fail, Toast.LENGTH_SHORT).show();
}
|
Inserting the credentials to the Realm Database
We have used the Realm database to store all the accounts credentials in one place. This is necessary for the maintenance and to check if the user is logged or not. AccountName array holds the list of the name which is added to the database.
// Begin realm transaction realm.beginTransaction(); // Creating Realm object for AccountDatabase Class account = realm.createObject(AccountDatabase.class, accountName[5]); // Writing values in Realm database account.setUsername(String.valueOf(response.getUser())); // Finally committing the whole data realm.commitTransaction(); |
Conclusion
Now, users can login into the Pinterest from the Accounts Activity. After authenticating the users, we can use the authentication to share the image from the app to the Pinterest website.
Github
Resources
- To download the Pinterest SDK: http://assets.pinterest.com/sdk/android-pdk.tar
- Pinterest SDK implementation: https://developers.pinterest.com/docs/sdks/android/?
- To create the APP ID in the Pinterest: https://developers.pinterest.com/apps/