Ohjelmointiympäristön käyttöönotto

Tässä osassa ohjelmointiympäristön käyttöönottoon. Käytämme ohjeissa Visual Studio Code -ohjelmointiympäristöä. Ohjeet noudattavat Flutterin dokumentaatiota ohjelmointiympäristön käyttöönotosta ja ensimmäisen sovelluksen luomisesta.

Visual Studio Coden asentaminen

Ohjelmointiympäristö on ohjelma, joka auttaa ohjelmoinnissa. Ohjelmointiympäristössä voi olla esimerkiksi ohjelmointikielen syntaksin värjäys, jolloin ohjelmointikielen komennot ovat helposti tunnistettavissa. Ohjelmointiympäristö voi myös korostaa lähdekoodissa olevia virheitä sekä mahdollisesti tarjota ehdotuksia niiden korjaamiseen. Ohjelmointiympäristöt tarjoavat tyypillisesti myös tuen ohjelmien suorittamiseen sekä mahdollisesti niiden julkaisemiseen. Oikeastaan materiaalissa tähän asti käytetty upotettu ympäristö on myös ohjelmointiympäristö.

Käytämme tässä ohjeessa Visual Studio Code -ohjelmointiympäristöä. Ohjeet Visual Studio Code -ohjelmointiympäristön asentamiseen löytyvät osoitteesta https://code.visualstudio.com/. Asenna Visual Studio Code koneellesi nyt.

Flutter-tuen lisääminen

Kun olet asentanut Visual Studio Coden koneellesi, käynnistä Visual Studio Code. Lisäämme seuraavaksi Visual Studio Codeen tuki Flutter-sovellusten luomiseen.

Klikkaa ohjelmointiympäristön yläpalkista kohtaa View. Tämä avaa valikon, jossa on muunmuassa vaihtoehto Command Palette. Klikkaa vaihtoehtoa Command Palette. Tämä avaa tekstialueen, johon voi kirjoittaa tekstiä, jonka perusteella ohjelmointiympäristö näyttää mahdollisia komentoja.

Kun kirjoitat tekstin install, näet listan komentoja, joissa esiintyy teksti install. Klikkaa listalta vaihtoehtoa Extensions: Install Extensions.

Kun klikkaat listalta vaihtoehtoa Extensions: Install Extensions, ohjelmointiympäristön vasemmalle laidalle aukeaa valikko. Valikosta voi valita ohjelmointiympäristöön lisättäviä liitännäisiä.

Valikon ylälaidassa on mahdollisuus tekstin kirjoittamiseen, jonka perusteella rajataan näytettyjä liitännäisiä. Kirjoita tekstikenttään flutter. Tämä rajaa liitännäiset niihin, joissa esiintyy sana flutter. Listalle nousee nyt Flutter-liitännäinen, jonka asentamalla ohjelmointiympäristöön saa tuen Flutter-sovellusten tekemiseen.

Kun olet kirjoittanut tekstikenttään tekstin flutter, klikkaa Flutter-liitännäisen kohdalta nappia Install. Odota kunnes liitännäinen on asentunut.

Kun Flutter on asentunut, vasemmalla laidalla olevassa listassa ei näy Flutter-vaihtoehdon kohdalla Install-nappia.

Tarkastetaan vielä, että Flutter on asentunut. Klikkaa ohjelmointiympäristön yläpalkista kohtaa View ja valitse taas vaihtoehto Command Palette. Kirjoita avautuvaan tekstialueeseen doctor.

Komentovaihtoehdoksi pitäisi ilmestyä Flutter: Run Flutter Doctor. Flutter Doctor on ohjelma, joka tarkastelee ympäristöön lisättyä Flutter-tukea.

Suorittaessasi komentoa, vastaan tulee mahdollisesti virheviesti, jonka mukaan Flutterin ohjelmointityökalupakettia (SDK) ei löydy vaikka Flutter olisikin onnistuneesti asennettu.

Ongelman saa korjattua sulkemalla ohjelmointiympäristö ja käynnistämällä se uudestaan, kuten virheviestissäkin vihjataan.

Sovelluksen luominen

Tarkastellaan seuraavaksi Flutter-sovelluksen luomista.

Klikkaa ohjelmointiympäristön yläpalkista kohtaa View ja valitse taas vaihtoehto Command Palette. Kirjoita tekstikenttään teksti flutter app ja valitse esiin tulevista vaihtoehdoista Flutter: New Project.

Tämän jälkeen tulee vielä yksi valikko erilaisista projektivaihtoehdoista. Valitse näistä Application.

Kun valitset vaihtoehdon Flutter: New Application Project, ohjelmointiympäristö aloittaa uuden sovelluksen luomisen. Ohjelmointiympäristö kysyy ensin kansiota, johon sovellus luodaan -- valitse jokin sopiva kansio koneeltasi.

Tämän jälkeen ohjelmointiympäristö kysyy nimeä luotavalle sovellukselle. Alla sovelluksen nimeksi annetaan sovellukseni.

Tämän jälkeen ohjelmointiympäristö luo valittuun kansioon uuden kansion, johon uuden sovelluksen tiedostot asetetaan. Ohjelmointiympäristön vasemmalle laidalle aukeaa tässä kohtaa myös alue, jossa näkyy kansio ja sen sisältö.

Kuten huomaat, kansiossa on useita tiedostoja ja alikansioita. Oleellisin näistä alikansioista on tässä kohtaa lib, joka sisältää sovelluksen lähdekoodit.

Samalla ohjelmointiympäristön oikealle laidalle aukeaa lib kansiossa olevan tiedoston main.dart sisältö, jota voi muokata. Mikäli main.dart ei avaudu tai sen sulkee, sen saa auki klikkaamalla tiedostonnimeä vasemman laidan tiedostovalikossa.

Sovelluksen käynnistäminen ja muokkaaminen

Sovelluksen käynnistäminen onnistuu f5-nappia painamalla tai klikkaamalla hiiren oikealla napilla tiedostoa main.dart ja valitsemalla Run Without Debugging. Vaihtoehtoisesti voit painaa vasemman laidan palkista kuvaa, jossa on play-nappi ja ötökän kuva, ja tämän jälkeen painaa avautuvasta välilehdestä Run and Debug-nappia.

Sovelluksen käynnistyminen kestää hetken.

Flutter-sovellus aukeaa uuteen selainikkunaan. Alla olevassa kuvassa selainikkuna on ohjelmointiympäristön alla.

Ohjelmointiympäristössä Flutter-sovelluksia kehitettäessä käytössä on toiminnallisuus, joka muutosten yhteydessä päivittää muutokset käynnissä olevaan sovellukseen (ns. "hot reload"). Tarkastellaan tätä seuraavaksi.

Muuta tiedostossa main.dart määriteltyä sovelluksen otsikkoa title muotoon Sovellukseni ja tallenna tiedosto (Ctrl+s tai File->Save).

Kun sovellus on tallennettu, käynnissä olevassa sovelluksessa näkyvän otsikon pitäisi muuttua muotoon Sovellukseni. Alla olevassa kuvassa päivittynyt otsikko näkyy selaimen palkissa.

Sovelluksen kansiorakenne

Sovelluksen luonnin yhteydessä luodaan kansio, jonka sisälle sovelluksen tiedostot tulevat. Kansioon tulee useita alikansioita, muunmuassa kansiot nimeltä android, ios, web, integration_test ja test. Nämä kansiot liittyvät sovelluksen paketointiin mobiiliympäristöjä ja web-ympäristöä varten sekä sovelluksen testaamiseen. Alla on eräs mahdollinen tulostus sovelluksen kansiorakenteesta -- alla ei näy pisteellä alkavia kansioita, joissa on muunmuassa ohjelmointiympäristökohtaisia asetuksia.

tree
.
├── android
│   └── ..
├── integration_test
│   └── ..
├── ios
│   └── ..
├── lib
│   └── main.dart
├── pubspec.lock
├── pubspec.yaml
├── README.md
├── sovellukseni.iml
├── test
│   └── ..
└── web
    └── ..

Tässä kohtaa oleellisin kansio on lib, jonka sisällä on sovelluksemme lähdekooditiedostot. Kun sovellus on luotu, kansiossa on sovelluksen käynnistyspisteenä toimiva tiedosto main.dart. Kansion lib lisäksi oleellinen tiedosto on pubspec.yaml, joka sijaitsee sovelluksen juuressa. Tiedosto pubspec.yaml sisältää sovelluksen asetuksia.

Sovelluksen jakaminen osiin

Kun sovelluksen koko kasvaa, ei kaiken toiminnallisuuden sisällyttäminen samaan lähdekooditiedostoon ole mielekästä. Toiminnallisuutta kannattaa jakaa useampaan osaan -- käytännössä tämä tapahtuu luomalla lib-kansioon useampia lähdekooditiedostoja sekä alikansioita, joiden sisälle tulee lähdekooditiedostoja. Lähdekooditiedostossa voidaan ladata toisessa tiedostossa määritelty toiminnallisuus import-komennolla, jonka jälkeen tulee ladattavan tiedoston nimi.

Tarkastellaan tätä esimerkin kautta. Oletetaan, että kansiossa lib on kaksi tiedostoa. Näiden tiedostojen nimet ovat tervehdys.dart ja main.dart. Tiedostossa tervehdys.dart määritellään komponentti Tervehdys, jota käytetään tervehdyksen näyttämiseksi. Tiedoston sisältö näytetään alla.

import 'package:flutter/material.dart';
.
class Tervehdys extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Text('Hei maailma!');
  }
}

Tiedostossa tervehdys.dart määritelty toiminnallisuus tuodaan tiedoston main.dart käyttöön komennolla import 'tervehdys.dart'. Alla oleva esimerkki kuvaa main.dart-tiedoston sisältöä -- tiedostossa main.dart luodaan sovellus, joka näyttää tervehdyksen.

import 'package:flutter/material.dart';
import 'tervehdys.dart';
main() {
  final sovellus = MaterialApp(home: Scaffold(body: Tervehdys()));
  runApp(sovellus);
}

Kun sovelluksen käynnistää, sovelluksessa näkyy teksti "Hei maailma!".

Mikäli lib-kansiossa on alikansioita, joiden sisällä olevia lähdekooditiedostoja halutaan tuoda sovelluksen käyttöön, import-komentoon lisätään kansion nimi ja kenoviiva. Oletetaan, että käytössämme on projekti, missä lib-kansion sisällä on kansio components, jonka sisällä edellä määritelty tiedosto tervehdys.dart on.

tree
.
├── android
│   └── ..
├── integration_test
│   └── ..
├── ios
│   └── ..
├── lib
|   ├── components
│   |   └── tervehdys.dart
│   └── main.dart
├── pubspec.lock
├── pubspec.yaml
├── README.md
├── sovellukseni.iml
├── test
│   └── ..
└── web
    └── ..

Nyt, tiedoston tervehdys.dart tuominen tiedostoon main.dart vaatii import-komentoon myös tiedoston kansion. Tämä on kuvattuna alla olevassa ohjelmassa.

import 'package:flutter/material.dart';
import 'components/tervehdys.dart';
main() {
  final sovellus = MaterialApp(home: Scaffold(body: Tervehdys()));
  runApp(sovellus);
}

Harjoittelet seuraavissa tehtävissä tiedostojen käyttöä. Käytät tehtävissä materiaaliin upotetun ohjelmointiympäristön sijaan paikallista ohjelmointiympäristöä. Tehtävänannoissa on teksti Download starter code, jota painamalla voit ladata koneellesi Zip-tiedoston, johon tehtävään liittyvät lähdekooditiedostot on lisätty. Zip-tiedoston sisällä on käytännössä lib-kansion sisältö.

Voit purkaa Zip-tiedoston projektin lib-kansioon ja käynnistää sovelluksen ohjelmointiympäristössä. Vastaavasti, kun olet palauttamassa tehtävää, pakkaa lib-kansion sisältö Zip-tiedostoon, ja lähetä se tehtävänannossa olevan lähetysalueen kautta.

Huom! Älä pakkaa lib-kansiota, vaan lib-kansion sisältö!

Kolmannen osapuolen projektien hyödyntäminen

Sovelluksia tehdessä hyödynnetään usein kolmannen osapuolen projekteja, jolloin aivan kaikkea ei tarvitse tehdä itse. Kolmannen osapuolen projektit ovat muiden tekemiä kirjastoja tai liitännäisiä, joiden avulla tuodaan lisätoiminnallisuutta tai esimerkiksi helpommin käytettäviä toiminnallisuuksia omaan ohjelmaan.

Kolmannen osapuolen projektit lisätään pubspec.yaml-tiedostoon. YAML-tiedostot (YAML Ain't Markup Language), jotka tunnistaa .yaml tai .yaml -päätteestä ovat eräs helposti luettava tapa esittää tietoa -- lisää tietoa tiedon esitysmuodoista löytyy data ja tieto -kurssissa.

Alla on aiemmin tekemämme projektin pubspec.yaml-tiedosto ilman risuaidalla # merkittyjä kommentteja.

name: sovellukseni
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: 1.0.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test:
    sdk: flutter

flutter:
  uses-material-design: true

YAML-tiedostoissa sisennys kertoo mihin alueeseen mikäkin osa kuuluu. Yllä esimerkiksi muuttujalle ympäristö environment on määritelty muuttuja sdk, jonka arvoksi on asetettu ">=2.7.0 <3.0.0".

Kolmannen osapuolen projektit lisätään riippuvaisuudeksi (dependency) kohdan dependencies: alle. Koska sisennys kertoo mihin alueeseen kukin asia kuuluu, on oikea sisennys tärkeä. Tyypillisesti sisennyksenä käytetään kahta välilyöntiä.

Alla pubspec.yaml-tiedostoon on lisätty HTTP-pyyntöjen tekemiseen tarkoitettu http-kirjasto. Alla määritellään kirjaston versioksi 0.12.2.

name: sovellukseni
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: 1.0.1
  http: 0.12.2
dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test:
    sdk: flutter

flutter:
  uses-material-design: true

Muokkaa projektisi pubspec.yaml-tiedostoa ja lisää projektiin http-riippuvuus. Kun riippuvuus on lisätty, klikkaa ohjelmointiympäristön yläpalkista kohtaa View ja valitse taas vaihtoehto Command Palette. Kirjoita tekstikenttään teksti pub get ja valitse esiin tulevista vaihtoehdoista Pub: Get Packages.

Tämä lataa riippuvuuden koneellesi.

Muokkaa tämän jälkeen lib-kansiossa olevan main.dart-tiedoston sisältö seuraavanlaiseksi. Alla oleva ohjelma tekee pyynnön osoitteeseen https://fitech-api.deno.dev/sum?one=43&two=-1 http-kirjaston get-funktiota käyttäen. Vastauksen runko (body) asetetaan tekstikomponentin tekstiksi, joka näytetään sovelluksessa.

import 'package:flutter/material.dart';
import 'package:http/http.dart';

main() async {
  final url = Uri.parse('https://fitech-api.deno.dev/sum?one=43&two=-1');
  final response = await get(url);

  final teksti = Text(response.body);
  final sovellusrunko = Scaffold(body: teksti);
  final sovellus = MaterialApp(home: sovellusrunko);

  runApp(sovellus);
}

Kun käynnistät sovelluksen, huomaat, että sovelluksessa näytetään teksti Sum: 42, joka on osoitteessa https://fitech-api.deno.dev/sum?one=43&two=-1 näytetty arvo.

Emulaattorin käyttö

Emulaattori on ohjelma, joka mahdollistaa ohjelmien ja laitteiden käytön eli emuloinnin niiden alkuperäisen ympäristön kuten vaikkapa puhelimen tai älytelevesion ulkopuolella. Mobiilisovelluksia kehitettäessä käytetään usein puhelinemulaattoria eli ohjelmaa, jossa kehitettävää mobiilisovellusta voi kokeilla aivan kuin mobiilisovellus olisi oikeassa puhelimessa.

Tarkastellaan tässä lyhyesti Android-emulaattorin käyttöä mobiilisovelluksen tarkastelussa. Alla on linkit ohjeisiin Android-emulaattorin asentamiseen eri käyttöjärjestelmiä varten.

• Ohjeet Android-emulaattorin asentamiseen Windowsille
• Ohjeet Android-emulaattorin asentamiseen macOSille
• Ohjeet Android-emulaattorin asentamiseen Linuxille

Kun Android-emulaattori on asennettu, käynnistä Visual Studio Code uudestaan. Kun olet käynnistänyt Visual Studio Coden uudestaan ja olet avannut aiemmin luodun ohjelmointiprojektin, näet Visual Studio Coden oikeassa alalaidassa valikon, josta voi valita käytettävän ympäristön.

Klikkaamalla oikeassa alalaidassa olevaa ympäristön valintaan tarkoitettua kohtaa Visual Studio Code avaa valikon, josta voi valita mobiilisovelluksen suoritusympäristön. Alla olevassa kuvassa vaihtoehtoina ovat selainympäristö (Chrome), tiettyä puhelinta kuvaava emulaattori (tässä Pixel 2 API 30) sekä yleinen Android-käyttöjärjestelmän emulaattori (Create Android emulator). Nämä vaihtelevat sen perusteella, mitä emulaattoreita ohjelmointiympäristön käyttöön on luotu.

Valitsemalla tiettyä puhelinta kuvaavan emulaattorin, kyseistä puhelinta vastaava emulaattori käynnistyy.

Toisaalta, jos valitset vaihtoehdon "Create Android emulator", ohjelmointiympäristö luo yleisen flutter-sovellusten emulointiin tarkoitetun ohjelman. Jatkossa tämä löytyy valikosta (esimerkiksi) nimellä "flutter emulator".

Kun käynnistät emulaattorin, aukeaa se erillisenä ohjelmana. Alla olevassa kuvassa Android-sovellusten emulointiin käytetty ohjelma on ohjelmointiympäristön takana.

Nyt, kun emulaattori on käynnissä, ja käynnistämme sovelluksen (esim. klikkaamalla tiedostoa main.dart oikealla hiiren napilla ja valitsemalla "Run Without Debugging"), käynnistyy ohjelma emulaattorissa.

Kun ohjelma käynnistetään, huomaamme että emulaattorissa käyttäjälle näytettävä teksti on kuitenkin puhelimen näyttämien tietojen (kellonaika, verkon kuuluvuus, ym) alla.

Tämä on helposti korjattavissa. Kun käsittelimme yleisiä käyttöliittymäkomponentteja, tutustuimme lyhyesti komponenttiin nimeltä SafeArea. SafeArea muokkaa sovellusta siten, että sovellus ja puhelimen omat tiedot eivät ole päällekkäin.

Muokataan aiemmin tekemäämme sovellusta siten, että sovellus on SafeArea-komponentin sisällä. Muokkaa main.dart-tiedostoa seuraavanlaiseksi.

import 'package:flutter/material.dart';
import 'package:http/http.dart';

main() async {
  final url = Uri.parse('https://fitech-api.deno.dev/sum?one=43&two=-1');
  final response = await get(url);

  final teksti = Text(response.body);
  final sovellusrunko = Scaffold(body: SafeArea(child: teksti));
  final sovellus = MaterialApp(home: sovellusrunko);

  runApp(sovellus);
}

Nyt, kun käynnistät sovelluksen uudestaan (esim. klikkaamalla tiedostoa main.dart oikealla hiiren napilla ja valitsemalla "Run Without Debugging"), huomaat että sovelluksen teksti näkyy toivotulla tavalla.