Ik zal hier regelmatig tutorials/handleingen plaatsen , graag zou ik willen als jullie vragen hebben of sugesties/aanpassingen ,stel ze gerust. Reputatie toevoegen mag ook altijd :cool: Alles dat hier wordt geplaatst komt van de volgende link [URL="http://explore.appinventor.mit.edu/"]Explore MIT App Inventor | Explore MIT App Inventor[/URL]. [SIZE=3][FONT=impact] Wat is het en wat kan je er mee doen ?[/FONT][/SIZE] * Eigen apps maken , natuurlijk basic , maar toch al uitgebreidt zonder al teveel van programmering te kennen. * Het is een soort hybride wysiwyg "[FONT=arial] What you see is what you get" [/FONT][FONT=arial]of in het Nederlands: "Je krijgt wat je ziet". * Direct op je telefoon/tablet het resultaat zien [/FONT][URL="http://imageshack.us/photo/my-images/717/appinventordocdiagram0.png/"][IMG]http://img717.imageshack.us/img717/3260/appinventordocdiagram0.png[/IMG][/URL] [FONT=arial][SIZE=4][FONT=impact][SIZE=3] Wat heb je nodig? [/SIZE][FONT=arial][SIZE=3] [U]* E[/U][SIZE=2][U]en pc met de volgende minimumsysteem configuratie [/U] [/SIZE][/SIZE][/FONT][/FONT][/SIZE][/FONT][COLOR=#555555][FONT=arial] Macintosh (with Intel processor): Mac OS X 10.5, 10.6 [/FONT][/COLOR][COLOR=#555555][FONT=arial]Windows: Windows XP, Windows Vista, Windows 7 [/FONT][/COLOR][COLOR=#555555][FONT=arial]GNU/Linux: Ubuntu 8+, Debian 5+[/FONT][/COLOR][FONT=arial][SIZE=4][FONT=impact] [/FONT][/SIZE] [U]* Browser[/U] [/FONT][COLOR=#555555][FONT=arial]Mozilla Firefox 3.6 or higher (als je firefox gebruikt met NoScript extensions zal je deeze moeten afleggen) [/FONT][/COLOR][COLOR=#555555][FONT=arial]Apple Safari 5.0 or higher [/FONT][/COLOR][COLOR=#555555][FONT=arial]Google Chrome 4.0 or higher [/FONT][/COLOR][COLOR=#555555][FONT=arial]Microsoft Internet Explorer 7 or higher [/FONT][/COLOR][COLOR=#555555][FONT=arial] [U]* Java moet geinstalleerd zijn op je pc [/U] Je computer heeft Java 6 nodig (beter bekend als java1.6) je kan ze downloaden via deze link [URL="http://www.java.com/nl/"]www.java.com[/URL]. Test als Java juist is geconfigureerd is op je pc 1. Bezoek de [URL="http://www.java.com/en/download/testjava.jsp"]test pagina [/URL] als een bericht krijgt dat java werkt , dan is alles ok [/FONT][/COLOR][URL="http://imageshack.us/photo/my-images/37/javatestok.png/"][IMG]http://img37.imageshack.us/img37/3580/javatestok.png[/IMG][/URL] 2.Start de AppInventor Java test door op de [URL="http://beta.appinventor.mit.edu/learn/setup/misc/JWSTest/AppInvJWSTest.html"]link[/URL] te klikken. Dit zal testen of Java juist is geinstalleerd en geconfigureerd is om de aplicatie te draaien op je computer. [URL="http://imageshack.us/photo/my-images/694/javacheck.png/"][IMG]http://img694.imageshack.us/img694/9281/javacheck.png[/IMG][/URL] Wanneer je geen groene vink ziet , zal je opnieuw Java moeten installeren of updaten. Wanneer alles ok is moet je nog één test goed moeten kunnen voltooien. Namelijk in de test pagina is er een Oranje Launch link , klik daarop en er moet een moet kladblok openen. Als de testen falen kunnen de volgende redenen hebben : [LIST] [*] firewall van de computer [*]Browser is niet geconfigureerd voor Java [*]te weinig geheugen om AppInventor te gebruiken [*]Neterk proxy voor Java is gewijzigd [/LIST] [U]* Drivers van de smartphone of tablet geinstalleerd zijn[/U] [U]* AppInventor software installeren[/U] [LIST] [*][URL="http://beta.appinventor.mit.edu/learn/setup/setupmac.html"]Mac Os X[/URL] [*][URL="http://beta.appinventor.mit.edu/learn/setup/setuplinux.html"]GNU/Linux[/URL] [*][URL="http://beta.appinventor.mit.edu/learn/setup/setupwindows.html"]Windows[/URL] [/LIST] Indien verder informatie nodig kan je altijd eerst naar de [URL="http://beta.appinventor.mit.edu/learn/troubleshooting.html"]officiele site[/URL] gaan of [URL="http://beta.appinventor.mit.edu/forum/"]MIT forum[/URL] of natuurlijk een nieuwe/bestaande topic gaan . Dit was het gedeelte ter voorbereiding om pc klaar te stomen. Nu komt de volgende stap , namelijk je android telefoon/tablet klaar maken om te gebruiken [SIZE=3][FONT=impact]Setup Telefoon/Tablet[/FONT] [SIZE=2] [FONT=arial]De volgende stappen moet je doen op je telefoon/tablet[/FONT] [LIST=1] [*]tik op je startknop om naar je startscherm te gaan [*]klik menu , dan instellingen en dan aplicaties [*]maak dat je telefoon "onbekende source" is aangevinkt [/LIST] [FONT=arial][URL="http://imageshack.us/photo/my-images/84/appsetting.png/"][IMG]http://img84.imageshack.us/img84/7512/appsetting.png[/IMG][/URL] [/FONT] [LIST=1] [*][FONT=arial]klik ontwikkelinget[/FONT] [*][FONT=arial]maak dat beide zijn aangevinkt "usb foutopsporing en dat het scherm open blijft"(engelse term [/FONT][COLOR=#555555][FONT=arial]USB Debugging and Stay Awake)[/FONT][/COLOR] [/LIST] [COLOR=#555555][FONT=arial]​[/FONT][/COLOR][/SIZE][/SIZE][URL="http://imageshack.us/photo/my-images/809/usbdebugging.png/"][IMG]http://img809.imageshack.us/img809/4971/usbdebugging.png[/IMG][/URL] Dat was het voor het klaar maken van alle hard en software. Vanaf nu beginnen we met het gebruiken van de AppInventor. Ik zal deel per deel posten zodat jullie kunnen zien wanneer deze topic is geupdate. [URL="http://imageshack.us/photo/my-images/96/nextdh.jpg/"][IMG]http://img96.imageshack.us/img96/370/nextdh.th.jpg[/IMG][/URL] [SIZE=4][FONT=times new roman]Eerste app maken met AppInventor[/FONT][/SIZE] Grtz barre [SIZE=3][SIZE=2] [COLOR=#555555][FONT=arial]​[/FONT][/COLOR] [FONT=arial] [/FONT][/SIZE][/SIZE] [SIZE=3][SIZE=2] [FONT=arial]​[/FONT] [FONT=arial]​[/FONT] [/SIZE][/SIZE][SIZE=3][SIZE=2] [/SIZE][/SIZE] [FONT=arial] [/FONT]

ziet er goed uit! vraagje: is er een reden dat je dit in het GIO forum zet, en niet in het Android Development gedeelte. Lijkt me ook interessant voor niet-GIO gebruikers namelijk

mag verplaatst worden , ben niet zeker of iedereen interresse heeft. its your call :) grtz barre

[mod]Verplaatst naar [url=http://www.androidworld.nl/forum/android-development/]Android Development[/url][/mod]

Kun je ook de code inzien die de app inventor genereert? lijkt me wel leerzaam namelijk en daarom een goede opstap voor beginnelingen. (ik leer zelf altijd het snelst met voorbeeld-code) [SIZE=1](in afwachting van de rest van de tut)[/SIZE]

Hee barremans, Ik vind het meer dan geweldig dat je de moeite hebt genomen om afbeeldingen te plaatsen, en om die lastige engelse tutorials perfect te vertalen en te verduidelijken naar het nederlands. Ik spreek dan ook alleen maar lof. Ik ga zeker morgen ook in dit wereldje duiken. Dit houdt in dat ik aan de slag ga met het programma, en dat ik mijn bevindingen en eventueel tips en tricks (dat later) hier op het forum zou posten. Het zou ook super zijn als je ons op de hoogte houdt van je eigen tips en bevindingen. Mee eens? Julian

Zeker weten m8 , zoals altijd , met plezier gedaan.van zodra ik effe tijd heb , kom het volgende chapter , als ook eigen bevinding. @Nander , zal eens kijken of de code ergens te vinden is.Je kan btw altijd de apk ontleden , heb ik al dikwijls gedaan om de code te bekijken.

[SIZE=3][FONT=impact]Hoofdstuk 1 Hello Purr deel 1[/FONT][/SIZE] Het maken van je eerste app , we zullen schermafbeelding gebruiken en wanneer men de afbeelding aantikt laten we een geluid afspelen. De volledige handleiding (engels) kan men [URL="http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch1HelloPurr.pdf"]hier[/URL] downloaden Een video voorbeeld van de app kan men [URL="http://www.youtube.com/watch?v=nC_x9iOby0g"]hier[/URL] bekijken [SIZE=4] Wat leren we in deze tutorial. [SIZE=2] [LIST=1] [*]het gebruik van de designer [*]het gebruiken van de blocks editor [*]het testen direct op de smartphone [/LIST] Voor het project hebben we 2 zaken nodig : afbeelding van een kat te downloaden [URL="http://beta.appinventor.mit.edu/learn/tutorials/hellopurr/HelloPurrAssets/kitty.png"]hier[/URL] (rechtsklikken en opslaan als) meow geluid te downloaden [URL="http://beta.appinventor.mit.edu/learn/tutorials/hellopurr/HelloPurrAssets/meow.mp3"]hier[/URL] (rechtsklikken en opslaan als) [B][U][SIZE=3]Starten van de designer en een nieuw project aanmaken [/SIZE][/U][/B][SIZE=3][SIZE=2] In je browser gaat men naar de AppInventor site [/SIZE][/SIZE][/SIZE][/SIZE][URL="http://www.appinventor.mit.edu/"]MIT App Inventor[/URL]. [SIZE=4][SIZE=2][SIZE=3][SIZE=2]Als het de eerste keer is dat je Appinventor gebruikt , zal je de [I]PROJECT PAGE[/I] zien. Met geen enkel project erin.Zoals de afbeelding hieronder. [/SIZE][/SIZE][/SIZE][/SIZE][URL="http://imageshack.us/photo/my-images/823/projectsf.png/"][IMG]http://img823.imageshack.us/img823/7728/projectsf.png[/IMG][/URL] [B][U][SIZE=3] Aanmaken van een nieuw project [/SIZE][/U][/B][SIZE=3][SIZE=2] [/SIZE][/SIZE] [LIST=1] [*]klik op [B]"New"[/B] aan , links boven. [*]vul een nieuwproject naam in "[COLOR=#555555][FONT=arial]HelloPurr" in de dialoog box die verschijnt en druk op [B]"OK"[/B][/FONT][/COLOR] [/LIST] [COLOR=#555555][FONT=arial] [/FONT][/COLOR]De browser zal de designer openen , waar je componenten voor je app kan selecteren. [URL="http://imageshack.us/photo/my-images/803/designerl.png/"][IMG]http://img803.imageshack.us/img803/9633/designerl.png[/IMG][/URL] [B][U][SIZE=3] Selecteren van componenten die nodig hebt [/SIZE][/U][/B][SIZE=3][SIZE=2] Aan de linker kant staat vindt je het menu Palette. Daar vindt je de basis componenten voor je app. Om componenten te gebruiken is het gewoon slepen van de toepassing (drag&drop) naar het midden van de vieuwer. Wanneer dit gedaan wordt , verschijnt er rechts een extra menu . Daar kan men de eigenschappen van het geselecteerde component wijzigen. [B][U][SIZE=3]Stappen voor het selecteren en verandern van de eigenschappen[/SIZE][/U][/B][SIZE=3][SIZE=2] [/SIZE][/SIZE] We willen in "HelloPurr" een knop invoegen met afbeelding als eigenschap , bij deze een kat dus. Om dit te voltooien doen we het volgende ; [/SIZE][/SIZE] [LIST=1] [*]drag&drop de knop component naar screen 1 . De knop bevind zich onder palette , basis onderdelen. [*]in de menu eigenschappen , onder afbeelding , klik je op non. [*]klik op "add" [*]selecteer de kitty.png [*]verwijder [B]"[I]Text for Button1 "[/I][/B], staat onder tekst eigenschappen door gebruik te maken van backspace [/LIST] De designer zou er als volgt moeten uitzien [URL="http://imageshack.us/photo/my-images/338/designerwithkittybutton.png/"][IMG]http://img338.imageshack.us/img338/4799/designerwithkittybutton.png[/IMG][/URL] [B][U][SIZE=3] Open je Block editor en connecteer je smartphone[/SIZE][/U][/B][SIZE=3][SIZE=2] De [I]designer[/I] is één van de drie tools je nodig hebt voor het maken van apps. De tweede is de [I]block editor . [/I]De derde is je [I]smartphone[/I]. Je zal de [I]block editor[/I] gebruiken om aktie's toe te voegen een je componenten. De [I]block editor[/I] opend in een apart window scherm. Wanneer je [/SIZE][/SIZE][COLOR=#38761D][FONT=arial][B]Open the blocks editor [/B][/FONT][/COLOR]in de designer window klikt , zal automatch gedownload worden en geopend. [SIZE=3][SIZE=2]Dit kan 30sec duren. De [I]block editor[/I] ziet er als volgt uit. [/SIZE][/SIZE] [URL="http://imageshack.us/photo/my-images/542/blockseditorhellopurr.png/"][IMG]http://img542.imageshack.us/img542/2504/blockseditorhellopurr.png[/IMG][/URL] Voor dat we verder gaan [B]moet[/B] de smartphone aan de pc hangen met de usb kabel ! Zie deel van setup phone. Klik nu op [COLOR=#38761D][FONT=arial][B]Connect to device... [/B][/FONT][/COLOR]en selecteer je smartphone. Je zal nu een telefoon icoon zien met een gele pijl die beweegt van boven naar benenden.Dit kan 1 a 2 minuten duren. Wanner je telefoon is geconecteerd zal de pijl stoppen en naar graoen veranderen. Als kijkt naar je telefoon zal je de kat zien op het scherm. Hier begint de app. [SIZE=3]Einde deel 1. [/SIZE][URL="http://imageshack.us/photo/my-images/801/nextds.jpg/"][IMG]http://img801.imageshack.us/img801/7382/nextds.th.jpg[/IMG][/URL] [SIZE=3][B]Volgende keer het completen van de HelloPurr app. [/B][/SIZE] Grtz barre [SIZE=3][SIZE=2] [/SIZE][/SIZE] [SIZE=4][SIZE=2] [/SIZE] [/SIZE]

prachtig! Al gedaan, xD. barre heb je mijn PM gezien?

[QUOTE=Jwz-Swa;313509]prachtig! Al gedaan, xD. barre heb je mijn PM gezien?[/QUOTE] ???? neen nikske ontvangen