Post on 04-Jun-2020
transcript
HybridapparUtveckla mobilappar i HTML, Javascript och CSS
Presenterat av , Erik Tufvesson Presis i Lund AB
Kort om mig
Erik Tufvesson
Systemarkitekt och utvecklare på Presis!
Brinner för utveckling av mobilappar!
Presentationen och all kod jag visaridag finns tillgänglig på GitHub
bit.ly/presis1512
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
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?
Komma igång
Android
Java Development Kit (JDK) 7+
Android SDK (Android Studio)
Android-emulator (t.ex. )
Android Platform Guide (Cordova)
Genymotion
iOS
OSX
Xcode
iOS-emulator (npm install -g ios-sim)
iOS Platform Guide (Cordova)
Vilka ramverk finns det?Apache Cordova (tidigare PhoneGap)
Ionic Framework
Sencha Touch
Appcelerator
React Native (Facebook)
NativeScript (Telerik)
Xamarin (C#)
... och många fler
Paus för frågor
Ionic Framework
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/
Hur fungerar Ionic?Angular Directives och Services
UI Router
ngCordova
(kommunicera med plugins)
Eget CLI
(Command Line Interface)
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 ...
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
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>
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; } } });
Android
Hats
About
Cats with Hats
iOS
Hats
Cats with Hats
Länk till källkoden
Andra features i Ionic
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
Ionic Lab
Desktop-app som hjälpmedel vid utveckling.
(Istället för att köra via kommandoprompten.)
lab.ionic.io
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 your@email.com
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
Paus för frågor
React Native
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/
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
Kodexempel
React Native Component
StylingDelmängd av CSS
Flexbox för positionering
Kodexempel
React Native Styling
Tap to PlayTap to Play
Paus för frågor
Ionic 2
Ionic 2
Alpha release
Angular 2
Webpack
Förbättrad prestanda
Material Design för Android
ES6/TypeScript
http://ionic.io/2
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
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>
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}); }}
Android
CATSCATS
ABOUTABOUT
Funny CatsFunny Cats
iOS
Cats
About
Funny CatsFunny Cats
Länk till källkoden
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
Tips för debuggingAktivera Source Maps i Webpack
// webpack.config.js ... module.exports = { entry: [...], output: {...}, module: {...}, resolve: {...}, sassLoader: {...}, /* Add this line */ devtool: 'source-map' };
Kom ihåg
Ionic 2 är fortfarande AlphaMycket saknas och annat kan ändras innan det är färdigt för
produktion
Paus för frågor
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
Kodkväll!
Kom och koda tillsammans med oss!
Vi bjuder på mat och dryck!
Datum meddelas senare
</html>bit.ly/presis1512
erik.tufvesson@presis.se