cordova 3.3. facebook integration for iOS - ios

Error:
2014 - 04 - 08 17: 38: 33.210 javacourseblog[10129: 907] ERROR: Plugin 'org.apache.cordova.facebook.Connect'
not found,
or is not a CDVPlugin.Check your plugin mapping in config.xml.
2014 - 04 - 08 17: 38: 33.211 javacourseblog[10129: 907] - [CDVCommandQueue executePending][Line 158] FAILED pluginJSON = ["org.apache.cordova.facebook.Connect1333284177", "org.apache.cordova.facebook.Connect", "login", ["email"]]
this my error;
i tried to Facebook login& logout using cordova
i followed this bellow blog page.
http://javacourseblog.blogspot.in/2014/01/facebook-login-logout-using-cordova-330.html
android facebook login is working fine. but iOS build it shows above error.i followed
Phonegap 3.0 IOS plugins not found
also its also not helping for me.. please any one can help...

step 1:
create cordova project via telnet:
cordova create facebook in.com.fb Facebook
step 2:
add facebook cordova plugin
cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin.git
step 3:
remove and add fb id & app name .open the plugin.xml file from
find and remove below 2 line
after to add this 2 line
step 4
add your platform for android or ios
cordova platform add ios
step 5
1.Now Make reference of cordova.js ,cdv-plugin-fb-connect.js and facebook-js-sdk.js in your www folder
2.remove your old code form index.html.add follwoing code find replace your fb app id in index.html
'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" charset="utf-8" src="cdv-plugin-fb-connect.js"></script>
<script type="text/javascript" charset="utf-8" src="facebook_js_sdk.js"></script>
<div id="data">Hello Facebooktesters, loading ...</div>
<button onclick="login()">Login</button>
<button onclick="me()">Me</button>
<script type="text/javascript">
document.addEventListener('deviceready', function() {
try {
alert('Device is ready! Make sure you set your app_id below this alert.');
FB.init({
appId : "Your fb Id",
nativeInterface : CDV.FB,
useCachedDialogs : false
});
document.getElementById('data').innerHTML = "FB init executed";
} catch (e) {
alert(e);
}
}, false);
function me() {
FB.api('/me/friends', {
fields : 'id, name, picture'
}, function(response) {
if (response.error) {
alert(JSON.stringify(response.error));
} else {
var data = document.getElementById('data');
fdata = response.data;
console.log("fdata: " + fdata);
response.data.forEach(function(item) {
var d = document.createElement('div');
d.innerHTML = "<img src="+item.picture+"/>" + item.name;
data.appendChild(d);
});
}
var friends = response.data;
console.log(friends.length);
for ( var k = 0; k < friends.length && k < 200; k++) {
var friend = friends[k];
var index = 1;
friendIDs[k] = friend.id;
//friendsInfo[k] = friend;
}
console.log("friendId's: " + friendIDs);
});
}
function login() {
FB.login(function(response) {
if (response.authResponse) {
alert('logged in');
} else {
alert('not logged in');
}
}, {
scope : "email"
});
}
</script>
<!-- <script type="text/javascript">
app.initialize();
</script> -->
</body>
</html>'
step 6:
open your project in xcode and open ios plist file and add your fb appid and fb app_name
step 7
go to your codova config.xml.find bellow this line exits or not..if not exits(ios) add to step..
<feature name="org.apache.cordova.facebook.Connect">
<param name="ios-package" value="FacebookConnectPlugin" />
</feature>
step 8
cordova build
step 9
again check plist file
step 10
run your ios simulator

Make sure you install your facebook phonegap plugin in proper way. Don't use plugman.
cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin --variable APP_ID="xxxxxxxxxxxxxxx" --variable APP_NAME=“YourAppName”

Related

ui-router not working in cordova angular ios build

I have a problem while loading views using ui-router in cordova ios build. I'm using cordova angular in my application. The ui-router working fine in android build but while i'm running the app using cordova emulate ios the views not getting loaded.
here is my code looks like,
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Awesome material design app</title>
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<link rel="stylesheet" href="lib/ionic/css/ionicons.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ngPercentDisplay.css">
<script src="node_modules/angular/angular.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"> </script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="lib/angular-touch.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="js/controller.js"></script>
<script src="js/router.js"></script>
</head>
<body ng-app="YourApp">
<div layout="column">
<ng-include src="'templates/partials/sidebar.html'" style="top:0px" ng-if ="lang =='ENGLISH'"></ng-include>
<ng-include src="'templates/partials/sidebar-right.html'" style="top:0px" ng-if ="lang =='ARABIC'"></ng-include>
<div ui-view></div>
</div>
</body>
</html>
The router.js file looks like below
app.config(['$urlRouterProvider', '$stateProvider','$compileProvider', function($urlRouterProvider, $stateProvider,$compileProvider) {
$urlRouterProvider.otherwise('/signup');
$stateProvider.state('signup', {
url:'/signup',
templateUrl: 'templates/sign-up.html',
controller: 'signupCtrl'
});
}]);
The index.js file looks like
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
controller.js looks like below,
'use strict';
var app = angular.module( 'YourApp', [ 'ngMaterial','ui.router']);
app.controller('myCtrl',['$scope',function ($scope) {
$scope.detail={};
$scope.detail.name="MyApp";
$scope.detail.desc="welcome to my app!";
}]);
Please help me if any one knows about this issue. Thanks in advance.

Accessing mp3 files stored inside ngCordova/ionic iOS app

I am currently in the process of building an iOS app with ngCordova and Ionic. Part of the specification includes being able to access/play mp3 files stored inside the applications 'www' folder.
After experimenting I have been able to play a music file from an external URL, however when trying to use a locally stored mp3 I am having problems.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="editor">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Editor</h1>
</ion-header-bar>
<ion-content ng-controller="MusicController">
<button class="button" ng-click="play('www/elvis.mp3')">Play</button>
</ion-content>
</ion-pane>
</body>
</html>
And here is the Controller/App:
var editorApp = angular.module('editor', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
editorApp.controller("MusicController", function($scope, $cordovaMedia) {
$scope.play = function(src) {
var filePath = cordova.file.applicationDirectory + src;
var iOSPlayOptions = {
numberOfLoops: 2,
playAudioWhenScreenIsLocked : false
};
var media = $cordovaMedia.newMedia(filePath);
media.play(iOSPlayOptions);
};
});
When I "cordova build ios" and run this on a phone in xCode I get the following error:
2015-04-23 11:59:43.619 IonicProject[1487:375698] Unknown resource
'file:///private/var/mobile/Containers/Bundle/Application/FB22B00F-9020-46C9-BBA2-674009BD84F7/IonicProject.app/www/elvis.mp3'
You can use the direct audio tag for iOS app in ionic and no need to do these thing (these are required for Android app). Just write the following code:
HTML Code
<div ng-bind-html="audioCall()"></div>
Controller Code
$scope.audioCall = function () {
if ($scope.audioUrl) {
return $sce.trustAsHtml("<audio controls> <source src='" + $scope.audioUrl + "' type='audio/mpeg'/></audio>");
} else {
return "";
}
};

Barcode Scanner Issue in Cordova 3

I'm using the Barcode Scanner plugin with Cordova, and the camera keep freezing when I navigate through my app.
It throws the following warning in XCode :
Warning: Attempt to present <CDVbcsViewController> on <MainViewController> while a presentation is in progress!
Do you have any ideas how I could solve this issue ?
edit:
Maybe it has something to do with Backbone as I'm browsing the app. The Barcode scan goes well when i'm on the homepage, but as soon as I change the page, it's freezing and I got the warning.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>Project</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<script data-main="js/main" src="js/lib/require.js"></script>
</body>
</html>
plugin_cordova.js
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/com.phonegap.plugins.barcodescanner/www/barcodescanner.js",
"id": "com.phonegap.plugins.barcodescanner.BarcodeScanner",
"clobbers": [
"cordova.plugins.barcodeScanner"
]
}
]
});
my backbone view
define(['jquery','underscore','backbone'], function($, _, Backbone){
var myView = Backbone.View.extend({
initialize: function(){
/* ... */
},
render: function(ev){
/* ... */
}
startScan: function(e){
e.preventDefault();
cordova.plugins.barcodeScanner.scan(this.scanSuccess,this.scanError);
},
scanSuccess: function(response){
alert("We got a barcode\n" +
"Result: " + response.text + "\n" +
"Format: " + response.format + "\n" +
"Cancelled: " + response.cancelled);
},
scanError: function(error){
alert('Error: '+error);
},
});
return myView;
});
Thanks!
I also faced the similar warning recently. After some investigation, triggering the barcode scanner more than once at the same time will have this problem. This could be due to multiple times binding of the button that trigger scanner.

RequestFileSystem undefined PhoneGap/Cordova 2.2.0 on iOS

I'm trying to create a PhoneGap application for Android and iOS.
So far I've been succeeding to the extent that I've been able to access the LocalFileSystem on Android 2.2 and up.
On iOS (5 and 6), I've had no such luck unfortunately.
The FileReader and FileWriter examples fail to work as well.
I've spent some time debugging this using jsconsole.com and as far as I can tell window.requestFileSystem and window.webkitRequestFileSystem are both undefined.
Which would explain why I have issues with the file system.
I'm using Cordova 2.2.0 and XCode 4.5 for the iOS part.
Both the example and my own code is working on Android.
If any of you have any advice I'd really appreciate the positive effect it will have on my mental health!
Edit:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
</head>
<body>
<div class="app">
click!
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script src="http://jsconsole.com/remote.js?secret-debug-key"></script>
<script type="text/javascript" src="js/filesystem.js"></script>
<script type="text/javascript">
var myfs;
document.addEventListener('deviceready', function() {
myfs = new FS();
myfs.initializeFileSystem();
});
</script>
</body>
</html>
filesystem.js:
var FS = (function()
{
var self = {};
self.initializeFileSystem = function()
{
window.requestFileSystem = window.webkitRequestFileSystem || window.requestFileSystem;
window.requestFileSystem(1, 0, self.gotFS, self.fail);
};
self.gotFS = function (fileSystem)
{
window.rootFS = fileSystem.root;
//create our cache directory if it does not exist
var entry = fileSystem.root;
entry.getDirectory("tempdirectory", {create: true, exclusive: false}, function() {console.log("directory already present or created");}, function(error) {console.log("Error creating directory " + error.code);});
};
self.fail = function()
{
console.log("requestFileSystem failed");
};
self.downloadImage = function(url, fileName, callback)
{
var ft = new FileTransfer();
var filename = fileName;
var callback = callback;
ft.download(
url,
window.rootFS.fullPath + "/" + filename,
function(entry)
{
if(callback!= undefined)
{
callback(entry);
}
},
function(error)
{
console.log("download error: " + error.code);
}
);
};
self.clicked = function()
{
//random test URL
var url = "http://www.embeddedpeople.dk/_/rsrc/1301663383918/home/ydelser/konsulentydelser/test/test.png?height=400&width=350";
self.downloadImage(url, "test.png", function(){console.log("download succesful");$('body').append('<img src="file:///data/data/dk.attention8.filesystem/test.png" />');});
return false;
};
return self;
}
);
This works on Android, after the click has been made, the file is downloaded and an img tag containing a reference to the path of the downloaded image should be inserted in the DOM.
I'm aware that this path isn't valid on iOS nor the correct one on a device with an SDcard, but the issue is occuring before this img tag is added.
This image should show that the javascript code works in Android ( taken of the Android Emulator ).
If you need further clarification or have questions I'll provide them as fast as I can.
Thank you for your time!
I've finally resolved this issue.
I've had a common "www" folder that I'd transfer from my Android to my iOS project.
I've naively overwritten the entire www folder, and this has been causing the problem.
The cordova.js file in the root of the www folder is platform specific, and I had thusly used the Android cordova.js file in my iOS project, which obviously wasn't working.
Thank you to fmertz on #phonegap for pointing me in the right direction.

cordova 1.7 iOS audiorecord plugin

I've implemented the audio record plugin on IOS using phonegap/cordova 1.7. IOS5.1
I'm using it over the standard media.startrecord() function as I want to change the bitrate to reduce the size of the file.
It works fine in the simulator.
On the real iphone it records successfully once but subsequently refuses.. it seems to work but on playback I'm getting an error 4 MediaError.MEDIA_ERR_NONE_SUPPORTED
I've created a new project with just a bare bones record and playback and I'm still getting the same issue.
Here's the test code - It's very basic - just a couple of links to record two separate files and play them back. The setTimeout is there to record just a couple of seconds of audio each time.
I've googled til I've worn out my fingerprints but haven't found a resolution.
Any insight you can give would be very gratefully received.
I'm wondering if I'm failing to close out the recording/playback properly? Or are files referenced differently on the sim v the iPhone?
Many thanks!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript">
var fs,mediaRec=null, recInterval,recordSettings = {"FormatID": "kAudioFormatULaw","SampleRate": 16000.0,"NumberOfChannels": 1,"LinearPCMBitDepth": 16};
function recfile1() {recordAudio("test.wav");}
function recfile2() {recordAudio("test2.wav");}
function success(){console.log("ok");}
function recordAudio(fname) {
fs.root.getFile(fname, {create: true, exclusive: false}, function(entry){
mediaRec = new Media(entry.fullPath, success, function(){alert("failed");});
mediaRec.startRecordWithSettings(recordSettings);
recInterval = setTimeout(function() {
mediaRec.stopRecordWithSettings();
}, 2000);
}, function(){console.log("error");});
}
function playfile(fname) {
var my_media;
fs.root.getFile(fname, {create: false, exclusive: false},
function success(entry) {
my_media = new Media(entry.fullPath,function(){console.log("ok");},function(err){alert(err.code+" "+err.message);});
my_media.play();
},
function() {
console.log("not found file");
}
);
}
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){fs=fileSystem;}, function(){console.log("failed");});
Media.prototype.startRecordWithSettings = function(options) {
Cordova.exec(null, null, "AudioRecord","startAudioRecord", [this.id, this.src, options]);
};
Media.prototype.stopRecordWithSettings = function() {
Cordova.exec(null, null, "AudioRecord","stopAudioRecord", [this.id, this.src]);
};
}
</script>
</head>
<body onload="onBodyLoad()">
<a onclick="playfile('test.wav');">play</a>
<a style='margin-top:100px;' onclick="recfile1();">record 1</a>
<a style='margin-top:100px;' onclick="recfile2();">record 2</a>
<a onclick="playfile('test2.wav');">play2</a>
</body>
</html>

Resources