lunes, diciembre 5, 2022

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.

Convertir String a Base64 y Base64 a String

Hemos tenido algunas consultas en estos días de cómo convertir Texto String a Base64 y viceversa, entonces decidimos hacer este pequeño ejemplo. Las funciones son...

Últimos artículos

Í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,...
Flutter - Instagram Clone App

Instagram Clone App con Flutter

Marvin Stanley Valenzuela nos comparte un reto y genialidad a la vez, excelente práctica de la que podemos aprender mucho, diseñó en...

¿Cómo agregar una IP adicional en una VM Ubuntu en Azure?

Lo más común al momento de crear y configurar un nuevo servidor es que a este le asigne un solo IP, pero...
flutter one year

Después de un año con Flutter, esto es lo que aprendí

La historia comenzó cuando un día desperté pensando en tener un nuevo proyecto personal. Me dije a mí misma que hay muchas...