hybridappar - github pageseriktufvesson.github.io/presishybridapps/slides.pdf · sätta upp ett...
TRANSCRIPT
![Page 1: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/1.jpg)
HybridapparUtveckla mobilappar i HTML, Javascript och CSS
Presenterat av , Erik Tufvesson Presis i Lund AB
![Page 2: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/2.jpg)
Kort om mig
Erik Tufvesson
Systemarkitekt och utvecklare på Presis!
Brinner för utveckling av mobilappar!
![Page 3: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/3.jpg)
Presentationen och all kod jag visaridag finns tillgänglig på GitHub
bit.ly/presis1512
![Page 4: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/4.jpg)
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
![Page 5: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/5.jpg)
Består av både Native- och icke-Native-
komponenter
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
Vad är en hybridapp?
![Page 6: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/6.jpg)
Komma igång
![Page 7: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/7.jpg)
Android
Java Development Kit (JDK) 7+
Android SDK (Android Studio)
Android-emulator (t.ex. )
Android Platform Guide (Cordova)
Genymotion
![Page 8: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/8.jpg)
iOS
OSX
Xcode
iOS-emulator (npm install -g ios-sim)
iOS Platform Guide (Cordova)
![Page 9: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/9.jpg)
Vilka ramverk finns det?Apache Cordova (tidigare PhoneGap)
Ionic Framework
Sencha Touch
Appcelerator
React Native (Facebook)
NativeScript (Telerik)
Xamarin (C#)
... och många fler
![Page 10: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/10.jpg)
Paus för frågor
![Page 11: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/11.jpg)
Ionic Framework
![Page 12: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/12.jpg)
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)
http://ionicframework.com/
![Page 13: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/13.jpg)
Hur fungerar Ionic?Angular Directives och Services
UI Router
ngCordova
(kommunicera med plugins)
Eget CLI
(Command Line Interface)
![Page 14: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/14.jpg)
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 ...
![Page 15: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/15.jpg)
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
![Page 16: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/16.jpg)
Kodexempeltab-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>
![Page 17: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/17.jpg)
Kodexempelcats.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('https://kittenapi.herokuapp.com/cats/hats/100') .then(function(res) { deferred.resolve(res.data); }); return deferred.promise; } } });
![Page 18: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/18.jpg)
Android
Hats
About
Cats with Hats
iOS
Hats
Cats with Hats
Länk till källkoden
![Page 19: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/19.jpg)
Andra features i Ionic
![Page 21: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/21.jpg)
Ionic ResourcesSkapa 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
![Page 23: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/23.jpg)
Ionic Lab
Desktop-app som hjälpmedel vid utveckling.
(Istället för att köra via kommandoprompten.)
lab.ionic.io
![Page 24: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/24.jpg)
Ionic View
Dela och testa din app utan att publicera den.
view.ionic.io
> ionic upload> # Uploading app....> # Saved app_id, ...> # Successfully uploaded (0e7bf062)
> # Share your beautiful app with someone:> ionic share [email protected]
![Page 25: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/25.jpg)
Exempel på färdig app
WTHR (VÄDR)Källkod:
Play store:
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
github.com/eriktufvesson/ionWeather
play.google.com/...se.presis.wthr
![Page 26: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/26.jpg)
Paus för frågor
![Page 27: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/27.jpg)
React Native
![Page 28: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/28.jpg)
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
https://facebook.github.io/react-native/
![Page 29: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/29.jpg)
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
![Page 30: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/30.jpg)
Kodexempel
React Native Component
![Page 31: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/31.jpg)
StylingDelmängd av CSS
Flexbox för positionering
![Page 32: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/32.jpg)
Kodexempel
React Native Styling
![Page 33: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/33.jpg)
Tap to PlayTap to Play
![Page 35: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/35.jpg)
Paus för frågor
![Page 36: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/36.jpg)
Ionic 2
![Page 37: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/37.jpg)
Ionic 2
Alpha release
Angular 2
Webpack
Förbättrad prestanda
Material Design för Android
ES6/TypeScript
http://ionic.io/2
![Page 38: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/38.jpg)
Sätta upp ett nytt projekt
> npm install -g ionic@alpha > # 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
![Page 39: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/39.jpg)
KodexempelIonic 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>
![Page 40: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/40.jpg)
KodexempelIonic 2 - cats.js
import {Page, NavController} from 'ionic/ionic';import {Http} from 'angular2/http'; import {CatDetail} from '../cat-detail/cat-detail';
@Page({ 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('https://kittenapi.herokuapp.com/cats/funny/100') .map(res => res.json()) .subscribe(data => { this.cats = data; }); } viewCat(cat) { this.nav.push(CatDetail, {cat: cat}); }}
![Page 41: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/41.jpg)
Android
CATSCATS
ABOUTABOUT
Funny CatsFunny Cats
iOS
Cats
About
Funny CatsFunny Cats
Länk till källkoden
![Page 42: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/42.jpg)
Ionic 2 CLIAlla 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
![Page 43: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/43.jpg)
Tips för debuggingAktivera Source Maps i Webpack
// webpack.config.js ... module.exports = { entry: [...], output: {...}, module: {...}, resolve: {...}, sassLoader: {...}, /* Add this line */ devtool: 'source-map' };
![Page 44: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/44.jpg)
Kom ihåg
Ionic 2 är fortfarande AlphaMycket saknas och annat kan ändras innan det är färdigt för
produktion
![Page 45: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/45.jpg)
Paus för frågor
![Page 46: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/46.jpg)
Rekommenderade länkarIonic Framework
React Native
Ionic 2
ionicframework.com
Ionic Forum
ionic.io
230+ Ionic Framework Resources
Official site
reactnative.com
React Native Playground
Facebook: How we built the first cross-platform React Native app
Ionic 2 Docs
Building cross platform apps with Ionic 2 – Adam Bradley (youtube)
Exempel-app från presentationen ovan
![Page 47: Hybridappar - GitHub Pageseriktufvesson.github.io/presishybridapps/slides.pdf · Sätta upp ett nytt projekt > npm install -g react-native-cli > # Installerar React Natives CLI globalt](https://reader033.vdocuments.site/reader033/viewer/2022042313/5f020b617e708231d4024cd3/html5/thumbnails/47.jpg)
Kodkväll!
Kom och koda tillsammans med oss!
Vi bjuder på mat och dryck!
Datum meddelas senare