viernes, septiembre 29, 2023

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,736FansMe gusta
326SeguidoresSeguir

Popular esta semana

SQL Server

Cómo saber la fecha que se modificó un procedimiento almacenado

Poder saber cuales objetos o procedimientos almacenados se modificaron recientemente es muy útil principalmente en bases de datos donde varios desarroladores tienen acceso
SQL Server MERGE

MERGE en SQL Server para Insert, Delete y Update con dos tablas

Ejemplo práctico usando MERGE para sincronizar dos tablas, Insert, Update y Delete en un solo query. Válido para SQL SERVER 2008 o superior.
SQL Server

DELETE con subconsulta o INNER JOIN

En el siguiente ejemplo se explica la forma en que se pueden eliminar registros en nuestras tablas en SQL Server con instrucciones...

Últimos artículos

SQL Server MERGE

MERGE in SQL Server for Insert, Delete and Update with two tables

Practical example using MERGE to synchronize two tables, Insert, Update and Delete in a single query. Valid for SQL SERVER 2008 or...

Como crear una API REST con ASP.NET Core 6.0

Crear una API REST con C# en ASP.NET es un proceso sencillo y rápido que permite exponer un conjunto de recursos a...
Machine Learning & Python

Introducción a Machine Learning en Python

Machine Learning es una rama de la inteligencia artificial que se enfoca en el desarrollo de sistemas que pueden aprender de...
SQL Server MERGE

MERGE en SQL Server, como utilizarlo de forma sencilla

El comando MERGE en SQL Server se utiliza para combinar datos de varias tablas en una sola tabla. Es útil para actualizar...