Fermer

janvier 29, 2020

Utilisation du langage de script CSCS pour le développement multiplateforme15 minutes de lecture


À propos de l'auteur

Vassili Kaplan est un ancien développeur de Microsoft Lync. Il a étudié et travaillé dans quelques pays, comme la Russie, le Mexique, les États-Unis et la Suisse. Il est…
En savoir plus sur
Vassili

Dans cet article, Vassili Kaplan explique comment utiliser un langage de script pour développer des applications mobiles multiplateformes. Vous trouverez des exemples dans iOS et Android qui incluent le placement de widgets à l'écran, SQLite, les requêtes Web et l'analyse JSON.

Notre objectif n'est pas de créer une plate-forme; il faut les croiser tous.

– Mark Zuckerberg

CSCS (Customized Scripting in C #) est un langage de script open source implémenté en C #. Syntaxiquement, il est très similaire à JavaScript, mais il présente également des similitudes avec Python. Certaines de ces similitudes sont les mots clés de la construction bien connue if… elif… else et ont également la même définition de portée de variable qu'en Python (par exemple une variable définie à l'intérieur d'un if ] ou à l'intérieur d'une boucle sera également visible à l'extérieur).

Contrairement à JavaScript et Python, les variables et les fonctions dans CSCS ne sont pas sensibles à la casse. Le principal objectif de CSCS est de laisser le développeur écrire le moins de code possible . En outre, le même code est utilisé pour le développement iOS et Android. De plus, CSCS peut être utilisé pour le développement Windows, Mac et Unity.

Remarque : Vous pouvez en savoir plus sur la façon dont Microsoft utilise CSCS dans son produit Maquette (basé sur Unity) sur ici ).

CSCS peut être ajouté à votre projet en incorporant son code source C # dans un projet Visual Studio Xamarin. Contrairement à la plupart des autres langues, vous avez la pleine propriété du code source CSCS et pouvez facilement ajouter ou modifier ses fonctionnalités. Je partagerai un exemple de cela plus tard dans l'article.

De plus, nous allons apprendre à démarrer avec CSCS et utiliser des fonctionnalités plus avancées qui ont été couvertes dans d'autres articles. . Parmi ces fonctionnalités, nous allons accéder à un service Web via des requêtes Web avec analyse de chaîne JSON, et nous utiliserons également SQLite sur iOS et Android.

La façon la plus simple de commencer est de télécharger un exemple d'un projet utilisant CSCS et commencez à jouer avec le fichier start.cscs . Voici ce que nous allons faire dans la section suivante: créer une application iOS / Android avec une interface graphique de base et des événements.

«Bonjour, World! »Dans CSCS

Commençons par un exemple relativement simple de code CSCS qui construit un écran avec quelques widgets:

 AutoScale ();
SetBackgroundColor ("light_green");
 
locLabelText = GetLocation ("ROOT", "CENTER", "ROOT", "TOP");
AddLabel (locLabelText, "labelText", "Welcome" +
    _DEVICE_INFO_ + "" + _VERSION_INFO_ + "Utilisateur!", 600, 100);
 
locTextEdit = GetLocation ("ROOT", "LEFT", labelText,
  "BAS");
AddTextEdit (locTextEdit, "textEdit", "Votre nom", 320, 80);
 
locButton = GetLocation (textEdit, "RIGHT", textEdit, "CENTER");
AddButton (locButton, "buttonHi", "Hello", 160, 80);
 
function buttonHi_click (sender, arg) {
  nom = getText (textEdit);
  msg = nom! = ""? "Bonjour", + nom + "!" : "Bonjour le monde!";
  AlertDialog ("My Great App", msg);
} 

L'image ci-dessous montre l'interface utilisateur résultante sur un iPhone ainsi qu'un appareil Android après avoir cliqué sur le bouton "Bonjour" et n'avoir rien tapé dans le champ "Texte Modifier":

 Bonjour, monde! "Sur iPhone (gauche) et Android (droite)
«Bonjour, le monde!» sur iPhone (gauche) et Android (droite) ( Grand aperçu )

Passons brièvement en revue le code ci-dessus. Cela commence par l'appel de fonction AutoScale () et ce que cela fait est de dire à l'analyseur que les tailles de widget sont relatives à la taille de l'écran, c'est-à-dire qu'elles seront automatiquement redimensionnées (le widget sera plus gros sur écrans plus grands et plus petits sur les écrans plus petits). Ce paramètre peut également être remplacé par widget.

Notez qu'il n'est pas nécessaire de créer un gestionnaire spécial lors d'un clic de bouton. Si vous définissez une fonction avec le nom widgetName_click () elle sera utilisée comme gestionnaire lorsque l'utilisateur cliquera sur un widget appelé widgetName (il ne doit pas nécessairement s'agir d'un bouton, il peut s'agir de n'importe quel widget). C'est pourquoi la fonction buttonHi_click () sera déclenchée dès que l'utilisateur cliquera sur le bouton.

Vous avez peut-être remarqué que l'interface graphique est entièrement construite en code. Cela se fait en fournissant un emplacement de widget relatif lors de son ajout. Le format général d'une commande d'emplacement est le suivant:

 location = GetLocation (WidgetX, HorizontalPlacement, WidgetY, VerticalPlacement,
                       deltaX = 0, deltaY = 0, autoResize = true);

Ainsi, vous pouvez placer un widget par rapport à d'autres widgets sur l'écran. Un widget spécial est un widget "ROOT", c'est-à-dire l'écran principal.

Après avoir créé un emplacement, vous devez le fournir comme argument à l'une des fonctions suivantes:

  • AddLabel [19659024] AddButton
  • AddCombobox
  • AddStepper
  • AddListView
  • AddTextView
  • AddStepper
  • AddImageView
  • AddSlider
  • AddPickerView
  • et ainsi de suite.

Tous ces éléments ont la même structure:

 AddButton (location, newWidgetname, initialValue , largeur hauteur);

La largeur et la hauteur du widget seront relatives à la taille de l'écran si la commande AutoScale () CSCS a été exécutée précédemment. De plus, la valeur initiale (dans le cas d'un bouton) est le texte affiché dessus. Cela peut être modifié à tout moment en appelant SetText (widgetName, newText) .

Utilisation de Visual Studio Code pour déboguer CSCS

Nous pouvons également utiliser Visual Studio Code pour déboguer des scripts CSCS. Si vous souhaitez développer des applications pour Android et iOS, vous devez utiliser un Mac. Après avoir installé Visual Studio Code installez Débogueur CSCS et extension REPL .

Pour utiliser l'extension, ajoutez cette ligne de code n'importe où dans votre start.cscs Script CSCS:

 StartDebugger ();

L'image suivante ci-dessous montre comment vous pouvez utiliser Visual Studio Code pour déboguer et modifier les fonctionnalités de l'application «Hello, World!» Que nous avons développée dans la section précédente. Dans l'exemple à venir, nous allons ajouter une étiquette et un bouton à la volée à la mise en page existante.

Pour ce faire, nous sélectionnons simplement le code à exécuter par l'analyseur et appuyez sur Ctrl + 8 . En conséquence, une étiquette et un bouton seront ajoutés au centre de l'écran. Nous ajoutons également un gestionnaire de boutons qui mettra à jour la nouvelle étiquette avec l'heure actuelle à chaque clic de bouton.

 Modification de la disposition à la volée avec Visual Studio Code
Modification de la disposition à la volée avec Visual Studio Code ( Large preview )

Utilisation de SQLite dans CSCS

SQLite est un type ACID (atomicité, cohérence, isolation, durabilité) d'une base de données relationnelle, et a été développé par Richard Hipp (la première version a été publié en 2000). Contrairement à d'autres bases de données relationnelles, comme Microsoft SQL Server ou Oracle Database, il est intégré. (Intégré non seulement dans l'appareil, mais aussi dans le programme final.) Il est inclus dans le programme en tant que bibliothèque très compacte, qui fait moins de 500 Ko. Mais deux applications (publiées par le même développeur) peuvent lire la même base de données SQLite si le chemin du fichier DB est connu des deux applications.

L'avantage de SQLite est qu'il peut être utilisé sans installation supplémentaire sur iOS ou Android dispositif. L'inconvénient est qu'il ne peut évidemment pas contenir autant de données qu'une base de données "normale" et qu'il est faiblement typé (c'est-à-dire que vous pouvez insérer une chaîne au lieu d'un entier – elle sera ensuite convertie en entier ou 0 en cas d'échec). D'autre part, ce dernier peut également être considéré comme un avantage.

SQLite peut être facilement utilisé à partir de CSCS sans instructions d'importation supplémentaires. Voici un tableau qui vous aidera à obtenir un aperçu des principales fonctions SQLite utilisées dans CSCS:

Commande Description
SQLInit (DBName) Initialise une base de données ou définit une base de données à utiliser avec la base de données conséquente
SQLDBExists (DBName) Vérifie si la base de données a été initialisée. Définit également la base de données à utiliser avec les instructions DB suivantes.
SQLQuery (query) Exécute une requête SQL (une instruction select). Renvoie une table avec des enregistrements.
SQLNonQuery (nonQuery) Exécute une non-requête SQL, par exemple une instruction de mise à jour, de création ou de suppression. Renvoie le nombre d'enregistrements affectés.
SQLInsert (tableName, columnList, data) Insère la table passée de données d'enregistrements dans la table DB spécifiée. L'argument columnList a la structure suivante: colName1, colName2,…, colNameN

Tableau 1: commandes SQLite dans CSCS

Voici comment le SQLInit () Les fonctions et SQLDBExists () sont généralement utilisées:

 DBName = "myDB.db1";
 
if (! SQLDBExists (DBName)) {
  create = "CREATE TABLE [Data] (Symbol ntext, Low real,
    Real réel, Close real, Volume real,
    Texte cachet DEFAULT CURRENT_TIMESTAMP) ";
  SQLNonQuery (créer);
}


SQLInit (DBName);

Nous allons voir plus d'exemples sur la façon dont vous pouvez sélectionner et insérer des données dans une base de données SQLite plus tard. Je vais vous montrer un exemple d'écriture de données de stock extraites d'un service Web dans une base de données SQLite locale.

Ajout de fonctionnalités personnalisées à CSCS

Dans cette section, nous allons voir comment vous pouvez étendre la fonctionnalité CSCS. Par exemple, nous allons voir ci-dessous l'implémentation existante de la fonction CSCS Sleep.

Pour ajouter des fonctionnalités personnalisées, il vous suffit de créer une nouvelle classe en dérivant de la classe ParserFunction remplacer sa méthode Evaluate () et enregistrer cette classe avec l'analyseur. Voici une version courte (sans vérification d'erreur):

 classe SleepFunction: ParserFunction
{
  protection prioritaire Variable Evaluate (script ParsingScript)
  {
    Liste  args = script.GetFunctionArgs ();
    int sleepms = Utils.GetSafeInt (args, 0);
    Thread.Sleep (sleepms);

    return Variable.EmptyInstance;
  }
}  

L'enregistrement d'une classe avec l'analyseur peut être effectué n'importe où dans l'étape d'initialisation via la commande suivante:

 ParserFunction.RegisterFunction ("Sleep", new SleepFunction ()); 

C'est tout! Maintenant, la méthode Evaluate () de la classe SleepFunction sera invoquée dès qu'un jeton "Sleep" sera extrait par l'analyseur.

Notez que CSCS est insensible à la casse (sauf les instructions du flux de contrôle principal: if elif else pour tandis que fonctionnent comprennent nouveau classe retour essayez lancer ] catch break continue ). Cela signifie que vous pouvez taper "sleep (100)" ou "Sleep (100)" – les deux appels suspendront le thread d'exécution pendant 100 millisecondes.

Traitement JSON dans CSCS

JSON ( JavaScript Object Notation) est un format d'échange de données léger, composé de paires attribut-valeur et de paires de type tableau. Il a été développé par Douglas Crockford au début des années 2000 (à peu près au même moment où SQLite est également apparu).

Dans cette section, nous allons apprendre à analyser JSON en utilisant CSCS.

La fonction CSCS pour analyser un JSON la chaîne est GetVariableFromJSON (jsonText) . Cette fonction renvoie une table de hachage dans laquelle les clés sont les attributs de la chaîne JSON.

Prenons l'exemple suivant d'une chaîne JSON:

 jsonString = '{"eins": 1, "zwei": "zweiString" , "mehr": {"uno": "dos"},
               "arrayValue": [ "une", "deux" ]} '; 

Après avoir invoqué:

 a = GetVariableFromJSON (); 

La variable a sera une table de hachage avec les valeurs suivantes:

 a ["eins"] = 1
a ["zwei"] = "zweiString"
a ["mehr"]["uno"]  = "dos"
a ["arrayValue"][0]  = "une"
a ["arrayValue"][1]  = "deux" 

Dans la section suivante, nous allons voir un autre exemple d'analyse d'une chaîne JSON à partir d'un service Web.

Un exemple d'application avec SQLite, des requêtes Web et JSON [19659002] Pour une application utilisant SQLite, un service Web et l'analyse JSON, nous allons utiliser Alpha Vantage Web Service . Vous pouvez obtenir gratuitement une clé API mais la version gratuite permet d'accéder à leur service Web au maximum 5 fois par minute.

À l'aide d'Alpha Vantage, vous pouvez extraire divers ensembles de données financières, y compris les cours des actions. Voici ce que nous allons faire dans notre exemple d'application.

L'image ci-dessous montre à quoi ressemblent les applications Stocks sur iOS et sur un appareil Android.

 Extraction des actions du service Web Alpha Vantage sur iOS (à gauche) et Android (droite)
Extraction des actions du service Web Alpha Vantage sur iOS (gauche) et Android (droite) ( Grand aperçu )

Le code CSCS pour construire l'interface graphique est le suivant: [19659013] locLabel = GetLocation ("ROOT", "CENTER", "ROOT", "TOP", 0,30);
AddLabel (locLabel, "labelRefresh", "", 480, 60);

locSFWidget = GetLocation ("ROOT", "CENTER",
                          labelRefresh, "BOTTOM");
AddSfDataGrid (locSFWidget, "DataGrid", "",
              graphWidth, graphHeight);

listCols = {"Symbol", "string", "Low", "number", "High",
            "numéro", "Fermer", "numéro", "Volume", "numéro"};
AddWidgetData (DataGrid, listCols, "colonnes");
colWidth = {17, 19, 19, 19, 26};
AddWidgetData (DataGrid, colWidth, "columnWidth");

locButton = GetLocation ("ROOT", "CENTER", DataGrid, "BOTTOM");
AddButton (locButton, "buttonRefresh", "Refresh", 160, 80);

locLabelError = GetLocation ("ROOT", "CENTER", "ROOT", "BOTTOM");
AddLabel (locLabelError, "labelError", "", 600, 160);
SetFontColor (labelError, "red");
AlignText (labelError, "center");
 
getDataFromDB ();

La méthode getDataFromDB () extrait toutes les données de la base de données SQLite. Il utilise la requête SQL définie comme suit:

 query = "SELECT Symbol, Low, High, Close, Volume, DATETIME (Stamp,
               'localtime') as Stamp FROM Data ORDER BY Stamp DESC LIMIT 5; "; 

Jetez un œil au code ci-dessous pour l'implémentation getDataFromDB () .

 function getDataFromDB () {
  résultats = SQLQuery (requête);
  for (i = 1; i 

Voyons maintenant comment nous obtenons les données du service Web Alpha Vantage. Premièrement, nous initialisons les données:

 baseURL = "https://www.alphavantage.co/query?" +
              "function = TIME_SERIES_DAILY & symbol =";
apikey = "Y12T0TY5EUS6BC5F";
stocks = {"MSFT", "AAPL", "GOOG", "FB", "AMZN"};
totalStocks = stocks.Size; 

Ensuite, nous chargeons les stocks un par un dès que l'utilisateur clique sur le bouton "Refresh":

 fonction buttonRefresh_click (object, arg) {
  lockGui ();

  SetText (labelRefresh, "Chargement ...");
  SetText (labelError, "");
  ClearWidget (DataGrid);
  LoadStocks = 0;
  getData (stocks [loadedStocks]);
}

fonction getData (symbole) {
  stockUrl = baseURL + symbole + "& apikey =" + apikey;
  WebRequest ("GET", stockUrl, "", symbole, "OnSuccess", "OnFailure");
} 

Voici la fonction CSCS principale à utiliser pour obtenir des données d'un service Web:

 WebRequest ("GET", stockUrl, "", symbole, "OnSuccess", "OnFailure"); 

Le les deux derniers paramètres sont des fonctions à invoquer à la fin de la requête Web. Par exemple, en cas de panne, la fonction CSCS suivante sera appelée:

 fonction OnFailure (objet, errorCode, texte)
{
  SetText (labelError, text);
  lockGui (faux);
} 

Par conséquent, l'utilisateur recevra un message d'erreur comme indiqué ci-dessous:

 Une erreur lors de la demande de données Web
Une erreur lors de la demande de données Web ( Grand aperçu )

Mais, si tout va bien, nous allons analyser la chaîne JSON et insérer son contenu dans la base de données SQLite.

 fonction OnSuccess (objet, errorCode, text)
{
  jsonFromText = GetVariableFromJSON (texte);
  metaData = jsonFromText [0];
  resultat = jsonFromText [1];

  symbol = metaData ["2. Symbol"];
  lastRefreshed = metaData ["3. Last Refreshed"];
  allDates = result.keys;

  dateData = result [allDates[0]];
  élevé = Round (dateData ["2. high"]2);
  low = Round (dateData ["3. low"]2);
  close = Round (dateData ["4. close"]2);
  volume = dateData ["5. volume"];
  stockData = {symbole, bas, haut, proche, volume};
  SQLInsert ("Données", "Symbole, Bas, Haut, Fermer, Volume", stockData);

  if (++ LoadStocks> = totalStocks) {
    getDataFromDB ();
  } autre {
    getData (stocks [loadedStocks]);
  }
} 

Afin de comprendre comment nous accédons aux différents champs de la table de hachage ci-dessus, examinons la chaîne réelle reçue de la demande Web Alpha Vantage:

 {"Meta Data": {
        "1. Informations": "Prix journaliers (ouverts, élevés, bas, proches) et Volumes",
        "2. Symbole": "MSFT",
        "3. Dernière mise à jour": "2019-10-02 14:23:20",
        "4. Taille de sortie": "Compact",
        "5. Fuseau horaire": "US / Eastern"
    },
    "Séries chronologiques (quotidiennes)": {
        "02/10/2019": {
            "1. ouvert": "136.3400",
            "2. haut": "136,3700",
            "3. faible": "133,5799",
            "4. fermer": "134.4100",
            "5. volume": "11213086"
        },
   …
    }
} 

Comme vous pouvez le voir, nous obtenons la dernière date en tant que premier élément du tableau allDates qui comprend toutes les dates extraites.

Conclusion

L'ajout de CSCS à votre projet est facile . Tout ce que vous devez faire est simplement d'incorporer le code source de CSCS en tant que module à votre projet – tout comme cela est fait dans un exemple de projet Xamarin .

Utilisez-vous et étendez-vous le langage de script CSCS dans vos projets ? Laissez un commentaire ci-dessous – je serais heureux d'avoir de vos nouvelles!

Pour en savoir plus

Si vous souhaitez explorer un peu plus le langage CSCS, voici quelques articles sur lesquels j'ai écrit sur le sujet:

Comme ressource supplémentaire, je recommande également de lire comment vous pouvez améliorer les performances du CSCS en en précompilant ses fonctions.

 Éditorial Smashing (ra, yk, il)



Source link