/AdsManager

React Native Ads Manager App

Primary LanguageJavaScriptMIT LicenseMIT

AdsManager

This is the entire source code of Ads Manager App where you can get an idea about its implementation.

alt text

Requirements

  1. React Native
  2. Graphcool

Setup

1. Clone the repo

$ git clone https://github.com/httpdeveloper/AdsManager.git
$ cd AdsManager

2. Install dependencies (npm v3+):

$ npm install

3. Setup Graphcool Schema (https://console.graph.cool/)

type Ad implements Node {
  address: String
  createdAt: DateTime!
  description: String!
  id: ID! @isUnique
  image: String
  latitude: Float
  longitude: Float
  title: String!
  updatedAt: DateTime!
  user: User @relation(name: "AdUser")
}

type User implements Node {
  ads: [Ad!]! @relation(name: "UserAds")
  createdAt: DateTime!
  email: String!
  fbuserid: String @isUnique
  id: ID! @isUnique
  image: String!
  name: String!
  updatedAt: DateTime!
}

4. Update App Setting (AdsManager/js/setting)

setting: {
  NETWORK_INTERFACE_URL: 'https://api.graph.cool/simple/v1/API_KEY',
  SUBSCRIPTION_CLIENT_URL: 'wss://subscriptions.graph.cool/v1/API_KEY',
  GOOGLE_MAP_API_KEY: 'API_KEY',
  IMAGE_UPLOAD_API: 'http://your-api-domain.com/IMAGE_UPLOAD_API',
  ...
}

Get API_KEY from https://console.graph.cool ENDPOINTS and https://console.developers.google.com

5. Setup Image Upload Server (Sample PHP script)

<?php

$maxUploadSize = 2;// 2 MB
$status = false;
$msg = '';
$imageUrl = '';
$userId = (isset($_POST['userId']) && !empty($_POST['userId'])) ? $_POST['userId'] : 1;
$rootUrl = 'http://your-api-domain.com';
$rootPath = $_SERVER['DOCUMENT_ROOT'];
$token = 'BEARER_TOKEN';
$imgUploadFolder = 'IMAGE_UPLOAD_FOLDER';

function getBearerToken(){
    $headers = $bearerTokenValue = null;
    if (isset($_SERVER['Authorization'])) {
        $headers = trim($_SERVER["Authorization"]);
    }
    else if (isset($_SERVER['HTTP_AUTHORIZATION'])) { 
        $headers = trim($_SERVER["HTTP_AUTHORIZATION"]);
    } elseif (function_exists('apache_request_headers')) {
        $requestHeaders = apache_request_headers();
        if (isset($requestHeaders['Authorization'])) {
            $headers = trim($requestHeaders['Authorization']);
        }
    }
    
    if($headers) {
    	list($bearerTokenName, $bearerTokenValue) = explode(' ', $headers);
    }

    return $bearerTokenValue;
}

$apiBearerToken = getBearerToken(); //Get bearer token sent by api

if($apiBearerToken === $token) {
  if (isset($_FILES['advertisementPhoto']) && !empty($_FILES['advertisementPhoto'])) {
    $file = $_FILES['advertisementPhoto'];
    if (!$file['error'] && $file['size'] > 0) {
      $size = ($file['size'] / (1024 * 1024)); //size in mb
      if ($size <= $maxUploadSize) {
        list($name, $ext) = explode('.', $file['name']);
        $fileName = $name . '_' . time() . '.' . $ext;
        $uploadPath = $rootPath . '/'. $imgUploadFolder .'/'. $userId . '/' . $fileName;
        $baseDir = dirname($uploadPath);
        if (!file_exists($baseDir)) {
          @mkdir($baseDir, 0755);
        }
        if (is_writable($baseDir) && move_uploaded_file($file['tmp_name'], $uploadPath)) {
          $status = true;
          $msg = 'Image Uploaded Successfully';
          $imageUrl = $rootUrl . '/'. $imgUploadFolder .'/' . $userId . '/' . $fileName;
        } else {
          $msg = 'Sorry, Image could not be uploaded.';
        }
      } else {
        $msg = 'Image size should not be greater than '. $maxUploadSize. 'MB';
      }
    } else {
      $msg = 'Image Error or Invalid Size';
    }
  } else {
    $msg = 'Invalid Image';
  }
} else {
 $msg = 'Invalid Bearer Token';
}

echo json_encode(array('status' => $status, 'msg' => $msg, 'picUrl' => $imageUrl));

6. Setup Faceook Login SDK (Optional)

Follow following links

https://developers.facebook.com/docs/android/getting-started/ (From step 6)
https://developers.facebook.com/docs/ios/getting-started/ (From Step 4)

7. Running on IOS

react-native run-ios

8. Running on Android

react-native run-android

Demo

Here is the Demo link you can check out.

Article

Article about how to integrate GraphQL with Redux in React Native on medium.com