Ich mach dann mal 'ne App!

2018-03-11 @ CLT 2018

Christian Prior-Mamulyan

<meta>

Slides available

http://slm.prdv.de \ ⏎
/business/marketing/presentation/CLT_2018-10-11

## about me ![](/business/marketing/presentation/images/about-cpr.png) https://github.com/cprior

Content

[Develop] Ionic 3 WebView Angular 2 [Release] α ⮊ β ⮊ prod [Deploy] App Store Play Store Cloud [Monitor]

</meta>

<plan id="slm">

MVP

The Minimum Viable Product MVP might not be a product after all.
But certainly is a great learning experience.

Usecase

The user may:

center
individualize
share

Interaction sequence

## Requirements Appstores - PlayStore: "open house" - AppStore: plenty of quality-assurance Functional and organizational requirements: Plan ahead!

Costs

Apple

$99 p.a.
hardware running macOS for XCode
(device running iOS)

Android

$25 lifetime
device running Linux/macOS/Win
(device running Android)

</plan>

<code id="GIS">

Requirements

The app requires custom maps with the features:

public domain data
individual color scheme
easy translation from lon,lat to x,y
separation of concerns between "map" and "dots"
generated on-the-fly

References

Maps readily available but not matching the requirements at die.net.

The math behind a world sunlight map at edesign.nl

Public domain dataset NaturalEarth

Free and Open Source Geographic Information System QGIS

custom digital maps

Several alternatives exist to create custom digital maps.

Geoinformation: QGIS
tiled maps: leaflet, folium
Python roll your own: matplotlib & basemap

QGIS is not just a Qt GUI but also:

scriptable
extendable
available as a server

## "day&night" with QGIS ## - NaturalEarth vector data - add vector layers - style layer properties - save canvas as image

<code id="backend" lang="Go" src="cloud">

cloud slide #1

The cloud -- according to Wikipedia

cloud slide #2

The cloud -- to scare off the suits

cloud slide #3

To just run Go:

Google Apps Engine
IBM Cloud Foundry Apps
(Amazon Lambda)

The cloud -- for the practitioner

Go

golang.org

serverless cloud
The Go gopher was designed by Renee French.

compiled (cross-platform) -> one executable
statically typed
interfaces instead of inheritance
multiple function return values -> idiomatic error handling

Easy to deploy a single file.

## Hello World ## ```Go package main import "fmt" func main() { fmt.Printf("hello, world\n") } ``` ```bash $ cd $HOME/go/src/hello $ go build $ ./hello hello, world ```

<code id="mobileapp">

webapp technology

Hybrid apps seem to be a good bet, for the enthusiast and the enterprise.

## overview frameworks - today: Ionic (Angular, MIT) - Xamarin (Microsoft) - Onsen UI (user interface elements, framework agnostic, Apache license) - Sencha Touch (popular with enterprises) - Framework 7 - Appcelerator - many more... I have no experience with anz other than Ionic, so cannot compare.

## Ionic 3 - ### architecture ### - Ionic 3 (~Ionic 2): UI (cross-platform) [MD](https://developer.android.com/design/index.html "Up and running with material design"), [HI](https://developer.apple.com/ios/human-interface-guidelines/overview/themes/ "Human Interface Guidelines") - Cordova: native container wrapper - Angular 4: [latest docs](https://cordova.apache.org/docs/en/latest/) - ### documentation ### - [official installation docs](https://ionicframework.com/docs/intro/installation/) - blogger/online course [Josh Morony](https://www.joshmorony.com/), [Devdactic](https://devdactic.com/), GitHub Issues, … - ### best practices ### - starter apps/templates: [tabs/blank/sidemenu](https://github.com/ionic-team/starters)

### Installation Ionic 3 stack - prerequisites Node and npm - installation: `npm install -g ionic cordova` - build first Android app

</code>

<build>

## config items Ionic ## config.xml: - id - version ```XML <?xml version='1.0' encoding='utf-8'?> <widget id="de.prdv.slm" version="0.0.16" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>Sunlightmap</name> <description>A sunlightmap of the globe.</description> <author email="cprior@gmail.com" href="github.com/cprior">Christian Prior</author> ```

## prerequisites Android ## - Java SDK - Android Studio

## prerequisites iOS ## - Xcode 7 (or higher) - iOS 9 - Apple ID / Apple Developer Account

## Build for Android on Linux ## During development with adb set up: - `ionic cordova run android --device` - `ionic cordova build android --debug` Prepare for release to PlayStore: - `ionic cordova build android --prod --release`

## Build on macOS for iOS ## Enter: Hackintosh community - Lenovo ThinkPad T420 used: 200 EUR - USB Stick 8GB: 10 EUR - MacBookPro 2007: 150 EUR - Clover bootloader as per [insanelymac.com/forum/…t420-with-uefi…/](http://www.insanelymac.com/forum/topic/285678-lenovo-thinkpad-t420-with-uefi-only/) Maybe the first happy UEFI moment?

About this particular Mac

</build>

<testing>

## Tools ## - app: - debug builds - JavaScript: Ionic Apps are Angular projects - Jasmine, Karma, ... - in the browser: Console - on devices - buy lots of devices (like [Facebook](https://techcrunch.com/2016/07/13/facebook-lifts-the-veil-on-its-mobile-device-lab/) ) - device clouds ([AWS Cloud](https://aws.amazon.com/de/device-farm/), Google [Firebase Test Lab](https://firebase.google.com/products/test-lab/)) - backend: - `go test -v sunlightmap`

</testing>

<release>

## Requirements PlayStore ## [MarketListingPlace](https://play.google.com/apps/publish/?#MarketListingPlace:p=de.prdv.slm) - title (max 50 chars) - short description (max 80 chars) - complete description (max 4000 chars) - min 2 screenshots JPEG/24bitPNG (320x320 - 3840x3840px) - high resolution symbol (512x512px) - functional graphic JPEG/24bitPNG (1024x500) - app type (app/game) - category (one of 32) - content rating by [IARC](https://www.globalratings.com/)

## Requirements AppStore ## [app-store/product-page](https://developer.apple.com/app-store/product-page/) Needs paid developer account $99 p.a. - App Name (max 30 chars) - Subtitle (max 30 chars) - Icon - App Previews (video, max 30 seconds) - Screenshots (max 10 pcs.) - Description - Promotional Text (max 170 chars) - Keywords (max 100 chars in total) - In-App Purchases

## fdroid - question on [StackOverflow](https://stackoverflow.com/questions/44921820/contribute-a-ionic-3-app-to-f-droid) > You are forging new ground here! We (F-Droid) don't have solid support for Cordoba/Ionic/etc. but the only thing preventing it is someone doing the work! - discussion by fdroid devs [fdroid issue 317](https://gitlab.com/fdroid/fdroidserver/issues/317) - merge of `sudo=` [merge_request 297](https://gitlab.com/fdroid/fdroidserver/merge_requests/297)