วันจันทร์ที่ 3 กันยายน พ.ศ. 2555

วิธีติดตั้ง facebook plugin สำหรับ phonegap บน Android

เครื่องมือ Eclipse + ADT Plugin


download phonegap 1.8.1
https://github.com/phonegap/phonegap/zipball/1.8.1

ติดตั้ง
https://github.com/


สร้าง project  ใหม่ new file -> new-> Other -> Android Application Project








สร้าง foder ใหม่ใน assets ตั้งชื่อว่า www



สร้าง foder ใน  project ตั้งชื่อว่า libs ( กรณิที่ยังไม่มี foder นี้ )


copy ไฟล์ cordova-1.8.1.jar  ใน phonegap  ไปไว้ใน โฟรเดอร์ libs



copy cordova-1.8.1.js  ไปไว้ใน www


copy Foder xml ไปไว้ใน res 








เปิดไฟล์ AndroidMinifest.xml

เพิ่ม การอนุญาติต่างๆดังนี้

<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />


แก้ไข แท็ก <activity>  โดยเพิ่ม
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"


เปิดไฟล์ MainActivity.java


import  org.apache.cordova.DroidGap;
แก้ extends Activity  เป็น extends   DroidGap
เพิ่มบรรทัด super.loadUrl("file:///android_asset/www/index.html");


 สร้างไฟล์  index.html ใน www  (ไฟล์นี้เป็นไฟล์หลักในการแสดงผลต่างๆ เหมือนหน้าเว็บทั่วไป)


code ตัวอย่าง




ทดสอบรันโปรแกรม





เมื่อติดตั้ง github เรียบร้อยแล้ว ให้ เปิด cmd หรือ terminal ขึ้นมา
พิม คำสั่งเพื่อ clone  facebook plugin Project

git clone git://github.com/davejohnson/phonegap-plugin-facebook-connect.git

พิมคำสั่ง ls (สำหรับ แมค) หรือ dir เพื่อดู ชื่อ foder

พิมคำสั่ง
cd ตามด้วยชื่อของ foder

พิมคำสั่ง อัพเดท plugin
git submodule update --init


 เปิดไฟล์ plugins  ใน res/xml เพื่มบรรทัด

 <plugin name="org.apache.cordova.facebook.Connect" value="org.apache.cordova.facebook.ConnectPlugin" />


facebook_js_sdk.js ไปไว้ใน www



copy res และ src ไปวางใน project จะมีข้อความเตือนวางจะทับไฟล์เดิมไหม ให้เลือก no





copy foder org ใน /native/android/src  ไปไว้ใน foder src ของ Project



*** จะมี error ขึ้นมาใน src ให้เรา เพิ่มบรรทัดในหน้าที่เกิด error โดยการเพิ่ม
import (ตามด้วย packet ของ โปรแแกรมหลักของเรา )

เช่น packet ของผม com.example.phonegapfacebookapi

ก็เพิ่ม import com.example.phonegapfacebookapi.*; ครับ


copy cdv-plugin-fb-connect.js  ไปไว้ใน www



ทดสอบ ตัวอย่างงจาก plugin นำ foder www ใน ตัวอย่าง hackbook มาวางแทนในโปรเจค





เปิดไฟล์ index.html นำเลข id ของ facebook app เราไปใส่



ทดสอบรันโปรแกรม




ที่มา


ไม่มีความคิดเห็น:

แสดงความคิดเห็น