mobilní aplikace

Jak na

HYBRIDNÍ

Aplikace vuyžívající sílu Javascriptu a možností HTML5+CSS technologií pro vykreslení v mobilu. 

Proč ne nativ?

Dostupné frameworky pro hybridní aplikace

Xamarin

PhoneGap

IntelXDK

Ionic

Framework 7

Appcelerator

Mobile Angular UI

Onsen UI

C#, Microsoft project

from Apache Cordova, HTML+CSS + JS + WebView

Clicky clicky

HTML, SASS, CSS, JS..

quick prototyping

Standalone Titanium SDK, API builder

Bootstrap + Angular

Framework agnostic framework

Dostupné frameworky pro hybridní aplikace

HRY

Mega seznam

Co budeme dělat?*

* Rozjedeme si tutoriál a deployneme na Androida a iOs s Ionic Framework 1, protože Angular

Možnosti:

• Jít na ionicframework.com a zkusit jejich example
  • "malý build a je to ofiko, akorát se to nedá moc použít pro projekt"
• Stáhnout si připravenou aplikaci 
  • "highly advanced workflows for Angular 1 and Ionic with latest Cordova"
• Nadrátovat vlastní projekt od základů
  • "have fun at night"

Možnosti:

• Jít na ionicframework.com a zkusit jejich example
  • "malý build a je to ofiko, akorát se to nedá moc použít pro projekt"
• Stáhnout si připravenou aplikaci
  • "highly advanced workflows for Angular 1 and Ionic with latest Cordova"
• Nadrátovat vlastní projekt od základů
  • "have fun at night"

Ale je nutné nejprve...

Pozor! Na samotnou instalaci si rezervujte aspoň půlden pokud nejsou jasné závislosti :)

Podle návodu vybraného projektu rozjeďte projekt - detaily najdete vždy na github stránce danéh yeoman projektu.
 

Prerekvizity

Pro vývoj:

node.js, npm, yo, gulp, bower

Pro spuštění aplikace na zařízení budete potřebovat Platformní SDKáčka. Installing Requirements jsou dostupné na http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html:

1) Install JDK 8 or later (http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) - 5 min

2) Android - Install Android Studio (https://developer.android.com/studio/index.html) - 15-25 min

3) Přidejte SDK package v aktuální verzi abyste mohli deployovat na vybrané API úrovně různých zařízení; realizováno přes Android SDK Manažera, detail na https://developer.android.com/studio/intro/update.html

.. A pro OS X stačí nainstalovat X-Code ;)

Bez generátoru nebo frameworku by bylo nutné instalovat i Cordova CLI, ale díky využitým frameworkum nebude potřeba.

/* prerekvizita - npm + node.js -g instalované */

npm install -g yo
npm install -g gulp
npm install -g bower

yeoman.io/generators a vyhledat m-ionic

1

2

m-ionic

// postupujte podle odkazu yeomana na github
npm install -g generator-m-ionic

3

vygenerovat projekt

// vytvořim dir a přes yo natáhnu m-ionic
mkdir prvniMobilni && cd $_
yo m-ionic

4

run forrest run

gulp watch
//emulate ios
gulp --livereload "emulate ios"

have fun with coding!

5

builds

6

#building ios
echo -e '\n##################     BUILDING IOS    ###################\n'
# --no-build here so we can use the gulp build we just performed
# provide resources set1
gulp --cordova 'prepare ios' --no-build --res=set1

echo -e '\n##################   BUILDING ANDROID   #################\n'
# --no-build here so we can use the gulp build we just performed
# provide different resources set
gulp --cordova 'build android --release' --no-build --res=set2

https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/ci.md

#step 1 - have a great idea
#step 2 - have a great implementation skill
#step 3 - have a great marketing skill
#step 4 - ???
#step 5 - profit!

APK build pravidla - iOS

7b

gulp --cordova 'prepare ios' --no-build --res=set1

- Mac + xCode instalovaný

- vytvořený a zaplacený účet na itunesconnect.apple.com 

- připravit build z terminálu dle dokumentace vybraného Frameworku

- otevřít platforms/ios/<nazev>.xcodeproj

    + donainstalovat případné komponenty, easy click

- vyplnit parametry signing teamu

- spustit / připojit telefon / nahrát build na účet

- nahraný build prochází ručním schválením a testováním

Application Maintenance

8

Snažte se mít:

• Udržitelnou codebase
• Automatizovaný deployment pro různé platformy
• Dokumentované postupy
• Udržitelné závislosti na interní a externí moduly
• V pořádku nainstalovaný framework
• Trpělivost s nasazováním na appStore

Kam dál?

9

- Samostudium!

- Naklonujte si např. ntx-bozp-mobile repo a zkuste si buildit a editovat

- Vlastní aplikace

- Pokročilí ať zkusí Ionic 2 -> Angular2 nebo jiné FW

- a na hokej

K THX BYE