Dasturiy ta’minot qurilmasi va evolyusiyasi” fanidan 2 amaliy ish mavzu: axborot oqimining funktsional diagrammalari

3.1 “Tasker” mobil dasturi dizayni.
Inson hayotda yashar ekan, albatta, o’z oldiga aniq maqsad qo’yadi. Mashina olish, chiroyli uyga ega bo’lish, yaxshi kompyuter sotib olish va hokazo insonning hayotdan talabi hech ham tugamaydi. U o’z maqsadi sari intilar ekan, uni amalga oshirish uchun har xil rejalar tuzadi. Masalan, agar mashina sotib olmoqchi bo’lsa, ko’proq pulni mashina uchun jamg’armaga o’tkazishga harakat qiladi. Buning uchun oylik sarf-xarajatlarni qisqartitishga intiladi, o’yin-kulgu, har xil sayohatlardan biroz tiyilib, asosiy fikrini mashina olishga, ko’proq mablag’ to’plashga qaratadi. Hammamiz ham biror maqsadga erishish uchun intilamiz, rejalar tuzamiz. O’z hayotini, vaqtini qadriga yetgan inson har bir daqiqasidan unumli foydalanishni o’z oldiga vazifa qilib qo’yadi. Kunlik, haftalik, oylik, yillik, ko’p yillik rejalar tuzadi hamda ularni amalga oshirish yo’lida bor mehnatini sarf qiladi.
Bugungi texnologiya asrida ko’plab insonlar qimmatli vaqtlarini har xil foydasi tegmaydigan, insonni o’ziga jalb qiluvchi turli narsalarga sarf qilishmoqda. Ijtimoiy tarmoqlar, mobil hamda kompyuter o’yinlari inson vaqtining kushandasi ekanligi hech kimga sir emas. Vaqtni g’animat biluvchi insonlarga ushbu chalg’ituvchi dunyoda o’z kundalik yumushlarini rejalash, uni har xil behuda ishlarga sarflamaslik muhim ahamiyat kasb etadi. Ular kun davomida qanday ishlarni amalga oshirishlari kerakligi, kimlar bilan suhbat, uchrashuvlar amalga oshirishlar haqida deyarli bir hafta oldindan o’ylashni boshlashadi. Ayrimlar bu ishlarni xotirasida saqlasa, kimlardir uni yaxshi esda qolishi va ish stolida doimo ko’rinib turishi uchun yozib qo’yishni yaxshi ko’radi.
Biz esa bunday qimmatli vaqt egalarining ishlarini yanada osonlashtirishni istab, “Tasker” mobil ilovasini ishlab chiqdik(rasmga qarang)

“Home page”.

Ilova ishga tushurilganida “home page”da bugungi qilinishi kerak bo’lgan vazifalar ro’yxati, vazifalar kategoriyalari, vazifa qo’shish tugmasi borligini ko’rishimiz mumkin. Vazifalar ro’yxatida bugungi bajarilishi kerak bo’lgan vazifalar tartib bilan joylashgan. Har bir vazifaning so’nggida qaysi ketagoriyaga tegishli ekanligini bildirishi uchun o’sha kategoriyaning xos rangida yumaloq nuqta bor. Chap tomonida vazifa tugallanganida bosiladigan “check button” joylashgan. U bosilganda vazifa bajarilganligini ifodalash uchun ko’k rang bilan qoplanadi.



“Add task”. “Home page”ning quyisida, o’ng burchakda “+” belgili “floatActionButton” joylashgan. Ushbu tugma bosilganda kategoriya yoki vazifa kiritishni so’rovchi kichik oyna ochiladi.
Agar foydalanuvchi vazifa kiritishni bossa yuqoridagi 3-rasmda ko’rsatilgan oyna ochiladi. Ushbu oynaning yuqori qismida vazifa nomi kiritiladigan joy bor. Foydalanuvchi o’sha joyga rejalashtirgan vazifasini mufassal yoki muxtasar bayon etadi.

Vazifa haqida ma’lumot kiritilgandan keyin pastdagi kalendar belgisini bosganda yuqoridagi 1-rasmdagidek kalendar ochiladi. Shundan vazifa bajarilishi kerak bo’lgan sana tanlanadi. Xuddi shunday soat belgisini bosganda kalendar o’rniga soat tanlash oynasi ochilib, vazifa uchun soat tanlanadi. “Inbox” orqali esa vazifaga kategoriya tanlash mumkin. Ushbu oyna yuqoridagi 3-rasmda o’z ifodasini topgan.
Vazifa uchun kerakli bo’lgan nom, sana, vaqt, kategoriyalar hammasi belgilanmaguncha vazifa qo’shishni imkoni yo’q. Shu sababdan foydalanuvchidan kerakli ma’lumotlarni hammasini to’ldirib chiqishi talab etiladi. Ma’lumotlar to’ldirilib, “Done” tugmasi bosilgach, ushbu oyna yopilib, “Home page” ga qaytiladi hamda hozir qo’shilgan task vazifalar ro’yxatida ko’rinadi.
“Add category”
Kategoriya qo’shish tanlanganda quyidagi rasmda ko’rinib turgan kichik oyna ochiladi. Bunda kategoriya nomi hamda unga mos rang tanlanishi talab etiladi. Kerakli ma’lumotlar to’ldirilgach, “Add” tugmasi orqali kategoriya qo’shiladi va oyna yopilib, qo’shilgan kategoriya “home page”dagi kategoriyalar ro’yxatida ko’rinadi.

“Home page” dagi kategoriyalarda biri tanlanganda yuqoridagi oynalarga o’xshash oyna ochiladi. Bunda qaysi kategoriya tanlangan bo’lsa shu kategoriyaning nomi, kategoriyaga tegishli bo’lgan vazifalar ro’yxati hamda yangi qo’shish uchun “floatActionButton” joylashganini ko’rishimiz mumkin. Ushbu oynada foydalanuvchi shu kategoriyaga tegishli yangi vazifa qo’shishi, vazifalarni “manage” qilishi hamda kategoriya nomi va rangini o’zgartirishi mumkin.

Ilovaning barcha oynalari bilan birma-bir tanishib chiqdik. Ilovaning dizaynini ishlab chiqishda an’anaviy XML formatdan emas, balki Declarative UI formatida bo’lgan “Jetpack Compose”dan foydalanildi.

Jetpack Compose da qilingan “Home page” oynasi dastur kodi”

class HomeScreen(

val categoryList: List?,
val taskList: List?,
val listTaskSelection: ListTaskSelection
) {

@ExperimentalAnimationApi

@Composable
fun HomeScreen(modifier: Modifier = Modifier) {
val uiController = rememberSystemUiController()
uiController.setStatusBarColor(Color.White, darkIcons = true)
Column(
modifier = modifier
.fillMaxSize()
) {
TopAppBar()
if (!categoryList.isNullOrEmpty()) {
TodayTasks()
} else {
Text(
modifier = Modifier
.fillMaxSize()
.offset(0.dp, 150.dp),
text = "No Tasks for Today",
textAlign = TextAlign.Center,
fontSize = 30.sp,
fontWeight = FontWeight.Bold,
color = colorResource(id = R.color.blue)
)
}
}
}

@Composable

fun TopAppBar() {
Row(
modifier = Modifier
.height(45.dp)
.fillMaxWidth()
.padding(63.dp, 0.dp, 10.dp, 0.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "Today",
color = Color.Black,
fontSize = 30.sp,
fontWeight = FontWeight.Bold
)
Icon(
painter = painterResource(id = R.drawable.ic_more),
contentDescription = "ic_more",
tint = colorResource(
id = R.color.blue
),
modifier = Modifier.aspectRatio(0.6f, matchHeightConstraintsFirst = true)
)
}
}

@Composable

fun TodayTasks() {
LazyColumn(modifier = Modifier.fillMaxWidth()) {

for (i in categoryList!!) {

itemsIndexed(i.taskList) { index, task ->
TaskItem(task = task, i.category)
}
}

item {
Spacer(modifier = Modifier.height(20.dp))

Text(
text = "Lists",
color = Color.Gray,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(63.dp, 0.dp, 0.dp, 0.dp)
)
Spacer(modifier = Modifier.height(10.dp))
}
itemsIndexed(categoryList) { index, category ->
CategoryItem(
category.category,
category.taskList.size,
modifier = Modifier.clickable {
listTaskSelection.onListSelected(category)
})
Spacer(modifier = Modifier.height(10.dp))
}
}
}

@Composable

fun TaskItem(task: Task, category: Category) {
Column(modifier = Modifier.fillMaxWidth()) {
Spacer(modifier = Modifier.height(8.dp))
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceEvenly
) {
Icon(
modifier = Modifier
.clip(shape = RoundedCornerShape(50.dp))
.fillMaxWidth(0.08f)
.aspectRatio(1f)
.background(colorResource(id = R.color.white))
.clickable {
listTaskSelection.onTaskSelectedChanged(task = task)
},
painter = painterResource(id = if (task.isDone!!) R.drawable.ic_marked else R.drawable.ic_unmarked),
contentDescription = "ic_tick",
tint = colorResource(id = if (task.isDone!!) R.color.blue else R.color.dark_grey)
)
Column(modifier = Modifier.fillMaxWidth(0.8f)) {
Text(
text = task.title!!,
fontSize = 17.sp,
fontWeight = FontWeight.Bold,
color = Color.Black
)
Spacer(modifier = Modifier.height(5.dp))
Row(modifier = Modifier.fillMaxWidth()) {
if (task.time!!.isNotEmpty()) {
TextWithIcon(str = task.time!!, icon = R.drawable.ic_alarm)
} else if (task.date!!.isNotEmpty()) {
TextWithIcon(str = task.date!!, icon = R.drawable.ic_calendar)
} else {
Spacer(modifier = Modifier.height(10.dp))
}
}
}
Surface(
color = colorResource(id = category.backgroundColor!!),
shape = RoundedCornerShape(50.dp),
modifier = Modifier
.fillMaxWidth(0.15f)
.aspectRatio(1f)
) {

}
}
Spacer(modifier = Modifier.height(8.dp))

}
Divider(thickness = 0.5.dp, color = Color.Gray, startIndent = 63.dp)
}
}

@Composable

fun TextWithIcon(str: String, icon: Int, modifier: Modifier = Modifier) {
Row(modifier = Modifier, verticalAlignment = Alignment.CenterVertically) {
var text = str
when {
text.contains('.') -> {
if (text.checkIfToday()) text = "Today" else if (text.checkIfTomorrow()) text =
"Tomorrow"
}
}
Icon(
modifier = Modifier
.width(17.dp)
.height(17.dp),
painter = painterResource(id = icon),
contentDescription = "",
tint = Color.Gray
)
Spacer(modifier = Modifier.width(5.dp))
Text(text = text, color = Color.Gray)
}
}

interface ListTaskSelection {

fun onTaskSelectedChanged(task: Task)
fun onListSelected(category: CategoryWithTask)
}