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

De mobeleader
Ir a la navegación Ir a la búsqueda
Página creada con «=== LIbrería NickCenter iOS ===»
 
Deneb (discusión | contribs.)
 
(No se muestran 2 ediciones intermedias de 2 usuarios)
Línea 9: Línea 9:
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á.
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á.


== PASOS A REALIZAR EN EL PANEL MOBELEADER ==
== PASOS A REALIZAR EN NUESTRO PANEL ==




Una vez nuestra aplicación esté registrada en nuestro panel, [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>.
Una vez nuestra aplicación esté registrada en nuestro panel, 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>.


https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Anadir_app_nc_1.png
https://panel.mobeleader.com/ficheros_subidos/librerias/imagenes/NickCenter/Anadir_app_nc_1.png

Revisión actual - 10:15 7 jun 2019

CÓMO AGREGAR EL FRAMEWORK NICKCENTER EN iOS

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 DE iOs SOPORTADAS

Este framework soporta todas las versiones de iOs superiores a las 10.0, en caso de que detecte una versión inferior no se lanzará.

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 FRAMEWORK EN LA APLICACIÓN

INSTALACIÓN:

Existen dos maneras de instalar el FrameWork NickCenter: a través de CocoaPods o descargándolo directamente. Recomendamos hacerlo a través de la primera opción. NickCenter incorpora dos frameworks auxiliares, RegisterLib y UtilsLib.

INSTALACIÓN CON COCOAPODS:

En caso de que su proyecto no incluya el archivo Podfile, incorpórelo. Si nunca ha trabajado con CocoaPods consulte la documentación ofrecida en su web oficial, en la que se explica paso a paso cómo instalar CocoaPods y cómo crear, actualizar y trabajar con los archivos Podfile.

   target 'NameTarget' do
      use_frameworks!
       pod 'MobeleaderNC'
       pod 'MobeleaderUtils'
       pod 'MobeleaderRegister'
   end

Cabe destacar que NameTarget deberá ser reemplazado por el nombre real del target de la aplicación en la que se quiere añadir el framework.

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


Y veremos como se crea un proyecto tal que el siguiente:

Proyecto_nc_ios_8.png

Deberemos abrir el proyecto desde dicho archivo para que pueda usar el framework correctamente.

INSTALACIÓN MANUAL:

Descargue el framework NickCenter:


descarga_general_nc_ios.png


descarga_especifica_nc_ios_1.png

descargar_framework.png

  • Directamente desde aquí.


Una vez descargado el framework, descomprímalo e instálelo en su proyecto.

LANZAMIENTO:

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:

   @implementation DatosIniciales{
   	NickCenter *nickCenter;
   }


Para su lanzamiento se insertarán las siguientes lineas de código.


   nickCenter = [[NickCenter alloc] init];
   [nickCenter setDelegate:self];
   [nickCenter setRootViewController:self];
   [nickCenter setAppHash:@"Hash de la APP en el Panel de Mobeleader"];
   [nickCenter checkAndLaunch];
  • appHash: Será el hash dado por nuestro panel al dar de alta la aplicación en éste. Para acceder a el deberemos ir a la sección Desarrolladores --> Mis Apps y hacer click sobre la columna Hash de nuestra aplicación.


  • setRootViewController: É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.


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 el framework de NickCenter esta dotado de una serie de funciones que le permitirán maquetarlas a su gusto:

  • setViewsBackgroundColor:(UIColor \*): Determina el color de fondo de las pantallas.
  • setViewsBackgroundImage:(UIImage \*): Determina la imagen de fondo de cada pantalla.
  • setHeaderBackgroundColor:(UIColor \*): Determina el color de fondo de la cabecera de las pantallas.
  • setHeaderBackgroundImage:(UIImage \*): Determina la imagen de fondo de la cabecera de cada pantalla.
  • setHeaderBottomLineColor:(UIColor \*): Determina el color de la linea que separa la cabecera con el resto de la pantalla.
  • setHeaderTextColor:(UIColor \*): Determina el color del texto de la cabecera de las pantallas.
  • setHeaderFont:(UIFont \*): Determina la fuente de los textos de las cabeceras.
  • setTextFieldsBackgroundColor:(UIColor \*): Determina el color de fondo de los textfields donde se ubican los campos de cada pantalla.
  • setTextFieldsPlaceholderColor:(UIColor \*): Determina el color del texto descriptivo de cada textfield.
  • setTextFieldsTextColor:(UIColor \*): Determina el color del texto de los textfields donde se ubican los campos de cada pantalla.
  • setTextFieldsFont:(UIFont \*): Determina la fuente del texto de los textfields.
  • setButtonsNormalBackgroundColor:(UIColor \*): Determina el color de fondo de los botones de cada pantalla.
  • setButtonsHighlightedBackgroundColor:(UIColor \*): Determina el color de fondo de los botones de cada pantalla cuando se ha hecho click en éstos.
  • setButtonsNormalTextColor:(UIColor \*): Determina el color del texto de cada boton cuando no se ha hecho click en éstos.
  • setButtonsHighlightedTextColor:(UIColor \*): Determina el color del texto de cada boton cuando se ha hecho click en éstos.
  • setButtonsBorderColor:(UIColor \*): Determina el color del borde de los botones.
  • setButtonsFont:(UIFont \*): Determina la fuente de los textos de los botones.
  • setTermsFontColor:(UIColor \*): Determina el color de la fuente de los textos de los terminos y condiciones.
  • setTermsSwitchActiveColor:(UIColor \*): Determina el color de los botones activos en los terminos y condiciones.
  • setTermsSwitchInactiveColor:(UIColor \*): Determina el color de los botones inactivos en los terminos y condiciones.


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

   nickCenter = [[NickCenter alloc] init];
   [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];

nc_ios_desarrollador.jpeg

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: ( [nickCenter closeSession]; )


FUNCIONES DE PRECARGA DE DATOS:

NickCenter está dotada de una serie de funciones que permite al desarrollador precargar los datos del usuario en la pantalla del registro. De ésta manera si el desarrollador conoce los datos de los usuarios, al lanzar la librería los campos se autorellenarán en la pantalla del registro. Dichas funciones son:

  • setUserName(NString \*name): Rellenará el campo "Nombre".
  • setUserSurname(NString \*surName): Rellenará el campo "Apellidos".
  • setUserEmail(NString \*email): Rellenará el campo "Email". El email ha de ser real, se comprobará tanto el formato de la cadena como la veracidad del propio email. Ejemplo: user@domain.com
  • setUserPhone(NString \*phone): Rellenará el campo "Teléfono". Se validará el formato del teléfono; ha de ser un teléfono sin prefijo internacional. Ejemplo: 666777888
  • setUserNick(NString \*nick): Rellenará el campo "Nick".
  • setUserGender(NString \*gender): Rellenará el campo "Sexo". Será M para Hombre y F para mujer.
  • setUserBirthDate(NString \*birthDate): Rellenará el campo "Fecha de Nacimiento". Ha de ser una fecha en formato inglés separado por /. Ejemplo: 1992/01/12.


DELEGATES:

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

  • 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:(NSString \*)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:(NSString \*)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 registarse 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:(NCUser \) user dictionary:(NSMutableDictionary \) userDictionary: Notificará cuando haya habido un registro correcto. Se mandará la información recogida del usuario tanto en formato NCUser como en formato NSMutableDictionary.
  • onLoginPerformed:(NCUser \) user dictionary:(NSMutableDictionary \) userDictionary: Notificará cuando haya habido un login correcto. Se mandará la información recogida del usuario tanto en formato NCUser como en formato NSMutableDictionary.
  • 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.