✅ Разработвайте приложения за Android с App Inventor 2

Съдържание

1. Инсталиране на App Inventor 2
2. Стартиране на App Inventor 2
3. Първо приложение в App Inventor 2
4. Второ приложение в App Inventor 2

App Inventor 2 е платформа, която ни позволява позволява разработването на софтуерни приложения за Android, Това е творение на Google Labs, тук можем да визуализираме проектите, в които работим с различни видове основни инструменти, едно от големите предимства, които носи App Inventor 2, е, че потребителят може да свърже поредица от блокове, за да създаде приложението . Тази система е напълно безплатно и лесно изтегляне от вашия собствен уебсайт. Приложенията, които можем да създаваме в App Inventor, са донякъде ограничени от тяхната простота, въпреки че тук също можем да прекараме много време в разработването на безкрайни приложения за основни устройства с Android.

С Google App Inventor беше демонстрирана голяма простота на използване, която улесни появата на голям брой нови приложения; В днешно време има много потребители, които разработват приложения в центъра за разпространение на приложения за Android благодарение на това.

Какво ни позволява App Inventor 2?Създавайте приложения за устройства, които имат система с Android, използвайки уеб браузър и свързан телефон или емулатор. Сървърите на App Inventor съхраняват вашата работа и следят вашите проекти.

Това е много лесен за използване инструмент за визуално развитие, така че много от потребителите на този инструмент не са чисто програмисти.

С какво изграждаме нашите приложения в App Inventor 2?App Inventor Designer е приложението, използвано за избор на компоненти за App Inventor, предлага ни палитра, която съдържа голям брой инструменти, с които можете да работите с голяма простота.

App Inventor Blocks Editor ни позволява да свържем различните типове блокове, с които можем да дефинираме функциите на това, което проектираме в нашето приложение. Едно от предимствата е простият и визуален начин да покажем работата, която вършим, под формата на пъзел.

Лесно ли е да се създават приложения с App Inventor 2?Различните приложения, които се появяват с течение на времето на устройства с Android, ни показаха, че има изобилие от приложения, в които можем да работим, независимо дали са основни или сложни. Приложението Inventor 2 ни позволява да работим с простота, което означава, че не е нужно да сте програмист, за да работите в среда с голяма простота работа с палитра от инструменти или набор от блокове, с които можем да се справим практически като пъзел игра. На всичкото отгоре, след завършване на вашия проект, можете да опаковате приложението си и да създадете отделно приложение за инсталиране.

Друго предимство, което ви предлага, е, че не е задължително да имате телефон с операционна система Android, тъй като от страницата App Inventor можете да изтеглите софтуер, наречен aiStarter, който ще ви позволи да го подражавате от вашия компютър.

Как да получите достъп до App Inventor 2?За достъп, първото нещо, което трябва да направите, е да се регистрирате в App Inventor, като използвате своя Gmail акаунт. Важно е да знаете, че този процес е напълно безплатен.

Изисквания към системата, устройството или браузъра

Операционна система

Macintosh: Mac OS X 10.5 или по -нова версия.
Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 или по -нова версия, Debian 5 или по -нова версия

Браузъри

Mozilla Firefox 3.6 или по -нова
Apple Safari 5.0 или по -нова версия
Google Chrome 4.0 или по -нова версия
Microsoft Internet Explorer не го поддържа

Телефони и таблетни устройства

Операционна система Android 2.3 („Gingerbread“) или по -нова

1. Инсталиране на App Inventor 2

На първо място трябва да знаем това Приложението Inventor 2 ви позволява да проектирате и редактирате на блокове както вече споменахме и всичко това работи във вашия браузър. Но за да тестваме това, върху което работим (Тествайте го на живо), имаме три възможности, докато изграждаме нашето приложение:

Опция 1Най -препоръчаната от страницата на appinventor е, ако имате устройство, което използва android и имате безжична интернет връзка (WiFi), можем да работим само като инсталираме приложението App Inventor на нашето устройство с Android.

Вариант 2Вторият вариант е да инсталирайте софтуера на нашия компютър за да можем да използваме емулатора на android и да тестваме нашите приложения, докато ги изграждаме.

Вариант 3При този вариант той е най -сложният и тромав; Ако нашата операционна система е Windows и имаме Android устройство, но нямаме безжична мрежа (WiFi), можем инсталирайте софтуера на нашия компютър и свържете нашето устройство с Android чрез USB. На страницата можем да видим как тази опция се използва в краен случай поради очевидната й сложност.

След като знаем различните опции, които имаме при инсталирането на App Inventor 2, ще обясня стъпка по стъпка как да изпълнявам всяка от тези опции:

Опция 1: Свързване на App Inventor 2 към вашето устройство с Android чрез безжична връзка (WiFi)

Етап 1
Изтеглете и инсталирайте приложението MIT AI2 Companion на вашето Android устройство. В тази опция ще трябва само да потърсите в устройството си с Android приложението „MIT AI2 Companion“ от PlayStore, да го изтеглите и инсталирате или да го изтеглите директно от APK файла. Най -препоръчително е да го изтеглите от PlayStore, тъй като ако изтеглим APK файла, ще трябва да активираме в конфигурацията на нашето устройство с Android опцията за разрешаване на инсталирането на приложения от неизвестни източници. Тази опция може да бъде намерена във версии на Android преди 4.0, за това ще направим Настройки> Приложения и поставете отметка в квадратчето " Неизвестни източници". За устройства с Android 4.0 или по -нова версия трябва да отидете на Настройки> Защита или Настройки> Защита и заключване на екранаи изберете „Неизвестни източници".

Тук оставям съответните QR кодове, за да го изтеглите от Playstore или директно като APK файл, ако имате нужда от QR скенер, можем да го потърсим в Playstore.

Магазин за игри

APK файл

ЗабележкаИмайте предвид, че ако го изтеглите от PlayStore, той ще се актуализира автоматично и ако използваме опцията за директно изтегляне, ще трябва да го актуализираме ръчно.

Стъпка 2
Свържете вашия компютър към същата WiFi мрежа като вашето Android устройство. App Inventor ще показва приложението, което изграждате автоматично, само ако App Inventor работи на вашия компютър и ако Companion работи на вашето устройство Android и тези 2 са свързани към една и съща Wi-Fi мрежа.

Стъпка 3
Как да свържем проекта, по който работим, с нашето устройство с Android. Отиваме на страницата App Inventor и отваряме проекта, с който ще работим, избираме "Connect" и "Al Companion" в главното меню.

Той ще ни покаже диалогов прозорец с QR код, търсим нашето устройство, стартираме приложението MIT App Companion и след това кликваме върху бутона „Сканиране на QR код“ и сканираме кода:

След като изчакаме няколко секунди, би трябвало да можем да видим проекта, по който работим, и той ще бъде актуализиран според промените, които правим в него.

Вариант 2 и 3: Инсталирайте App Inventor на нашия компютър с операционна система Windows
Тук инсталацията е еднаква и в двата случая.

Етап 1
Първото, което трябва да направим, е да изтеглите инсталатора MIT_App_Inventor_Tools_2.3.0_win_setup.exe Можем да направим това, като влезем в следната връзка. След като изтеглите инсталатора, го стартираме.

Ще се появи този прозорец, ще кликнете върху Напред>.

След това ще приемем лицензионното споразумение, като щракнем съгласен съм.

Стъпка 2
Избираме дали искаме да инсталираме програмата само за един потребител или за всички потребители и кликваме върху Напред>.

Избираме компонентите, които искаме да инсталираме, и кликваме върху тях Напред>.

Избираме къде ще го инсталираме и кликваме Напред>.

Стъпка 3
Избираме началната папка и натискаме Инсталирай.

Изчакваме няколко секунди, за да инсталирате MIT App Inventor Tools 2.3.0.

След като процесът на инсталиране приключи, можем да кликнете завършек и с това ще завършим инсталацията.

Стъпка 4
Да оставяме избраната опция Стартиране на aiStarter сега Трябва да се появи прозорец aiStarter, където той ще посочи в първия ред операционната система, в която работим, във втория ред, където се намира папката, където е инсталирана, в третия ред сървъра, на който работи, в четвъртия ред намерете IP адреса, където приложението е активно. За да затворите изпълнението на aiStarter, натиснете Ctrl + C.

ЗабележкаAiStarter трябва да се стартира всеки път, когато ще работим с App Inventor 2. Ако не използваме WiFi безжичната мрежова връзка, иконата aiStarter трябва да се появи на работния плот след инсталацията.

2. Стартиране на App Inventor 2

Първа стъпка
Първо трябва да стартираме aiStarter, като кликнете върху иконата, която се намира на работния плот.

Това ще стартира прозореца на aiStarter.

Втора стъпка
След стартиране на aiStarter отиваме на страницата с приложения и кликваме върху Създаване на приложения!

Той ще ви помоли да получите достъп до вашия акаунт в Gmail. След това той ще ни поиска разрешенията за достъп до нашия акаунт, тук избираме Позволявам. След това ще ни покаже условията на услугите. Ние приемаме условията и след това той ще ни попита дали искаме да попълним анкета и тогава той ще ни приветства. Кликваме върху продължи.

Ако искаме, за да улесним всичко, можем да изберем езика, преди да започнем да правим първата си връзка.

Трета стъпка
Сега ще започнем нов проект.

Ние даваме име на този нов проект, в моя случай аз ще му дам Test_1 и ние приемаме.

Той автоматично ще ни отведе до току -що създадения проект и ще ни покаже инструментите и какво ще използваме.

Четвърта стъпка
Сега, когато ще стартираме емулатора, ще направя само просто приложение, което показва етикет с типичния „Hello world“, за това плъзгаме етикет от палитрата и променяме съдържащия го текст в Hello world.

Ще използваме емулатора, за това ще направим Свързване> Емулатор.

Той ще се свърже и ще ни каже да изчакаме няколко секунди, следваме инструкциите, които ще ни даде по -долу.

Тъй като за първи път използваме емулатора, той ще поиска да го актуализираме и ще ни покаже в емулатора, ако искаме да инсталираме актуализацията.

След като инсталираме, кликваме върху „готово“ и рестартираме връзката, както се казва в инструкциите.

След като връзката бъде рестартирана, стартираме емулатора и той трябва да ни покаже проекта, по който работим, както можете да видите на следното изображение.

След като извършим всички тези стъпки, ще актуализираме емулатора и всички наши проекти, по които работим, могат да се видят на екрана на емулатора.

ЗабележкаПрепоръчвам, преди да започнем какъвто и да е проект, да се уверим, че сме стартирали aiStarter, за да нямаме никакви проблеми при тестването на нашите приложения и е необходимо той да се изпълнява преди изпълнението на емулатора на страницата.

3. Първо приложение в App Inventor 2

Сега, когато имаме всичко готово, можем да започнем да работим по него. App Inventor, тогава ще ви покажа как да се разработят някои прости приложения което ще ни помогне да имаме база за разработване на собствени приложения за Android.

Етап 1
Ще започнем с разработването на основен калкулатор, който ни позволява да изпълняваме типични математически функции като събиране, изваждане, умножение и разделяне.

За това първо ще го направим Проекти> Моите проекти. Там щракваме върху стартиране на нов проект, ще дам име на този проект Calculadora_Basica и натиснете бутона OK.

Това ще ни пренасочи към зоната за проектиране, където ще работим с нашия проект, първото нещо, което ще направим, е да добавим четири бутона, като ги плъзнем от палитрата, която се намира отляво.

Стъпка 2
Сега ще променим текста на всеки от бутоните, като избираме компоненти един по един и променяме текста в неговите свойства. Както можем да видим, има свойства по подразбиране, които бутонът, който избираме, има, тук можем да променим начина, по който искаме да бъде бутонът. За момента ще се огранича само до промяна на текста.

След като промените текста, веднага трябва да забележите промените в бутона, който променяме в зрителя.

Стъпка 3
Сега, от естетически причини, ще използвам хоризонтално подреждане, за да организирам бутоните, които сме променили преди това. Ще открием това в палитрата, като кликнете върху оформлението и плъзнете хоризонталното оформление към зрителя.

Стъпка 4
Сега ще добавим нашите бутони един по един към хоризонталното ни оформление. Трябва да имаме нещо подобно:

Стъпка 5
След това добавяме 2 текстови полета, където е ще въведем необходимите числа, за да извършим нашите основни операции на събиране, изваждане, умножение и деление. Освен това ще добавим и етикет, който да показва резултата от нашите операции. Етикетът и текстовите полета могат да бъдат намерени в палитрата, като щракнете върху потребителския интерфейс. В края трябва да имаме нещо подобно на следното изображение:

Стъпка 6
Ние ще "Блокове”За да започнете да конфигурирате функциите на нашите бутони. За да отидете, просто трябва да кликнете върху блокове в дясната страна на екрана до бутона Дизайнер.

Тя трябва да ни насочи към инструмента за преглед на блокове, където можем да видим различните видове блокове, които можем да използваме за нашите приложения. Засега ще трябва само да използваме вградените бутони, за да определим каква функция изпълняват при натискане на всеки от тях.

За да определим действието, което всеки бутон изпълнява, първо ще започнем с button1, който в моя случай промених текста на знака плюс (+) и искам да дефинирам, че всеки път, когато се натисне, той добавя сумите, които са в текстово поле 1 и текстово поле 2, за това започваме с щракване върху button1, след това избираме „когато button1 щракнете върху изпълнение“ и го плъзнете към нашия зрител, той трябва да изглежда така:

Стъпка 7
След това добавяме Label1, кликваме върху Label1 и плъзгаме „постави Label1 текст като“ към зрителя и го свързваме с „изпълнение“. Трябва да е така.

Стъпка 8
Сега нека добавим функцията за добавяне, за това кликваме върху Math и плъзгаме връщане на сумата от две числа и я свързваме с блока с етикети.

По късно Ще добавим текстовите полета, като изберем TextField1, търсим "TextField1 Text" и го плъзгаме, за да го свържем с блока за суми. Първото място за текстовото поле1 и за второто поле текстовото поле2. Извършването на същия процес трябва да е нещо като следното изображение:

Стъпка 9
Сега повтаряме процесите, които сме извършили с всеки бутон, само променяйки математическите операции на всеки, в крайна сметка трябва да имаме нещо подобно:

И накрая е време да тестваме нашето приложение, в моя случай ще го тествам в емулатора за компютър. Проверяваме как е било нашето приложение, можем да тестваме дали всеки от бутоните работи и дали изпълняват възложените им функции. На следното изображение можете да видите разделение.

С това приключваме първото си просто мобилно приложение с математически операции.

4. Второ приложение в App Inventor 2

Сега ще направим приложение, което ни позволява да запазваме и преглеждаме данни от база данни tyniDB. TyniDB е лека база данни, написана на чист Python и няма външни зависимости.

Етап 1
Първото нещо, което ще направим, е да създадем нов проект, който ще го наречем List_BD:

Стъпка 2
В него ще добавим две хоризонтални разпоредби; В първия от тях добавяме етикет и текстово поле, във втория добавяме два бутона, трябва да имаме нещо подобно:

Стъпка 3
Ще изберем всяка от разпоредбите, като в свойствата ще променим ширината, за да пасне на контейнера. В допълнение към това избираме етикет и променяме текста, за да въведем данни, а в бутоните ще го извикаме „Нов запис“ и второто „запазване“ трябва да са така:

Стъпка 4
Сега ще добавим преглед на списъци в долната част, към който в свойствата ще изберем опцията за ширина, която отговаря на контейнера и на височина ще поставим 300px, ще имаме нещо подобно:

Стъпка 5
Нека добавим нашата база данни TinyDB, намерена на палет> съхранение и плъзгаме TinyBD към нашия преглед на списъци, така:

Стъпка 6
Сега ще преминем към блокове и първото нещо, което ще направим, е да добавим глобална променлива от тип текст. За това първо ще го направим блокове> вградени> променливи и оттам плъзгаме „инициализирай глобално като“ и след това отиваме към текст in блокове> вграден> текст, плъзгаме текстовия низ и го свързваме с „инициализира глобално“.

Стъпка 7
Ще конфигурираме какво действие ще извърши бутонът, който наричаме нов запис, който ще изпълни функцията да поставим текстовото поле в бяло, за това ще блокове> Хоризонтално оформление2> Бутон1 и плъзгаме, когато Button1 щракне към нашия блок за преглед на блокове, след това отиваме на блокове> HorizontalArriage1> TextField1, плъзгаме пускане на TextField1.Text as, свързвайки го с whenButton1.Clic и накрая търсим текстов низ и го свързваме с "TextField1.Text as", което води до следното изображение:

Стъпка 8
Сега ще конфигурираме нашия бутон Запазване, за да добавим данни към нашия списък, за това търсим нашия бутон 2 и го плъзгаме към нашия зрител. След това отиваме на Блокове> Списък> добавяне елемент към списъка и където пише списък, ние се свързваме с думите, които са в Блокове> Променливи> Вземи и го свързваме, като щракнете, за да изберете данните от глобалния списък. И накрая, където елементът се появява в нашия блок, за да добавим елемент към списъка, поставяме блок от нашия TextBox1. Текстът трябва да изглежда така:

Стъпка 9
Сега ще добавим стойностите към нашата база данни, за това първото нещо, което трябва да направим, е да потърсим Блокове> Екран1> TinyBD, плъзгаме обаждане TinyBD1.SaveValue и го свързваме с нашия блок Button2, последван от това, в етикета, поставяме това, което ще запишем, в този случай ще запазим само имена, за това търсим текстов блок, свързваме го в етикета и поставяме Име, след това поставяме стойността за запазване, така че да я вземе от глобалния списък, както направихме в блока за добавяне на елементи.

Стъпка 10
Просто трябва да го покажем в инструмента за преглед на списъци, за това го свързваме с Button2, към който ще отидем Блокове> Екран1> ListViewer1 и плъзгаме put ListViewer1.Elements докато свързваме, вземат глобален List, показващ нещо подобно:

Стъпка 11
Както си спомняме, най -доброто нещо при наличието на база данни е, че можете да затворите приложението си и данните, които сте записали там, ще бъдат съхранени, достъпни за стартиране на нова сесия. За да направим това, ние ще се уверим, че когато Screen1 стартира, базата данни се добавя отново към списък и тя се появява отново в инструмента за преглед на списъци.

За да направим това, просто трябва да отидем при Блокове> Екран1 и плъзнете блока "когато Screen1.initialize за изпълнение" в нашия блок за преглед на блокове и към това ще свържем променливата "пусна", намерена в Блокове> Интегрирани> Променливи, плъзгаме „пусна“ и в този блок избираме глобален списък към това, което ще свържем от TinyBD1 „обадете се на TinyBD1. GetValue ”, в етикета ще добавим текстовия блок, към който ще поставим Име и в Стойност, ако етикетът не съществува, създаваме празен списък, който е намерен ин Блокове> Списък> Създайте нов празен списък. С това получаваме, че всички данни се записват в нов списък.

За да ни покажат данните в инструмента за преглед на списъци, това, което трябва да направим, свързва „когато Screen1.initialize“ с „Set ListView1.Elements as“, което от своя страна е свързано с „Take global List“, както направихме в предишния блок.