building a civictech app

console.log("and going open source");

Author

Sandro Scalco

Certified Digital Master & founder of unihockey.club ūüöÄ schaffhausen.io | leannovation.xyz | ecollect.sh
Twitter LinkedIn GitHub Web

what is civictech?

The use of digital technologies to improve the political participation of the population and thereby better involve citizens in political planning and decision-making processes.

source: https://www.dsj.ch

Agenda

  • ‚ÄčDark Mode
  • CI / CD
  • PWA
  • Web Share
  • Capacitor
  • Open Source

Dark Mode

@media (prefers-color-scheme: dark) { :root { /* dark mode variables go here */ --ion-color-primary: #00324D; --ion-color-primary-rgb: 0,50,77; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255,255,255; --ion-color-primary-shade: #002c44; --ion-color-primary-tint: #1a475f; } }

Dark Mode 

  1. Apply Standard Ionic theme
  2. change  --ion-color-primary to your standard primary dark color :)
  3. check out other css variables from https://ionicframework.com/docs/theming/themes like --ion-item-background & --ion-item-background-activated
  4. Use Stepped Color Generator (cause of black)
  5. give users a chance to provide feedback

CI/CD Pipeline | Travis

language: node_js node_js: - "11.0" script: - echo "Start Building App" - rm -rfv firebase/public/* - mkdir www - mkdir firebase/public - ionic build --prod - cp -R www/* firebase/public/ - cd firebase install: - npm i -D -E -g firebase-tools - npm i -D -E @angular/cli - npm i -D -E -g ionic after_success: - firebase deploy --only hosting --token $FIREBASE_TOKEN - echo "Done :) "

Deploying to Firebase Hosting from GitHub - Firecasts

PWA

Important Resources:
- Lighthouse Score -> Google Chrome Install Icon
- Ionic V4
- Ionic Documentation
- Firebase


https://ionicframework.com/docs/publishing/progressive-web-app

Web Social Share

I'm using windows to develop my apps

Capacitor

The Native Bridge for Cross-Platform Web Apps Invoke Native SDKs on iOS, Android, Electron, and the Web with one code base. Optimized for Ionic Framework apps, or use with any web app framework.
  • build an app on my pc (ios)¬†
  • upload my apps to the app store
  • using Capacitor for my native projects
  • ‚Äčuse Ionic App Flow
  • use travis-ci.com
  • upload my apps with al.wenz.io
  • use ionic native and capacitor (web)‚Äč

so that's my solution..

async openBrowser(url) { if (this.plt.is('cordova') || this.plt.is('ios')) { console.log('cordova browser'); const browser = this.iab.create(url, '_system'); setTimeout(() => { browser.close(); }, 5000); } else { await Browser.open({ url: url, //presentationStyle: "popover", windowName: "_blank" }).catch(rejected => { alert(JSON.stringify(rejected)); }); } }

Open Source 

The points to follow

  • Show your code¬†
  • don't fear others
  • Hide your API Keys / Client Secrets
  • Ask experts!
  • CI/CD
  • Testing

outlook

  • build up a community
  • talk to the government¬†
  • build schaffhausen.io
  • ionic v5 / better desktop support / capacitor
  • integrate other cantons / countries

thank you!