Arquitectura, buenas prácticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016

[Office Store] Creando Apps Multi-idoma

Este es un punto relativamente importante y que debemos de plantearlo en el mismo momento que vamos a empezar con el desarrollo de la APP. Y es si realmente queremos tener nuestra APP disponible en varios idiomas. El tener una APP en varios idiomas nos ocasiona grandes beneficios: principalmente que tendremos nuestra APP en los Stores de estos idiomas lo que nos proporciona que nuestra aplicación este disponible a un mayor número de clientes y por lo tanto nuestros beneficios puedan ser mayores.
¿Esto implica mucho esfuerzo/tiempo de desarrollo extra?
La verdad es que NO, y es más, como buena practica deberíamos siempre tener un fichero de recursos, por si en un futuro deseamos tener la aplicación en otro idioma, ya tenemos mucho trabajo adelantado.

¿Como hacerlo ?

En primer lugar en el manifiesto de nuestra APP tenemos que indicar en que idiomas la vamos a publicar:
Manifiesto

En esta imagen vemos que nos ha generado un fichero de recursos .resx pero estos ficheros de recursos son útiles para los desarrollos que realizamos desde ASP.NET, si estamos en un desarrollo haciendo uso de HTML5, CSS3 y JavaScript se puede realizar de la siguiente forma:
1.- Creamos tantos ficheros .js como fichero de recursos .resx requiera nuestra aplicación en este fichero nos definimos tantas variables como palabras hay en el fichero de recursos por ejemplo (en este caso suponemos que tenemos dos ficheros uno en español y otro en ingles):

//fichero en español
var hello='hola';
//fichero en ingles
var hello='hello';

2.- Nuestra APP debe de obtener cual es el idioma del usuario que esta accediendo a la misma. Para ello dentro de la url de nuestra APP hay un parámetro que es el lenguaje de la misma. Por lo tanto deberemos consultar la «querystring» obteniendo el parámetro «SPLanguage». Para obtener este parámetro podemos utilizar este código:

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = decodeURIComponent(hash[1]);
    }
    return vars;
}
var queryString = getUrlVars();
var language = queryString["SPLanguage"];

3.- Una vez obtenido el idioma, el siguiente paso es cargar el ficharo javascript correspondiente con este idioma. En caso de no coincidir con ningún lenguaje, se muestra en el idioma predefinido.

var defaultLanguage = 'es-es';
var languagesArray = ['en-us', 'es-es'];
if (language == null) {
    language = defaultLanguage;
}
else {
    language = language.toLowerCase();
    var langExists = false;
    //Checks if this language is available
    for (var i = 0; i < languagesArray.length; i++) {
        var testedLang = languagesArray[i];
        if (testedLang == language) {
            langExists = true;
            break;
        }
    }
    //Try to find the regional language
    if (langExists == false) {
        var regionalLng = language.substring(0, 2);
        for (var i = 0; i < languagesArray.length; i++) {
            var testedLang = languagesArray[i].substring(0, 2);
            if (testedLang == regionalLng) {
                langExists = true;
                language = languagesArray[i];
                break;
            }
        }
    }
    //Finally use the default language
    if (langExists == false) {
        language = defaultLanguage;
    }
}

var resourcesFile = '../Scripts/Resource.' + language + '.js';
document.writeln("<script type="\&quot;text\/javascript\&quot;" src="\&quot;&quot;" language="\&quot;javascript\&quot;">// <![CDATA[

<\/script>");

4.- Para finalizar en nuestro desarrollo cada vez que queremos invocar cualquier aspecto que se muestra en la capa visual lo podemos realizar llamando directamente a la variable que hemos declarado en el fichero js.

En caso de que estemos desarrollando en ASP.NET podemos hacerlo como en cualquier desarrollo de .NET, invocamos al fichero de recursos, y es el propio IIS el que se encargará de devolvernos un fichero u otro. Es una opción que para el desarrollador requiere mucho menos esfuerzo. Pero también tenemos que tener en cuenta que es otra forma totalmente diferente de desarrollar, no es lo mismo desarrollar en cliente que desarrollar en servidor. La elección de una forma u otra depende de las necesidades de cada tipo de proyectos, cada una de ellas tiene su ventaja y sus inconvenientes. Lo divertido es saber que opción elegir en cada caso.

Conclusión

El implementar las APP en varios idiomas es una gran ventaja, como en la vida misma, cuanto más idiomas tenga tu APP mucho mejor ya que aumentas el número de clientes potenciales de tu APP. Además como buena practica siempre recomiendo hacer uso de tener las APP/desarrollos preparados para varios idiomas lo que en un primer momento nos puede parecer una perdida de tiempo, en un futuro te alegrarás de haber perdido esos… 5 minutos cuando empezaste tu desarrollo y no las horas/pruebas y mucho más que te ocasionará una vez quieras hacer tu APP multi-idioma.

Otras referencias
http://blogs.msdn.com/b/ocarpen/archive/2012/08/28/how-to-localize-sharepoint-hosted-apps-for-sharepoint-2013-with-jquery.aspx
http://geeks.ms/blogs/adiazmartin/archive/2013/05/04/sharepoint-app-aplicaciones-multi-idioma.aspx

mm

Sobre Adrián Díaz

Adrián Díaz es Ingeniero Informático por la Universidad Politécnica de Valencia. Es MVP de Microsoft en la categoría Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnologías Microsoft más de 10 años y desde hace 3 años está centrado en el desarrollo sobre SharePoint. Actualmente es Software & Cloud Architect Lead en ENCAMINA.
Esta entrada ha sido publicada en APP y etiquetada como , , . Enlace permanente .
Suscríbete a Desarrollando sobre SharePoint

Suscríbete a Desarrollando sobre SharePoint

Recibe todas las actualizaciones semanalmente de nuestro blog

You have Successfully Subscribed!

ENCAMINA, piensa en colores