Van niets tot app: deel 1

Door hydrargyrum op woensdag 29 april 2015 20:58 - Reacties (11)
Categorie: Van niets tot app, Views: 3.640

Ik vroeg in mijn vorige blog of er interesse was in een tutorial over het maken van een app voor Windows Phone. Er werd aangegeven dat er interesse was, dus ik ben begonnen.

Voorkennis
Ik ga ervan uit dat je al enige ervaring hebt met het programmeren in een objectgeoriŽnteerde taal als Java of C#. Als dit niet het geval is kan je nogsteeds deze tutorial wel volgen, maar het wordt een stuk lastiger.
Voor de rest is er eigenlijk weinig voorkennis nodig. Als je al met android gewerkt hebt is dit een voordeel, maar dit is niet noodzakelijk

Benodigdheden
  • Allereerst heb je een pc nodig die Windows 8.1 draait. Op Linux/osx zal het wel werkend te krijgen zijn, maar op Windows zal alles beter werken.
  • Ook heb je een Windows Phone, ůf Windows 8.1 PRO nodig. De emulator draait niet onder gewone Windows, wat ik een ernstig gebrek aan het Windows Phone ecosysteem vindt.
  • Als laatste heb je Visual Studio nodig. Nogmaals, in andere IDE's zal het ook wel te doen zijn, maar Visual Studio is toch gratis en het biedt gewoon de meest gestroomlijnde ervaring. Zelf heb ik de Ultimate versie via dreamspark, maar op De site van visual studio kan je het gratis downloaden.
Een nieuw project
Als je Visual Studio opent krijg je het volgende scherm te zien, maar dan waarschijnlijk in het wit. Ik ben zelf een fan van zwarte themas, dus als je ook een donker thema wilt: Tools-Options-General-Color Theme-Dark.

Je krijgt als het goed is dit scherm te zien:
http://i.imgur.com/KYrqoCx.png
Hier maak je een nieuw project aan door op de knop "new project" te klikken. Vervolgens moet je een windows phone project selecteren, dat kan je hier vinden:
http://puu.sh/hjbtp/1107b951a3.png
Bij name vul je de naam in van je app, bij mij is het "Kanikeenkortebroekaan". Location mag je zelf weten. Ik heb voor dropbox gekozen omdat ik vaak switch tussen een laptop en desktop, maar in principe kan het overal. De rest kan je laten staan, want dat wordt automatisch ingevuld.
Dan krijg je het volgende scherm te zien:
http://puu.sh/hjbAi/47ad797734.png
Gefeliciteerd! Nu kunnen we beginnen aan onze app!

De layout
De layout voor Windows Phone wordt gemaakt in XAML. XML is vrij bekend, de verschillen tussen XAML en XML zijn vrij klein en in ons geval te negeren. De layout staat beschreven in het bestand "MainPage.xaml".
Als je dubbelklikt op dit bestand krijg je het volgende scherm te zien:
http://puu.sh/hkVIJ/1735a6943a.png
Zelf ben ik een fan van de xml handmatig typen, maar je kan ook gebruik maken van de WYSIWYG editor in Visual Studio. Om deze te gebruiken moet je aan de linkerzijkant de toolbox openen. Dit is de layout die ik gebruikt heb:

XML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<Page
    x:Class="KanIkEenKorteBroekAan.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:KanIkEenKorteBroekAan"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Name="TitleText" FontSize="22" Grid.Row="0">
            Kan ik vandaag een korte broek aan?
        </TextBlock>
        <TextBlock Name="YesOrNo" Grid.Row="1" VerticalAlignment="Center" TextAlignment="Center" FontSize="100"></TextBlock>
    </Grid>
</Page>


Zoals je kan zien is het een vrij simpele layout. Een textblock die de belangrijkste vraag van de app stelt, en een textblock om daar antwoord op te geven. Als je wilt kun je deze natuurlijk aanpassen.

Testen
Om hem te testen moet je de groene knop bovenin gebruiken. Ik gebruik een fysieke device bij gebrek aan windows 8.1 pro, dus bij mij staat er Device, maar je kan ook een emulator naar keuze gebruiken.
http://puu.sh/hsIwr/23177182e3.png
Vervolgens kan je op de groene knop drukken en het resultaat bewonderen.

Gefeliciteerd! Je eerste app doet het!

De code
Onze code bestaat uit 3 gedeeltes:
Eerst moeten we weten waar we zijn. Dit gebeurt via de geolocator API.
Dan moeten we het weer weten. Hiervoor is een weer-api nodig, ik gebruik die van openweathermap.
Als laatste hebben we een methode nodig om te bepalen of de korte broek nou aankan. Op het moment maken we gebruik van een temperatuur van 15 graden of hoger, maar in volgende blogs gaat dit veranderen.


C#:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
using System;
using System.Collections.Generic;
using System.IO;
using System.Net.Http;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Devices.Geolocation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Newtonsoft.Json.Linq;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=391641

namespace KanIkEenKorteBroekAan
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.
        /// This parameter is typically used to configure the page.</param>
        protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Het enigste dat hier gebeurt is dat de eerder gemaakte method word aangeroepen
           CheckPants();
        }
        public async void CheckPants()
        {
            // De geolocator class initialiseren, en zijn nauwkeurigheid instellen
            Geolocator geo = new Geolocator();
            geo.DesiredAccuracyInMeters = 1000;
            try
            {
                // Hier roepen we de positie van onze device op. 
                Geoposition geoposition = await geo.GetGeopositionAsync(
                    maximumAge: TimeSpan.FromMinutes(5),
                    timeout: TimeSpan.FromSeconds(10)
                    );
                // Dit is de positie van onze device, bijvoorbeeld 51.34
                string latitude = geoposition.Coordinate.Point.Position.Latitude.ToString("0.00");
                string longitude = geoposition.Coordinate.Point.Position.Longitude.ToString("0.00");
                // Dit is de url van de openweathermap api. We roepen de voorspelling voor vandaag op.
                string apiUrl = "http://api.openweathermap.org/data/2.5/forecast/daily?cnt=1&units=metric&lat=" + latitude + "&lon=" + longitude;
                // De httpclient die we gebruiken om de json op te halen
                HttpClient http = new HttpClient();
                string weatherJsonString = await http.GetStringAsync(new Uri(apiUrl));
                // De string naar een object parsen
                JObject weatherJson = JObject.Parse(weatherJsonString);
                // De temperatuur parsen naar een float.
                float dayTemperature = (float)weatherJson["list"][0]["temp"]["day"];

                if (dayTemperature > 15)
                {
                    YesOrNo.Text = "JA!";
                }
                else
                {
                    YesOrNo.Text = "NEE.";
                }
            }
            catch (Exception ex)
            {
                // Alle fouten opvangen
                System.Diagnostics.Debug.WriteLine(ex.ToString());
            }
        }
    }
}


Voordat deze code werkt moet je eerst een paar dingen doen:
1. De Json.net package installeren. Hiervoor moet je onder het menu "Project" klikken op "Manage NuGet packages". Vervolgens krijg je (ongeveer) het volgende scherm te zien:
http://puu.sh/hujSi/91665a2ec7.png
Als json.net er al tussenstaat: mooi! Klik dan op install, en je bent klaar.
Als hij er niet tussenstaat moet je naar json.net zoeken rechts bovenin en deze package dan installeren.
2. De juiste capabilities instellen. Net als android heeft Windows Phone permissions, maar nu heten ze toevallig anders, namelijk capabilities. Dit doe je door in de solution explorer op het bestand Package.appxmanifest te klikken. In dit bestand kan je een hoop aanpassen, dus kijk er maar eens rond. Wij zijn geinteresseerd in Capabilities, en daarvan moeten we er 2 aanvinken:
http://puu.sh/hukXZ/92628fd1a4.png
Nu kan je nogmaals runnen en zien dat alles werkt, althans als je wifi en locatieservice aan hebt staan.

Uitdagingen
Om zelf wat te leren heb ik hier een paar uitdagingen voor features die je zelf toe kan voegen. Zelf dingen bedenken kan ook, laat ze maar zien in de comments!
  • Voeg een refresh-knop toe
  • Maak een betere methode om te bepalen of die broek nou aankan.
  • Maak de gui wat aantrekkelijker, voeg wat kleurtjes toe of zelf symbolen
Conclusie
We hebben in 1 blog al een redelijk werkende app weten te maken. In de volgende blog gaan we meer features toevoegen. Vragen, opmerkingen of suggesties mogen via DM of in de comments.