Alustasin esiotsa veebiarendajana ja hakkasin siis a Flutter arendaja. Arvan, et mõned kontseptsioonid aitasid mul Flutteri hõlpsamini omaks võtta. Oli ka uusi kontseptsioone, mis olid teistsugused.
Selles artiklis tahan jagada oma kogemusi ja inspireerida kõiki, kes tunnevad end halvatuna, valides ühe ökosüsteemi teisele, näidates, kuidas mõisted üle kanduvad ja mis tahes uued mõisted on õpitavad.
Üle kantud kontseptsioonid
See jaotis näitab kohti, kus esiotsa veebiarendus ja Flutter sarnanevad. See selgitab oskusi, mis teil juba on ja mis on teile Flutteri käivitamisel eeliseks.
1. Kasutajaliideste (UI) juurutamine
Antud kasutajaliidese rakendamiseks esiotsa veebis peate koostama HTML-i elemendid ja kujundama need CSS-i abil. Kasutajaliideste rakendamiseks Flutteris peate koostama vidinad ja stiili nendega omadused.
Nagu CSS, Color klass Dart töötab sõnadega "rgba" ja "hex". Sarnaselt CSS-iga kasutab Flutter ruumi- ja suurusühikute jaoks piksleid.
Flutteris on meil nooleklassid ja enumid peaaegu kõigi CSS-i atribuutide ja nende väärtuste jaoks. Näiteks:
Flutteril on ka Column ja Row vidinaid. Need on Flutteri vasted display: flex CSS-is. Seadistamiseks justify-content ja align-items stiilid, mida te kasutate MainAxisAlignment ja CrossAxisAlignment omadused. Et reguleerida flex-grow stiilis, mähkige mõjutatud lapse(de) vidin(id). Column/Row, sisse Expanded or Flexible.
Täiustatud kasutajaliidese jaoks on Flutteril see CustomPaint klass – see on Flutter mida Canvas API on veebiarendus. CustomPaint annab teile maalija, kes joonistab soovitud kasutajaliidese. Tavaliselt kasutate CustomPaint kui soovite midagi tõeliselt keerulist. Samuti CustomPaint on parim viis, kui vidinate kombinatsioon ei tööta.
2. Arendamine mitmele Ekraani eraldusvõimed
Veebisaidid töötavad brauserites ja mobiilirakendused töötavad seadmetes. Seetõttu peate kummagi platvormi jaoks arendades platvormi silmas pidama. Iga platvorm rakendab samu funktsioone (kaamera, asukoht, märguanded jne) erineval viisil.
Veebiarendajana mõtlete oma veebisaidi reageerimisvõimele. Kasutate meediapäringuid, et hallata, kuidas teie veebisait väiksematel ja laiematel ekraanidel välja näeb.
Mobiilse veebiarendusest Flutterisse jõudes on teil olemas MediaQuery abiliste klass. The MediaQuery klass annab teile praeguse seadme orientation (maastik või portree). See annab teile ka praeguse vaateava size, devicePixelRatiomuu seadme teabe hulgas. Need väärtused koos annavad teile ülevaate mobiilseadme konfiguratsioonist. Nende abil saate muuta seda, kuidas teie mobiilirakendus eri ekraanisuurustel välja näeb.
3. Silurite, redaktorite ja käsurea tööriistadega töötamine
Lauaarvuti brauseritel on arendaja tööriistad. Need tööriistad hõlmavad inspektorit, konsooli, võrgumonitori jne. Need tööriistad parandavad veebiarendusprotsessi. Ka flutteril on oma DevTools. Sellel on muude funktsioonide hulgas ka vidinainspektor, silur, võrgumonitor.
IDE tugi on samuti sarnane. Visual Studio Code on üks populaarsemaid veebiarenduse IDE-sid. VS Code jaoks on palju veebiga seotud laiendusi. Flutter toetab ka VS-koodi. Nii et ülemineku ajal ei pea te IDE-d muutma. VS Code jaoks on laiendused Dart ja Flutter. Flutter töötab hästi ka Android Studioga. Nii Android Studio kui ka VS Code toetavad Flutter DevToolsi. Need IDE-integratsioonid muudavad Flutteri tööriistad täielikuks.
Enamik esiotsa JavaScripti raamistikke on nendega kaasas käsurea liides (CLI). Näiteks: Nurga CLI, Looge rakendus Reageeri, CLI vaadejne. Flutteriga on kaasas ka eksklusiivne CLI. Flutter CLI võimaldab teil luua, luua ja arendada Angular projekte. Sellel on käsud Flutteri projektide analüüsimiseks ja testimiseks.
Uued kontseptsioonid
See osa räägib Flutteri spetsiifilistest kontseptsioonidest, mis on veebiarenduses lihtsamad või puuduvad. See selgitab ideid, mida peaksite Flutterisse sisenedes meeles pidama.
Kuidas kerimisega hakkama saada
Veebi jaoks arendamisel tegelevad kerimise vaikekäitumisega veebibrauserid. Siiski saate CSS-iga kerimist vabalt kohandada (kasutades overflow).
Flutteri puhul see nii ei ole. Vidinarühmad vaikimisi ei keri. Kui tunnete, et vidinarühmad võivad üle voolata, peate kerimise ennetavalt konfigureerima.
Funktsioonis Flutter saate konfigureerida kerimist omapäraste vidinate abil, mis võimaldavad kerimist. Näiteks: ListView, SingleChildScrollView, CustomScrollViewjne. Need keritavad vidinad annavad teile kerimise üle suurepärase kontrolli. Koos CustomScrollView, saate rakenduses konfigureerida asjatundlikke ja keerukaid kerimismehhanisme.
Flutteri poolel, kasutades ScrollViews on vältimatu. Androidil ja iOS-il on ScrollView ja UIScrollView kerimise käsitsemiseks. Flutter vajab viisi, kuidas selle abil renderdus- ja arendajakogemust ühtlustada ScrollViews, ka.
See võib aidata lõpetada mõtlemise dokumendi struktuuri voolule ja selle asemel käsitleda rakendust kui avatud lõuendit seadme loomulike maalimismehhanismide jaoks.
2. Arenduskeskkonna seadistamine
Lihtsaima veebisaidi loomiseks saate luua faili a .html laiendus ja avage see brauseris. Flutter pole nii lihtne. Flutteri kasutamiseks peab teil olema installitud Flutteri SDK ja on seadistanud Flutteri testseadme jaoks. Nii et kui soovite Flutterit Androidile kodeerida, peate seda tegema seadistage Android SDK. Samuti peate konfigureerima vähemalt ühe Android-seadme (Androidi emulaatori või füüsilise seadme).
See kehtib ka Apple'i seadmete (iOS ja macOS) puhul. Pärast Flutteri Maci installimist peate ikkagi Xcode'i seadistama, enne kui edasi lähete. Flutteri testimiseks iOS-is on teil vaja ka vähemalt iOS-i simulaatorit või iPhone'i. Flutter töölauale on samuti märkimisväärne seadistus. Windowsis peate seadistama Windowsi arenduse SDK koos Visual Studioga (mitte VS-koodiga). Linuxis installite rohkem pakette.
Ilma täiendava seadistuseta töötab Flutter brauserites. Selle tulemusena võite tähelepanuta jätta sihtseadmete lisaseaded. Enamikul juhtudel kasutaksite mobiilirakenduste arendamiseks Flutterit. Seetõttu soovite seadistada vähemalt Androidi või iOS-i. Flutter on kaasas flutter doctor käsk. See käsk teatab teie arendusseadistuse oleku. Nii teate, mille kallal seadistamisel vajadusel töötada.
See ei tähenda, et Flutteri areng oleks aeglane. Flutter on varustatud võimsa mootoriga. The flutter run käsk lubab kodeerimise ajal testseadmesse uuesti laadimist. Kuid siis peate vajutama R et tegelikult uuesti laadida. See ei ole probleem. Flutteri VS-koodi laiendus lubab failimuudatuste korral automaatset kuuma taaslaadimist.
3. Pakendamine ja juurutamine
Veebisaitide juurutamine on odavam ja lihtsam võrreldes mobiilirakenduste juurutamisega. Veebisaitide juurutamisel pääsete neile juurde domeeninimede kaudu. Neid domeeninimesid uuendatakse tavaliselt igal aastal. Need on aga valikulised.
Tänapäeval pakuvad paljud platvormid tasuta hostimist.
Näiteks: DigitalOcean annab teile tasuta alamdomeeni .ondigitalocean.com.
Saate neid domeene kasutada, kui loote dokumentatsiooni veebisaiti. Saate neid kasutada ka siis, kui te ei muretse kaubamärgi pärast.
Flutteri mobiilirakendustega maailmas juurutate oma rakenduse enamasti kahte kohta.
Kõigil neil platvormidel peate registreerima arendajakonto. Arendajakonto registreerimine nõuab tasu või tellimust ja identiteedi kinnitamist.
App Store'i jaoks peate registreeruma Apple Developer programmis. Peate hooldama aastane tellimus 99 dollarit. Google Play jaoks peate tegema a ühekordne makse 25 dollarit konto jaoks.
Need poed vaatavad üle kõik üle vaadatud rakendused enne selle avaldamist.
Samuti pidage meeles, et kasutajad ei tarbi rakenduse värskendusi lihtsalt. Kasutajad peavad installitud rakendusi selgesõnaliselt värskendama. See on vastupidine veebile, kus kõik saavad lihtsalt näha veebisaidi uusimat juurutatud versiooni.
Juurutatud rakenduste haldamine on suhteliselt nõudlikum kui juurutatud veebisaitide haldamine. See ei tohiks teid siiski hirmutada. Lõppude lõpuks on mõlemas poes juurutatud miljoneid rakendusi, nii et saate ka enda oma lisada.
Täiendavad mõtted Flutteri kohta
Flutter on platvormideülene tööriist töölaua-, mobiili- või veebirakenduste loomiseks. Flutter-rakendused on täiuslikud pikslitega. Flutter värvib iga rakenduse jaoks sama kasutajaliidese, olenemata sihtplatvormist. Seda seetõttu, et iga Flutteri rakendus sisaldab Flutteri mootorit. See mootor renderdab Flutteri kasutajaliidese koodi. Flutter pakub igale seadmele lõuendit ja võimaldab teil maalida nii, nagu soovite. Mootor suhtleb sihtplatvormiga sündmuste ja interaktsioonide haldamiseks.
Flutter on tõhus. Sellel on kõrge jõudlustasemed. Seda seetõttu, et see on ehitatud Dartiga ja kasutab Darti funktsioone.
Nende paljude eelistega on Flutter hea valik paljude rakenduste jaoks. Platvormideülesed rakendused säästavad tootmise ja hoolduse ajal raha ja aega. Kuid Flutter (ja platvormidevahelised lahendused) ei pruugi mõnel juhul olla optimaalne valik.
Ärge kasutage Flutterit, kui soovite, et kasutajad kasutaksid teie rakendusega platvormi arendaja tööriistu. Platvormiarendaja tööriistad tähendavad siin seadmepõhiseid tööriistu, nagu Androidi arendaja valikud. See sisaldab ka brauseri arendaja tööriistu.
Ärge kasutage teenust Flutter veebis, kui eeldate, et brauseri laiendused suhtlevad veebisaidiga.
Ärge kasutage Flutterit ka sisurohkete veebisaitide jaoks.
Järeldus
See oli ülevaade oskustest, mis kanduvad üle esiotsa veebiarendusest Flutteriga töötamisse. Arutasime ka rakenduste arenduskontseptsioone, mida peate veebiarendajana õppima.
Flutter on veebiarendajate jaoks lihtsam, kuna mõlemad hõlmavad kasutajaliidese rakendamist. Kui käivitate Flutteri, saate teada, et see annab teile hea arendajakogemuse. Proovige Flutterit! Kasutage seda mobiilirakenduste loomiseks ja loomulikult oma loodu tutvustamiseks.
Tervitused!
