Hybridappar. Utveckla mobilappar i HTML, Javascript och CSS

Transkript

1 Hybridappar Utveckla mobilappar i HTML, Javascript och CSS Presenterat av Erik Tufvesson, Presis i Lund AB

2 Kort om mig Erik Tufvesson Systemarkitekt och utvecklare på Presis! Brinner för utveckling av mobilappar!

3 Presentationen och all kod jag visar idag finns tillgänglig på GitHub bit.ly/presis1512

4 Vad ska jag prata om idag? Vad är en hybridapp? Komma igång Val av ramverk Ionic Framework React Native Ionic2 Efter varje huvudavsnitt blir det paus för frågor

5 Vad är en hybridapp? Består av både Native- och icke-nativekomponenter Vanligtvis en webbapp som visas i en inbyggd webbläsare (WebView) Kan kommunicera med telefonens mjukvara/hårdvara via plugins Utvecklas i HTML5/CSS3 och JavaScript Gemensam kodbas för Android/iOS Kompileras till ett installerarbart/distribuerbart paket

6 Komma igång

7 Android Android Platform Guide (Cordova) Java Development Kit (JDK) 7+ Android SDK (Android Studio) Android-emulator (t.ex. Genymotion)

8 ios ios Platform Guide (Cordova) OSX Xcode ios-emulator (npm install -g ios-sim)

9 Vilka ramverk finns det? Apache Cordova (tidigare PhoneGap) Ionic Framework Sencha Touch Appcelerator React Native (Facebook) NativeScript (Telerik) Xamarin (C#)... och många fler

10 Paus för frågor

11 Ionic Framework

12 Ionic Framework Cordova AngularJS (v1.4) Byggt för att se ut och kännas som Native Fokus på enkelhet och prestanda Enkelt att kommunicera med Native plugins (ngcordova) Bra dokumentation Stor community Över en miljon appar byggda med Ionic Mogen kodbas (v1.0 lanserades maj 2015)

13 Hur fungerar Ionic? Angular Directives och Services UI Router ngcordova (kommunicera med plugins) Eget CLI (Command Line Interface)

14 Ionic CLI > # kör i din webbläsare > ionic serve > # lägg till en platform till din app > ionic platform add [android ios] > # kompilera din kod till android/ios > ionic build [android ios] > # starta din app i en emulator > ionic emulate [android ios] > # kör din app på en fysisk enhet (telefon) > ionic run [android ios] > # installera en plugin > ionic plugin add...

15 Sätta upp ett nytt projekt i Ionic > npm install -g ionic cordova > # installerar ionic och cordova globalt på din dator > ionic start MyAwesomeApp > # skapar upp en ny app med ett default-utseende > cd MyAwesomeApp > # en ny mapp skapas för appen > ionic serve > # startar upp appen i din webbläsare

16 Kodexempel tab-cats.html <ion-view view-title="cats with Hats"> <ion-content class="padding"> <div ng-repeat="cat in cats"> <img ng-src="{{cat.url}}" alt="cat"> <button ui-sref="tab.cat-detail({id: cat.id})"> <i class="icon ion-eye"></i> </button> </div> </ion-content> </ion-view>

17 Kodexempel cats.js angular.module('app.cats', []).controller('catsctrl', function ($scope, Cats) { Cats.get().then(function(cats) { $scope.cats = cats; }); }).factory('cats', function($http, $q) { return { get: function() { var deferred = $q.defer(); $http.get(' { deferred.resolve(res.data); }); return deferred.promise; } } });

18 Android ios Cats with Hats Cats with Hats Hats About Hats Länk till källkoden

19 Andra features i Ionic

20 Ionicons ionicons.com Ikon-font med 700+ ikoner för både Android och ios.

21 Ionic Resources Skapa App-ikon och Splash screens mycket enkelt Skapa en bild (.png,.ai,.psd) för din ikon och en för din splash screen. Placera dem i mappen "resources" döpta till "icon.png" resp "splash.png". Kommandot nedan skalar om dina bilder till alla varianter du behöver. > ionic resources > # Klart! Länk till dokumentationen

22 Ionic Creator creator.ionic.io Skapa design-mockups med drag-n-drop.

23 Ionic Lab lab.ionic.io Desktop-app som hjälpmedel vid utveckling. (Istället för att köra via kommandoprompten.)

24 Ionic View view.ionic.io Dela och testa din app utan att publicera den. > ionic upload > # Uploading app... > # Saved app_id,... > # Successfully uploaded (0e7bf062) > # Share your beautiful app with someone: > ionic share your@ .com

25 Exempel på färdig app WTHR (VÄDR) Källkod: github.com/eriktufvesson/ionweather Play store: play.google.com/...se.presis.wthr Väderapp skriven i Ionic Framework Använder mobilens GPS för att hitta din position Hämtar väderdata från yr.no baserat på din position Använder Google Maps API för att hämta uppgifter om ortsnamn samt att söka efter andra orter

26 Paus för frågor

27 React Native

28 React Native Byggt av Facebook React JS ES6/ES7 Använder inte Cordova Ingen HTML React JSX kompileras till Native-element Logik körs i en egen tråd (JavaScriptCore) Inte 100% samma kodbas till ios/android

29 Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt på din dator > react-native init MyAwesomeReactNativeApp > # Skapar upp en ny app med ett default-utseende > cd MyAwesomeReactNativeApp > # En ny mapp skapas för appen > # Starta en emulator, t.ex. Genymotion, nu. > # Alternativt anslut din telefon med USB. > react-native start > # Startar React Natives paketeringstjänst > react-native run-android > # Startar appen i emulatorn eller på din telefon

30 Kodexempel React Native Component

31 Styling Delmängd av CSS Flexbox för positionering

32 Kodexempel React Native Styling

33 Tap to Play Tap to Play

34 React Native Playground rnplay.org

35 Paus för frågor

36 Ionic 2

37 Ionic 2 Alpha release Angular 2 Webpack Förbättrad prestanda Material Design för Android ES6/TypeScript

38 Sätta upp ett nytt projekt > npm install -g > # installerar ionic (v1 och v2) globalt på din dator > ionic start MyAwesomeIonic2App --v2 > # skapar upp en ny app med ett default-utseende > cd MyAwesomeIonic2App > # en ny mapp skapas för appen > ionic serve > # startar appen i din webbläsare

39 Kodexempel Ionic 2 - cats.html <ion-navbar *navbar primary> <ion-title>funny Cats</ion-title> </ion-navbar> <ion-content padding> <div *ng-for="#cat of cats"> <img [src]="cat.url" alt="cat"> <button primary (click)="viewcat(cat)"> <icon eye></icon> </button> </div> </ion-content>

40 Kodexempel Ionic 2 - cats.js import {Page, NavController} from 'ionic/ionic'; import {Http} from 'angular2/http'; import {CatDetail} from templateurl: 'app/cats/cats.html' }) export class Cats { constructor(http: Http, nav: NavController) { this.nav = nav; this.http = http; this.cats = []; } oninit() { this.http.get(' => res.json()).subscribe(data => { this.cats = data; }); } viewcat(cat) { this.nav.push(catdetail, {cat: cat}); } }

41 Funny Cats Android ios Funny Cats CATS ABOUT Länk till källkoden Cats About

42 Ionic 2 CLI Alla funktioner från Ionic v1 + > # Lägg till en ny sida i din app > ionic generate page min-sida > # Skapar en ny mapp med ett nytt skal för en sida > # - app > # --- min-sida > # min-sida.html > # min-sida.js > # min-sida.scss

43 Tips för debugging Aktivera Source Maps i Webpack // webpack.config.js... module.exports = { entry: [...], output: {...}, module: {...}, resolve: {...}, sassloader: {...}, /* Add this line */ devtool: 'source-map' };

44 Kom ihåg Ionic 2 är fortfarande Alpha Mycket saknas och annat kan ändras innan det är färdigt för produktion

45 Paus för frågor

46 Rekommenderade länkar Ionic Framework ionicframework.com Ionic Forum ionic.io 230+ Ionic Framework Resources React Native Official site reactnative.com React Native Playground Facebook: How we built the first cross-platform React Native app Ionic 2 Ionic 2 Docs Building cross platform apps with Ionic 2 Adam Bradley (youtube) Exempel-app från presentationen ovan

47 Kodkväll! Kom och koda tillsammans med oss! Vi bjuder på mat och dryck! Datum meddelas senare

48 </html> bit.ly/presis1512