martes, noviembre 12, 2019

Agregar el plugin de Facebook en un app de PhoneGap

En este ejemplo vamos a explicar como instalar y configurar el plugin de Facebook en nuestra aplicación para dispositivos móviles creada con PhoneGap y para iOS, la configuración para los otros dispositivos es muy similar y más adelante indicamos donde hacerlo.

Primero debemos instalar PhoneGap en nuestra computadora, aquí están los pasos a seguir, donde se encuentran los pasos para instalarlo en OS X o Windows.

Antes de integrar el plugin en nuestra aplicación móvil debemos tener una aplicación creada en Facebook, debes entrar al area de desarrollo https://developers.facebook.com/ y crear la aplicación correspondiente https://developers.facebook.com/apps/ después de estos pasos necesitas apuntar el APP ID, que lo vas a necesitar en los pasos siguientes.

Después de tener instalado PhoneGap en la terminaly la aplicación en Facebook ejecutamos los siguientes comandos:

# Creamos la aplicación
$ cordova create PruebaFacebook com.dotnetcr.pruebaFacebook "PruebaFacebook"

# Ingresamos al folder creado
$ cd pruebafacebook

# Agregamos la plataforma deseada
# Pueden ser ios, amazon-fireos, android, blackberry10, browser, firefoxos
$ cordova platform add ios

$ cordova build

# Clonamos el plugin en la computadora
$ git clone https://github.com/Wizcorp/phonegap-facebook-plugin.git

# Instalamos el plugin en la aplicación, 
# APP_ID es el número de aplicación de Facebook
# APP_NAME es el nombre de la aplicación
$ cordova -d plugin add phonegap-facebook-plugin --variable APP_ID="12345678912345" --variable APP_NAME="NombreAppEnFacebook"

En este punto la aplicación está lista para funcionar, todos los parámetros quedaron configurados en el archivo config.xml y en Info de la aplicación.

Aquí puede consultar los manuales de instalación para los distintos dispositivos: Android, iOS, otros.

Una vez que hemos seguidos los pasos de instalación y configuración modificamos index.html para hacer las pruebas e interactuar con Facebook. Entre las etiquetas de <body> agregamos el siguiente código:

<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 2</p>
    </div>
    <div class="event listening button" onclick="login();">Login with Facebook</div>
    <div class="event listening button" onclick="showDialog();">Show Dialog with Facebook</div>
    <div class="event listening button" onclick="apiTest();">Test API with Facebook</div>
    <div class="event listening button" onclick="getAccessToken();">Get access token with Facebook</div>
    <div class="event listening button" onclick="getStatus();">Get login status with Facebook</div>
    <div class="event listening button" onclick="logout();">Logout with Facebook</div>
</div>
<div id="fb-root"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<script type="text/javascript" src="js/facebookConnectPlugin.js"></script>
<script type="text/javascript">

    var fbLoginSuccess = function (userData) {
        alert("UserInfo 2: " + JSON.stringify(userData));
    }

var login = function () {
    if (!window.cordova) {
        var appId = prompt("Enter FB Application ID", "12345678912345");
        facebookConnectPlugin.browserInit(appId);
    }
    
    facebookConnectPlugin.login(["email"],
                                fbLoginSuccess,
                                function (error) { alert("" + error) }
                                );
                                //facebookConnectPlugin.login( ["email"],
                                //    function (response) { alert(JSON.stringify(response)) },
                                //    function (response) { alert(JSON.stringify(response)) });
}

var showDialog = function () {
    facebookConnectPlugin.showDialog( { method: "feed", link: 'http://www.dotnetcr.com',
                                     caption: 'DotNetcr.com - Programación en español'},
                                     function (response) { alert(JSON.stringify(response)) },
                                     function (response) { alert(JSON.stringify(response)) });
}

var apiTest = function () {
    facebookConnectPlugin.api( "me/?fields=id,email,last_name",
                              function (response) { alert(JSON.stringify(response)) },
                              function (response) { alert(JSON.stringify(response)) });
}

var getAccessToken = function () {
    facebookConnectPlugin.getAccessToken(
                                         function (response) { alert(JSON.stringify(response)) },
                                         function (response) { alert(JSON.stringify(response)) });
}

var getStatus = function () {
    facebookConnectPlugin.getLoginStatus(
                                         function (response) { alert(JSON.stringify(response)) },
                                         function (response) { alert(JSON.stringify(response)) });
}

var logout = function () { 
    facebookConnectPlugin.logout( 
                                 function (response) { alert(JSON.stringify(response)) },
                                 function (response) { alert(JSON.stringify(response)) });
}

function correcta(){
    alert("conectado");
    
}
</script>

En este momento ya podemos compilar la aplicación y debe de estar funcional e integrada con nuestra aplicación de Facebook.

 

 

 

 

 

 




Roy Rojashttp://www.dotnetcr.com
Con más de 20 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español. royrojas.com | dotnetcr.com | GitHub

Redes Sociales

2,787FansMe gusta
339SeguidoresSeguir

Popular esta semana

ERROR PHP 7.2

Error: PHP Warning: count(): Parameter must be an array or an object that implements...

Como solucionar el error "PHP Warning: count() : Parameter must be an array or an object that implements Countable in..."

DELETE con subconsulta o INNER JOIN

En el siguiente ejemplo se explica la forma en que se pueden eliminar registros en nuestras tablas con instrucciones DELETE más complejas que las...

SQL Server: Error 3414, servicio no inicia

El error 3414 se produce generalmente cuando el motor de la base de datos SQL Server sufre algún evento imprevisto. Aquí lo solucionamos.

Últimos artículos

Ejemplos de Documentos Electrónicos 4.3

En este artículo vamos a brindar varios ejemplos de documentos electrónicos para la versión 4.3 de Factura Electrónica de Costa Rica.
Factura Electrónica Costa Rica

Encabezados del XML Factura Electrónica Costa Rica 4.3

Para generar el XML de la factura electrónica de Costa Rica se debe de seguir un formato específico para que estas sean...
C# - PDF417

Crear código PDF417 con iTextSharp y XZing en C# .NET

Para crear códigos PDF417 existen herramientas que podemos agregar a nuestra aplicaciones. En este ejemplo vamos explicar como utilizar iTextSharp y ZXing.

SQL Server: Error 3414, servicio no inicia

El error 3414 se produce generalmente cuando el motor de la base de datos SQL Server sufre algún evento imprevisto. Aquí lo solucionamos.