Lag din første Windows Phone “God Jul” app, steg for steg
Jeg tenkte å ta deg gjennom et awesome eventyr. Vi skal lage en app fra A til Å!
Bergenet tidsbruk: 15 minutter + tiden det tar å laste ned og installere verktøyene.
Vi skal lage en app som kan sende en SMS med teksten “God jul, <navn>”.
1.Verktøyene
Last ned verktøyene du trenger. Dette er helt gratis, og en installer vil legge inn alt du trenger for å komme i gang.
Trykk her for å laste ned og installere verktøyene du trenger!
Verktøyene du laster ned inneholder Visual Studio 2010 Express, Expression Blend (design verktøy), Emulator og mye mer, alt helt gratis.
2. Start et nytt prosjekt
Så fort du har installert verktøyene kan du begynne å lage apps. Start Visual Studio 2010, trykk på File->New->Project.
På venstre side åpner du Visual C# grenen og trykker på “Silverlight for Windows Phone”. (Merk, du kan ha andre templates enn meg da det varierer basert på hvilken versjon av Visual Studio du har)
I midten vil du da bli presentert med en liste over forskjellige typer Windows Phone templates du kan velge som utgangspunkt. Velg her Windows Phone Application:
Da du har valgt prosjekt-template må du fylle inn prosjektnavnet, hvor du vil at prosjektet skal lagres og navnet på løsningen.
Deretter trykk OK!
Nå vil et prosjekt bli generert for deg. Du vil få et spørsmål om hvilken versjon du ønsker å kode mot, velg Windows Phone 7.1.
Da prosjektet er generert skal det se ca slik ut:
Trykk på F5, eller på play-knappen i toolbaren for å bygge appen, og kjøre den i emulatoren.
Emulatoren vil nå lastes, og så fort denne er klar vil appen din deployes til emulatoren.
Tips: Ikke lukk emulatoren for hver gang du bygger, dette vil spare deg for masse tid.
3. Lage designet
La oss legge til enkel funksjonalitet. På venstre side av Visual Studio har du en toolbox med mange kontrollere og komponenter du kan bruke i appen din. Vi ønsker å legge til et område som skal vise en tekst, en teksboks du skal skrive noe i, og tilslutt en knapp.
La oss starte med å legge til området som skal vise tekst. I listen over verktøy finner du det som heter TextBlock, og drar den inn over bildet av telefonen.
Du kan endre størrelsen ved å dra i hjørnene. Gjør det samme for tekst boxen og knappen, og prøv å få det til å se slik ut:
Om du nå kjører programmet igjen vil du se at de nye komponentene er synlige, selv om det ikke er stort en kan gjøre. Det skal vi fikse på nå!
4. Implementere enkel logikk
Om du trykker på TextBlock elementet i Visual Studio vil du kunne se en liste over mange egenskaper som tilhører denne:
Helt øverst kan du endre navnet på elementet. Sett dette navnet til “textBlockGodJul”.
Navnet blir brukt til å referere til elementet via kode. Du kan sette navn på nesten alle elementer.
Det neste vi skal gjøre er å implementere en enkel logikk som skal skje da en trykker på knappen. Om du dobbeltklikker på knappen i designverktøyet vil du automatisk generere et stykke kode som kjøres hver gang noen trykker på knappen.
Koden som blir generert ser slik ut:
Vi ønsker å skrive kode som gjør at om en trykker på knappen, så vil appen ta teksten som befinner seg i tekstboksen og legge til “God Jul” forran, og vise denne teksten i tekstboksen “textBlockGodJul”. Her er koden for å få til det:
Hele funksjonen ser du her:
Om du nå kjører programmet, og endrer teksten som er i tekst boksen til MSDN og trykker på knappen vil du se noe som ser slik ut:
Der har vi basisfunksjonaliteten for appen klar!
5. Endre designet for å legge til SMS-funksjonaliteten
Det neste vi ønsker å gjøre er å hente et telefonnummer, skrive inn et navn, og om en trykker på knappen skal en sende en SMS med teksten “God Jul, <navn>”. Flytt knappen litt lenger ned, og legg til en ny tekstboks.
Da har vi designet klart.
6. Impementere logikk for å sende SMS
Det neste vi ønsker er å endre funksjonaliteten for hva knappen skal gjøre. Gå til funksjonen som kjøres da en trykker på knappen (dobbeltklikk på knappen igjen). På toppen av kodefilen har vi en liste med biblioteker vi ønsker å ha tilgang til I koden. Nederst på listen legger du til:
using Microsoft.Phone.Tasks;
slik at listen ser slik ut:
For å sende SMS trenger du å bruke funksjonaliteten som ligger i Microsoft.Phone.Tasks.SmsComposeTask.
Endre funksjonen for knappen til å se slik ut:
Her setter vi opp et objekt av type SmsComposeTask, og fuller den med informasjonen som trengs for å sende en SMS. Deretter kaller du funksjonen Show() til sms objektet for å vise SMSen og ha muligheten til å sende den. Prøv å kjør programmet og se om det fungerer (det er ikke mulig å sende SMS fra selve emulatoren, men om du deployer appen til en telefon ville det fungert).
Nå fungerer appen slik vi ønsker.
7. Rydde designet og ferdigstille appen
Du kan nå fjerne tekstområdet du la til på toppen, og endre knappens tekst til å være “Send SMS”.
For å endre teksten i knappen trykker du på den i designverktøyet, finner Content og endrer den:
Slett også tekstområdet “MY APPLICATION” på toppen, og endre “page name” teksten til “God jul hjelp!”. Dette gjøres ved å endre Text egenskapen til elementet:
Om du kjører appen nå vil den kanskje se slik ut:
Du la sikkert merke til at det fort kan bli rot om du ikke gir alle elementene du har tenkt å bruke et navn. Husk å gjøre dette for ditt eget (og de som skal lese koden din) sitt beste.
Tilslutt
En oppgave til deg kan være å bruke kontaktlisten på telefonen til å hente telefonnummeret du ønsker å sende SMS til.
Trenger du hjelp til oppgaven? msdn.microsoft.com/en-us/library/hh394021(v=vs.92).aspx
Hvis du ønsker å fortsette app-utviklingen har vi et kult tilbud til deg. Om du klarer å lage 3 apper, gir vi deg en raff Nokia Windows Phone-enhet. Her finnes også flere lenker som vil hjelpe deg videre med app-utvikling. Lykke til!