Skip to content

Getting started Android

mahnouman edited this page Aug 3, 2014 · 16 revisions

This is a draft document. i.e. "Work in progress"

Requirements

  • Eclipse Indigo.
  • Android SDK
  • ADT Plugin
  • You will need the SDK's tools and platform-tools directories on your system path otherwise Android support will fail.
  • NodeJs
  • Apache ANT
  • Java Development Kit
  • Set Java_HOME variable to jdk installed folder you can refer to following link
  • Cordova version 3.1.0-0.2.0 npm install -g phonegap@3.1.0-0.2.0
  • Application with App ACCESS TOKEN for more information about creating FB App please review the following link http://goo.gl/EXCCJw
  • Facebook graph API Knowledge.

#Importing Project in Eclipse

  • Open Eclipse, from File tab choose import --> Android --> Existing Android Code into workspace
  • Select android folder under the path Platforms/android

#Changing Facebook page name and application Id

  • Open FB.js file under path asset/www/js
  • Change this.pageName parameter to your desired name.
  • Change this.accessToken to your Facebook application token, for more information about how to get application token please refer to Facebook application token section.

Repository

Firstly you need to clone project folder from github on the following link into your computer https://github.com/egirna/apptuter/tree/master/Apptuter-Cordova

Structure

Root Folder

root structure

WWW Folder Platforms/android/asset/www

WWW Structure

  • Css folder contains 3 themes stylesheets Red.css Blue.css Green.css these themes changed dynamically when user choose new theme from App settings.
  • Js/index.js It’s starting point of application as it contains app.intialize method which triggered when the body DOM is loaded.Also it contain all of application event handler.
  • Js/FB.js Here we create the Main object with some properties pageName & methods
  1. handleInfoShow() responsible for requesting page information through AJAX call to the following URL https://graph.facebook.com/PAGE_NAME.
  2. handleShow() responsible for request page posts & filter posts according it's type Video,Photo,Link & push the post object into postArr Array.

Plugins

Plugins

  • We use cordova CLI to install new plugins through cordova plugin add _PLUGIN_PATH_

#Images, Icons and SplashScreen *You can change images under path asset/www/img folder *For application icons go to res folder and set your new icons according to sizes stated in the following guide http://developer.android.com/design/style/iconography.html *For splachscreen put your png format images in res folder then go to your java file under src folder & insert the following line super.setIntegerProperty("splashscreen", R.drawable.splash);

Facebook integration

  • After creating FB Application from developer section you will able to get App ACCESS TOKEN by combining “APP ID” & “APP SECRET” so that the requested URL should be in the following form:

http://graph.facebook.com/endpoint?key=value&access_token=app_id|app_secret

For more information about generating APP ACCESS TOKEN you can refer to https://developers.facebook.com/docs/facebook-login/access-tokens#apptokens

  • (FB.js) is where we are going to define those parameters, also replace PageID with the numerical that can be found at /Apptuter-Cordova/Platforms/android/asset/www/js

var Main = function () { this.pageName = ‘pageID’; this.name = null; this.category = null; this.description = null; this.photoArray = null; this.postArray = null; this.infoArray = []; this.accessToken = 'AppID|AppSecret'; this.pictureUrl = null; this.paging = 'https://graph.facebook.com/' + this.pageName + '/posts?limit=20&access_token='+this.accessToken; this.pagingNext = 'https://graph.facebook.com/' + this.pageName + '/posts?limit=20&access_token='+this.accessToken; }

Debugging & Packaging

  • You can debug your application from Eclipse through android AVD by creating new device and set it's Specs.
  • For packaging right-click on your project from Eclipse IDE then Export signed apk you can follow steps from the following link http://goo.gl/8cm7DI