Sdílení zkušeností s vývojem téměř realistické, krásné mobilní aplikace v rekordním čase pomocí Flutter

Pozadí

Moje zkušenosti s vývojem mobilních aplikací jsou minimální. Před chvílí jsem se pokusil udělat něco základního s PhoneGapem a vyvinul jsem několik Hello World stylové aplikace využívající Android SDK. Ale nic s postupným úspěchem, aby to bylo jako užitečná aplikace.

Vytvořil jsem si vlastní obavy ze složitosti při nastavování věcí, budování, nasazování atd. To ve mně v minulosti vyvolalo obrovskou nechuť zkoušet vývoj mobilních aplikací (povzdech).

Nedávno jsem se o Flutterovi dozvěděl od Googlu. Co upoutalo mou pozornost, bylo

Cítil jsem, že toto tvrzení je tak pravdivé. Takže zde uvádím své zkušenosti s budováním téměř realistické (téměř) krásné nativní aplikace vyvinuté za přibližně 9 hodin (doba záznamu, nikoli však nepřetržitě.)!

Budu to považovat za rekordní čas protože jsem nikdy neměl žádné zkušenosti s prací s

  • Dart jako programovací jazyk a jeho rozhraní API. Musel jsem se učit, rozumět užitečným API a kódu.
  • Vytváření čehokoli, co souvisí s aplikací Native.
  • Nastavení => Vývoj => Publikační cyklus mobilní aplikace.

Tento příspěvek je o sdílení radosti z vývoje nativní aplikace pomocí Flutter. Jsem si jistý, že se vám bude také líbit, pokud jste začátečník jako já.

O čem aplikace je?

Nechtěl jsem budovat Ahoj světe znovu. Měl jsem v úmyslu naučit se v krátkém čase pomocí velkého množství praktických cvičení následující:

  • Zjistěte vše o nastavení, aniž byste byli demotivováni.
  • Napište dobrý kód.
  • Směrování a navigace, složité?
  • Rozvržení a design, musím být designér?
  • Hraní s obrázky a styly musí být snadné!
  • Komunikace serveru s voláním API, Hmmm...
  • Zpracování vlastních obrázků/ikon
  • Balení a stavba
  • Instalace aplikace
  • Zveřejněním v Obchodě Play začíná zábava.

Při vývoji aplikace Prediction pomocí node-cli jsem si předtím užil hodně. Co takhle vytvořit Předpověď mobilní aplikace? Interakce probíhá takto:

Pojďme na to krok za krokem

Zde je vše, co jsem se z toho mohl naučit:

Nastavení prostředí

Používal jsem operační systém Windows 10 a cílem bylo vyvinout, otestovat APP na zařízení Android. Místo toho jej však otestujte na telefonu IOS a beze změny zdrojového kódu .

Právě jsem se řídil tím, abych nastavil prostředí:Flutter Install Doc. Sledujte to řádek po řádku. Vše bude nastaveno, zaručeno.

Poznámka:Pokud nepoužíváte telefon Google Nexus, můžete mít pocit, že pro připojení k telefonu pomocí USB pro ladění musíte použít další ovladač pro váš operační systém. Nemusíte dělat nic dalšího.

Nastavení editoru pro kódování a ladění

Nakonfiguroval jsem VS Code jako svůj editor pro kódování a ladění. Zde je odkaz, podle kterého jsem to nastavil:Nastavení Flutter VS Code

Flutter Doctor

Pokračujte ve spuštění flutter doctor příkaz, abyste se ujistili, že jste na správné cestě.

Struktura kódu

Dart je jazykem za Flutterem. V mnoha příkladech uvidíte jeden main.dart soubor obsahuje tuny kódu. Jak aplikace roste, tento soubor se stává nespravitelným. Abych se ujistil, že nespadnu do této pasti, a svůj kód jsem strukturoval následovně:

main.dart soubor bude vypadat takto:

import 'package:flutter/material.dart';

import 'pages/homePage.dart';
import 'pages/resultPage.dart';


void main() => runApp(new PredictionApp());

class PredictionApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Prediction',
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: new HomePage(title: 'Prediction'),
       routes: <String, WidgetBuilder> {
        '/home': (BuildContext context) => new HomePage(),
        '/result' : (BuildContext context) => new ResultPage()
      },
    );
  }
}

Směrování

Předpověď aplikace je vícestránková aplikace. Domovská stránka žádá informace od uživatelů. Stránka s výsledky načte informace a ukáže je uživatelům. Existuje také možnost vrátit se na domovskou stránku . Potřebujeme směrování .

Tyto řádky v main.dart soubor udělat trik:

routes: <String, WidgetBuilder> {
        '/home': (BuildContext context) => new HomePage(),
        '/result' : (BuildContext context) => new ResultPage()
}

Rozvržení, obrázky a styl

Předpověď aplikace má několik widgetů při použití. Například záhlaví nahoře, Tělo obsahu, Formulář, který pomáhá shromažďovat informace od uživatelů, tlačítka, obrázky, texty atd. Nezbytné jsou tedy následující směry:

  • Úvod do widgetů
  • Úvod do rozvržení
  • Naučte se interaktivitu

Tyto odkazy jsou velmi důležité a velmi informativní, poutavé ke sledování.

Komunikace se serverem

Flutter používá přístup založený na zásuvných modulech. Neinstalujeme vše ve výchozím nastavení se samotným rámcem. Spíše musíme nainstalovat to, co potřebujeme, a importovat to do souboru dart, abychom to mohli používat. Prediction aplikace potřebuje interakci s Horoscope-API, které zpřístupňuje metody HTTP k načítání dat. Formát odpovědi volání API je JSON .

Abych to podpořil, přidal jsem do pubspec.yaml následující závislost soubor:

http: ^0.12.0+2

A v main.dart importoval jej spolu s analyzátorem JSON poskytovaným samotným jazykem Dart.

import 'package:http/http.dart' as http;
import 'dart:convert';

Tyto tři řádky Request the API, Receive JSON response a Parse it, respektive:

final response = await http.get('http://horoscope-api.herokuapp.com/horoscope/' + predictionData.getDuration().toLowerCase() + '/' + zodiacSign);
final responseJson = json.decode(response.body); 
Horoscope horoscope = new Horoscope.fromJson(responseJson);

Poslední řádek kódu analyzuje JSON odpovědi a mapuje hodnotu na atributy modelu (horoskopu).

Horoscope třída modelu je tak jednoduchá:

class Horoscope {
  String horoscope;
  String sunsign;

  Horoscope({this.horoscope,this.sunsign});


  factory Horoscope.fromJson(Map<String, dynamic> parsedHoroscope){
      return Horoscope(
        horoscope: parsedHoroscope['horoscope'],
        sunsign : parsedHoroscope['sunsign']
      );
  }
}

Zpracování vlastních obrázků

Použil jsem mnoho vlastních obrázků (většinou ikon) k reprezentaci různých znamení zvěrokruhu. Zahrnutí vlastních obrázků a ikon je tedy velmi snadné.

  • Vytvořte složku s názvem assets na stejné úrovni jako pubspec.yaml soubor.
  • Uchovávejte všechny své ikony a obrázky uvnitř assets složka.
  • Přidejte následující položku do pubspec.yaml zahrnout všechny ikony a obrázky ze složky aktiv:
    assets:
      - assets/
    
    Pokud chcete zahrnout vybrané ikony/obrázky, uveďte jejich názvy.

Ladění, balení a sestavování

Použil jsem obě Android Emulator (Instalováno jako součást nastavení) a Skutečné zařízení pro ladění aplikace. Lišta zápatí kódu VS zobrazuje zařízení, ke kterým jste připojeni, a můžete si jedno vybrat při ladění kódu.

Chcete-li sestavit soubor APK, použijte následující příkaz:

flutter build apk

Chcete-li nainstalovat soubor APK do zařízení, připojte zařízení pomocí USB a použijte následující příkaz

flutter install -d DXXXXX0123456787

Kde DXXXXX0123456787 je ID vašeho zařízení.

TIPY k nasazení souboru APK

  • Vaše aplikace může používat připojení k internetu, jako je Předpověď aplikace. Nezapomeňte přidat následující řádek do android/app/src/main/AndroidManifest.xml soubor:
    <uses-permission android:name="android.permission.INTERNET" />
    
    Další podrobnosti naleznete v tomto vláknu.
  • Možná budete chtít upravit ikonu spuštění vaší aplikace, např Přidejte ikonu pod složky pojmenované začínající mipmap- . Ty mohou být umístěny pod android\app\src\main\res . Poté upravte AndroidManifest.xml soubor tak, aby ukazoval na obrázek/ikonu jako
    android:icon="@mipmap/icon">
    
    Vezměte prosím na vědomí, že stejný soubor můžeme upravit a poskytnout také vhodný název a popis aplikace.

Publikování aplikace v obchodě APP Store

Pokud jste se jím řídili doteď, 90 % z toho jste již udělali. Chcete-li provést zbytek, postupujte podle odkazů. Další informace o nasazení.

  • Android
  • IOS

To je vše. Je to snadné a super snadné, ale především čistá zábava!

Kód

Nebojte se klonovat a vylepšovat kód z GitHubu

https://github.com/atapas/horoscope-app/

Aplikaci můžete vidět v plné akci v následujícím videu (30 sekund):

https://www.youtube.com/watch?v=ZLYFX18TQCA

Co bude dál

Dále bych chtěl komunikovat s hardwarem, jako je kamera, Bluetooth, a vyzkoušet ML Vision s Firebase. Zůstaňte naladěni!

Kredit

  • Ikony na obálkách vytvořené Freepik z flaticon.com jsou licencovány CC 3.0 BY

Doufám, že se vám začátek líbil. Dejte mi prosím vědět, jaké máte zkušenosti s vývojem mobilních aplikací nebo s flutterem. Rád se poučím z vašich sympatií a nelibostí. Pojďme se spojit. Můžete mě sledovat na Twitteru (@tapasadhikary).

Pokračujte ve čtení, sledování, sdílení!