+420 603 755 610
info@inited.cz

Ionic 2

Home Wiki Ionic 2

Instalace

Více informací v článku Cordova - Instalace na Windows

  • Nainstalovat Node.js - poslední doporučenou verzi (v současné době 6.10.2)
  • Nainstalovat Javu a Android
  • Pro MacOS - Nainstalovat XCode
  • Nainstalovat cordovu a ionic pomocí npm (pro linux a mac použít sudo)
npm install -g cordova@6.5.0 ionic@2.2.3

Vytvoření nového projektu

  • Prázdný - ionic start nazevprojektu blank --v2
  • Postranní menu - ionic start nazevprojektu sidemenu --v2
  • Taby - ionic start nazevprojektu sidemenu --v2

Následně do package json, do scripts přidat následující řádky (ty co tam jsou se tam nechají, NEMAZAT!)

    "get-version": "grep -e \"widget.*version\" config.xml | sed \"s/.*version=\\\"\\([0-9.]*\\)\\\".*/\\1/;s/\\./_/g\"",
    "get-appname": "grep \"<name>\" config.xml | sed \"s/.*<name>\\(.*\\)<\\/name>.*/\\1/\"",
    "get-projname": "echo nazevprojektu",
    "mv-android": "PROJNAME=`npm run get-projname | tail -1` && VERSION=`npm run get-version | tail -1` && mv platforms/android/build/outputs/apk/android-debug.apk $PROJNAME-$VERSION-$BUILD_NUMBER.apk",
    "build-ios": "PROJNAME=`npm run get-projname | tail -1` && APPNAME=`npm run get-appname | tail -1` && VERSION=`npm run get-version | tail -1` && /usr/bin/xcrun -v -v -sdk iphoneos PackageApplication \"$(pwd)/platforms/ios/build/device/$APPNAME.app\" -o \"$(pwd)/$PROJNAME-$VERSION-$BUILD_NUMBER.ipa\"",
    "aprepare": "npm prune && npm install && rm -rf platforms plugins www && mkdir www && ionic platform add android",
    "iprepare": "npm prune && npm install && rm -rf platforms plugins www && mkdir www && ionic platform add ios",
    "abuild": "ionic build android --device --prod && npm run mv-android",
    "ibuild": "security unlock-keychain -p h && ionic build ios --device --prod && npm run build-ios",
    "adist": "PROJNAME=`npm run get-projname | tail -1` && ionic build android --release --device --prod && jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore cert/my-release-key.keystore -storepass hesloprokeystore platforms/android/build/outputs/apk/android-release-unsigned.apk alias_name && rm -f $PROJNAME.apk && $ANDROID_HOME/build-tools/22.0.1/zipalign -v 4 $APP $PROJNAME.apk",
    "idist": "PROJNAME=`npm run get-projname | tail -1` && APPNAME=`npm run get-appname | tail -1` && security unlock-keychain -p h login.keychain && cordova build --release --device ios && /usr/bin/xcrun -v -v -sdk iphoneos PackageApplication $(pwd)/platforms/ios/build/device/$APPNAME.app -o $(pwd)/$PROJNAME.ipa",
    "apub": "PROJNAME=`npm run get-projname | tail -1` && VERSION=`npm run get-version | tail -1` && scp $PROJNAME-$VERSION-$BUILD_NUMBER.apk inited@ini.inited.cz:public_html/ios/",
    "ipub": "PROJNAME=`npm run get-projname | tail -1` && VERSION=`npm run get-version | tail -1` && scp $PROJNAME-$VERSION-$BUILD_NUMBER.ipa inited@ini:public_html/ios/",
    "arelease": "PROJNAME=`npm run get-projname | tail -1` && VERSION=`npm run get-version | tail -1` && scp $PROJNAME-$VERSION-$BUILD_NUMBER.apk inited@ini.inited.cz:public_html/ios/$PROJNAME-$VERSION.apk",
    "irelease": "PROJNAME=`npm run get-projname | tail -1` && VERSION=`npm run get-version | tail -1` && scp $PROJNAME-$VERSION-$BUILD_NUMBER.ipa inited@ini.inited.cz:public_html/ios/$PROJNAME-$VERSION.ipa"

V get-projname místo nazevprojektu doplň název projektu
V adist místo hesloprokeystore doplň heslo ke keystore
Pokud je v package.json v devDependencies @ionic/app-scripts verze 1.3.7, nainstalovat poslední verzi příkazem:


npm install @ionic/app-scripts@nightly --save-dev

Následně nainstalovat poslední verzi tslint-eslint-rules

npm install tslint-eslint-rules --save-dev

Dále přepsat pravidla v souboru tslint.json aby vypadal následovně:

{
  "rules": {
    "member-access": true,
    "member-ordering": [true, {
      "order": [
        "public-static-field",
        "protected-static-field",
        "private-static-field",
        "public-static-method",
        "protected-static-method",
        "private-static-method",
        "public-instance-field",
        "protected-instance-field",
        "private-instance-field",
        "public-constructor",
        "protected-constructor",
        "private-constructor",
        "public-instance-method",
        "protected-instance-method",
        "private-instance-method"
      ]
    }],
    "only-arrow-functions": true,
    "prefer-for-of": true,
    "typedef": [true, "call-signature", "arrow-call-signature", "parameter", "arrow-parameter", "property-declaration", "variable-declaration", "member-variable-declaration", "object-destructuring", "array-destructuring"],
    "typedef-whitespace": true,
    "curly": true,
    "no-duplicate-variable": true,
    "no-null-keyword": true,
    //Not working properly, false
    "no-unused-variable": [
      false
    ],
    "indent": [true, "spaces"],
    "ter-indent": [true, 4,
        {
            "SwitchCase": 1
        }],
    "linebreak-style": [true, "LF"],
    "max-classes-per-file": [true, 1],
    "max-file-line-count": [true, 400],
    "array-type": [true, "generic"],
    "arrow-return-shorthand": true,
    "class-name": true,
    "interface-name": [true, "never-prefix"],
    "jsdoc-format": true,
    "no-unnecessary-callback-wrapper": true,
    "object-literal-key-quotes": [true, "as-needed"],
    "prefer-method-signature": true,
    "ordered-imports": true,
    "quotemark": [true, "double", "avoid-escape"],
    "semicolon":  [true, "always"],
    "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-module", "check-separator", "check-type", "check-typecast", "check-preblock"]
  },
  "rulesDirectory": [
    "node_modules/tslint-eslint-rules/dist/rules"
  ]
}

Konec vytváření projektu. Další náležitosti (možno dodělat později):

Ukládání dat

Pro ukládání dat používat Ionic storage
Důvod:
Při práci v prohlížeči používá ionic storage buď localstorage nebo websql, při ukládání v telefonu používá bezpečnější nativní ukládání do sql databáze

Cordova pluginy

Při práci s pluginy používat třídy z Ionic native
Důvod:
Ionic native používá typescriptové wrappery pro javascriptové cordovové pluginy s polečně s typy a hlídá zadávání správných věcí
Pluginy přidáváme pomocí "ionic plugin add nazevpluginu --save"
Důvod:
--save nám uloží plugin do config.xml a následně nemusíme znovu plugin nikde přidávat, ionic si ho už najde, společně s jeho verzí kterou jsme použili a ta tak zůstane stejná
Následně přidáme modul pro ionic native přes odkaz který najdeme na dokumentaci pluginu v Ionic native a plugin přidáme do app.module do providers, abychom ho mohli používat.

Přidání javascriptového pluginu

Vždy se snažíme hledat typescriptový plugin k instalaci pomocí npm
Pokud plugin nenajdeme, stáhneme javascriptový plugin, přidáme ho do assets/js/ a následně deklarujeme pouze v souboru ve kterém ho budeme používat nadeklarujeme proměnnou, na kterou bychom se odkazovali v javascriptu např:

declare let plugin:any;


Generování ikon a splash

Více na Ionic CLI
Nejdříve vytvoříme základní ikonu a splash, ikona by měla mít rozměry minimálně 192x192px a splash by měl mít 1200x1200, splash se pak musí ještě vycentrovat a udělat kolem něj prázdné místo tak že obrázek bude mít poté minimálně 2208x2208, prázdné místo se bude ořezávat podle telefonu, pro které se bude splash tvořit, základní čtverec 1200x1200 zůstane vždy.
Následně tyto obrázky nahrajeme jako icon.png, icon.psd nebo icon.ai a splash.png, splash.psd nebo splash.ai do složky resources v naší aplikaci.
Následně přidáme pomocí "ionic platform add" platformy, pro které chceme splashe a ikony vytvořit
Pak stačí dát v konzoli příkaz "ionic resources" a ionic nám vytvoří splashe a ikony pro právě přidané platformy, zároveň je také přidá do config.xml

© 2023 Created by Provocado