viernes, diciembre 3, 2021

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

Calcular la distancia entre dos puntos geográficos en SQL Server

En este ejemplo mostramos como calcular la distancia en metros o kilómetros entre dos puntos geográficos, por latitud y longitud. El resultado lo obtenemos en metros o kilómetros.
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.

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

Últimos artículos

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

Cómo promocionar gratis tu app usando tappx

Como todos los que me siguen y mis redes sociales sabrán, recientemente lancé mi primera aplicación, pero más allá del desafío tecnológico de...