✅ App Inventor 2 ile Android uygulamaları geliştirin

İçindekiler

1. App Inventor 2'yi Yükleme
2. App Inventor 2'yi Çalıştırma
3. App Inventor 2'deki ilk uygulama
4. App Inventor 2'de ikinci uygulama

App Inventor 2, bize izin veren bir platformdur. Android için yazılım uygulamaları geliştirmeye izin verir, Bu, Google Labs'in bir eseridir, burada farklı türde temel araçlarla çalıştığımız projeleri görselleştirebiliriz, App Inventor 2'nin getirdiği en büyük avantajlardan biri, kullanıcının uygulamayı oluşturmak için bir dizi bloğu bağlayabilmesidir. . Bu sistem tamamen ücretsiz ve kendi web sitenizden kolayca indirilebilir. App Inventor'da oluşturabildiğimiz uygulamalar basitlikleri ile sınırlıdır, ancak burada ayrıca temel Android cihazlar için sonsuz uygulamalar geliştirmek için çok zaman harcayabiliriz.

Google App Inventor ile büyük bir kullanım basitliği gösterildi ve bu da bir görüntünün görünümünü kolaylaştırdı. çok sayıda yeni uygulama; Günümüzde bu sayede Android uygulama dağıtım merkezinde uygulama geliştiren bir çok kullanıcı bulunmaktadır.

App Inventor 2 ne yapmamızı sağlar?Bir web tarayıcısı ve bağlı bir telefon veya öykünücü kullanan bir Android sistemine sahip cihazlar için Uygulamalar oluşturun. App Inventor sunucuları, çalışmalarınızı depolar ve projelerinizi takip eder.

Kullanımı çok kolay bir görsel geliştirme aracıdır, bu aracın kullanıcılarının çoğu tamamen programcı değildir.

App Inventor 2'de uygulamalarımızı neyle oluşturuyoruz?App Inventor Designer, App Inventor bileşenlerini seçmek için kullanılan bir uygulamadır, bize büyük bir basitlikle çalışabileceğiniz çok sayıda araç içeren bir palet sunar.

App Inventor Blocks Editor, uygulamamızda tasarladığımızın işlevlerini tanımlayabileceğimiz farklı blok türlerini birbirine bağlamamıza olanak tanır. Avantajlarından biri, yaptığımız işi bir bulmaca şeklinde göstermenin basit ve görsel yoludur.

App Inventor 2 ile uygulamalar oluşturmak kolay mı?Android cihazlarda zaman içinde ortaya çıkan farklı uygulamalar, ister basit ister karmaşık olsun, üzerinde çalışabileceğimiz çok sayıda uygulama olduğunu bize göstermiştir. Inventor 2 uygulaması, basit bir şekilde çalışmamıza olanak tanır; bu, çok basit bir ortamda çalışmak için programcı olmanıza gerek olmadığı anlamına gelir. bir araç paleti veya işleyebileceğimiz bir dizi blokla çalışmak pratikte bir bulmaca oyunu gibi. Üstelik projenizi tamamladıktan sonra uygulamanızı paketleyebilir ve kurmak için ayrı bir uygulama üretebilirsiniz.

Size sunduğu bir diğer avantaj ise Android işletim sistemine sahip bir telefonunuz olması gerekmez, çünkü App Inventor sayfasından, aiStarter adlı yazılımı PC'nizden taklit etmenize izin verecek bir yazılım indirebilirsiniz.

App Inventor 2'ye nasıl erişilir?Erişmek için yapmanız gereken ilk şey, Gmail hesabınızı kullanarak App Inventor'a kaydolmaktır. Bu işlemin tamamen ücretsiz olduğunu bilmek önemlidir.

Sistem, cihaz veya tarayıcı gereksinimleri

İşletim sistemleri

Macintosh: Mac OS X 10.5 veya üstü.
Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 veya üzeri, Debian 5 veya üzeri

tarayıcılar

Mozilla Firefox 3.6 veya üstü
Apple Safari 5.0 veya üzeri
Google Chrome 4.0 veya üzeri
Microsoft Internet Explorer bunu desteklemiyor

Telefonlar ve Tablet cihazlar

Android İşletim Sistemi 2.3 ("Gingerbread") veya üzeri

1. App Inventor 2'yi Yükleme

Her şeyden önce şunu bilmeliyiz Inventor 2 uygulaması, bloklar halinde tasarlamanıza ve düzenlemenize olanak tanır daha önce de belirttiğimiz gibi ve tüm bunlar tarayıcınızda çalışır. Ancak üzerinde çalıştığımızı test etmek için (Canlı test edin) uygulamamızı oluştururken üç seçeneğimiz var:

seçenek 1Appinventor sayfasının en çok önerdiği, android kullanan bir cihazınız varsa ve kablosuz internet bağlantınız (WiFi) varsa, sadece Android cihazımıza App Inventor uygulamasını yükleyerek çalışabiliriz.

seçenek 2İkinci seçenek ise yazılımı bilgisayarımıza yükleyin android öykünücüyü kullanabilmek ve uygulamalarımızı oluştururken test edebilmek.

Seçenek 3Bu seçenekte en karmaşık ve hantal olanıdır; İşletim sistemimiz Windows ise ve android cihazımız varsa ancak kablosuz ağımız (WiFi) yoksa, yazılımı bilgisayarımıza yükleyin ve Android cihazımızı USB üzerinden bağlayın. Sayfada, bariz karmaşıklığı nedeniyle bu seçeneğin son çare olarak nasıl kullanıldığını görebiliriz.

App Inventor 2'yi kurarken sahip olduğumuz farklı seçenekleri öğrendikten sonra, bu seçeneklerin her birinin nasıl gerçekleştirileceğini adım adım açıklayacağım:

seçenek 1: App Inventor 2'yi kablosuz bağlantı (WiFi) aracılığıyla Android cihazınıza bağlama

Aşama 1
MIT AI2 Companion uygulamasını Android cihazınıza indirin ve yükleyin. Bu seçenekte, Android cihazınızda PlayStore'dan “MIT AI2 Companion” Uygulamasını aramanız, indirip kurmanız veya doğrudan APK dosyasından da indirebilirsiniz. En çok tavsiye edilen şey, onu PlayStore'dan indirmektir, çünkü APK dosyasını indirirsek, Android cihazımızın yapılandırmasında bilinmeyen kaynaklardan uygulamaların yüklenmesine izin verme seçeneğini etkinleştirmemiz gerekir. Bu seçenek 4.0'dan önceki Android sürümlerinde bulunabilir, bunun için Ayarlar> Uygulamalar ve kutuyu işaretleyin " Bilinmeyen kaynaklar". Android 4.0 veya üstü olan cihazlar için şuraya gitmeniz gerekir: Ayarlar> Güvenlik veya Ayarlar> Güvenlik ve Ekran kilidiseçin ve "Bilinmeyen kaynaklar".

Burada Playstore'dan veya doğrudan bir APK dosyası olarak indirmek için ilgili QR kodlarını bırakıyorum, bir QR tarayıcıya ihtiyacınız varsa Playstore'da bir tane arayabiliriz.

Oyun mağazası

APK dosyası

NotPlayStore'dan indirirsek otomatik olarak güncelleneceğini ve doğrudan indirme seçeneğini kullanırsak manuel olarak güncellememiz gerekeceğini dikkate alın.

Adım 2
PC'nizi Android cihazınızla aynı WiFi ağına bağlayın. App Inventor, oluşturduğunuz uygulamayı yalnızca bilgisayarınızda App Inventor çalışıyorsa ve Companion Android cihazınızda çalışıyorsa ve bu ikisi aynı Wi-Fi ağına bağlıysa otomatik olarak gösterecektir.

Aşama 3
Üzerinde çalıştığımız projeyi Android cihazımıza nasıl bağlayabiliriz. App Inventor Sayfasına gidiyoruz ve çalışacağımız projeyi açıyoruz, ana menüden "Connect" ve "Al Companion" seçiyoruz.

Bize QR kodlu bir diyalog gösterecek, cihazımızı arıyoruz, MIT App Companion uygulamasını çalıştırıyoruz ve ardından butona tıklıyoruz. "QR kodunu tarayın" ve kodu tarıyoruz:

Birkaç saniye bekledikten sonra üzerinde çalıştığımız projeyi görebilmeliyiz ve üzerinde yaptığımız değişikliklere göre güncellenecektir.

Seçenek 2 ve 3: App Inventor'ı işletim sistemli bilgisayarımıza kurun pencereler
Burada kurulum her iki durumda da aynıdır.

Aşama 1
İlk önce yapmamız gereken yükleyiciyi indirmek MIT_App_Inventor_Tools_2.3.0_win_setup.exe Bunu aşağıdaki bağlantıya erişerek yapabiliriz. Yükleyiciyi indirdikten sonra çalıştırıyoruz.

Bu pencere görünecek, üzerine tıklayacağız Sonraki>.

Ardından, tıklayarak lisans sözleşmesini kabul edeceğiz. Kabul ediyorum.

Adım 2
Programı sadece bir kullanıcı için mi yoksa tüm kullanıcılar için mi kurmak istediğimizi seçiyoruz ve üzerine tıklıyoruz. Sonraki>.

Yüklemek istediğimiz bileşenleri seçiyoruz ve tıklıyoruz. Sonraki>.

Nereye kuracağımızı seçiyoruz ve tıklıyoruz. Sonraki>.

Aşama 3
Ana klasörü seçiyoruz ve Düzenlemek.

MIT App Inventor Tools 2.3.0'ı kurmanız için birkaç saniye bekliyoruz.

Kurulum işlemi bittikten sonra tıklayabiliriz. Sona ermek ve bununla kurulumu tamamlamış olacağız.

4. Adım
Evet aiStarter aracını şimdi başlat seçeneğini seçili bırakıyoruz İlk satırda çalıştığımız işletim sistemini, ikinci satırda kurulu olduğu klasörün bulunduğu yeri, üçüncü satırda çalıştığı sunucuyu, dördüncü satırda ise bir aiStarter penceresi görünmelidir. uygulamanın aktif olduğu IP adresini bulmaktır. aiStarter çalışmasını kapatmak için Ctrl + C tuşlarına basın.

NotApp Inventor 2 ile çalışacağımız her zaman aiStarter çalıştırılmalıdır. WiFi kablosuz ağ bağlantısını kullanmıyorsak, kurulumdan sonra masaüstünde aiStarter simgesi görünmelidir.

2. App Inventor 2'yi Çalıştırma

İlk adım
Öncelikle masaüstünde bulunan simgeye tıklayarak aiStarter'ı başlatmalıyız.

Bu, aiStarter penceresini başlatacaktır.

İkinci adım
aiStarter'ı başlattıktan sonra uygulama envanteri sayfasına gidiyoruz ve Uygulama oluştur'a tıklıyoruz!

Sizden Gmail hesabınıza erişmenizi isteyecektir. Bundan sonra bizden hesabımıza erişim izinlerini isteyecek, burada seçiyoruz İzin vermek. Sonra bize hizmet şartlarını gösterecek. Şartları kabul ediyoruz ve ardından bize bir anket doldurmak isteyip istemediğimizi soracak ve ardından bizi karşılayacak. üzerine tıklıyoruz devam etmek.

İstersek bizim için her şeyi kolaylaştırmak için ilk bağlantımızı yapmaya başlamadan önce dili seçebiliriz.

Üçüncü adım
Şimdi yeni bir projeye başlayacağız.

Bu yeni projeye bir isim veriyoruz, benim durumumda Test_1 vereceğim ve kabul ediyoruz.

Bizi otomatik olarak yeni oluşturduğumuz projeye götürecek ve bize araçları ve ne kullanacağımızı gösterecek.

Dördüncü adım
Şimdi emülatörü çalıştıracağımız için, sadece tipik “Merhaba dünya” ile bir Etiket gösteren basit bir uygulama yapacağım, bunun için paletten bir etiket sürükleyip içerdiği metni Merhaba dünya olarak değiştiriyoruz.

Emülatörü kullanacağız, bunun için Bağlan> Emülatör.

Bağlanacak ve birkaç saniye beklememizi söyleyecek, aşağıda bize vereceği talimatları uyguluyoruz.

Öykünücüyü ilk kez kullandığımız için bizden güncellememizi isteyecek ve güncellemeyi yüklemek istiyorsak öykünücüde bize gösterecektir.

Kurulduktan sonra "bitti" ye tıklıyoruz ve talimatların söylediği gibi bağlantıyı yeniden başlatıyoruz.

Bağlantı yeniden başlatıldıktan sonra öykünücüyü başlatıyoruz ve aşağıdaki resimde görebileceğiniz gibi üzerinde çalıştığımız projeyi bize göstermelidir.

Tüm bu adımları gerçekleştirdikten sonra emülatörü güncellemiş olacağız ve üzerinde çalıştığımız tüm projelerimiz emülatör ekranında görülebilir.

NotHerhangi bir projeye başlamadan önce, uygulamalarımızı test ederken herhangi bir sorun yaşamamak için aiStarter'ı başlattığımızdan emin olmamızı ve sayfadaki öykünücüyü çalıştırmadan önce çalışıyor olması gerektiğini öneriyorum.

3. App Inventor 2'deki ilk uygulama

Artık her şey hazır olduğuna göre üzerinde çalışmaya başlayabiliriz. Uygulama Mucidi, o zaman sana göstereceğim bazı basit uygulamalar nasıl geliştirilir bu, kendi Android uygulamalarımızı geliştirmek için bir temele sahip olmamıza yardımcı olacak.

Aşama 1
Toplama, çıkarma, çarpma ve bölme gibi tipik matematiksel işlevleri gerçekleştirmemizi sağlayan temel bir hesap makinesi geliştirerek başlayacağız.

Bunun için öncelikle yapacağımız Projeler> Projelerim. Orada yeni bir proje başlat'a tıklıyoruz, bu projeye isim vereceğim Calculadora_Basica ve OK düğmesine basın.

Bu bizi projemiz ile çalışacağımız tasarım alanına yönlendirecektir, yapacağımız ilk şey sol tarafta bulunan paletten sürükleyerek dört adet buton eklemek olacaktır.

Adım 2
Şimdi bileşenleri tek tek seçerek ve özelliklerindeki metni değiştirerek her bir düğmenin metnini değiştireceğiz. Gördüğümüz gibi, seçtiğimiz butonun sahip olduğu varsayılan özellikler var, burada butonun nasıl olmasını istediğimizi değiştirebiliriz. Şimdilik kendimi sadece metni değiştirmekle sınırlayacağım.

Metni değiştirdikten sonra, görüntüleyicide değiştirdiğimiz düğmedeki değişiklikleri hemen fark etmelisiniz.

Aşama 3
Şimdi estetik nedenlerle, daha önce değiştirdiğimiz düğmeleri düzenlemek için yatay bir düzenleme kullanacağım. Bunu, düzene tıklayıp yatay düzeni izleyiciye doğru sürükleyerek palette bulacağız.

4. Adım
Şimdi yatay yerleşimimize doğru tek tek butonlarımızı ekleyeceğiz. Bunun gibi bir şeye sahip olmalıyız:

Adım 5
Ardından 2 adet metin kutusu ekliyoruz. toplama, çıkarma, çarpma ve bölme gibi temel işlemlerimizi gerçekleştirmek için gerekli sayıları tanıtacağız.. Bunun yanı sıra, işlemlerimizin sonucunu gösteren bir etiket de ekleyeceğiz. Etiket ve metin alanları, kullanıcı arayüzüne tıklanarak palette bulunabilir. Sonunda aşağıdaki resme benzer bir şeye sahip olmalıyız:

6. Adım
Gidiyoruz "Bloklar”Düğmelerimizin işlevlerini yapılandırmaya başlamak için. Gitmek için ekranın sağ tarafında, düğmenin yanında bulunan bloklara tıklamanız yeterlidir. tasarımcı.

Uygulamalarımız için kullanabileceğimiz farklı blok türlerini görebileceğimiz blok görüntüleyiciye yönlendirmelidir. Şimdilik, her birine basıldığında hangi işlevi gerçekleştireceklerini tanımlamak için yalnızca yerleşik düğmeleri kullanmamız gerekecek.

Her bir butonun gerçekleştireceği eylemi tanımlamak için ilk olarak button1 ile başlayacağız, bu benim durumumda metni artı işareti (+) olarak değiştirdim ve her basıldığında, içindeki miktarları eklediğini tanımlamak istiyorum. metin alanı 1 ve metin alanı 2, bunun için button1'e tıklayarak başlıyoruz, ardından "but1 tıklandığında çalıştır"ı seçip izleyicimize sürükleriz, şöyle görünmelidir:

7. Adım
Daha sonra Label1'i ekliyoruz, Label1'e tıklayıp “put Label1 text as”ı izleyiciye sürükleyip “execute”a bağlıyoruz. Bu şekilde olmalı.

8. Adım
Şimdi toplama fonksiyonunu ekleyelim, bunun için Math'a tıklayıp sürükleyerek iki sayının toplamını döndürüp etiket bloğuna bağlayalım.

Daha sonra TextField1'i seçerek metin alanlarını ekleyeceğiz, "TextField1 Text" i arayacağız ve onu toplam bloğuna bağlamak için sürükleyeceğiz. Metin alanı1 için ilk boşluk ve metin alanı2 için ikinci boşluk. Aynı işlemi yapmak aşağıdaki resim gibi bir şey olmalıdır:

9. Adım
Şimdi her bir düğme ile yaptığımız işlemleri sadece matematiksel işlemleri her birine değiştirerek tekrarlıyoruz, sonunda şöyle bir şeye sahip olmalıyız:

Ve nihayet uygulamamızı test etme zamanı geldi, benim durumumda PC için emülatörde test edeceğim. Uygulamamızın nasıl olduğunu doğrularız, butonların her birinin çalışıp çalışmadığını ve atanan işlevleri yerine getirip getirmediğini test edebiliriz. Aşağıdaki resimde bir bölme görebilirsiniz.

Bununla matematiksel işlemlerle ilk basit mobil uygulamamızı tamamlıyoruz.

4. App Inventor 2'de ikinci uygulama

Şimdi bir tyniDB veritabanındaki verileri kaydetmemize ve görüntülememize izin veren bir uygulama yapacağız. TyniDB hafif bir belge veritabanıdır.Saf Python ile yazılmıştır ve harici bağımlılıkları yoktur.

Aşama 1
Yapacağımız ilk şey yeni bir proje oluşturmak, buna List_BD diyeceğiz:

Adım 2
İçinde iki yatay hüküm ekleyeceğiz; İlkinde bir etiket ve bir metin alanı ekliyoruz, ikincisinde iki düğme ekliyoruz, şöyle bir şeye sahip olmalıyız:

Aşama 3
Her bir koşulu seçeceğiz, özelliklerde genişliği konteynere uyacak şekilde değiştireceğiz. Buna ek olarak, bir etiket seçiyoruz ve veri girmek için metni değiştiriyoruz ve butonlarda bir tane arayacağız. "Yeni Kayıt" ve ikinci "kaydet" şöyle olmalıdır:

4. Adım
Şimdi en alta bir liste görüntüleyici ekleyeceğiz, özelliklerinde kapsayıcıya uyan genişlik seçeneğini seçeceğiz ve 300 piksel yüksekliğe koyacağız, şöyle bir şeye sahip olacağız:

Adım 5
Bulunan TinyDB veritabanımızı ekleyelim. palet> depolama ve TinyBD'yi liste görüntüleyicimize şu şekilde sürükleriz:

6. Adım
Şimdi bloklar yapacağız ve yapacağımız ilk şey text türünde bir global değişken eklemek. Bunun için öncelikle yapacağımız bloklar> yerleşik> değişkenler ve oradan "global olarak başlat" öğesini sürükleriz ve ardından içindeki metne gideriz. bloklar> yerleşik> metin, metin dizesini sürükler ve "initialize global" ile bağlarız.

7. Adım
Yeni kayıt dediğimiz butonun hangi işlemi yapacağını, metin kutumuzu beyaz yapma işlevini yerine getireceğini yapılandıracağız, bunun için yapacağız. bloklar> Yatay Düzen2> Düğme1 ve Button1 tıkladığında blok görüntüleyicimize sürükleriz, ardından bloklar> HorizontalArrangement1> TextField1, put TextField1.Text as'ı, WhenButton1.Clic ile bağlayarak sürükleriz ve son olarak bir metin dizesi ararız ve onu "TextField1.Text as" ile bağlarız ve aşağıdaki görüntüyle sonuçlanır:

8. Adım
Şimdi Kaydet butonumuzu listemize veri eklemek için yapılandıracağız, bunun için buton 2'yi arıyoruz ve onu izleyicimize sürüklüyoruz. sonra gideriz Bloklar> Liste> ekle listelenecek öğe ve listenin yazdığı yerde, içinde bulunan bir çekime bağlanırız Bloklar> Değişkenler> Al ve global Listeden verileri seçmek için tıklayarak bağlarız. Son olarak, listeye eleman eklemek için öğenin bloğumuzda göründüğü yere, TextBox1.Text'imizden bir blok yerleştiririz, şöyle görünmelidir:

9. Adım
Şimdi değerleri veritabanımıza ekleyeceğiz, bunun için yapmamız gereken ilk şey içinde arama yapmak. Bloklar> Ekran1> TinyBD, TinyBD1 çağrısını sürükleriz.SaveValue ve onu Button2 bloğumuza bağlarız, ardından bunu, etikete kaydedeceğimiz şeyi yerleştiririz, bu durumda sadece isimleri kaydedeceğiz, bunun için bir metin bloğu ararız, onu bağlarız etiket ve Ad koyduk, sonra bundan, öğe ekle bloğunda yaptığımız gibi global listeden alması için kaydedilecek değeri yerleştirdik.

Adım 10
Bunu liste görüntüleyicide göstermemiz gerekiyor, bunun için Button2 ile bağlayacağız, Bloklar> Ekran1> ListeGörüntüleyici1 ve global List alma bağlantısını kurarken put ListViewer1.Elements öğesini sürükleyerek şöyle bir şey gösteriyoruz:

11. Adım
Hatırlayacağımız gibi, bir veritabanına sahip olmanın en iyi yanı, uygulamanızı kapatabilmeniz ve orada kaydettiğiniz verilerin, yeni bir oturum başlattığınızda kullanılabilir olacak şekilde saklanmasıdır. Bunu yapmak için Screen1 başladığında, veritabanının tekrar bir listeye eklendiğinden ve liste görüntüleyicide yeniden göründüğünden emin olacağız.

Bunu yapmak için sadece gitmemiz gerekiyor Bloklar> Ekran1 ve blok görüntüleyicimizde "Screen1.initialize çalıştırıldığında" bloğunu sürükleyin ve buna, içinde bulunan "put" değişkenini bağlayacağız. Bloklar> Entegre> Değişkenler, “put”u sürüyoruz ve o blokta global List seçiyoruz ve buna TinyBD1 “call TinyBD1”den bağlanacağız. GetValue ”, etikette Name koyacağımız metin bloğunu ekleyeceğiz ve eğer etiket yoksa Değer'de bulunan boş bir liste oluşturacağız ven Bloklar> Liste> Yeni bir boş liste oluşturun. Bununla elde ettiğimiz şey, tüm verilerin yeni bir listeye kaydedilmesidir.

Verileri liste görüntüleyicide bize göstermek için, önceki blokta yaptığımız gibi "Küresel Listeyi Al" ile bağlantılı olan "Screen1.initialize" ile "Set ListView1.Elements" ile ne yapmamız gerekiyor.