Az MIT App Inventor2-öt tényleg 1-2 óra alatt nagyjából el lehet sajátítani!
Néhány szóban röviden, de mielőtt bármit csinálsz, az Origós linken van lejjebb a többi infó, amire még szükséged lesz, itt:
https://www.origo.hu/techbazis/20161014-megmutatjuk-hogyan-kell-programozni.html
Itt az online fejlesztő felület, tehát még le sem kell tölteni semmilyen programot:
http://ai2.appinventor.mit.edu/
1.A fejlesztői felületet amikor megnyitjuk, a Prejectek menüpontban a start new projecttel kell kezdeni, és valamilyen nevet adni a projektünknek. Az ékezetes betűt itt nem biztos, hogy elfogadja!
2. A fejlesztői felület betölt, és négy sávot látunk. Középen a Viewer sávban egy mobiltelefon képe a (screen1) van megjelenítve, baloldalt a a Palette sávban azok a komponensek, amelyeket használni fogunk az applikációnkban, pl. gomb (button), Label (címke, ami szöveget, vagy számot jelenít meg), stb.
Innen a telefonra rá tudjuk húzni a komponenst. Próbáljuk ki, hogy ráhúzunk a telefon képernyőjére egy gombot (button) és egy Label-t (címkét)! A Jobb oldalt a szélén van a Properties (tulajdonságok) sáv. Itt állíthajuk be azoknak a komponenseknek a tulajdonságait, amiket a képernyőre húztunk. Pl. A gombra írjuk ki, hogy gomb, a Label1 szövegét is írjuk át, pl. Helló web-re!. Balra a telefon, és a tulajdonságok között helyezkedik el még, a Components sáv, ezekben látható egymás alatt a komponensek felsorolva, amiket a telefon képernyőjére húztunk, és itt ezekre rákattintva, pl. a label1-re kattintva tudod kijelölni a label1-et, hogy a tulajdonságokban annak a jellemzőit tudjad beállítani. A Label1 komponens tulajdonságaiban a visible (látható)-ból vegyük ki a pipát.
Ez a Designer felület, de jobbra fent láthatod, hogy van egy másik, a Blocks, ahol egy ilyen nevű gombbal tudsz váltani. A Blocks felületen programozzuk be a komponenseket, hogy mit csináljanak.Ezen a felületen két sáv van, van egy munkasáv, ahol renezzük a dolgokat, a Viewer, és a Blocks sáv, ahonnan huzzók a munkafelületre a blokkokat, amelyek tulajdonképpen kódik, de számunkra csak puzzle darabkáknak vannak ábrázolva.A Blokkoknál a Button1-re kattintva válaszzuk ki a "When button click do" ( mikor a gombra kattintuk csinálja ezt) puzzle darabot, és húzzuk a munkafelületre! Majd a Label1-re kattinva válasszuk ki a "set label1 visible to" (beállíja a címke láthatóságát) puzzle darabot, és rakjuk bele az előzően kihúzott darabba! Ezután a logic-ra kattintva válasszuk ki a "True"
(igaz) puzzle darabot, és rakjuk a címke láthatósági beállításáához. Ekkor kész is vagyunk az első programunkkal. Azt raktuk ki, hogy amikor a gomba kattintunk, akkor megjelenik az írás, hogy Hello world!Ezt ki is tudjuk próbálni, és a programunkat tudjuk telepíteni a telefonunkra is.Így néz ki:
Tájékoztató leírások magyarul tehát itt:
https://www.origo.hu/techbazis/20161014-megmutatjuk-hogyan-kell-programozni.html
Majd nézzél a Youtubon tutorial videókat, pl. gomb használatáról, stb.
Ez pedig az első programom, egy vicces bármi detector:
A két gomb blokja egy kicsit össza van csúszva a képen:
https://drive.google.com/open?id=1N3eLk-GdwTOZwQX_bdHOLKLIeI9O2IzA
Telepíteni úgy tudod, hogy a telefon beállításokban kikapcsolod a Biztonság, Ismeretlen forrású programok telepíthetőségébe pipa. Nincs benne vírus..
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
A React Native:
Ha olyat kellene csinálnod, amit a MIT App Inventor nem tud, akkor több lehetőséged is lehet. Még éppen most vizsgálom melyik a legkönnyebb út. Mivel a JavaScriptet a második részben már valamennyire megismertük, ezt is használhatjuk már iOS (Apple telefon) és Android telefonokon futó programok elkészítéséhez. Itt egy olyan módszert mutatok, ahol JavaScript kódokat írva lehet megtenni. A React Native rendszer a JavaScript kódokat native kódokra fordítja a telefonok számára.
Először is, mi a cmd avagy a parancssor?
Egy olyan ablakos szoftver a gépeden, amelybe parancsokat írva adhatsz utasításokat a számítógépnek. A Windows-ba beírod a tálcán lévő keresőbe, hogy cmd, akkor megtalálod a programot, így, hogy Parancssor rendszer, és meg tudod nyitni. Egy fekete ablak jön elő, ebbe kell parancsokat írni. Van egy másik ugyanilyen szoftver is a gépeden a powershell, amit szintén lehet használni.
Első körben némi infó:
A React Native fejlesztésnél a parancssorba, vagyis a cmd-be írunk parancsokat, és ezzel telepítünk egy projektmappát, és kezelhetjük azt, illetve ezzel teszteljük az applikációt is. Alapvetően kétféle, most lehet hogy nem pontos, de érthetőbb megfogalmazásban sablont használhatunk. A könnyebb az Expo Go, amit inkább webfejlesztésre lehet használni, és amivel Expo-projekteket tudsz gyorsan kipróbálni anélkül, hogy le kellene fordítani őket. Azonban csak az Expo SDK által támogatott funkciók érhetők el vele, és ezek nem annyira széleskörűek, vagyis vannak jelentős korlátjai. Nálam például a Bluetooth használata kiemelten fontos, és erre az expo nem ideális, így a sima React Native a járhatóbb út. A kettő között technikailag az a különbség, hogy a kétfajta "sablont" kétfajta cmd parancsokkal lehet alkalmazni. A továbbiakban az expo-val nem foglalkozom, mert bár lehet könnyebb kezelni, de az nem felel meg az igényeimnek.
Mi a React?
A React egy JavaScript könyvtár, amit webes felhasználói felületek készítésére használnak.
A React komponensei végső soron HTML elemekre fordulnak le, és a böngésző DOM-ba (Document Object Model) kerülnek.
Példa:
A jsx ebben a javaScript-es rendszerben az XML-nek felel meg. Az ilyen . jsx kód:
<button>Hello</button>
a böngészőben egy <button> HTML elemként jön létre.
A React-ot webprogramozásnál használják, HTML-re fordul, és böngészőre dolgozik.
Mi a React Native?
A React Native is React-et használ komponenslogikára, de NEM HTML-t és NEM DOM-ot használ.
Ehelyett a React Native komponensek natív UI elemekre fordulnak le:
<View> → Androidon View, iOS-en UIView
<Text> → natív szövegkomponens
<Button> → natív gomb stb.
Tehát: React Native NEM DOM-alapú – helyette „bridge”-en keresztül natív Android/iOS elemeket használ.
A React Native mobilalkalmazások létrehozására használják, native kódra fordul, tehát más, mint a sima React.
React Native és benne az Expo sablon generátor programozói eszközeinek is a
a motorja a Node.js, ezért azt mindenképpen le kell ölteni. Az npx, npm, yarn eszközök a Node.js-hez tartoznak. Tehát: Node.js nélkül nem tudsz React Native projektet létrehozni vagy futtatni.
A Git egy verziókezelő, amit a telepítők is használnak
A create-expo-app és más npm-csomagok néha Git-en keresztül töltenek le sablonokat, frissítéseket.
Tehát Git nem csak a saját projekted verziókövetésére kell, hanem a csomagok letöltéséhez is (különösen ha valami GitHub-ról jön).
Ha nincs telepítve Git, néha hibaüzenetet is kapsz telepítéskor.
Az Android Studioban natív eszközök és emulátor van.
Android Studio nem a JavaScript vagy React Native miatt kell, hanem azért, hogy legyen Android emulátorod (ha nincs valódi telefon) elérhető legyen az Android SDK, amit a React Native a háttérben használ az app fordításához, natív buildhez szükséges eszközök legyenek (pl. Gradle, ADB, stb.)
Egyébként nem kell Android Studio-t használnod, ha valódi telefonod van. A mi próba projectünkben USB-vel kötjük össze a telefont a számítógéppel.
(Expo-nál QR-kódot lehet beolvasni- de az számomra nem jó irány, mint ahogy már említettem, az expo-val nem foglalkozom, mert a Bluetoot-ot se tudja.)
Ezért tehát konkrétan ezeket kell letölteni, és telepítened kell őket!
Node.js → https://nodejs.org (LTS verzió)
Git → https://git-scm.com/
Az alatta való megfontolással esetleg az Android Studio → https://developer.android.com/studio
(amennyiben a mobiltelefonodon akarsz tesztelni, mert pl. régi a számítógéped, és gyenge, akkor nem kell letölteni az Android Studio-t, akkor csak USB-vel össze kell kötni a számítógéppel. Én inkább azt ajánlom, most ne töltsed le, és a telefonodon tesztelj!)
Mobil Programozás avagy React Native fejlesztés AI segítségével.
A claude.ai-t, a ChatGPT-t vagy/és a Geminit megkéred, hogy csináljon neked egy egyszerű mobilalkalmazást JavaScriptben React Native -val . Egyszerű programot megcsinál, de közepesen bonyolultad jelenleg egyetlenegy ingyenes AI sem fog tudni teljesen és hibátlanul összerakni (valószínűleg azért nem, mert ingyenesen nem akarják, hogy összerakja, tehát direkt hibát fog csinálni egy összetettebb feladatban). Max. úgy csinálhatod meg, hogy felosztod a projektedet részfeladatokra, és így kérdezgeted a kódot. Jól leírod, hogy mit szeretnél, esetleg egy képernyő fotót is csinálhatsz a gombokkal és a színekkel, a MIT App Inventorba, ha összerakod a kinézeted. Amikor tisztáztátok mit szeretnél akkor megírja a fájlokat. Sajnos nem tudja közvetlenül letölthető állapotban átadni a programot, csak megadja a kódokat, amiket te magadnak kell összerakni. De lépésről lépésre végig vezet az összerakásban is, ha kell! Mindegyik AI napi limittel rendelkezik, de másnap, de olyan is van, hogy lefagy, és egy másik chatben folytathatod a munkát. Legyél a lehető legrészletesebb, és legpontosabb a kommunikációban, különben félrevisz. Figyeld, hol akar letéríteni az útról, pl. valósan működő applikációt akarsz, de elkezdi egy szimulációt készíteni. Ilyenre akkor hajlamos ha nehézségekben van. Pont olyan mint egy ember, néha hanyag, és gyakran olyan hibát csinál, amit te mint kezdő programozó, vagy olyan, aki nem is igazán tud programozni észrevesz, de ő nem fogja. A neten különösen a Github-on keress rá a problémára, és mutasd meg neki. Gyakran nem friss a tudása. Amit az egyik AI nem tud megcsinálni, a másik, vagy a harmadik meg fogja tudni! Ezzel a módszerrel, a segítségükkel úgy is fogsz tudni egyszerűbb applikációkat elkészíteni, ha nemigen tudsz programozni, illetve ha te magad egy sort se írtál a programba. Nagy türelmet igények a részedről is, és mintha az AI is majd egyre türelmetlenebb lesz. Ez vagy így van, vagy te vetíted ki rá, nem tudom megítélni. Szerintem egyébként ők már nem gépek...
Egy minta projekt létrehozása:
Csináljunk egy olyan alkalmazást, ahol egy screen van, egy gombbal. Ha azt megnyomjuk, akkor kiírja a képernyőre, hogy Hello Word!
A parancssorba (cmd) beírod ezeket a parancsokat (ezek Windows parancsok, Linuxon más lehet). Legyen a projektünk neve: gombos
vagy ezt a kódot használva:
npx @react-native-community/cli init
Megkérdezi milyen projectnevet szeretnél, beírod, hogy gombos, és enter.
vagy ezt:
npx @react-native-community/cli init projectneved
(Várd meg, amíg letölti és telepíti (pár perc))
aztán ezzel beléptél a mappába:
cd gombos
Ezzel a kóddal megnyitja Visual Studio Code-dal, ha nem akarod jegyzettömbbel szerkeszteni:
code .
Az én projectmappámat windows 10-ben ide teszi: C lemez, felhasználók, HP, és ott a gombos mappa ...
A Projectmappában ez a neve: App.tsx , és mivel a projekt TypeScript-es sablonnal jött létre, nem App.js. Egyszerűen írd át a kódot benne jegyzettömbbel erre:
import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';
export default function App() {
const [message, setMessage] = useState('');
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button title="Nyomj meg!" onPress={() => setMessage('Hello World!')} />
<Text style={{ marginTop: 20 }}>{message}</Text>
</View>
);
}
Telefon összekötés, USB debug engedélyezése a telefonodban. Általában az jó, ha be van kapcsolva a telefonodon a képernyő is.
Ellenőrzés, hogy látja-e a telefonodat:
adb devices
Ha kiírt egy kódot, ilyesmit, akkor jók vagyunk, látja. Pl: R59R71YQREW
Teszt Indítása a telefonodon:
npx react-native run-android
Ekkor a Node is kidob egy ablakot, valamilyen Metro bundler izét, de ezt ne zárd be, az legyen megnyitva mindig, amíg dolgozol a projekten, csak tedd le az asztalra. A cmd pedig elkezd dolgozni, és jó sokáig. Végül megjelenik a telefonodon a szoftver, és az alkalmazásteszt icon-ja a programok között.. Azon is megnyithatod, de ne válaszd le a telefonodat, mert úgy nem fog működni!
Most, ha bezárod a szoftvert, és nem választottad le a telefonodat, és nem zártál be semmit, akkor a telefonodon a többi program mellett megtalálod a projektünk ikonját, és arra kattintva megint el tudod indítani.
Most ne csináljuk meg a végleges szoftvert, mert gondolom valami mást szeretnél majd csinálni, nem ezt a gombos projectet, de ha a végleges, szoftvert akarod megcsinálni, akkor az alábbi paranccsal kell majd megtenned.
A cmd-be most nem biztos, hogy tudsz írni!
De akkor hogyan módosítsd a programodat?
Maradjon a telefon összeköttetésben a számítógéppel, ne csukd be a Metrót se, csak nyisd meg újra a jegyzettömbbel az App.tsx fájlt, és írd át és mentsd el!
A jegyzettömbnél sokkal jobb módszer, ha letöltöd a Visual Studio Code nevű programot. Ha van ilyen, akkor a cmd-be belépsz a projekt gyökérmappájába, ha még nem vagy benne:
cd projektneved
majd ezzel a paranccsal megnyitod a Visual Studio Code alkalmazást úgy, hogy már a projektedbe töltődik bele, és azzal szerkeszted:
code .
A Metró automatikusan felismeri a változást, és megcsinálja a javítást. Ha a telefonodon újra megnyitod a tesztalkalmazást, már a javított változatot fogod látni.
Ha újra írni akarsz a cmd-be, akkor kapcsold le, és indítsd el újra!
Ha két nap múlva szeretnél változtatni a projekten,
akkor kapcsold le nyugodtan a cmd-t és a Metro-t, válaszd le a telefont, kapcsold ki a gépedet, ha akarod, és két nap múlva csatlakozz a telefonoddal, majd a cmd-be írd be ezt:
cd gombos
majd:
npx react-native run-android
és dolgozhatsz tovább a projekten.
Ha jó a program, akkor csináld meg a végleges valódi szoftvert!
cd gombos
majd belépsz az android alkönyvtárba:
cd android
majd telepíted ezzel:
gradlew.bat assembleRelease
Itt lesz a programod a projected ebben mappádban:
android/app/build/outputs/apk/release/app-release.apk
Készen vagyunk!
Továbbiak:
Hol van a Manifest.xml fálj?
android/app/src/main/AndroidManifest.xml
Csináljuk meg az alkalmazás iconját!
Lehet cmd-n keresztül is, de nálam nem működött, így a biztosabb, laikusoknak egyszerűbb, de kicsit munkaigényesebb módszert írom le.
1. Csináld meg az ikont képszerkesztőben. Én egy régi programot szeretek, a Photofiltre-t, de ez mellékes. 1024 x 1024 pixeles felbontásba.
2. A projekt mappádban itt
android/app/src/main/res/
találhatod meg a beépített ikonokat különböző, sokkal kisebb méretben, ezekben a mappákban:
mipmap-hdpi
mipmap-mdpi
mipmap-xhdpi
mipmap-xxhdpi
mipmap-xxxhdpi
Az ezekben lévő ikonfényképeket cseréld ki az általad készített ikonra, de a méret mindig azonos legyen, tehát pl. a mipmap-xxxhdpi mappában a két fénykép mérete ugyanúgy 192 192 legyen!
A cache tisztítása és építsd újra az alkalmazást, esetleg akkor kellhet, ha nagyon átalakítasz valamit. Ha már a projekt könyvtáradban vagy, és utána:
cd android
gradlew.bat clean
cd ..
npm cache clean --force (vagy yarn cache clean)
npm install (vagy yarn install)
npx react-native start --reset-cache (ezt a Metro ablakot hagyd futni, és nyis külön egy új cmd ablakot!)
Új CMD ablakban:
cd projektneved
npx react-native run-android
Hogyan csinálj többnyelvű applikációt? (ezen a részen még dolgozok, ez még nem jó)
Első körben ezzel próbálkozzál:
A több nyelvű applikáció alatt azt értem, hogy a gombokat, a feliratokat a kiírásokat milyen nyelven csináld meg.
Ha csak egy nyelvű applikációt akarsz, akkor a kódban használjad azt az egy nyelvet, és nincs más teendőd. Ha azonban több nyelvű elérést szeretnél, akkor másképpen kell megcsinálni az applikációt, illetve módosítanod kell rajta. Ebben az esetben érdemes már alapvetően először angolul kialakítani! Aztán a továbbiakban, ha feltöltöd a playáruházban, egy-két módszerrel el lehet érni, hogy a telefon a felhasználó saját nyelvén jelenítse meg a programot.
Az első módszer, ami nálam nem működött:
Navigálj a projektedben ehhez az útvonalhoz:
android/app/src/main/res/
ott lesz a strings.xml fájl, vagy hozd létre!
Az alkalmazáson belül a szövegeket ne közvetlenül kódba írd, hanem használd a res/values/strings.xml fájlt:
Példa:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="startscan">Keresés elindult</string>
</resources>
A kódban pedig csak hivatkozol, így:
console.log(strings.startscan);
Ha több nyelvet szeretnél, akkor így values/strings.xml lesz az angol nyelvű alapértelmezett.
A magyar változathoz hozz létre a res mappában a values mellé egy values-hu mappát, és abba is tegyél bele egy strings.xml fájlt, de az már a magyarnyelvű változat legyen. És így tovább a többi nyelvvel.
res/values-hu/strings.xml → magyar nyelvű változat
Ez alapján Android automatikusan a készülék nyelve alapján választja ki a megfelelő fordítást.
Ez a módszer nálam nem működött!
Második módszer (még próbáltam ki):
A cmd-vel telepítsed ezt a csomagot:
npm install react-native-localize
Az App.tsx kódban:
Importáljuk a csomagot a kód elején:
import {getLocales} from 'react-native-localize';
Az importok alá tegyük a nyelvi szövegeket, angolt és magyart így például:
const stringResources = {
en: {
keepaa: 'Keep Awake activated',
keepad: 'Keep Awake deactivated',
},
hu: {
keepaa: 'Képernyő ébrenlét aktiválva',
keepad: 'Képernyő ébrenlét deaktiválva',
}
};
// Automatikus nyelvfelismerés
const getCurrentLanguage = () => {
try {
const locales = getLocales();
const deviceLanguage = locales[0]?.languageCode;
console.log('Device language detected:', deviceLanguage);
// Támogatott nyelvek ellenőrzése
if (deviceLanguage === 'hu') {
return 'hu';
}
// Alapértelmezett: angol
return 'en';
} catch (error) {
console.log('Language detection error, falling back to English:', error);
return 'en';
}
};
// Strings objektum inicializálása
const strings = stringResources[getCurrentLanguage()];
Innentől a kód többi, már nem nyelvi része. A kódban a stringek útvonalát így adod meg például:
console.warn(strings.keepaa);
A keepaa rész az útvonal, amire angol változatban ezt írja ki:
Keep Awake activated
magyar változatban meg ezt:
Képernyő ébrenlét aktiválva
A telefon alapbeállítása szerint jelenik meg az adott nyelven.
App neve (ikon alatt) – ez az, amit a felhasználó lát a telefonján:
Ez a android/app/src/main/res/values/strings.xml fájlban van:
<resources>
<string name="app_name"> Ez az appneved</string>
</resources>
Hogyan töltsem fel az applikációmat a Playáruházba?
1. Regisztrálnod kell a Google Play Console oldalán: https://play.google.com/console
2. Gyakorlatilag minden adatódat elkérnek, szó szerint mindent.
3. Be kell fizetned 25 dollárt.
4. Az applikációdat minimum 12 emberrel 14 napon át teszteltetned kell.
Ha valamilyen hibákat kapsz az első próbálkozásod közben, főleg a path-tal kapcsolatban, akkor:
Ellenőrizd, hogy a Node települt!
node --version
Ha kiírja hogy v18.17.0 vagy hasonló, akkor jó!
Utána:
npm --version
Erre is ki kell írnia valami számot. )
Ha a Tűzfal jelez React Native development server-t blokkolta engedélyezd!
Bejön a Node képernyő/parancssor is, ez a Metro bundler, ami a kódot készíti elő a telefonnak. Hagyd nyitva! Ez kell hogy fusson a háttérben!
Tippek:
Ha kicsit bonyolultabb a projekted, bontsd részprojektekre! Én például egy párkereső alkalmazást csinálok éppen. Három részprojektre bontottam:
1. A kinézetre, a gombokkal, és megjelenéssel.
2. A szkennelőre
3. A hirdetőre.
Ha mindhárom működik, akkor össze lehet rakni őket.
Legalább az egyik projektből, ami az alap lesz, és amibe másolod, beépíted a többit, csinálj másolatot, hogy bármikor újra tudjad kezdeni, ha belezavarodtál, és újra tudjad gyorsan megcsinálni, felépíteni!
Mindig írd le, hogyan kell megcsinálni az adott projected, hogy ha belezavarodsz, akkor hamar újra megcsináld a semmiből az utolsó működő, jó változatig!
Egy projekt másolása ahogy én csináltam, de persze van más lehetőség is.
Új projektet csinálsz más néven...
(Az egyiknél nem tudtam hogyan csináltam, és így volt, de ez a rész csak magamnak szól:
Csak egy csomagot telepítettem:
npm install
de a csippantáshoz szükség lehet erre:
npm install react-native-sound
-A package.json fájlt cseréld ki a jóból, de a projektnév legyen megfelelő
- A jó App.tsx fájlt másold át
-A manifestbe az engedélyeket másold be!
-android-app-src-main-res ide csinálj egy raw könyvtárt és ebbe a beep.mp3-at)
See https://aka.ms/ReactNativeGuideWindows for the latest up-to-date instructions.
Esetleges path hibák megoldása:
Nem sokára leírom, addig kérdezd meg az AI-t!
A Chrome Devtools használata:
Amikor már megy a tesztapp a telefonon, akkor a cmd-be beírni ezt, amikor a projektmappában vagy:
adb shell input keyevent 82
Megjelenik a telefonon egy lista. Kiválasztani a
Detools-t.
Magam számára:
npm install react-native-ble-advertiser --save
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
A Kotlin:
A mobilalkalmazásokban manapság divatos programnyelv.
Programozhatsz ilyen nyelven Visual Studio Code-ban, vagy Android Stúdióban, és gondolom más rendszerekben is. Hogy valami hasznosat írjak róla, nézzük meg a legfontosabb fájlokat!
A kotlin android projekt alapfájljai:
MainActivity.kt
Ez tartalmazza a kotlinba megírt logikát. Példa:
package com.example.helloworld
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val btnSayHello = findViewById<Button>(R.id.btnSayHello)
val tvMessage = findViewById<TextView>(R.id.tvMessage)
btnSayHello.setOnClickListener {
tvMessage.text = "Helló, világ!"
}
}
}
activity_main.xml
Ez az UI-t (felhasználói felületet) leíró fájl. Ebben határozod meg például:
milyen elemek vannak az appban (pl. gomb, szövegmező),
azok hogyan helyezkednek el,
milyen ID-jük van (hogy a Kotlin kódból elérd őket).
példa:
<!-- res/layout/activity_main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="@+id/button"
android:text="Nyomj meg!"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/textView"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"/>
</LinearLayout>
AndroidManifest.xml
Ez az alkalmazás leíró fájlja, egyfajta „útlevél” az Android rendszer felé. Ez az XML fájl nem az UI-hoz tartozik, hanem az alkalmazás működéséhez szükséges alapinformációkat tartalmazza:
Az alkalmazás neve, ikonja, fő tevékenysége (activity),
Milyen engedélyekre van szüksége (pl. internet, Bluetooth),
Milyen minimum Android-verzión fusson.
Példa:
<!-- AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.helloworld">
<application
android:label="Hello App"
android:icon="@mipmap/ic_launcher">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Gradle build fájlok:
A Gradle egy automatizáló eszköz, ami az Android projektek „összerakását” intézi. Olyan, mint egy „szakácskönyv”:
Megmondja, miből kell főzni (pl. Kotlin, AndroidX könyvtárak),
Hogyan kell „összeépíteni” (buildelni) az alkalmazást,
Milyen Android-verzióra készüljön,
Milyen egyéb függőségeket (libeket) töltsön le és csomagoljon bele az appba.
Két fontos Gradle fájl van:
1. Project szintű build.gradle:
Ez a teljes projekt szintjén határozza meg a Gradle verzióját és a plugin-eket.
példa:
// build.gradle (Project)
buildscript {
ext.kotlin_version = "1.9.0"
repositories {
google()
mavenCentral()
}
dependencies {
classpath "com.android.tools.build:gradle:8.0.0"
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
2. Modul szintű build.gradle:
Ez az app-modulra vonatkozik: itt állítod be pl. a minimum SDK-t, cél SDK-t, az alkalmazás ID-jét, a függőségeket (pl. Kotlin, AppCompat, stb.).
példa:
// app/build.gradle
plugins {
id 'com.android.application'
id 'kotlin-android'
}
android {
namespace 'com.example.helloworld'
compileSdk 34
defaultConfig {
applicationId "com.example.helloworld"
minSdk 21
targetSdk 34
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
}
}
}
dependencies {
implementation "androidx.core:core-ktx:1.12.0"
implementation "androidx.appcompat:appcompat:1.6.1"
implementation "com.google.android.material:material:1.9.0"
}
Tehát, a Gradle segít, hogy ne neked kelljen kézzel összefűzni minden fájlt, lefordítani, aláírni, stb.
A Manifest biztosítja, hogy az Android rendszer tudja, mit csinál az alkalmazás.
A layout XML biztosítja a kinézetet, és elválasztja a megjelenést a logikától (ez jó tervezési minta).
A Kortlin fájl meg maga a logika.
------------------------------------------------------
Tesztelés mobilon Android Studio nélkül:
lehetséges, ha tudsz apk fájlt generálni (pl. Gradle CLI-ből vagy más build eszközzel),
utána adb install paranccsal vagy Bluetooth/USB-n keresztül telepítheted a telefonra.
----------------------------------------------------
Mobilon is lehet mobilt programozni:
AIDE – Android app, Android appot fordít!
DroidScript – JavaScript alapú, Androidon fut
Termux – parancssoros Linux Androidon
----------------------------------------------------
Elméletileg IDE nélkül is lehet mobilt is programozni,
de akkor neked kell lefordítani és felépíteni a projektet a parancssorban, a gradlew szkript segítségével, vagy valamilyen build tool (pl. Termux + Gradle Android Plugin ,) kombinációval. Ez nem lehetetlen, csak:
több manuális konfigurációt igényel,
nehezebb hibát keresni és javítani,
nem kapsz automatikus kódkiegészítést és figyelmeztetéseket.
vagy Visual Studio Code-dal...
