03/04/13

App inventor Tutorial programas

Appinventor
CmoprogramarlostelfonosmvilesconAndroidmedianteApp inventor. JuanAntonioVillalpando IESFco.RomeroVargas

micorreo:juana1991@yahoo.com)
I.E.S.Fco.RomeroVargas(JerezdelaFronteraCdiz)

PuedesvercmoubicarseenlosmapasdeGoogle medianteelGPSdeAndroid

QuesAndroid?
Androidesunsistemaoperativogratuitoqueutilizamuchostelfonosmvilesactuales(telfonosinteligentes=smartphone),estbasadoenLINUX. AndroidperteneceaGoogle. Cadaciertotiempoaparecennuevasversiones:1.5(Cupcake),1.6(Donut),2.0(Eclair),2.2(Froyo),2.3(Gingerbread),3.2(Honeycomb),IceCream Sandwich... TambinexistenotrossistemasoperativosparatelfonoscomoelSymbianOSyeliOS,peroenEspaaseestimponiendoelAndroid.(Vergrfico estadsticodecomoenEspaaseestimponiendoelAndroid) ElAndroidlopodemosprogramarfcilmenteyrealizarprogramasdefrmulasmatemticas,juegos,ubicacinenlosmapasdegoogle,moverunrobot medianteblutooth,contestacinautomticadesms,...

www.iesromerovargas.net/android/

1/18

03/04/13

App inventor Tutorial programas

SabermsdeAndroidenlaWikipedia. VertelfonosconAndroidenlapginadeOrange.

ParaaprenderaprogramarelAndroidnecesitoteneruntelfonomvilconAndroid? No.SolonecesitasunordenadoryconexinaInternet.Enelordenadorpuedeshacerlosprogramasyprobarlosenunemuladorinstaladoenel
mismoordenador. SitienesuntelfonomvilconAndroidpuedespasarlosprogramasrealizadosalmvilparavercmofuncionan.

QuprogramaseutilizaparaprogramarelAndroid?
Haytresformasprincipales: 1.ConAndroidSDKyEclipse.Serealizanlosprogramasescribiendocdigos.Eslaformaqueutilizanlosbuenosprogramadores.Puedesver ejemplosenestevdeo. 2.Medianteunaaplicacindepago(50aproximadamente)llamadaBASIC4Android,pararealizarprogramasdemaneraparecidaacomo sehaceconVisualBasic

IMPORTANTE:

siteinteresaestodehacerprogramassencillosparaAndroidconsultaestetutorialdeaprendizajee

iniciacinqueherealizado:pequeotutorialBASIC4Android. 3.MedianteAppinventor.Esunaformaintuitivadehacerprogramassituandoconvenientementelasinstruccionescomosifueranpiezasdeun puzzle.UtilizaremosAppinventorpararealizarnuestrosprogramas.LoquesnecesitasesestarconectadoaInternetparapoderutilizarelApp inventor. AppInventorapareciel12dejuliode2010,yseabriatodoelpblicoen15dediciembrede2010. Aprincipodeagostode2011Googleanunciqueyanomantendraestaaplicacin,peroquelaharacdigolibredestinadoalaeducacin. UnasemanadespuselInstitutoTecnolgicodeMassachusetts(MIT),unainstitucindeeducacinsuperiorprivadasituadaenCambridge, Massachusetts(EE.UU.),anunciqueseharacargodelproyecto. Verweb. El31dedicembrede2011AppInventordeGoogledejdefuncionar. El4demarzode2012,elInstitutoTecnolgicodeMassachusetts(MIT)volviaponerelproyectoenInternet.

Appinventor
ParaentraresnecesariotenerunacuentaenGoogle.

http://appinventor.mit.edu/ http://beta.appinventor.mit.edu

www.iesromerovargas.net/android/

2/18

03/04/13

App inventor Tutorial programas

Losprogramasserealizanmediantebloques,quesonunaespeciedepiezasdepuzzle. Notieneprogramafuenteescritoentexto.

DedndemebajoelAppinventor?
ElAppinventornoesunprogramaquetetengasquebajaralordenador.Funcionaencloudcomputing,elprogramafuncionamediantela conexinaInternet,tutrabajasconelprogramaconectadodirectamentealservidordeAppinventor.Escomounapginawebyenellarealizaslas operaciones.

ParaquefuncionenecesitastenerinstaladoJAVA.TambinnecesitasasociartucorreoaGoogle,estoserealizainmediatamentesindificultad.

www.iesromerovargas.net/android/

3/18

03/04/13

App inventor Tutorial programas

Entrasenlapgina... http://appinventor.googlelabs.com

http://beta.appinventor.mit.edu
Tepedirqueteautentifique,sinotienescuentadeGoogle,simplementeteregistrasconelcorreoquetengas,enmicasoconmicuentade yahoo.com.

New: paracrearunnuevoprograma. MoreActions:UploadSource:paracargarunprograma.Losprogramasestnenformatocomprimido.zip.Peroparacargarlosnotenemosque descomprimirlomanualmente,sinoqueelAppinventorselotragaenzip. MoreActions:DownloadSource: sihemosrealizadounprogramacomoelAdivinayqueremosguardarloennuestroordenador,lomarcamosy pulsamosDownloadSource.Seguardaenformato.zip Bajaatuordenadorelprogramaquevamosarealizar:Pitagoras.zip,yluegoveaMoreActions:DownloadSource: paracargarlo(nohace faltadescomprimirlo,djaloconel.zip) HayquetenerencuentaqueelprogramaquerealizamossecargarenelservidordeAppinventorenInternet. NOTA: ElInternetExplorerdaaveceserroresenlasubidaybajadadearchivos,espreferibleutilizarelChromedeGoogle. NOTA: Siquieresinstalarloentuordenador,tebajaselinstaladorysigueestospasos... http://beta.appinventor.mit.edu/learn/setup/setupwindows.html NOTA: Sisesaleelerror:"Pleaselocatethecommanddirectoryonyourcomputerandenterthefullpathbelow ",instalaelAppinventor: http://beta.appinventor.mit.edu/learn/setup/setupwindows.html Tambinesposiblequesalgaestemensajealabrirel"BlockEditor" Ejemplo:http://teach.appinventor.mit.edu/curriculum/hellopurr

Vamosavercomohecreadoelprogramadesdeelprincipio.Pitagoras.zip

www.iesromerovargas.net/android/

4/18

03/04/13

App inventor Tutorial programas

EnnuestrocasovaaserelteoremadePitgoras.Introducimoslosdoscatetosynosdarlahipotenusa. PulsamosNew.

Screen1eslapantalladenuestromvil. EnPaletteestnloselementosocomponentesquepodemosponerenlapantalladenuestromvil.Botones,casilleros,imagenes,etiquetas,... VamosaarrastraralapantallaScreen1: Unaetiqueta(Label1) Uncasillero(TexBox1) Otraetiqueta(Label2) Otrocasillero(TexBox2) Unbotn(Button1) Otraetiqueta(Label3)

www.iesromerovargas.net/android/

5/18

03/04/13

App inventor Tutorial programas

FjatealaderechaestnlasPropiedadesdecadaelemento... SimarcasLabel1,enladerechapuedesponerlanegrita(Bold),tamao(FontSize),eltextoquequieresqueaparezcaenesaetiqueta(Text) CadaciertotiempopulsaenbotnSave,paraguardarloscambiosquevayasrealizando...

Cmovaquedandoesto?OpentheBlocksEditor
SiconectamoselmvilmedianteUSBalordenadorypulsamosDownloadtoConnectPhonepasaramoselprogramaalmvil.

Peronosotrosqueremosutilizarelemuladorparavercomovaquedandoennuestroordenador,yademsannosquedaponerloscdigosdel programa,paraellopulsamosOpentheBlocksEditor. AbrimosypermitimosqueentreJAVA...

SitesalenestosmensajespulsasenDescargar,luegoAbrirelprogramaquehasdescargadoyloEjecutas.

www.iesromerovargas.net/android/

6/18

03/04/13

App inventor Tutorial programas

Saldrunapantallacomoladeabajo,perosinelcdigo. PulsamosenNewemulator(esperaunminutoquecarguetotalmente)yluegoenConnecttoDevice...emulator5554,pasapasarelprogramaque estamoshaciendoalemulador(esperaquecarguetotalmente). Sinosaleelprogramaenlapantalla,pulsaelbotndeabajodondeponeMEN.

www.iesromerovargas.net/android/

7/18

03/04/13

App inventor Tutorial programas

Sitesaleunapantallitanegraindicandoemulator:warning:openingaudioinputfailed,vasalAdministradordetareas(Ctrl+Alt+Supr)yterminala tareaadb.exe.

Vamosaverelcdigo...
Vamosautilizar3variablesnumricas:uncateto(x),otrocateto(y),lahipotenusa(z). Esasvariablestenemosquedeclararlas,paraellovamosaBuiltIn/Definition (Declararlassignificapresentarlasantesdequeelprogramacomience)

Sacamoslapiezavariable. Envariableponemosx Pulsamosdondeponeas luegoenMath yluegoen123paraindicarlequetrabajamoscon nmeros. Loponemosenelvalor1.

www.iesromerovargas.net/android/

8/18

03/04/13

App inventor Tutorial programas

Siteequivocasalponerunapieza,lapuedesborrarechndolaenlapapeleraqueapareceenlaparteinferiorderecha.

Yatenemoslastresvariablesnumricasconvalorinicial1. EnMyBlocksestnloselementosdelosquedisponemosenlapantallaylasvariablesquehemoscreado.

QueremosquecuandohagamosClickenelButton1,serealicelafrmuladelteoremade Pitgoras.
VamosaMyBlocks/Button1/ysacamosButton1.Click

DentrodeButton1.Click
TomamoselcontenidodelTextBox1.Textyloasignamosalavariablex TomamoselcontenidodelTextBox2.Textyloasignamosalavariabley Hacemoslaraizcuadrada(sqrt)dexelevadoa2msyelevadoadosyeseresultadoloasignamosaz PonemosenelLabel3.Textlaunin(join)de"Lahiponenusavale..."yelvalordez. LaspiezasdelasoperacionesmatemticaslastomamosdeBuiltIn LosTextBox,Label,ButtonylasvariablesestablecidaslastomamosdeMyBlocks Yalotenemos.Prubaloparavercmofunciona.

Mefuncionaenelemulador,ahoracmolopasoalmvil?

www.iesromerovargas.net/android/

9/18

03/04/13

App inventor Tutorial programas

ComoindiquanteriormentepulsamosenPackageforPhoney,obienloguardarmosennuestroordenador,serunarchivodelaformapitagoras.apk yluegoestearchivoporcableUSB,bluetooth,...lopasamosalmvil.ObienlopasamosdirectamentealmvilmedianteDowloadtoConnectedPhone. Tambinsepuedepasarmediantecdigodebarra.

________________________________________________________________

OtroPrograma

Adivinaelnmero.Adivina.zip
AhorasetratadehacerunprogramallamadoAdivina.zipdondepulsamosunbotn,enesemomentoelmvilcreaunnmeroaleatorio comprendidoentreel1yel100quedebemosadivinar. LuegointroducimosunnmeroenelcasilleroypulsamoselbotnEseste? Elprogramanosrespondersielnmerocreadoesigual,mayoromenorqueelquehemosintroducido. MetemosenlapantallaScreen1lossiguienteselementos:Button1,Label1,TextBox1,TableArrangement1,Label2yLabel3

Debesdeponerestoscomponentes...

Asescomoquedarelemulador...

Nota:LaLabel3noapareceporqueenhedesmarcadosuPropiedad Visible.

PulsamosenBlockEditorymontamosestepuzzledeinstrucciones...

www.iesromerovargas.net/android/

10/18

03/04/13

App inventor Tutorial programas

Explicacin:
Definimoslavariableordenadorcomonumrica Definimoslavariablemiocomonumrica. CuandohacemosClickenelButton1: Seasignaalavariableordenadorunnmeroaleatoriocomprendidoentreel1yel100 EnlaLabel3.Textapareceelnmerocreado(Estasdospiezasdelpuzzle,Label3.Text=ordenador,lasborraremosluegoparaqueno sepamoselnmerodelordenador) CuandohacemosClickenelButton2: SeleasignaalavariablemioelvalorqueelusuariodeljuegopongaenelText1.Text Sielnmerodelordenadoresmayorqueelmio,apareceenelLabel2.TextlafraseMinmeroesmayor Sielnmerodelordenadoresmenorqueelmio,apareceenelLabel2.TextlafraseMinmeroesmenor. Sielnmerodelordenadoresigualqueelmio,apareceenelLabel2.TextlafraseHASACERTADO. ________________________________________________________________

OtroPrograma

www.iesromerovargas.net/android/

11/18

03/04/13

App inventor Tutorial programas

RuletarusaRuleta.zip
VamosaverunprogramabasadoeneljuegodelaRuleta.ziprusa Enestecasotenemosunapistolapara6balas. PrimeroRearmamoslapistolaponiendounasolabalaygirandoeltambor.Labalaseubicaraleatoriamenteenunodelos6sitios. Luegovamospulsandodemaneradesordenadalosdistintosbotones. SielnmerodelugardelabalacoincideconelnmerodelBotnpulsado,lapantallasetiederojo Encasocontrariosedeshabilita(Button.Enabled=False)elbotnpulsado

Asescomoquedarelemulador...

Debesdeponerestoscomponentes...

Nota:LaLabel3noapareceporqueenhedesmarcadosuPropiedad Visible.

www.iesromerovargas.net/android/

12/18

03/04/13

App inventor Tutorial programas

CuandopulsamoselbotndeRearmar,Button7.Click,secreaunnmeroaleatoriodel1al6,sehabilitan(Enabled=True)todoslosbotonesysepone elfondodelapantallaenblanco. Cuandopulsamoscualquierbotn: Sielvalorxgeneradoaleatoriamenteenelrearmecoincideconelnmerodelbotn,seponelapantallaroja. Encasocontrario,sedeshabilitaelbotnpulsado.

OtroPrograma

TresigualesTresiguales.zip
SetratadepulsarelbotnComienzo,enesemomentostresimagenesfresa.gif,limon.gifypera.gif,sevanreproduciendoaleatoriamenteenlos cuadros(Image1,Image2yImage3).CuandopulsamoselbotnPara,lasimagenesquedanestticas,seincrementaenunoelnmerodeintentosyse compruebasilastresimagenessoniguales,enestecasoseincrementaenunoelnmerodeaciertos. FijatequeeneltemporizadorClock1hemospuestounTimeIntervalde200 Quelasimgenesquevamosautilizar(fresa.gif,limon.gifypera.gif)lahemosAadidoenelapartadoMedia.Aqutieneslosdibujosdelasfrutas.

Debesdeponerestoscomponentes... Asescomoquedarelemulador...

www.iesromerovargas.net/android/

13/18

03/04/13

App inventor Tutorial programas

www.iesromerovargas.net/android/

14/18

03/04/13

App inventor Tutorial programas

Declaramoslasvariablesnumricas. CadavezqueseactiveeltemporizadorClock1.Timer... Creamostresnmerosaleatoriosx,yyzdel1al3 Dependiendodelnmeroquesalgaydelavariableinsertamosundibujo EnbotnButton1.Clickesdeparada,cadavezquelopulsamosdeshabilitaeltemporizadorClock1.Timer=false,incrementamosenunolosintentosy losmostramosenelText1.Text,ademscomprobamossilosnmerosaleatoriosx,y,zsoniguales,enestecasoincrementaenunolosaciertosylos muestraenelText2.Text. ElButton2.ClickvuelveahabilitareltemporizadorClock1.Enabled=true ElButton3.Clickestablecelosvaloresinicialesyarrancaeltemporizador.

SubirlaaplicacinalPlayStoredeGoogle
(antessellamabaAndroidMarket(marzo2012)). Unvezconstruidanuestraaplicacin,lapodemossubiralPlayStoredeGoogle ,paraquecualquierpersonalapuedabajar.(Gratuitamenteode pago)

www.iesromerovargas.net/android/

15/18

03/04/13

App inventor Tutorial programas

Pero...
...parasubiraplicacionesalPlaydeGoogle,debemostenerunacuentadeDesarrollador,paratenerestacuentadebemosabonar25$( aproximadamente20). Entramosenestapginaynosdamosdealtaabonando25$decuotaderegistro.https://play.google.com/apps/publish/signup

Ademsdebemos"adaptar"nuestraaplicacin.apkalPlaydeGoogle ,paraellopodemosencontrarenInternetvariostutorialescomo lossiguientes,basadosenelprograma,AppToMarquet:http://amerkashi.wordpress.com/2011/02/14/automatingconversionofappinventorapkto googlemarket/

www.iesromerovargas.net/android/

16/18

03/04/13

App inventor Tutorial programas

http://www.tuappinvetorandroid.com/publicarnuestraaplicaci%C3%B3nenelandroidmarket/ http://www.crucialthought.com/2011/05/15/publishinganappinventorapptotheandroidmarket/ http://www.wikihow.com/PublishanAppInventorApplicationtotheAndroidMarket (TambinconsultarMarketizer)

Herramientaparadescompilarlosarchivosapk
http://code.google.com/p/androidapktool/

Enpantallacompleta
IntheAndroidManifest.xml[1],addsupportsscreens[2].Thatwillallowthe apptofillthescreenasexpected,andifyouwanttoalsogetridof thetitlebar,thentheactivityelementshouldhaveattribute android:themesetto"@android:style/Theme.NoTitleBar.Fullscreen"[3] 1YoucanaccesstheAndroidManifest.xmlfileintheAPKwithandroid apktoolusingcommand`./apktoolvd../AccelerometerBall.apk` 2http://developer.android.com/guide/topics/manifest/supportsscreenselement.html 3http://www.vogella.de/blog/2011/02/28/androidhiddingthestatusandtitlebar Paraquitarlabarradenotificacinydettulo: 1.Bajamosapktoolhttp://code.google.com/p/androidapktool/(bajamosapktoolyapktoolinstallwindows,lodescomprimimosylostresarchivos aapt.exe,aptool.jaryaptool.batlocopiamosennuestracarpetaC:\Windows)(Vamosalsmbolodesistema) 2.Bajamosnuestraaplicacinenpaquete.apkdesde:DownloadtothisComputer(arribaderechadelappinventor) 3.Descompilamos.apkmediante apktooldprograma.apk 4.CambiamoselarchivoAndroidManifiest.xml aadimoslalneaandroid:theme="@android:style/Theme.NoTitleBar.Fullscreen" <?xmlversion="1.0"encoding="utf8"?> <manifestandroid:versionCode="1"android:versionName="1.0"package="appinventor.ai_juana1991.Pantalla_completa" xmlns:android="http://schemas.android.com/apk/res/android"> <usespermissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <usespermissionandroid:name="android.permission.INTERNET"/> <applicationandroid:label="Pantalla_completa"android:icon="@drawable/ya"android:debuggable="false"> <activityandroid:name=".Screen1"android:configChanges="keyboardHidden|orientation"android:windowSoftInputMode="stateHidden" android:theme="@android:style/Theme.NoTitleBar.Fullscreen"> <intentfilter> <actionandroid:name="android.intent.action.MAIN"/> <categoryandroid:name="android.intent.category.LAUNCHER"/> </intentfilter> </activity> <activityandroid:name="com.google.appinventor.components.runtime.ListPickerActivity"android:screenOrientation="behind" android:configChanges="keyboardHidden|orientation"/> <activityandroid:name="com.google.appinventor.components.runtime.WebViewActivity"android:screenOrientation="behind" android:configChanges="keyboardHidden|orientation"> <intentfilter> <actionandroid:name="android.intent.action.MAIN"/> </intentfilter> </activity> </application> </manifest> 5.Volvemosacompilarelproyecto apktoolb<Directorio_donde_se_encuentar_el_proyecto><otro_directorio\programa.apk> PuedesvercmoubicarseenlosmapasdeGooglemedianteelGPSdeAndroid

www.iesromerovargas.net/android/

17/18

03/04/13

App inventor Tutorial programas

Cmoenviarsmsgratis?
Estosehaceconmjoy.Tevascontumvilaunazonaquetengawifiytedasdealtaenmjoy,podrsenviarsmsgratisacualquiertelfonomvil.Mjoy tambnlopuedesinstalarenelordenador. Conunpreciodeunos2,5cntimosestCherrySMS(PuedesenviarSMSdesdeelmvilodesdeelordenador)

MequierocomprarunmvilconAndroid,culmecompro?
Enestosmomentos,agosto2011,(coneltiempocambianlascaractersticasdelosmvilesylasofertas)tepongodosejemplos... Sitienesunmvilantiguocontarjetadeprepago,puedeshacerlamigraciongratuitaaVodafone,elmvilSamsumgGalaxyACEtesale39.Elpago mensualde24.Puedesllamar150minutosalmesgratuitamentes(gratisestablecimientodellamadaytiempodellamada).TienesInternetgratuitoy bajartetodoloquequieras,losprimeros150MBquebajesserndebajadarpidayapartirdeahserbajadamslenta,perosiempretendrsInternet gratuito.18mesesdepermanencia.(EnOrangetienes100minutosgratuitosde18ha6h.) Otramaneraescomprateunmvillibre,porejemploelSamsungGalaxyACEcuestaunos240.LuegotedasdealtaenSIMYOconlatarifa3 cntimos.Conestatarifacadaestablecimientodellamadavale18cntimosycadaminuto4cntimos.PuedesnavegarporInternetgratuitohastaun trficosubida/bajadade500MB.Yelpagomensualesde8,20.Puedesdartedebajacuandoquieras,nohaypermanencia. Otrabuenaopcinespepephone.Enagostode2012Yoigo,tienelafamosaTarifadeldos,quepor10,60almestienes1Gdetrficodeinternet, aunquetodaslasllamadasdevozsondepago. Sitienesuntelfonolibrelasmejoresopcionessonprimeropepephone,segundosimyoyterceroyoigotarifadeldos.

Hayalgnplanenelquenotengaquepagarmensualidad?
ConsultalawebdeSIMYO.Hayunplanllamado0/8endondenotienesquepagarcuotamenual,solopagasloquellames(18cntimos establecimientodellamada+9cntimoselminuto,ademspuedesnavegarporinterneta4cntimoselmega).Deestamaneranotienesque preocupartedequetumvildeprepagonotengasaldo.Elpagosehacemediantetunmerodecuentabancaria.Ademssillamasdeuntelfonocon SIMYOaotrotambinconSIMYO,losprimeros10minutossongratis!!! Seraunabuenaopcinteneruntelfonosencilloconlatarifa0/8deSIMYOyotrotelfonodelosinteligentes(smart)conAndroidconlatarifa3cntimos deSIMYO,deestamanerapor8,20mensuales,ospodis"jatar"dehablarentrelosdosynavegarconeldeAndroid. NOTA:lasopcionesdecompaasytarifasanterioressolosonreferencias,yaquecambianperidicamente.

Siquieresqueestetutorialsemantengayloactualiceconms programas,escrbemeuncorreoa:juana1991@yahoo.com
1.599.061

www.iesromerovargas.net/android/

18/18