domingo, marzo 26, 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

Flutter – Error: ADB exited with exit code 1

En este artículo vamos a explorar algunas posibles causas y solución al error en Flutter Error: ADB exited with exit code 1....
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

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...

Índices repetidos en SQL Server ¿Cómo encontrarlos?

Los índices en la base de datos SQL Server es una herramienta que nos ayuda a mejorar la respuesta de nuestras consultas,...