Saltar a: navegación, buscar

Diferencia entre revisiones de «SDKs:NickCenter:Cordova:index»


(CÓMO AGREGAR EL PLUGIN NICKCENTER EN CORDOVA)
(PRECARGA DE DATOS PARA EL REGISTRO:)
 
(No se muestran 45 ediciones intermedias de 2 usuarios)
Línea 2: Línea 2:
  
  
{{SDKs:NickCenter:Android}}
+
{{:SDKs:NickCenter:Intro}}
  
== VERSIONES DE iOs SOPORTADAS ==
+
== VERSIONES SOPORTADAS ==
  
 +
Este Plugin soporta tanto Android como iOS.
  
Este framework soporta todas las versiones de iOs superiores a las <b>10.0</b>, en caso de que detecte una versión inferior no se lanzará.
+
Para iOS soporta las versiones superiores a las <b>10.0</b>, en caso de que detecte una versión inferior no se lanzará.
  
== PASOS A REALIZAR EN EL PANEL MOBELEADER ==
+
Para Android soporta todas las versiones superiores a la <b>4.0</b>
  
 +
{{:SDKs:NickCenter:PanelControl}}
  
Una vez nuestra aplicación esté registrada en el Panel Mobeleader, [http://panel.mobeleader.com/index.php](http://panel.mobeleader.com/index.php), iremos a la sección de de <b><i>Desarrolladores</i></b> y hacemos click en <b><i>NickCenter —> Añadir app a NickCenter</i></b>.
+
== PASOS A REALIZAR PARA LA INTALACIÓN DEL PLUGIN ==
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Anadir_app_nc_1.png
 
 
 
Para añadir nuestra aplicación a <b><i>NickCenter</i></b> deberemos seguir cinco sencillos pasos:
 
 
 
<b>1.- Selección de app:</b> En este apartado tendremos que elegír la aplicación que queremos añadir a <b><i>NickCenter</i></b> y decidir si la librería estará activa o no al lanzar la aplicación seleccionada. Esto se podrá activar y desactivar siempre que se desee.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_2.png
 
 
 
<b>2.- Pantalla de registro:</b> En este paso configuraremos lo referente a la vista de registro para los usuarios. Podremos elegir entre varios campos de los cuales, como se indica, el <b>email</b> y <b>password</b> siempre serán obligatorios, el resto, será al gusto del desarrollador; pudiendo elegir que el usuario <i>PUEDA</i>  introducir su nombre, pero no siendo obligatorio para el registro.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_3.png
 
 
 
<b>3.- Pantalla de inicio de sesión:</b> Como en el anterior paso, aquí, configuraremos lo referente a la pantalla de inicio de sesión para los usuarios. En este caso, como se indica, solo será obligatorio el campo <b>password</b>.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_4.png
 
 
 
<b>4.- Pantalla de recuperación de contraseña:</b> En este caso, para la pantalla de recuperación de contraseña tan solo se pedira el <b>email</b> del usuario y por tanto, dicho <b>email</b> sera un campo obligatorio.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_5.png
 
 
 
<b>5.- Traducción:</b> Este será el último paso para configurar nuestra aplicación, aquí deberemos seleccionar tanto los idiomas a los que estarán traducidos todos los campos que hemos configurado previamente; como su propia traducción a dichos idiomas. Una vez seleccionado el primer idioma, se pondrá como idioma por defecto de dicha aplicación. Para cambiar el idioma por defecto no tendremos más que generar las traducciones en más idiomas y modificar el campo <b>"Traducción por defecto"</b>.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_6.png
 
 
 
<b>5.1.- Cabeceras y botones:</b> En este primer paso generaremos las traducciones de las cabeceras de las pantallas y de sus botones.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_7.png
 
 
 
<b>5.2.- Configuración de campos:</b> En el segúndo paso generaremos las traducciones de los campos seleccionados previamente para cada pantalla y de sus posibles errores.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_8.png
 
 
 
<b>5.3.- Traducciones generales:</b>  En el tercer y último paso generaremos las traducciones generales, traducciones que van asociadas a todas las pantallas y no a una/s en concreto como en los anteriores pasos.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_9.png
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_10.png
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_11.png
 
 
 
Una vez finalizadas las traducciones, como se ha indicado previamente, aparecerá el idioma al que se han realizado las traducciones y se pondrá por defecto.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_12.png
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Configurar_app_nc_13.png
 
 
 
Si al finalizar dicha configuración no hemos quedado satisfechos con los campos seleccionados en alguna de sus pantallas, cuando procedamos a editar dicha pantalla y añadamos un nuevo campo que previamente no ha sido traducido, automáticamente se abrirá una pantalla para generar las traducciones para el <b><i>IDIOMA POR DEFECTO</i></b>. Si queremos generar la traducción para el resto de idiomas hemos de volver a realizar lo especificado en el paso <b>5.-Traducción</b>.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Anadir_nuevo_campo_14.png
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Anadir_nuevo_campo_15.png
 
 
 
== PASOS A REALIZAR PARA LA INTALACIÓN DEL FRAMEWORK EN LA APLICACIÓN ==
 
  
  
Línea 72: Línea 20:
  
  
Existen dos maneras de instalar el <i>FrameWork</i> <b>NickCenter</b>: a través de <b>CocoaPods</b> o descargándolo directamente. Recomendamos hacerlo a través de la primera opción. <b>NickCenter</b> incorpora dos <i>frameworks</i> auxiliares, <b>RegisterLib</b> y <b>UtilsLib</b>.
+
Para instalar el Plugin, si queremos que funcione en iOS, primero tendremos que instalar el plugin cordova-plugin-cocoapod-support, de la siguiente manera:
 +
      cordova plugin add cordova-plugin-cocoapod-support
 +
y después instalar el plugin de Nickcenter de esta manera (si solo lo vamos a usar para android con este plugin es suficiente):
 +
      cordova plugin add cordova-plugin-nickcenter
  
==== INSTALACIÓN CON COCOAPODS: ====
+
Una vez ejecutados los dos comandos ya tendremos el plugin instalado.
  
 +
=== LANZAMIENTO: ===
  
En caso de que su proyecto no incluya el archivo <b><i>Podfile</i></b>, incorpórelo. Si nunca ha trabajado con <b>CocoaPods</b> consulte la [documentación ofrecida en su web oficial](https://guides.cocoapods.org/using/using-cocoapods.html), en la que se explica paso a paso cómo instalar <b>CocoaPods</b> y cómo crear, actualizar y trabajar con los archivos <b><i>Podfile</i></b>.
 
  
    target 'NameTarget' do
+
Una vez configurada la instalación, lanzaremos en el momento donde queramos el código, por ejemplo:
      use_frameworks!
 
        pod 'MobeleaderNC'
 
        pod 'MobeleaderUtils'
 
        pod 'MobeleaderRegister'
 
    end
 
  
Cabe destacar que <b>NameTarget</b> deberá ser reemplazado por el nombre real del target de la aplicación en la que se quiere añadir el framework.
+
      cordova.exec(successNickCenterCallback, errorNickCenterCallback,  "nickcenter",  "launchNickCenter", ["54e46801egh95"]);
  
Una vez creado y configurado el archivo haremos uso del siguiente comando desde el terminal sobre la ruta en la que se encuentra dicho archivo.
 
  
    $ pod install --repo-update
+
Los Argumentos enviados serán los siguientes:
 +
* <b>Argumento 1:</b> Es el AppHash de la aplicación, el cual se puede obtener en el panel, como muestra la siguiente pantalla.
  
  
Y veremos como se crea un proyecto tal que el siguiente:
+
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Obtener_hash_app_14.png
  
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Proyecto_nc_ios_8.png
+
Por defecto las pantallas de <b>NickCenter</b> presentan el siguiente formato:
  
<b>Deberemos abrir el proyecto desde dicho archivo</b> para que pueda usar el framework correctamente.
+
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/nc_ios_default.jpeg
  
==== INSTALACIÓN MANUAL: ====
+
Si desea modificar las pantallas para que sean lo más parecidas a su aplicación <b><i>NickCenter</i></b> deberá añadir más argumentos, en el siguiente orden (Estos Argumentos son completamente Opcionales) (Todos los colores deben ir en hexadecimal):
  
 +
* <b>Argumento 2:</b> Determina el color de fondo de las pantallas. Ejemplo: "#ffffff"
  
Descargue el <i>framework</i> <b>NickCenter</b>:
+
* <b>Argumento 3:</b> Determina el color de fondo de la cabecera de las pantallas. Ejemplo: "#f0f0f0"
  
* Desde la [página principal de las librerías](http://panel.mobeleader.com/index.php?sec=82):
+
* <b>Argumento 4:</b> Determina el color de la linea que separa la cabecera con el resto de la pantalla. Ejemplo: "#01e3fe"
  
 +
* <b>Argumento 5:</b> Determina el color del texto de la cabecera de las pantallas. Ejemplo: "#7b7b7b"
  
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/descarga_general_nc_ios.png
+
* <b>Argumento 6:</b> Determina el color de fondo de los textfields donde se ubican los campos de cada pantalla. Ejemplo: "#ebebeb"
  
* Desde la página de información de la libreria(http://panel.mobeleader.com/index.php?sec=85&id=45&tipo=3):
+
* <b>Argumento 7:</b> Determina el color del texto descriptivo de cada textfield. Ejemplo: "#7b7b7b"
  
 +
* <b>Argumento 8:</b> Determina el color del texto de los textfields donde se ubican los campos de cada pantalla. Ejemplo: "#7b7b7b"
  
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/descarga_especifica_nc_ios_1.png
+
* <b>Argumento 9:</b> Determina el color de fondo de los botones de cada pantalla. Ejemplo: "#7b7b7b"
  
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/referrer/descargar_framework.png
+
* <b>Argumento 10:</b> Determina el color de fondo de los botones de cada pantalla cuando se ha hecho click en éstos. Ejemplo: "#000000"
  
* Directamente desde [aquí](https://repos.mobeleader.com/MobeleaderNC/1.0.23/MobeleaderNC.zip).
+
* <b>Argumento 11:</b> Determina el color del texto de cada boton cuando no se ha hecho click en éstos. Ejemplo: "#01e3fe"
  
 +
* <b>Argumento 12:</b> Determina el color del texto de cada botón cuando se ha hecho click en éstos. Ejemplo: "#01e3fe"
  
Una vez descargado el <b><i>framework</i></b>, descomprímalo e instálelo en su proyecto.
+
* <b>Argumento 13:</b> Determina el color del borde de los botones. Ejemplo: "#01e3fe"
=== LANZAMIENTO: ===
 
  
 +
* <b>Argumento 14:</b> Determina el color de la fuente de los textos de los terminos y condiciones. Ejemplo: "#000000"
  
Una vez configurada la instalación, crearemos un objeto de la clase NickCenter en donde vayamos a usarla, en el ejemplo se hace en la implementacion de la clase ( DatosIniciales ):
+
* <b>Argumento 15: (Solo para iOS)</b> Determina el color de los botones activos en los términos y condiciones. Ejemplo: "#01e3fe"
  
    @implementation DatosIniciales{
+
* <b>Argumento 16: (Solo para iOS)</b> Determina el color de los botones inactivos en los términos y condiciones. Ejemplo: "#f0f0f0"
NickCenter *nickCenter;
 
}
 
  
  
Para su lanzamiento se insertarán las siguientes lineas de código.
 
  
 +
A continuación se expone un ejemplo en el que se maqueta a gusto del desarrollador las pantallas de <b>NickCenter</b>.
  
    nickCenter = [[NickCenter alloc] init];
 
    [nickCenter setDelegate:self];
 
    [nickCenter setRootViewController:self];
 
    [nickCenter setAppHash:@"Hash de la APP en el Panel de Mobeleader"];
 
    [nickCenter checkAndLaunch];
 
  
* <b>appHash</b>: Será el hash dado por el Panel Mobeleader al dar de alta la aplicación en éstePara acceder a el deberemos ir a la sección <b><i>Desarrolladores</i></b> --> <b><i>Mis Apps</i></b> y hacer click sobre la columna <b>Hash</b> de nuestra aplicación.
+
    cordova.exec(successNickCenterCallback, errorNickCenterCallback, "nickcenter",  "launchNickCenter", ["hash_app", "#ffffff", "#f0f0f0", "#01e3fe", "#7b7b7b", "#ebebeb", "#7b7b7b", "#7b7b7b", "#7b7b7b", "#000000", "#01e3fe", "#01e3fe", "#01e3fe", "#000000", "#01e3fe", "#f0f0f0"]);
  
 +
Cabe destacar que en el caso de Android, Cordova pone los checkbox por defecto de color blanco, por lo que sí queremos que se vean deberemos usar un fondo de pantalla que no sea blanco.
  
* <b>setRootViewController</b>: Ésta función será opcional, con ella le diremos al framework desde que ViewController se lanzará y se recogerán las respuestas en los delegates.
 
  
 +
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/nc_cordova_colores.png
  
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Obtener_hash_app_14.png
+
=== COMPLETAR REGISTRO: ===
  
Por defecto las pantallas de <b>NickCenter</b> presentan el siguiente formato:
 
  
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/nc_ios_default.jpeg
+
Una vez un usuario haya sido registrado en una de nuestras aplicaciones, cuando otra lance NickCenter, dicho usuario tan soló debera <b>logearse</b> sin necesidad de tener que registrarse otra vez para ésta última aplicación. Se puede dar el caso de que al registrarte en la primera aplicación tán solo fuera necesario <b>email y contraseña</b>, y que para la segunda aplicación fuera necesario registrarse con el <b>telefono</b>, cuando este tipo de casos se den, al logearte en la segunda aplicación se abrirá una nueva vista para completar el registro. Una vez completado dicho registro se tratará como un login normal.
  
Si desea modificar las pantallas para que sean lo más parecidas a su aplicación el framework de <b><i>NickCenter</i></b> esta dotado de una serie de funciones que le permitirán maquetarlas a su gusto:
+
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/nc_ios_completar.jpeg
  
* <b>setViewsBackgroundColor:(UIColor \*):</b> Determina el color de fondo de las pantallas.
+
=== FUNCIONES UTILES: ===
  
* <b>setViewsBackgroundImage:(UIImage \*):</b> Determina la imagen de fondo de cada pantalla.
 
  
* <b>setHeaderBackgroundColor:(UIColor \*):</b> Determina el color de fondo de la cabecera de las pantallas.
+
<b>NickCenter</b> está dotada de una función que permite al desarrollador cerrar la sesión ya iniciada por el usuario de manera que la siguiente vez que abra la aplicación y pase por donde se lanza la librería, el usuario deba volver a loguearse. Dicha funcion es :
  
* <b>setHeaderBackgroundImage:(UIImage \*):</b> Determina la imagen de fondo de la cabecera de cada pantalla.
+
* <b>closeSession</b>
  
* <b>setHeaderBottomLineColor:(UIColor \*):</b> Determina el color de la linea que separa la cabecera con el resto de la pantalla.
 
  
* <b>setHeaderTextColor:(UIColor \*):</b> Determina el color del texto de la cabecera de las pantallas.
+
Ejemplo:
 +
    cordova.exec(successNickCenterCallback, errorNickCenterCallback,  "nickcenter",  "closeNickCenterSession", ["hash_app"]);
  
* <b>setHeaderFont:(UIFont \*):</b> Determina la fuente de los textos de las cabeceras.
 
  
* <b>setTextFieldsBackgroundColor:(UIColor \*):</b> Determina el color de fondo de los textfields donde se ubican los campos de cada pantalla.
+
=== PRECARGA DE DATOS PARA EL REGISTRO: ===
  
* <b>setTextFieldsPlaceholderColor:(UIColor \*):</b> Determina el color del texto descriptivo de cada textfield.
+
<b>NickCenter</b> está dotada de una serie de funciones que permiten al desarrollador precargar los datos del usuario a la hora de mostrarle la pantalla de registro. Si desea hacer uso de esta precarga deberá pasar más argumentos a la llamada de la librería ( todos estos argumentos son opcionales ) :
  
* <b>setTextFieldsTextColor:(UIColor \*):</b> Determina el color del texto de los textfields donde se ubican los campos de cada pantalla.
+
* <b>Argumento 17:</b> Nombre. Ejemplo: "John".
 +
* <b>Argumento 18:</b> Apellidos. Ejemplo: "Smith".
 +
* <b>Argumento 19:</b> Email. Deberá ser un email válido, se comprobará tanto el formato de la cadena como la validez de éste. Ejemplo: "user@domain.com".
 +
* <b>Argumento 20:</b> Teléfono. Deberá ser un teléfono sin prefijo internacional. Ejemplo: "555555555".
 +
* <b>Argumento 21:</b> Nick. Ejemplo: "MyNick".
 +
* <b>Argumento 22:</b> Género. Deberá ser M para hombres y F para mujeres.
 +
* <b>Argumento 23:</b> Fecha de nacimiento. Deberá ser una fecha en formato inglés separado por /. Ejemplo: "1992/01/12"
  
* <b>setTextFieldsFont:(UIFont \*):</b> Determina la fuente del texto de los textfields.
 
  
* <b>setButtonsNormalBackgroundColor:(UIColor \*):</b> Determina el color de fondo de los botones de cada pantalla.
+
A continuación se expone un ejemplo siguiendo la maquetación expuesta en anteriores puntos.
  
* <b>setButtonsHighlightedBackgroundColor:(UIColor \*):</b> Determina el color de fondo de los botones de cada pantalla cuando se ha hecho click en éstos.
+
    cordova.exec(successNickCenterCallback, errorNickCenterCallback,  "nickcenter",  "launchNickCenter", ["hash_app", "#ffffff", "#f0f0f0", "#01e3fe", "#7b7b7b", "#ebebeb", "#7b7b7b", "#7b7b7b", "#7b7b7b", "#000000", "#01e3fe", "#01e3fe", "#01e3fe", "#01e3fe", "#01e3fe", "#f0f0f0", "nombre", "apellido", "user@domain.com", "666777888", "CocoZilla", "M", "1992/01/12"]);
  
* <b>setButtonsNormalTextColor:(UIColor \*):</b> Determina el color del texto de cada boton cuando no se ha hecho click en éstos.
 
  
* <b>setButtonsHighlightedTextColor:(UIColor \*):</b> Determina el color del texto de cada boton cuando se ha hecho click en éstos.
+
[[Archivo:Precarga_datos_cordova.png|center]]
  
* <b>setButtonsBorderColor:(UIColor \*):</b> Determina el color del borde de los botones.
+
=== CallBacks: ===
  
* <b>setButtonsFont:(UIFont \*):</b> Determina la fuente de los textos de los botones.
 
  
* <b>setTermsFontColor:(UIColor \*):</b> Determina el color de la fuente de los textos de los terminos y condiciones.
+
<b>NickCenter</b> cuenta con una serie de callbacks los cuales se pueden recoger en en las funciones implementadas successNickCenterCallback y errorNickCenterCallback que permiten al desarrollador saber qué parte del plugin se esta ejecutando y cuál es su resultado. A continuación se expondrán éstos y para que sirven.
  
* <b>setTermsSwitchActiveColor:(UIColor \*):</b> Determina el color de los botones activos en los terminos y condiciones.
+
* <b>onRegisterViewOpened</b>: Notifica cuando la vista de registro se ha lanzado.
  
* <b>setTermsSwitchInactiveColor:(UIColor \*):</b> Determina el color de los botones inactivos en los terminos y condiciones.
+
* <b>onLoginViewOpened</b>: Notifica cuando la vista del login se ha lanzado.
  
 +
* <b>onRescueViewOpened</b>: Notifica cuando la vista de recuperación de contraseña se ha lanzado.
  
A continuación se expone un ejemplo en el que se maqueta a gusto del desarrollador las pantallas de <b>NickCenter</b>.
+
* <b>onError: Cadena de Error</b>: Notificará cuando haya habido un error, normalmente se lanzará cuando el registro o el login hayan sido incorrectos, o cuando al recuperar la contraseña el email sea incorrecto. Se puede dar el caso de que de otro tipo de error como bien puede ser al conectarnos al sevidor.
  
    nickCenter = [[NickCenter alloc] init];
+
* <b>onWarning: Cadena de Warning</b>: Notificará de alguna advertencia al desarrollador.
    [nickCenter setDelegate:self];
 
    [nickCenter setRootViewController:self];
 
    [nickCenter setAppHash:@"Hash de la APP en el Panel de Mobeleader"];
 
    [nickCenter setViewsBackgroundColor:[UIColor whiteColor]];
 
    [nickCenter setViewsBackgroundImage:[UIImage imageNamed:@"logo"]];
 
    [nickCenter setHeaderBackgroundColor:[UIColor orangeColor]];
 
    [nickCenter setHeaderBottomLineColor:[UIColor orangeColor]];
 
    [nickCenter setHeaderTextColor:[UIColor whiteColor]];
 
    [nickCenter setTextFieldsBackgroundColor:[UIColor colorWithRed:217.0/255 green:217.0/255 blue:217.0/255 alpha:1]];
 
    [nickCenter setTextFieldsPlaceholderColor:[UIColor grayColor]];
 
    [nickCenter setTextFieldsTextColor:[UIColor blackColor]];
 
    [nickCenter setButtonsNormalBackgroundColor:[UIColor orangeColor]];
 
    [nickCenter setButtonsHighlightedBackgroundColor:[UIColor orangeColor]];
 
    [nickCenter setButtonsNormalTextColor:[UIColor whiteColor]];
 
    [nickCenter setButtonsHighlightedTextColor:[UIColor colorWithRed:249.0/255 green:203.0/255 blue:156.0/255 alpha:1]];
 
    [nickCenter setTermsFontColor:[UIColor orangeColor]];
 
    [nickCenter checkAndLaunch];
 
  
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/nc_ios_desarrollador.jpeg
+
* <b>onFinished</b>: Notificará cuando la librería haya finalizado algun proceso. Inicio de sesión, registro o recuperación de contraseña correcto.
  
=== COMPLETAR REGISTRO: ===
+
* <b>onSessionClosed</b>: Notificará cuando se haya cerrado la sesión de NickCenter.
 
 
 
 
Una vez un usuario haya sido registrado en una de nuestras aplicaciones, cuando otra lance NickCenter, dicho usuario tan soló debera <b>logearse</b> sin necesidad de tener que registrarse otra vez para ésta última aplicación. Se puede dar el caso de que al registrarte en la primera aplicación tán solo fuera necesario <b>email y contraseña</b>, y que para la segunda aplicación fuera necesario registrarse con el <b>telefono</b>, cuando este tipo de casos se den, al logearte en la segunda aplicación se abrirá una nueva vista para completar el registro. Una vez completado dicho registro se tratará como un login normal.
 
 
 
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/nc_ios_completar.jpeg
 
 
 
=== FUNCIONES UTILES: ===
 
 
 
 
 
<b>NickCenter</b> está dotada de una función que permite al desarrollador cerrar la sesión ya iniciada por el usuario de manera que la siguiente vez que abra la aplicación y pase por donde se lanza la librería, el usuario deba volver a loguearse. Dicha funcion es :
 
 
 
* <b>closeSession</b>: ( [nickCenter closeSession]; )
 
 
 
 
 
=== DELEGATES: ===
 
 
 
 
 
<b>NickCenter</b> cuenta con una serie de delegates que permiten al desarrollador saber que parte del framework se esta ejecutando y cual es su resultado. A continuación se expondrán éstos y para que sirven.
 
 
 
* <b>registerViewOpened</b>: Notifica cuando la vista de registro se ha lanzado.
 
 
 
* <b>loginViewOpened</b>: Notifica cuando la vista del login se ha lanzado.
 
 
 
* <b>rescueViewOpened</b>: Notifica cuando la vista de recuperación de contraseña se ha lanzado.
 
 
 
* <b>onError:(NSString \*)error</b>: Notificará cuando haya habido un error, normalmente se lanzará cuando el registro o el login hayan sido incorrectos, o cuando al recuperar la contraseña el email sea incorrecto. Se puede dar el caso de que de otro tipo de error como bien puede ser al conectarnos al sevidor.
 
 
 
* <b>onWarning:(NSString \*)warning</b>: Notificará de alguna advertencia al desarrollador.
 
 
 
* <b>finished</b>: Notificará cuando la librería haya finalizado algun proceso. Inicio de sesión, registro o recuperación de contraseña correcto.
 
 
 
* <b>sessionClosed</b>: Notificará cuando se haya cerrado la sesión de NickCenter.
 
  
 
* <b>onActive</b>: Notificará cuando detecte que NickCenter esta activa para la aplicación.
 
* <b>onActive</b>: Notificará cuando detecte que NickCenter esta activa para la aplicación.
Línea 255: Línea 151:
 
* <b>onInactive</b>: Notificará cuando detecte que NickCenter esta inactiva para la aplicación.
 
* <b>onInactive</b>: Notificará cuando detecte que NickCenter esta inactiva para la aplicación.
  
* <b>registerRegisterButtonClicked</b>: Notificará cuando se haga click en el botón de registarse en la vista de registro de usuario.
+
* <b>onRegisterRegisterButtonClicked</b>: Notificará cuando se haga click en el botón de registrarse en la vista de registro de usuario.
 +
 
 +
* <b>onRegisterLoginButtonClicked</b>: Notificará cuando se haga click en el botón de inicio de sesión en la vista de registro de usuario.
  
* <b>registerLoginButtonClicked</b>: Notificará cuando se haga click en el botón de inicio de sesión en la vista de registro de usuario.
+
* <b>onRegisterCloseButtonClicked</b>: Notificará cuando se haga click en el botón de cerrar en la vista de registro de usuario.
  
* <b>registerCloseButtonClicked</b>: Notificará cuando se haga click en el botón de cerrar en la vista de registro de usuario.
+
* <b>onRegisterPerformed: Json de Usuario</b>: Notificará cuando haya habido un registro correcto. Se mandará la información recogida del usuario en formato Json.
  
* <b>loginPerformed:(NCUser \<i>) user dictionary:(NSMutableDictionary \</i>) userDictionary</b>: Notificará cuando haya habido un registro o un login correcto. Se mandará la información recogida del usuario tanto en formato NCUser como en formato NSMutableDictionary.
+
* <b>onLoginPerformed: Json de Usuario</b>: Notificará cuando haya habido un login correcto. Se mandará la información recogida del usuario en formato Json.
  
* <b>loginLoginButtonClicked</b>: Notificará cuando se haga click en el botón de inicio de sesión en la vista de inicio de sesión.
+
* <b>onLoginLoginButtonClicked</b>: Notificará cuando se haga click en el botón de inicio de sesión en la vista de inicio de sesión.
  
* <b>loginRegisterButtonClicked</b>: Notificará cuando se haga click en el botón de registrarse en la vista de inicio de sesión.
+
* <b>onLoginRegisterButtonClicked</b>: Notificará cuando se haga click en el botón de registrarse en la vista de inicio de sesión.
  
* <b>loginRescueButtonClicked</b>: Notificará cuando se haga click en el botón de recuperar contraseña en la vista de inicio de sesión.
+
* <b>onLoginRescueButtonClicked</b>: Notificará cuando se haga click en el botón de recuperar contraseña en la vista de inicio de sesión.
  
* <b>loginCloseButtonClicked</b>: Notificará cuando se haga click en el botón de cerrar en la vista de inicio de sesión.
+
* <b>onLoginCloseButtonClicked</b>: Notificará cuando se haga click en el botón de cerrar en la vista de inicio de sesión.
  
* <b>rescueRescueButtonClicked</b>: Notificará cuando se haga click en el botón de recuperar contraseña en la vista de recuperar contraseña.
+
* <b>onRescueRescueButtonClicked</b>: Notificará cuando se haga click en el botón de recuperar contraseña en la vista de recuperar contraseña.
  
- <b>rescueCloseButtonClicked</b>: Notificará cuando se haga click en el botón de cerrar en la vista de recuperar contraseña.
+
* <b>onRescueCloseButtonClicked</b>: Notificará cuando se haga click en el botón de cerrar en la vista de recuperar contraseña.

Revisión actual del 09:54 7 jun 2019

CÓMO AGREGAR EL PLUGIN NICKCENTER EN CORDOVA

INTRODUCCION

NickCenter es una librería de Registro e Inicio de Sesión para desarrolladores, pudiendo ser activada o desactivada desde nuestro panel cuando se desee. Se encargará de todo lo necesario para registrar en nuestro sistema los usuarios que se den de alta y devolverá a la aplicación en la que se esté usando los datos de éstos en formato JSON. Dicho JSON podrá contener los siguientes campos, pudiendo no estar todos los expuestos a continuación:

  • user_id: ID del usuario. ( SIEMPRE SE INFORMARÁ )
  • email: Email del usuario. ( SIEMPRE SE INFORMARÁ )
  • added_date: Fecha en la que se dio de alta el perfil en NickCenter. ( SIEMPRE SE INFORMARÁ )
  • name: Nombre del usuario que se ha dado de alta. ( DEPENDERÁ DE SI SE HA REGISTRADO EL CAMPO )
  • last_name: Apellido del usuario que se ha dado de alta. ( DEPENDERÁ DE SI SE HA REGISTRADO EL CAMPO )
  • nick: Nick del perfil que se ha dado de alta. ( SIEMPRE SE INFORMARÁ )
  • telephone: Telefono del usuario que se ha dado de alta. ( DEPENDERÁ DE SI SE HA REGISTRADO EL CAMPO )
  • languaje: Idioma del telefono con el que el usuario se ha dado de alta. ( SIEMPRE SE INFORMARÁ )
  • country: Pais del usuario que se ha dado de alta. ( SIEMPRE SE INFORMARÁ )
  • update_date: Fecha en la que se actualizó el perfil de NickCenter. ( SOLO CUANDO HAYA HABIDO ALGUNA ACTUALIZACIÓN )
  • birth_date: Fecha de nacimiento del usuario que se ha dado de alta. ( DEPENDERÁ DE SI SE HA REGISTRADO EL CAMPO )
  • apps: JSON que contendrá las aplicaciones en las que el usuario ha sido registrado. Cabe destacar que solo se mostrarán aplicaciones que compartan el mismo desarrollador, nunca obtendremos datos de aplicaciones externas. ( SIEMPRE SE INFORMARA )

VERSIONES SOPORTADAS

Este Plugin soporta tanto Android como iOS.

Para iOS soporta las versiones superiores a las 10.0, en caso de que detecte una versión inferior no se lanzará.

Para Android soporta todas las versiones superiores a la 4.0

PASOS A REALIZAR EN NUESTRO PANEL

Una vez nuestra aplicación esté registrada en nuestro panel, iremos a la sección de de Desarrolladores y hacemos click en NickCenter —> Añadir app a NickCenter.

Anadir_app_nc_1.png

Para añadir nuestra aplicación a NickCenter deberemos seguir cinco sencillos pasos:

1.- Selección de app: En este apartado tendremos que elegír la aplicación que queremos añadir a NickCenter y decidir si la librería estará activa o no al lanzar la aplicación seleccionada. Esto se podrá activar y desactivar siempre que se desee.

Configurar_app_nc_2.png

2.- Pantalla de registro: En este paso configuraremos lo referente a la vista de registro para los usuarios. Podremos elegir entre varios campos de los cuales, como se indica, el email y password siempre serán obligatorios, el resto, será al gusto del desarrollador; pudiendo elegir que el usuario pueda introducir su nombre, pero no siendo obligatorio para el registro.

Configurar_app_nc_3.png

3.- Pantalla de inicio de sesión: Como en el anterior paso, aquí, configuraremos lo referente a la pantalla de inicio de sesión para los usuarios. En este caso, como se indica, solo será obligatorio el campo password.

Configurar_app_nc_4.png

4.- Pantalla de recuperación de contraseña: En este caso, para la pantalla de recuperación de contraseña tan solo se pedira el email del usuario y por tanto, dicho email sera un campo obligatorio.

Configurar_app_nc_5.png

5.- Traducción: Este será el último paso para configurar nuestra aplicación, aquí deberemos seleccionar tanto los idiomas a los que estarán traducidos todos los campos que hemos configurado previamente; como su propia traducción a dichos idiomas. Una vez seleccionado el primer idioma, se pondrá como idioma por defecto de dicha aplicación. Para cambiar el idioma por defecto no tendremos más que generar las traducciones en más idiomas y modificar el campo "Traducción por defecto".

Configurar_app_nc_6.png

5.1.- Cabeceras y botones: En este primer paso generaremos las traducciones de las cabeceras de las pantallas y de sus botones.

Configurar_app_nc_7.png

5.2.- Configuración de campos: En el segúndo paso generaremos las traducciones de los campos seleccionados previamente para cada pantalla y de sus posibles errores.

Configurar_app_nc_8.png

5.3.- Traducciones generales: En el tercer y último paso generaremos las traducciones generales, traducciones que van asociadas a todas las pantallas y no a una/s en concreto como en los anteriores pasos.

Configurar_app_nc_9.png

Configurar_app_nc_10.png

Configurar_app_nc_11.png

Una vez finalizadas las traducciones, como se ha indicado previamente, aparecerá el idioma al que se han realizado las traducciones y se pondrá por defecto.

Configurar_app_nc_12.png

Configurar_app_nc_13.png

Si al finalizar dicha configuración no hemos quedado satisfechos con los campos seleccionados en alguna de sus pantallas, cuando procedamos a editar dicha pantalla y añadamos un nuevo campo que previamente no ha sido traducido, automáticamente se abrirá una pantalla para generar las traducciones para el IDIOMA POR DEFECTO. Si queremos generar la traducción para el resto de idiomas hemos de volver a realizar lo especificado en el paso 5.-Traducción.

Anadir_nuevo_campo_14.png

Anadir_nuevo_campo_15.png

PASOS A REALIZAR PARA LA INTALACIÓN DEL PLUGIN

INSTALACIÓN:

Para instalar el Plugin, si queremos que funcione en iOS, primero tendremos que instalar el plugin cordova-plugin-cocoapod-support, de la siguiente manera:

     cordova plugin add cordova-plugin-cocoapod-support

y después instalar el plugin de Nickcenter de esta manera (si solo lo vamos a usar para android con este plugin es suficiente):

     cordova plugin add cordova-plugin-nickcenter

Una vez ejecutados los dos comandos ya tendremos el plugin instalado.

LANZAMIENTO:

Una vez configurada la instalación, lanzaremos en el momento donde queramos el código, por ejemplo:

      cordova.exec(successNickCenterCallback, errorNickCenterCallback,  "nickcenter",  "launchNickCenter", ["54e46801egh95"]);


Los Argumentos enviados serán los siguientes:

  • Argumento 1: Es el AppHash de la aplicación, el cual se puede obtener en el panel, como muestra la siguiente pantalla.


Obtener_hash_app_14.png

Por defecto las pantallas de NickCenter presentan el siguiente formato:

nc_ios_default.jpeg

Si desea modificar las pantallas para que sean lo más parecidas a su aplicación NickCenter deberá añadir más argumentos, en el siguiente orden (Estos Argumentos son completamente Opcionales) (Todos los colores deben ir en hexadecimal):

  • Argumento 2: Determina el color de fondo de las pantallas. Ejemplo: "#ffffff"
  • Argumento 3: Determina el color de fondo de la cabecera de las pantallas. Ejemplo: "#f0f0f0"
  • Argumento 4: Determina el color de la linea que separa la cabecera con el resto de la pantalla. Ejemplo: "#01e3fe"
  • Argumento 5: Determina el color del texto de la cabecera de las pantallas. Ejemplo: "#7b7b7b"
  • Argumento 6: Determina el color de fondo de los textfields donde se ubican los campos de cada pantalla. Ejemplo: "#ebebeb"
  • Argumento 7: Determina el color del texto descriptivo de cada textfield. Ejemplo: "#7b7b7b"
  • Argumento 8: Determina el color del texto de los textfields donde se ubican los campos de cada pantalla. Ejemplo: "#7b7b7b"
  • Argumento 9: Determina el color de fondo de los botones de cada pantalla. Ejemplo: "#7b7b7b"
  • Argumento 10: Determina el color de fondo de los botones de cada pantalla cuando se ha hecho click en éstos. Ejemplo: "#000000"
  • Argumento 11: Determina el color del texto de cada boton cuando no se ha hecho click en éstos. Ejemplo: "#01e3fe"
  • Argumento 12: Determina el color del texto de cada botón cuando se ha hecho click en éstos. Ejemplo: "#01e3fe"
  • Argumento 13: Determina el color del borde de los botones. Ejemplo: "#01e3fe"
  • Argumento 14: Determina el color de la fuente de los textos de los terminos y condiciones. Ejemplo: "#000000"
  • Argumento 15: (Solo para iOS) Determina el color de los botones activos en los términos y condiciones. Ejemplo: "#01e3fe"
  • Argumento 16: (Solo para iOS) Determina el color de los botones inactivos en los términos y condiciones. Ejemplo: "#f0f0f0"


A continuación se expone un ejemplo en el que se maqueta a gusto del desarrollador las pantallas de NickCenter.


    cordova.exec(successNickCenterCallback, errorNickCenterCallback,  "nickcenter",  "launchNickCenter", ["hash_app", "#ffffff", "#f0f0f0", "#01e3fe", "#7b7b7b", "#ebebeb", "#7b7b7b", "#7b7b7b", "#7b7b7b", "#000000", "#01e3fe", "#01e3fe", "#01e3fe", "#000000", "#01e3fe", "#f0f0f0"]);

Cabe destacar que en el caso de Android, Cordova pone los checkbox por defecto de color blanco, por lo que sí queremos que se vean deberemos usar un fondo de pantalla que no sea blanco.


nc_cordova_colores.png

COMPLETAR REGISTRO:

Una vez un usuario haya sido registrado en una de nuestras aplicaciones, cuando otra lance NickCenter, dicho usuario tan soló debera logearse sin necesidad de tener que registrarse otra vez para ésta última aplicación. Se puede dar el caso de que al registrarte en la primera aplicación tán solo fuera necesario email y contraseña, y que para la segunda aplicación fuera necesario registrarse con el telefono, cuando este tipo de casos se den, al logearte en la segunda aplicación se abrirá una nueva vista para completar el registro. Una vez completado dicho registro se tratará como un login normal.

nc_ios_completar.jpeg

FUNCIONES UTILES:

NickCenter está dotada de una función que permite al desarrollador cerrar la sesión ya iniciada por el usuario de manera que la siguiente vez que abra la aplicación y pase por donde se lanza la librería, el usuario deba volver a loguearse. Dicha funcion es :

  • closeSession


Ejemplo:

   cordova.exec(successNickCenterCallback, errorNickCenterCallback,  "nickcenter",  "closeNickCenterSession", ["hash_app"]);


PRECARGA DE DATOS PARA EL REGISTRO:

NickCenter está dotada de una serie de funciones que permiten al desarrollador precargar los datos del usuario a la hora de mostrarle la pantalla de registro. Si desea hacer uso de esta precarga deberá pasar más argumentos a la llamada de la librería ( todos estos argumentos son opcionales ) :

  • Argumento 17: Nombre. Ejemplo: "John".
  • Argumento 18: Apellidos. Ejemplo: "Smith".
  • Argumento 19: Email. Deberá ser un email válido, se comprobará tanto el formato de la cadena como la validez de éste. Ejemplo: "user@domain.com".
  • Argumento 20: Teléfono. Deberá ser un teléfono sin prefijo internacional. Ejemplo: "555555555".
  • Argumento 21: Nick. Ejemplo: "MyNick".
  • Argumento 22: Género. Deberá ser M para hombres y F para mujeres.
  • Argumento 23: Fecha de nacimiento. Deberá ser una fecha en formato inglés separado por /. Ejemplo: "1992/01/12"


A continuación se expone un ejemplo siguiendo la maquetación expuesta en anteriores puntos.

    cordova.exec(successNickCenterCallback, errorNickCenterCallback,  "nickcenter",  "launchNickCenter", ["hash_app", "#ffffff", "#f0f0f0", "#01e3fe", "#7b7b7b", "#ebebeb", "#7b7b7b", "#7b7b7b", "#7b7b7b", "#000000", "#01e3fe", "#01e3fe", "#01e3fe", "#01e3fe", "#01e3fe", "#f0f0f0", "nombre", "apellido", "user@domain.com", "666777888", "CocoZilla", "M", "1992/01/12"]);


Precarga datos cordova.png

CallBacks:

NickCenter cuenta con una serie de callbacks los cuales se pueden recoger en en las funciones implementadas successNickCenterCallback y errorNickCenterCallback que permiten al desarrollador saber qué parte del plugin se esta ejecutando y cuál es su resultado. A continuación se expondrán éstos y para que sirven.

  • onRegisterViewOpened: Notifica cuando la vista de registro se ha lanzado.
  • onLoginViewOpened: Notifica cuando la vista del login se ha lanzado.
  • onRescueViewOpened: Notifica cuando la vista de recuperación de contraseña se ha lanzado.
  • onError: Cadena de Error: Notificará cuando haya habido un error, normalmente se lanzará cuando el registro o el login hayan sido incorrectos, o cuando al recuperar la contraseña el email sea incorrecto. Se puede dar el caso de que de otro tipo de error como bien puede ser al conectarnos al sevidor.
  • onWarning: Cadena de Warning: Notificará de alguna advertencia al desarrollador.
  • onFinished: Notificará cuando la librería haya finalizado algun proceso. Inicio de sesión, registro o recuperación de contraseña correcto.
  • onSessionClosed: Notificará cuando se haya cerrado la sesión de NickCenter.
  • onActive: Notificará cuando detecte que NickCenter esta activa para la aplicación.
  • onInactive: Notificará cuando detecte que NickCenter esta inactiva para la aplicación.
  • onRegisterRegisterButtonClicked: Notificará cuando se haga click en el botón de registrarse en la vista de registro de usuario.
  • onRegisterLoginButtonClicked: Notificará cuando se haga click en el botón de inicio de sesión en la vista de registro de usuario.
  • onRegisterCloseButtonClicked: Notificará cuando se haga click en el botón de cerrar en la vista de registro de usuario.
  • onRegisterPerformed: Json de Usuario: Notificará cuando haya habido un registro correcto. Se mandará la información recogida del usuario en formato Json.
  • onLoginPerformed: Json de Usuario: Notificará cuando haya habido un login correcto. Se mandará la información recogida del usuario en formato Json.
  • onLoginLoginButtonClicked: Notificará cuando se haga click en el botón de inicio de sesión en la vista de inicio de sesión.
  • onLoginRegisterButtonClicked: Notificará cuando se haga click en el botón de registrarse en la vista de inicio de sesión.
  • onLoginRescueButtonClicked: Notificará cuando se haga click en el botón de recuperar contraseña en la vista de inicio de sesión.
  • onLoginCloseButtonClicked: Notificará cuando se haga click en el botón de cerrar en la vista de inicio de sesión.
  • onRescueRescueButtonClicked: Notificará cuando se haga click en el botón de recuperar contraseña en la vista de recuperar contraseña.
  • onRescueCloseButtonClicked: Notificará cuando se haga click en el botón de cerrar en la vista de recuperar contraseña.