Razvoj mobilne Flutter aplikacije z uporabo umetne inteligence

V podjetju Multimedia Vision imamo veliko izkušenj z ustvarjanjem mobilnih aplikacij za iOS in Android, v zadnjem času pa smo se osredotočili na Flutter, ogrodje, ki omogoča, da pišemo eno samo kodo za več operacijskih sistemov. Flutter nam je skrajšal čas razvoja in je bil instrumentalen pri ustvarjanju aplikacij, ki so videti in delujejo enako na vseh platformah. V tem članku bomo razložili, kako smo uporabili integrirano razvojno okolje z umetno inteligenco (UI), ki nam je pomagalo pospešiti razvoj in znatno zmanjšalo našo delovno obremenitev.

Integrirano razvojno okolje z umetno inteligenco

Kot razvijalci običajno porabimo veliko časa za ustvarjanje osnovne kode, odpravljanje napak in testiranje različnih scenarijev, kar nas in naše partnerje stane precej časa in denarja. Zato večina nas uporablja Cursor, integrirano razvojno okolje (IDE - Integrated Development Environment), ki ima vgrajeno umetno inteligenco.

UI agent potrebuje nekaj časa, da ugotovi vaše preference, in morali boste napisati nekaj lastnih pravil, a ko je to narejeno, je kot bi imeli dodatnega razvijalca na dosegu roke. Poveste mu, katere knjižnice uporabljate, kako naj strukturira kodo, da se ujema z vašim slogom, in kakšno arhitekturo uporabljate, in ste pripravljeni. UI nato prevzame te naloge in jih opravi v 30 sekundah, medtem ko bi vam vzele vsaj 10 minut.

UI nam je pomagala pri odpravljanju nekaterih nejasnih napak med razvojem in je bila zelo koristna pri implementaciji funkcionalnosti eSIM, kjer je bila uradna dokumentacija nekoliko pomanjkljiva.

Primeri našega delovnega procesa

Tukaj bomo podali nekaj primerov, kako lahko tudi vi učinkovito uporabite UI za pospešitev nekaterih svojih ponavljajočih se nalog.

Nove strani

Uporabljamo navigacijsko knjižnico, imenovano auto_router, ki ima specifično strukturo za določanje svojih strani in poti, ki ustrezajo tem stranem.

Tukaj je primer uporabljenega poziva:

Create a new auto_router page called HelloWorld, add it to the list of all routes

UI agent bo nato pregledal kodo, našel nekaj primerov, kako naj bi bila stran videti, in dobimo naslednje:

hello_world_page.dart:

import  'package:auto_route/auto_route.dart';
import  'package:flutter/material.dart';
import  'package:my_application/common/widgets/page_wrapper/page_wrapper.dart';
import  'package:my_application/router/app_router.dart';

/// {@template hello_world_page}
/// A simple Hello World page for testing purposes.
/// {@endtemplate}
@RoutePage()
class  HelloWorldPage  extends  StatelessWidget {
/// {@macro hello_world_page}

const  HelloWorldPage({super.key});

@override
Widget  build(BuildContext context) {
    return  PageWrapper(
    ...

app_router.dart

...
import  'package:my_application/pages/hello_world/hello_world_page.dart';
...

@override
List<AutoRoute> get routes => [
    ...
    AutoRoute(
        page:  HelloWorldRoute.page,
    ),
    ...
];

Ker uporabljamo generiranje kode z uporabo paketa build_runner, nas bo UI nato pozval, naj zaženemo naslednji ukaz: dart run build_runner build --delete-conflicting-outputs. Po tem smo končali in lahko začnemo uporabljati novo stran v naši aplikaciji.

Brez UI bi nam to zagotovo vzelo vsaj pet minut, tukaj pa smo končali v manj kot eni. Medtem ko on to dela, se lahko posvetimo bolj perečim zadevam.

Generiranje modelov in API-jev iz specifikacije OpenAPI

API, ki ga uporabljamo, ima JSON definicijo OpenAPI, ki se nenehno posodablja, ko se dodajajo nove funkcionalnosti. Ker uporabljamo upravljanje stanja Bloc (https://bloclibrary.dev/architecture/), je naša aplikacija razdeljena na tri plasti:

1. Predstavitvena plast (Presentation Layer)
2. Poslovna plast (Business Layer)
3. Podatkovna plast (Data Layer)

To pomeni, da bo vsaka sprememba API-ja zahtevala spremembo v podatkovni in poslovni plasti. Na srečo lahko z uporabo UI takoj pretvorimo definicije JSON v Dart razrede v obeh plasteh. Zelo koristno pa je, da že prej sami definiramo vsaj en razred podatkovne in poslovne plasti, da ima UI predlogo, kako narediti preostale.

Poziv je lahko tako preprost kot: Compare the latest version of the OpenAPI json with the previous one and add the new routes and models. Check for changes to the existing models as well.

Vsaka sprememba nam torej vzame minuto ali več, medtem ko bi nam brez UI vzelo 10 do 20 minut, da bi našli posodobitve, ustvarili razrede podatkovne plasti, ustvarili razrede poslovne plasti, dodali metode transformacije za pretvorbo razreda podatkovne plasti v poslovni in obratno, dodali nove API končne točke itd.

Optimiziranje gradnikov (widgets)

Včasih se boste ujeli pri pisanju gradnika (widget), ki je dolg 200, 300 ali celo več vrstic. Vedno je bolje ta gradnik razdeliti na več manjših, vendar je ročno delo zamudno. Tukaj nastopi UI. Uporaba poziva, kot je: Break this widget down into multiple smaller ones., bo opravila delo. Poskrbel bo za vse potrebne parametre, ki jih je treba prenesti, in bo pri tem uporabil vaš slog kode aplikacije.

Zaključek

Prenova predplačniške aplikacije je bila izjemno uspešna in odzivi so bili zelo pozitivni. Ugotovili smo, da je bil Flutter pravilna izbira, saj smo lahko razvili aplikaciji za Android in iOS sočasno, v skoraj enakem času, kot bi nam vzelo, da bi razvili eno samo izvorno aplikacijo. Namestitev eSIM je bila sicer nekoliko težavna, vendar nam je na koncu uspelo.

Urejevalnik kode z umetno inteligenco je bil v veliko pomoč, saj nam je omogočil, da smo bolj ali manj avtomatizirali nekatere naloge, pomagal pa nam je tudi pri odpravljanju nekaterih napak, ki so se pojavile med razvojem.

Vendar vedno imejte v mislih, da je UI vaš pomočnik, ne pa nadomestilo. Kodo je treba pregledati in preveriti, zakaj UI dela to, kar dela, saj se boste tudi veliko naučili. Veselo kodiranje!

Opomba, če želite vedeti še več, priporočamo tudi tale videoposnetek na Youtube: https://www.youtube.com/watch?v=EsklFa3nkwA.