Anders Hesselbom

Min första Cordova-app

2016-12-19

Denna bloggpost är ett resultat av mitt första försök att skapa en plattformsoberoende app med Visual Studio 2015 och Cordova, som pratar med ett Web API.

När man väljer att skapa en Cordova-app i Visual Studio, får man med lite kod som man kanske inte vill ha med när man testar lite själv. Jag valde att rensa innehållet i den div vars klass heter “app”, helt tömma CSS-filen från innehåll, och rensa upp allt utom “pause” och “resume” från index.js.

Därefter installerade jag jQuery och jQuery Mobile. Här finns det två saker att tänka på. För det första passar inte nödvändigtvis den senaste jQuery Mobile ihop med den senaste jQuery. Efter en googling kunde jag konstatera att version 1.4.5 av jQuery Mobile fungerar med version 2.1.4 av jQuery, så dessa installerade jag.

Install-Package jquery -version 2.1.4
Install-Package jquery.mobile -version 1.4.5

Det andra att ha i åtanke är att script-filerna installeras i mapparna Scripts respektive Content. Men i en Cordova-app ska dessa ligga under www/scripts respektive www/css, så man måste manuellt flytta dem dit, genom att dra och släppa i Solution Explorer. Sen är det bara att inkludera i head-sektionen på index.html.

<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mobile-1.4.5.min.js"></script>

Inuti min div (“app”) placerar jag två bilder, “firstScreen” och “secondScreen”, där jag låter den första innehålla ett enkelt formulär och den andra vara dold.

<div id="firstScreen">
    <form target="http://localhost:64924/api/Values" method="get">
        <input type="text" id="p1" name="p1" />
        <br />
        <input type="text" id="p2" name="p2" />
        <br />
        <input type="button" onclick="submitForm();" />
    </form>
</div>
<div id="secondScreen" style="display: none;">
    Hello!
</div>

Koden för att skicka innehållet i formuläret till servern, antar att jag har ett enkelt Web API igång. Om det gick bra, presenterar jag svaret på den nya sidan och visar den. Om det inte gick bra, skriver jag fail i en textbox.

function submitForm() {
    var x = { p1: $("#p1").val(), p2: $("#p2").val() };

    $.post('http://localhost:64924/api/Values/', x, { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } })
    .success(function(data, status) {
        $("#firstScreen").hide();
        $("#secondScreen").text(data);
        $("#secondScreen").show();
    })
    .error(function(data, status) {
        $("#p1").val("Fail!");
    });
}

Cordova-appen pekar ut en ASP.NET Web API-applikation, som är väldigt lik exempelapplikationen som man får om man väljer att skapa en sådan i Visual Studio 2015. Jag pekar på den exempelcontroller som följde med, Values. Eftersom jag gör en http-post förväntar jag mig att metoden Post ska svara. Argumentet som jag tar emot, har två properties vars namn stämmer överens med datat i formuläret: p1 och p2. Funktionen gör just inget annat än att skicka tillbaka strängen “From server!” till Cordova-appen.

public string Post([FromBody]Testmeddelande value)
{
    return "From server!";
}

Därmed har jag en enkel plattformsoberoende app som kan samla in och skicka data, samt ta emot och presentera svaret.

Categories: General