App in a snap tutorial

App in a snap tutorial

Benodigdheden PC Internet connectie Credit Card Live ID

Inhoudsopgave Voorbereiden

Installeren Windows 8 Installeren Visual Studio Downloaden App in a snap template

Ontwikkelen

Openen project Aanpassen RSS-feeds Kleur aanpassen Illustraties aanpassen Edit App Manifest Naam aanpassen

Registreren

Aanmaken Developer Account Inloggen Live ID Invoeren gegevens

Publiceren

Applicatienaam claimen Verkoopinformatie Geavanceerde functies Leeftijdsclassificatie en classificatiecertificaten Cryptografie Pakketten Beschrijving Opmerkingen voor testers

4 4 4

5 6 6-7 7-8 8-9 9

10 10 10

11 12 12 12 13

13-15 15-17 17

1

Voorbereiden Voordat we beginnen hebben we enkele programma’s nodig, dat zijn: - Windows 8 - Visual Studio Express 2012 - Template App in a snap Installeren Windows 8 In het Dev Center kan je Windows 8 downloaden en installeren. Installeren Windows 8 op iOS devices Als je niet over een PC beschikt, kun je Windows 8 op een Mac installeren. Je volgt dan deze instructies.

Installeren Visual Studio In het Dev Center download je Visual Studio Express 2012 voor Windows 8. Er is ook een versie voor mensen met een MSDN abonnement. Downloaden App in a snap template Op de App in a snap website download je het .zip bestand met alle files die je nodig hebt om je eigen app te maken. Met deze tools installeer je het App in a snap template. Unzip het App in a snap template. Klik op de MijnRssAppInaSnap.exe file om het App in a snap template in Visual Studio te installeren. Bij het installeren van het template kun je deze waarschuwing krijgen. Klik op More info en ga gewoon door.

4

2

Ontwikkelen Open Visual Studio. Klik op New Project. Kies Visual C# > Windows Store > Mijn App in a snap template

Geef je project een naam in het nieuw geopende venster en klik op ok om het project aan te maken. De eerste pagina is nu geopend, (app.xaml). Aan de rechterkant zie je de Solution Explorer. Hier staan alle benodigde bestanden voor het creëren van de applicatie. Zie je deze niet, open dan VIEW > Solution Explorer.

5

2

Ontwikkelen Om te kijken hoe de app het doet klik je bovenin op Local Machine.

Na het succesvol starten van de voorbeeldapplicatie kun je deze sluiten. Ga nu terug naar Visual Studio en klik op Stop Debugging.

Aanpassen RSS-feeds Om een applicatie te bouwen heb je RSS-feeds nodig. Zoals je ziet, staan er nu drie RSS-feeds onder elkaar.

Ga naar een website met RSS-feeds. Een RSS-feed herken je aan dit icoon: Kopieer de link van de RSS-feed en plak deze over een van de voorgeprogrammeerde RSSfeeds. Verander ook de naam. Je kan het beste twee of meer RSS-feeds toevoegen. Hiermee wordt je app interessanter voor gebruikers en is de kans groter dat de app snel in de store toegelaten wordt.

Bekijk via Local Machine hoe de app er nu uit ziet. Om de Local Machine af te sluiten ga je terug naar Visual Studio en klik je op Stop Debugging. Kleur veranderen Ga rechts naar de Solution Explorer en open de map Common. Dubbelklik vervolgens op ApplicationColors.xaml Je ziet nu allemaal kleurcodes die je kunt aanpassen.

6

2

Ontwikkelen Stel: je wilt de achtergrondkleur aanpassen naar zwart, dan verander je de kleurcode #FFFFFFF in #000000. Als je achter dit teken gaat staan “#, krijg je ook suggesties voor andere kleuren. Kijk via Local Machine wat het resultaat is. Zoals je ziet is de achtergrond nu helemaal zwart. Sluit de applicatie weer af en klik binnen Visual Studio op Stop Debugging. Logo’s aanpassen Ga naar Solution Explorer en open de map Assets. Hier zie je een aantal PNG’s die gebruikt worden in de applicatie.

Open de map met Assets in de desktopomgeving. Deze vindt je hier: File Explorer > Documents > Visual Studio > Projects > (Jouwproject) > (Jouwproject) > Assets

Hier zie je alle afbeeldingen die gebruikt worden in de applicatie. Als je de tile wilt aanpassen open je het bestand logo.png in een beeldbewerkingsprogramma als Paint of Photoshop.

7

2

Ontwikkelen Verander het oude logo in een logo dat past bij jouw applicatie. Sla na het aanpassen je logo op door dit over de oude heen te schrijven. Als je nu naar het Windows 8 startscherm gaat, zie je dat hier jouw logo voor de app staat. Je kan alle andere afbeeldingen op dezelfde manier aanpassen. Edit App Manifest Ga terug naar Visual Studio. Ga naar boven en klik op STORE > Edit App Manifest

Hier staan allerlei zaken beschreven die belangrijk zijn in de applicatie. Je kan deze naar eigen inzicht aanpassen. Klik op Capabilities en vink Internet (client) aan.

8

2

Ontwikkelen Hiermee verplicht je jezelf gelijk tot het invoeren van de Privacy Policy. Ga naar de Solution Explorer en dubbelklik op PrivacyPolicyFlyout.xaml.

Een voorwaarde voor het gebruik maken van Internet in een applicatie, zoals onze rss reader, is dat de maker van de app (of eigenaar) online een privacy policy heeft staan. Jij kan de privacy policy snel/simpel online zetten via bijvoorbeeld Wordpress of een site zoals http://wimapps. simpsite.nl/. Kies dan je site en maak je eigen pagina/blog aan waar je de onderstaande tekst kopieert. De URL van deze pagina gebruik je dan bij de online privacy policy vraag tijdens het submitten van je app. Hier komen we later in de tutorial op terug. Privacy Verklaring (naam van de app): deze applicatie slaat geen gegevens op, stuurt of deelt persoonlijke informatie. Privacy Statement (app’s name): This application does not record, submit or share any personal information. Ga terug naar app.xaml, test nogmaals met Local Machine en sluit af met Stop Debugging.

Naam aanpassen Als laatste stap pas je de naam van de applicatie aan. Dit kan je doen boven de RSS-feeds die je eerder hebt veranderd. Je ziet hier ApplicationName staan. Dit is mijnRSSapp21. Deze verander je in de naam van jouw applicatie.

Controleer voor de laatste keer de applicatie via Local Machine.

9

3

Registreren Ga naar het Dev Center. Klik op de link en registreer je Developer Account. Ga weer naar het Dev Center en klik op Dashboard. Meld je aan met je Live ID. Selecteer het land waarin je woont, kies particulier of bedrijf en klik op volgende. Je komt nu op de pagina Account Info. Vul hier je persoonlijke gegevens in. Onderaan staat de uitgeversnaam. Deze is belangrijk en kun je achteraf niet meer wijzigen. De uitgeversnaam wordt gepubliceerd onder de applicaties die jij maakt. Voer je uitgeversnaam in en klik op volgende. Je ziet nu de overeenkomst. Lees deze goed door. Ben je het ermee eens? Accepteer deze dan. Klik op volgende. Je komt nu bij een prijsoverzicht. De aanschaf van een Developers Account kost 37 euro. Klik op volgende. Je komt nu op de betalingspagina. Voordat je een applicatie publiceert, is het noodzakelijk om je account te verifiëren. Naast het bedrag van 37 Euro wordt er eenmalig een klein bedrag afgeschreven van je creditcard. Bij dit bedrag staat een code in de omschrijving. Als je inlogt op het Dashboard en je eerste applicatienaam wilt claimen, wordt je gevraagd je account te verifiëren. Er zullen een à twee dagen verstrijken voordat Microsoft dat heeft verwerkt.

10

4

Publiceren Log in op het Dev Center en klik op dashboard. Links in beeld staat een app verzenden. Klik hier op.

Claim een applicatienaam Klik op App-naam. Vul hier jouw gewenste applicatienaam in en reserveer deze. Dit doe je door op de knop App-naam reserveren te klikken. Als de naam niet meer beschikbaar is, geeft het systeem dat aan. Als de naam wel beschikbaar is, klik dan op opslaan.

11

4

Publiceren Verkoopinformatie Klik op verkoopinformatie. Selecteer een prijs voor je applicatie. Selecteer in welke markten je jouw applicatie wilt publiceren. Selecteer een releasedatum. Dit is de datum waarop jouw app online moet staan. Selecteer een categorie. Selecteer een subcategorie. Als laatste selecteer je de devices waarvoor jouw applicatie beschikbaar moet zijn. Alles gereed? Klik dan op opslaan.

Geavanceerde functies Klik op Geavanceerde functies. Geef hier eventuele extra functies aan die je kunt toevoegen aan jouw applicaties en klik op opslaan. Leeftijdsclassificatie en classificatiecertificaten Klik op Leeftijdsclassificatie en Classificatiecertificaten. Omdat de app gebruik maakt van internet is het nodig dat je de applicatie certificeert voor twaalf jaar en ouder. Lees de andere certificaten goed door. Wellicht zijn er voor jouw applicatie meerdere certificaten van toepassing. Alles gelezen? Klik dan op opslaan.

12

4

Publiceren Cryptografie Klik op Cryptografie Selecteer hier of je wel of niet gebruik maakt van cryptografie en bevestig dit. Klik op opslaan. Pakketten Hier moeten de packages van de applicatie geplaatst worden. Na plaatsing kan de applicatie gereleased worden in de store. Om dit te doen moeten we vanuit Visual Studio eerst een App Package maken. Open jouw applicatie in Visual Studio. Ga bovenin naar STORE > Create App Packages.

Er verschijnt een venster. Selecteer Yes om jouw App Package te uploaden naar de store en klik op sign in. Log in met je Live ID.

13

4

Publiceren Selecteer nu jouw app en klik op Next. Je ziet nu waar de App Packages terecht komen. Klik op Create.

Je App Package wordt nu gecreëerd en is hierna compleet. Het laatste wat we moeten doen is een Windows 8 Certification Kit laten draaien. Hier wordt gecontroleerd of de app geschikt is voor publicatie. Dit kan enkele minuten duren.

14

4

Publiceren Je app staat nu op deze locatie: File explorer > Documents > Visual Studio > Projects > (Jouwproject) (Jouwproject) >AppPackages In deze map staat een .appxupload bestand. Dit bestand sleep je in het venster wat je nog open hebt staan op dev.windows.com.

Klik op opslaan. Beschrijving Klik op beschrijving. Hier vul je de beschrijving in van je app. Deze beschrijving krijgen mensen te zien in de Windows Store. Vul hier ook functies, trefwoorden, licentievoorwaarden en een eventuele updatebeschrijving in. In het veld auteursrechten en handelskenmerken plaats je een link naar een online omgeving waar je privacy statement staat. Dit hebben we eerder behandeld bij de ontwikkelstap Privacy Policy.

15

4

Publiceren Schermafbeeldingen creëren we vanuit Visual Studio. Ga naar Visual Studio. Klik op STORE > Capture Screenshots.

De applicatie wordt nu gestart in de virtuele omgeving. Klik op het tandwiel aan de rechterkant, dit zijn de screenshot settings.

Je ziet hier welke screenshots je hebt bewaard. Je kan een locatie kiezen waar je afbeeldingen wilt opslaan. Onthoud deze locatie goed. Met het camera-icoon aan de rechterkant maak je screenshots van het beeld dat op dat moment open staat in de virtuele omgeving.

Kies een paar afbeeldingen van bepaalde functies in de applicatie. Ga terug naar de website. Om een afbeelding toe te voegen, klik je op Afbeelding toevoegen en ga je naar de map waar je de afbeeldingen hebt opgeslagen.

16

4

Publiceren Als je reclame wilt maken, kun je ook reclameafbeeldingen toevoegen. Vul de laatste velden ook in en klik op opslaan. Opmerkingen voor testers Klik op Opmerkingen voor testers. Stel dat jouw applicatie extra instructies nodig heeft die handig zijn bij het testen. Dan kun je deze instructies hier invoeren.

Klik op opslaan. Als laatste klik je op certificaat aanvragen. Je hebt de applicatie nu aangeboden aan de Windows Store. Windows doorloopt nog een aantal stappen om jouw applicatie te controleren. Dit kan enkele dagen duren. Als deze stappen zijn doorlopen, komt je applicatie in de Windows Store. Heb je nog vragen? Mail deze naar [email protected]

17