Kommunikation med bluetooth enheder (BLE) i Ionic/Cordova

"Denne guide kan bruges til alle BLE enheder, f.eks. lys, termometer, Arduino, Micro:bit / Ultra:bit, pulsmåler med mere"

Indledning

Hvis du allerede har styr på Ionic eller bruger Cordova sammen med en anden stack, så kan du roligt skippe til den næste sektion. Grunden til at jeg foretrækker at have en indledning, er at man gerne skulle kunne følge den fra start til slut (kræver en BLE enhed) og kunne ende op med at kommunikere med den enhed.

Relevant info

Ionic er en wrapper som gør det nemt at bygge mobile applikationer og Progressive Web Apps (eller PWA'er), der ser ens ud på alle typer enheder. Det vil sige at du kan bruge Ionic til at udvikle din app, og så sørger Ionic ellers for at lave den native kode, der gør at din applikation kan køre på både iOS og Android, med din ikke-native kode. Det performer faktisk rigtigt godt og er en hurtig måde at komme igang med at udvikle apps på.

iOS / Android

Jeg vil anbefale at du starter med at fokusere på Android, medmindre du allerede har din Apple udviklerkonto og styr på dit Xcode setup. Hvis du gerne vil have sådan en udviklerkonto, kan du følge instruktionerne her - bare vær opmærksom på at det koster 99$ om året.  *tidspunkt: 01-02-2020

Med Android kan du begynde at udvikle apps uden at betale noget, det er kun når/hvis du gerne vil have din app i Google Play Store at det koster penge, men det er en engangsydelse på 25$.  *tidspunkt: 01-02-2020

Udviklingsmiljø

Jeg vil anbefale at du følger Ionic's opsætningsguide som du kan finde her - den burde kunne få dig helt i mål, men for god ordens skyld, skriver jeg her, hvordan jeg ville gøre det.

  • Installer Visual Studio Code - Det er her du skriver - og holder styr på - din kode. Magien sker her!
  • Installer Node.js - Node kommer med npm indbygget - som er måden du får installeret alle de pakker/programmer som Ionic, Cordova og Angular bruger.
  • Du behøves ikke at bruge Git, men jeg vil stærkt anbefale at du i fremtiden f.eks. bruger Gitlab, det vil spare dig en masse problemer med kode der forsvinder / bliver slettet.

Når du har fået styr på VSCode og Node/NPM, så kan du begynde med opsætningen af Android...

Android opsætning

Igen har Ionic en udmærket guide, til hvordan du kommer i gang med Android udvikling. Den kan du finde her. Vi bruger ikke Android Studio til at udvikle apps, vi bruger den "kun" til at køre dine apps som en native app, og til at administrere din Android SDK.

Der er nogle quirks der afhænger lidt af dit styresystem, men jeg syntes at Ionic's guide holder en godt i hånden, så det burde være til at komme i mål. Det er i bund og grund bare at installere Android Studio og sørge for at det virker. Google har også en del hjælpemidler til det.

Ionic opsætning

Nu er vi næsten klar, nu mangler vi bare at få installeret Ionic, men det er det letteste, hvis ellers du fik installeret Node/NPM korrekt. Det kan du teste ved at skrive dette i din terminal (brug eventuelt visual studio's indbyggede terminal - se billeder under denne sektion)

$ npm install -g @ionic/cli

Voila, så er Ionic installeret, så er det tid til at lave vores app, og her har Ionic en del starter templates, hvilken du vælger er op til dig, jeg har taget Tabs, du starter installationen ved at skrive denne kommando, og så ellers følge deres instruktioner.

$ ionic start

Når du er færdig, og har fået installeret alt, kan du navigere til din ny-oprettede applikation - cd BluetoothTutorial/ - i mit tilfælde, og prøve at køre 

$ ionic serve

Så skulle din fine nye app gerne åbne i... din browser. Nu kan du navigere rundt, og teste den lidt, for nu er vi klar til det som det hele handler om... nemlig at lege med Bluetooth!

Billeder til ovenstående

Brug VS Codes indbyggede terminal til at installere pakker og skrive kommandoer.

Brug VS Codes indbyggede terminal til at installere pakker og skrive kommandoer.

Skriv ionic start for at begynde installationen af din Ionic App - Skriv efterfølgende dit navn på projektet.

Skriv ionic start for at begynde installationen af din Ionic App - Skriv efterfølgende dit navn på projektet.

Vælg det JS framework du ønsker at bruge - her vælger jeg Angular.

Vælg det JS framework du ønsker at bruge - her vælger jeg Angular.

Her kan du vælge dit ønskede setup med pre-definerede filer - her vælger jeg tabs, men du kan frit vælge.

Her kan du vælge dit ønskede setup med pre-definerede filer - her vælger jeg tabs, men du kan frit vælge.

Ionic BLE Tutorial

Kommentar / Feedback