Van niets tot app: deel 1

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

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.

Reacties


Door Tweakers user Poepkonijn, donderdag 30 april 2015 00:23

Ik ben al langer geÔnteresseerd in het maken van simpele WP apps. Ik heb al wat gestoeid met visual Studio en onlangs ook met touchdevelop maar het wil niet can de grond komen. Ik heb 0 programmeer ervaring helaas. Maar ik ga je wel proberen te volgen (powershell, ja dat kan ik dan weer wel, kon ik daar maar apps in bouwen lol)

Door Tweakers user rmenkveld, donderdag 30 april 2015 08:41

Leuke blog!
Valt me op dat de laatste tijd veel aandacht is voor WP apps op tweakers. Zelf ben ik sinds kort via Microsoft Virtual Academy begonnen met programmeren. De training C# Fundamentals for Absolute Beginners heb ik net afgerond en ben nu bezig met Windows Phone 8.1 Development for Absolute Beginners. Dit zijn zeker aanraders voor wie wil beginnen met programmeren.

Ik kijk uit naar de volgende blog!

Door Tweakers user hydrargyrum, donderdag 30 april 2015 08:46

Poepkonijn schreef op donderdag 30 april 2015 @ 00:23:
Ik ben al langer geÔnteresseerd in het maken van simpele WP apps. Ik heb al wat gestoeid met visual Studio en onlangs ook met touchdevelop maar het wil niet can de grond komen. Ik heb 0 programmeer ervaring helaas. Maar ik ga je wel proberen te volgen (powershell, ja dat kan ik dan weer wel, kon ik daar maar apps in bouwen lol)
In dat geval zou ik aanraden om eerst python te proberen. C#/Java zijn geweldige talen, maar in het begin een beetje moeilijk om te snappen. Je kunt aardig wat over python leren in een week of 2, en daarna zou ik wat in Java of C# gaan doen. Als je een paar dingen in C# gedaan hebt, dan zou ik pas aan apps beginnen.
Dit klinkt inderdaad omslachtig, maar apps maken kan ook vrij lastig zijn.

Door Tweakers user hydrargyrum, donderdag 30 april 2015 09:02

rmenkveld schreef op donderdag 30 april 2015 @ 08:41:
Leuke blog!
Valt me op dat de laatste tijd veel aandacht is voor WP apps op tweakers. Zelf ben ik sinds kort via Microsoft Virtual Academy begonnen met programmeren. De training C# Fundamentals for Absolute Beginners heb ik net afgerond en ben nu bezig met Windows Phone 8.1 Development for Absolute Beginners. Dit zijn zeker aanraders voor wie wil beginnen met programmeren.

Ik kijk uit naar de volgende blog!
Die aandacht komt volgens mij omdat Windows Phone het ultieme tweaker-platform is (tot op zekere hoogte dan): Een jong platform met een hele hoop potentieel. Ook is het goedkoop en draait het prima op low-end devices. Het zegt genoeg over een platform als je flagship 350 euro is.

Zelf ben ik eigenlijk head-first begonnen met Windows Phone apps maken. Aangezien ik nog een scholier ben krijg ik alles wat ik nodig heb via dreamspark en daarna ben ik gewoon begonnen met programmeren en heb ik alles opgezocht wat ik nodig had.

Door Tweakers user ObAt, donderdag 30 april 2015 18:08

Leuke blog! Erg interessant! Ik raad alleen geen dropbox aan voor source code backup. Als je serieus wat apps gaat maken zul je tegen grote problemen aanlopen. Gebruik een versiebeheersysteem zoals GIT of SVN. Deze kun je gratis gebruiken via BitBucket

Door Tweakers user hydrargyrum, vrijdag 1 mei 2015 08:17

ObAt schreef op donderdag 30 april 2015 @ 18:08:
Leuke blog! Erg interessant! Ik raad alleen geen dropbox aan voor source code backup. Als je serieus wat apps gaat maken zul je tegen grote problemen aanlopen. Gebruik een versiebeheersysteem zoals GIT of SVN. Deze kun je gratis gebruiken via BitBucket
Dropbox is ook niet mijn hoofdbackup. Ik heb voor de meeste projecten wel een git-repo, maar ik gebruik dropbox zodat ik altijd de laatste versie op zowel mijn laptop als desktop heb. Bij git kan het gebeuren dat je een keer vergeet te commiten en je zo je code niet up to date hebt, wat vooral irritant is als de laatste versie op mijn desktop staat en ik onderweg ben.

Door Tweakers user jfversluis, vrijdag 1 mei 2015 10:41

Leuk blog! Mooi voor de beginnende app ontwikkelaars.

Ik ben zelf al een aantal jaar professioneel ontwikkelaar en heb ook al het eea aan apps gemaakt, nu met Xamarin.

Wat ik graag meer in je volgende blogs zou zien is _waarom_ doe je bepaalde zaken? Waarom moeten de capabilities vinkjes aan? Wat zegt dat? En waar kan ik meer informatie vinden over welke, wat precies doen? Waarom een Windows Phone app en geen Universal app, wat is het verschil?
Ik denk dat het voor anderen en voor jezelf, erg helpt als je ook weer waarom je dingen doet en niet alleen maar omdat het in een tutorial staat.
De emulator draait niet onder gewone Windows, wat ik een ernstig gebrek aan het Windows Phone ecosysteem vindt.
Dat mag je uiteraard vinden, ik denk dat het nog wel zal veranderen. Het is nu simpelweg te wijten aan het gebrek van Hyper-V support op lagere edities van Windows.
Omdat Microsoft het ontwikkelen, naar mijn idee, zo laagdrempelig mogelijk wil maken denk ik dat er in toekomstige versies wel support komt voor een emulator. Zie ook de ontwikkelingen en aankondigingen die gedaan zijn op de Build conferentie!
Daarbij wil ik ook graag benadrukken dat je, ook al heb je een emulator, _altijd_ moet testen op een fysiek device. Dat reageert toch altijd anders, je 3G is toch net trager dan je (gesimuleerde) netwerksnelheid op je emulator, enz. enz.
ObAt schreef op donderdag 30 april 2015 @ 18:08:
Leuke blog! Erg interessant! Ik raad alleen geen dropbox aan voor source code backup. Als je serieus wat apps gaat maken zul je tegen grote problemen aanlopen. Gebruik een versiebeheersysteem zoals GIT of SVN. Deze kun je gratis gebruiken via BitBucket
Dit viel mij ook op. Waarom op Dropbox? Als je naar visualstudio.com gaat kun je een gratis en zeer complete TFS omgeving aanmaken met source control, backlogs en alles. Dat integreert natuurlijk fantastisch met Visual Studio, je kunt er zelfs automatische testen op loslaten, mensen uitnodigen voor projecten, ga zo maar door.
Uiteraard is een GIT of SVN ook al een hele verbetering, maar als je toch Microsoft minded bent, dan maar ook meteen the whole package ;)

Verder zoals ik zei; ga zo door! Goed initiatief!

- edit -
Ik zie ook Dreamspark, in relatie tot Xamarin een tipje; volgens mij kun je dan een gratis/met veel korting Xamarin licentie krijgen, dan kun je meteen vanuit C# multi-platform gaan, mocht je daar interesse in hebben natuurlijk.

[Reactie gewijzigd op vrijdag 1 mei 2015 10:48]


Door Tweakers user HanSwinkels, zaterdag 2 mei 2015 22:50

Hoe ben je precies aan een Dreamspark account gekomen? Moet je school daarvoor niet ergens ingeschreven staan?

Ik vind het ook een best groot nadeel dat je Windows 8.1 pro moet hebben om te beschikken over de emulators, gelukkig ben ik nu via DVLUP aan Windows 8.1 pro gekomen :D

Door Tweakers user hydrargyrum, zaterdag 2 mei 2015 23:26

HanSwinkels schreef op zaterdag 02 mei 2015 @ 22:50:
Hoe ben je precies aan een Dreamspark account gekomen? Moet je school daarvoor niet ergens ingeschreven staan?

Ik vind het ook een best groot nadeel dat je Windows 8.1 pro moet hebben om te beschikken over de emulators, gelukkig ben ik nu via DVLUP aan Windows 8.1 pro gekomen :D
Dit moet eigenlijk wel inderdaad, vaak heb je een .edu e-mailadres nodig. Wat ik heb is een foto van mijn schoolpasje en CJP samen, waar allebei mijn naam op staat. Als ik mee wil doen aan een student program, zoals dreamspark, of dat van github dan mail ik de instantie even, en dat is dan genoeg om toegang te krijgen.

Door Tweakers user HanSwinkels, zaterdag 2 mei 2015 23:57

Jammer genoeg doet onze school niet aan schoolpasjes en ook heb ik alleen nog een CJP van 2 jaar oud. :(

Door Tweakers user hydrargyrum, zondag 3 mei 2015 09:18

HanSwinkels schreef op zaterdag 02 mei 2015 @ 23:57:
Jammer genoeg doet onze school niet aan schoolpasjes en ook heb ik alleen nog een CJP van 2 jaar oud. :(
In dat geval zou ik een e-mailadres zoeken van iemand bij dreamspark en een mail sturen waarin je de situatie uitlegt. Je zou bijvoorbeeld als docenten op je school een @$school.nl e-mailadres hebben kunnen vragen of een van hun een mail wil sturen als microsoft dat accepteert en anders zijn er waarschijnlijk wel andere mogelijkheden.
Microsoft wil maar al te graag dat je verslaaft raakt aan hun producten :P

Reageren is niet meer mogelijk