Naar content
Trending apps
  • Inbox by Gmail

  • Maps: Navigatie en OV

  • WhatsApp Messenger

  • Messenger

  • Facebook

Trending games
  • Minecraft Earth

  • Dr. Mario World

  • Harry Potter: Wizards Unite

  • Breaking Bad: Criminal Elements

  • The Elder Scrolls: Blades

Trending smartphones
  • OPPO Find X2 Pro

  • Nokia 8.3

  • Xiaomi Mi 10 Pro

  • Huawei P40 Pro

  • Realme X2 Pro

Nieuwste tablets
  • Samsung Galaxy Tab S6

  • Samsung Galaxy Tab A 10.5

  • Samsung Galaxy Tab S4

  • Samsung Galaxy Tab S3 9.7

  • Asus Zenpad 3S 10

Wadenkte

Wadenkte

  • Lid sinds 02 december 2010
  • Berichten 24
  • Reputatie 0
  • #1
  • 23 december 2010
  • 00:54

Inleiding

Bij deze discussie zal ik helpen bij het maken van je eerste app: Een foto van een poes dat miauwt als je huisdier.

*Maar voordat je hier aan kunt beginnen zul je eerst het App Inventor Sofware Pakket moeten downloaden*

Tijdens het bouwen van Hello Purr leer je hoe de drie belangrijkste instrumenten van App Inventor werkt:
- De Designer, de plaats waar u het ontwerp van uw applicatie maakt. Het loopt in je webbrowser.
- De Block Editor, de plaats waar u het gedrag van de app in elkaar zet. Het is een aparte applicatie met een eigen venster.
- De Emulator, een virtueel mobiel apparaat dat draait op je computer naast de App Inventor.

Bij het maken van je eerste App heb je 2 bestanden nodig, download deze naar je computer:
- http://appinventor.googlelabs.com/learn/tutorials/hellopurr/HelloPurrAssets/kitty.png
- http://appinventor.googlelabs.com/learn/tutorials/hellopurr/HelloPurrAssets/meow.mp3

Het Begin

Start de App Inventor door naar http://appinventor.googlelabs.com. te gaan. Je begint met dit scherm:



Beginnen aan een New project

1. Klik op New aan de linker bovenkant van het scherm.
2. Noem het nieuwe project HelloPurr en klik op OK.

In de browser wordt nu De Designer geopend, dit moet er uit zien als dit:




Componenten selecteren om je app te maken
De App Inventor componenten bevinden zich aan de linkerkant van het Designer scherm onder de titel Palette. Componenten zijn de basiselementen die je gebruikt om apps te maken voor je Android telefoon. Ze zijn als de ingrediënten in een recept. Sommige onderdelen zijn zeer eenvoudig, zoals een Label-component, die toont tekst op het scherm, of een component Button om een actie te starten. Andere onderdelen zijn meer uitgewerkt: een tekening Canvas, dat kan stilstaande beelden of animaties vastzetten, een accelerometer (beweging) sensor die werkt als een Wii-controller en detecteert wanneer je je verplaatst of de telefoon schudt, onderdelen die SMS-berichten versturen, onderdelen die muziek en video afspelen, onderdelen die informatie van websites halen, enz…

App Inventor componenten bevinden zich aan de linkerkant van het Designer scherm onder de titel Palette. Voor het gebruik van een component in je app, moet je het component dat je nodig hebt slepen naar het midden van witte werkscherm. Wanneer je een component in het werkscherm verplaatst, zal ook verschijnen in de onderdelen lijst (components) aan de rechterkant van het werkscherm.

Componenten hebben eigenschappen die kunnen worden aangepast, zodat ze ook veranderen in de app. Voor het bekijken en wijzigen van de eigenschappen van een component, moet je deze eerst selecteren uit de lijst van componenten.

Om je HelloPurr app te maken zullen we beginnen met de volgende stappen:

1. Sleep het component Button naar je werkscherm (screen1). De component Button bevindt zich onder Palet.
2. Klik op Button1 vermeld onder Components.
3. In de lijst van eigenschappen, onder afbeelding, klik op None en klik op toevoegen (add).
4. Upload het de kitty.png bestand.
5. Verwijderen ‘Tekst’ dat staat vermeld onder de eigenschap Text.

Het zou er nu uit moeten zien als dit:



Blocks Editor
De Designer is een van de drie belangrijkste instrumenten die je gebruikt bij het creëren van je applicaties. De tweede is de Blocks Editor. Je zult gebruik maken van de Blocks Editor om gedrag toe te wijzen aan je componenten, zoals wat er moet gebeuren wanneer iemand tikt een knop.

De Blocks Editor loopt in een apart venster. Deze kan geopend worden door te klikken op ‘Open Blocks Editor’ rechtsboven in het scherm. Dan zal een bestand dat op je computer staat worden gedownload en automatisch worden geopend. Dit proces zal ongeveer 30 seconden duren. Als de Blocks Editor nooit opent zou dit mogelijk kunnen liggen aan de instellingen van je browser en dat deze niet automatisch toepassingen installeerd en uitvoerd. In dit geval, vind in het gedownloade bestand de naam AppInventorForAndroidCodeblocks.jnlp en open het.

Wanneer de Blocks Editor wordt geopend, wordt u gevraagd welk apparaat u wilt gebruiken, een telefoon of een emulator. Wanneer u klikt op emulator zal enkele minuten duren voor de emulator te laden. Het zal er zo uitzien als het klaar is. Met behulp van je muis kun je de schuifknop naar de rechterkant verplaatsen.



Nu dat de emulator is gestart, zul je rechtsboven kunnen zien dat het programma verbindt met de emulator. Wanneer u klikt op die knop zal de Blocks Editor gaan communiceren met de emulator en je app zou moeten verschijnen op de emulator. Op de Designer scherm hebben we een knop en een afbeelding gemaakt, dit zou er op de emulator zo moeten uitzien:



Je kunt met je muis op deze knop drukken, maar aangezien er nog niet is verteld wat deze knop moet doen, zal er niets gebeuren. Elke wijziging die je aanbrengt in de Designer en de Blocks Editor zal verschijnen in de emulator.


Aan de slag
Nu dat je je computer en apparaat hebt ingesteld en je hebt geleerd hoe de Designer en de Blocks editor werkt, bent je klaar om de HelloPurr app te voltooien. Op dit punt, moet je de Designer openen in uw browser, de Blocks Editor openen in een ander venster en je gekozen apparaat (telefoon of emulator) aangsluiten op de Blocks Editor.

Door middel van de volgende stappen gaan we de app voltooien:

In de Designer:
1. Voeg een Label component toe, die luidt: “Pet de Kitty”.
2. Upload het bestand meow.mp3
3. Voeg het geluid toe aan de Label

In de Blocks Editor:
De Componenten aan elkaar linken, zodat als je op het plaatje drukt het geluid gaat afspelen.


Label toevoegen
Onder Palette

Sleep de Label-component naar het werkscherm, plaats het onder de poes. Het zal verschijnen in je lijst met onderdelen als Label1.

Onder Properties

1. Wijzig de eigenschap Text van Label1 naar "Pet de Kitty". Je kunt de tekst zien veranderen in het werkscherm bij de Designer en op je toestel/emulator.
2. Verander de achtergrondkleur van de Label1 door op het vakje te klikken.
3. Wijzig de textColor van Label1.
4. Verander de lettergrootte van Label1 naar 30.

De Designer moet er nu als volgt uitzien:




Het geluid toevoegen

Onder Palette

1. Klik op de kop Media om de Media sectie van het palet van de componenten uit te breiden.
2. Sleep een Sound component en plaats het in het werkscherm. Het maakt niet uit waar je deze neerzet, het zal onder het werkscherm worden weergegeven.

Onder Media

1. Klik op Add
2. Upload het bestand meow.mp3 naar dit project.

Onder Properties

1. klik op Sound
2. Voeg het meow.mp3 toe.

De Designer moet er nu als volgt uitzien:




Het geluid laten afspelen als je op de poes drukt
Met behulp van de Blocks Editor zullen we bepalen hoe de app zich gaat gedragen. We vertellen de onderdelen wat te doen, en wanneer het te doen. Je gaat er voor zorgen dat de poes miauwt als hierop gedrukt wordt. Als componenten de ingrediënten in een recept zijn, dan kun je de ‘blokken’ zien als de bereidingswijze.

De Blocks Editor heeft twee tabbladen aan de linker bovenhoek: Built-in en My blocks. Je kunt de knoppen die bij deze onderwerpen horen zien door er op te klikken. De Built-in blokken zijn de standaard set blokken die beschikbaar zijn voor elke app die je bouwt. De blokken onder My Blocks bevatten specifieke blokken die zijn verbonden aan de set van componenten die u hebt gekozen voor je app.

Om het geluid af te spelen, moet je de Button1.Click blok en de Sound1.Play blok naar de editor slepen en laten vallen. De blokken komen samen als puzzelstukjes.

Stappen om het geluid af te spelen

1. Ga naar de Blocks Editor.
2. Klik op het tabblad My Blocks aan de linker bovenkant.
3. Klik op Button1.
4. Sleep de When Button1.Click blok naar de editor.
5. Klik op Sound1
6. Sleep de call Sound1.Play blok naar de editor en zet deze in de When Button1.Click.
7. Klik op de foto kitty op uw toestel. U hoort het poesje miauwen!

De Blocks Editor moet er als volgt uitzien:



Je hebt nu je eerste app gemaakt!

Je kunt nu van je app een pakketje maken of een barcode genereren. Dit doe je door op de Package for Phone knop te drukken in de Designer.


Dit was les 1, mocht je vragen hebben kun je ze gerust stellen!

Tot les 2!/cdn2.androidworld.nl/b4c9f3af9a/static/djangobb_forum/img/smilies/big_smile.png" />

Bewerkt (23 december 2010 00:54)
Hankey

Hankey

  • Lid sinds 02 oktober 2010
  • Berichten 582
  • Reputatie 0
  • #2
  • 23 december 2010
  • 01:10

tja…eehmm… wel geinig dit.. dat wel…
op een plaatje klikken en pur pur.

maar stel ik wil inloggen op een bepaalde Site.
om gegevens door te voeren en deze te registreren.
is daar ook al een how to voor?
Pur Pur

Bewerkt (23 december 2010 01:10)
Zabivelli

Zabivelli

  • Lid sinds 13 september 2010
  • Berichten 1857
  • Reputatie 0
  • #3
  • 23 december 2010
  • 03:13

Ram VET, jonge! :p

Ik wil best leren apps maken, alleen het is nu beetje laat om te beginnen, maar morgen wil ik het best doen, komen er nog meer lessen:p
Ik wil wel some moneyeee maken met apps.jonge

Bewerkt (23 december 2010 03:13)
Hankey

Hankey

  • Lid sinds 02 oktober 2010
  • Berichten 582
  • Reputatie 0
  • #4
  • 23 december 2010
  • 03:25

Zabivelli;72555
Ram VET, jonge! :p

Ik wil best leren apps maken, alleen het is nu beetje laat om te beginnen, maar morgen wil ik het best doen, komen er nog meer lessen:p
Ik wil wel some moneyeee maken met apps.jonge/cdn2.androidworld.nl/b4c9f3af9a/static/djangobb_forum/img/smilies/big_smile.png" />
hahaha een New Kids Fan, Jonge…

Bewerkt (23 december 2010 03:25)
Zabivelli

Zabivelli

  • Lid sinds 13 september 2010
  • Berichten 1857
  • Reputatie 0
  • #5
  • 23 december 2010
  • 03:50

Hankey;72560
hahaha een New Kids Fan, Jonge…

Ik werk in de bioscoop, nu met die film (sorry dat ik het zeg) komen veel debielen niks anders dan dat roepen/cdn2.androidworld.nl/b4c9f3af9a/static/djangobb_forum/img/smilies/smile.png" /> maar daar zitten om normale mensen tussen/cdn2.androidworld.nl/b4c9f3af9a/static/djangobb_forum/img/smilies/big_smile.png" />

Bewerkt (23 december 2010 03:50)
fifarunnerr

fifarunnerr

  • Lid sinds 13 juli 2010
  • Berichten 1846
  • Reputatie 10
  • #6
  • 23 december 2010
  • 07:25

Waarom eigenlijk een tutorial met de App Inventor? Het is leuk om er mee te spelen, maar verder kan je er niets mee
Grote apps die niet in de market kunnen is het enige wat je krijgt.

Bewerkt (23 december 2010 07:25)
AVS

AVS

  • Lid sinds 02 oktober 2009
  • Berichten 9893
  • Reputatie 0
  • #7
  • 23 december 2010
  • 07:46

Deze miauwende kat maken in AI is zo simpel dat als iemand niet uit de beschrijving van google komt dan denk ik dat die persoon eens moet gaan overwegen of developen wel zijn ‘ding’ is

Bewerkt (23 december 2010 07:46)

Samsung Galaxy S8+

fifarunnerr

fifarunnerr

  • Lid sinds 13 juli 2010
  • Berichten 1846
  • Reputatie 10
  • #8
  • 23 december 2010
  • 09:24

Hoe kom je daar nou bij?
Android code typen is makkelijker/sneller dan AI

Bewerkt (23 december 2010 09:24)
klwinkel

klwinkel

  • Lid sinds 23 oktober 2010
  • Berichten 951
  • Reputatie 0
  • #9
  • 23 december 2010
  • 09:52

Voor iemand die kan programmeren klopt dat.
Maar als je geen progr. Kennis hebt, is AI al lastig genoeg.
Ik zie zelf erg veel beperkingen in AI, die ik in eclipse/java niet heb.
Bijvoorbeeld, je kan maar 1 schermpje per app maken ( ja met visible/invisibe kan je wat truuken)
Menu toets is niet te gebuiken.

Bewerkt (23 december 2010 09:52)
fifarunnerr

fifarunnerr

  • Lid sinds 13 juli 2010
  • Berichten 1846
  • Reputatie 10
  • #10
  • 23 december 2010
  • 10:00

Precies, en een van de eerste dingen die ik leerde met Android was menu

Bewerkt (23 december 2010 10:00)

Reageer

Om te reageren, dien je te zijn ingelogd. Druk op de onderstaande knop om in te loggen of maak een nieuwe account aan.

Inloggen Registreren