Wijsneus

Appearance

Stappenplan Nieuwe App ​

Voer de volgende stappen uit om een nieuwe app te bouwen.

1. Maak een assistent aan ​

  1. Maak een nieuwe Assistent aan in het OpenAI Dashboard.
  2. Configureer de assistent.
  3. Kopieer de assistent ID.

2. Maak app aan in wijsneus-api project ​

  1. Voeg een nieuwe app toe aan de apps tabel en configureer deze.
  2. Indien has_auto_login ingeschakeld is moet er ook een user aangemaakt worden met een shared value in de role kolom.

3. Maak de app aan wijsneus-app project ​

  1. Open het project j-jalving/wijsneus-app
  2. Voer het command npm run create:app uit en volg de stappen.
  3. Test de app en commit je wijzigingen naar Git.

TIP

Gebruik voor de naam bij voorkeur een reverse domain-name stijl notatie zoals app.wijsneus.bedrijfsnaam.

4. App thema configureren ​

  1. Open het bestand /apps/%app_name%/assets/scss/style.scss om het app thema te configureren.
  2. Update de afbeeldingen in /apps/%app_name%/assets/ en /apps/%app_name%/assets/images/ .
  3. Test de app en commit je wijzigingen naar Git.

5. Deploy de Web App ​

  1. Log in op Ploi.io en open het project web.wijsneus.app.
  2. Kopieer het project via Manage -> Clone site. Vul het juiste domein in voor de site, selecteer de juiste server en klik op Start cloning process
  3. Open het nieuw aangemaakte project en pas de projectnaam bij de stap npm run build app.wijsneus.default pwa.
  4. Ga naar Settings en pas de projectnaam aan bij Site domain -> Web directory.
  5. Ga naar Manage->NGINX configuration en pas het location / blok aan:
bash
location / {
    # try_files $uri $uri/ /index.php?$query_string;
    try_files $uri $uri/ /index.html =404;
}
  1. Maak een SSL certificaat aan via SSL -> Add certificate.
  2. Deploy de website.

6. Universal / App links implementeren ​

iOS ​

Voer deze stappen uit om Universal Links te configureren voor iOS: https://capacitorjs.com/docs/guides/deep-links#ios-configuration

TIP

De .well-known folder vind je in de map /apps/%app_name%/public.

TIP

Omdat de Association File wordt gecached op Apple's CDN server kan het zijn dat het even duurt voordat de Universal Links werken. Ga op je iOS apparaat naar Settings -> Developer -> Universal Links om development mode aan te zetten. Hiermee wordt de Association File direct van de bron opgehaald. Daarnaast vind je hier ook een Diagnostic tool om de URL te testen.

Android ​

Voer deze stappen uit om App Links te configureren voor Android: https://capacitorjs.com/docs/guides/deep-links#android-configuration

BELANGRIJK!

Gebruik voor het genereren van het certificaat de bestaande key store. Maak een Android build en kies in Android Studio Build > Generate Signed Bundle/APK. Selecteer /wijsneus.keystore als key store en maak een nieuwe alias aan met dezelfde app naam. Gebruik het volgende commando om de SHA256 fingerprint uit te lezen (vul de juiste alias in):

bash
keytool -list -v -keystore wijsneus.keystore -alias %alias%

5. Distributie iOS app ​

App Store Connect ​

Bundle ID aanmaken ​

  1. Open App Store Connect
  2. Navigeer naar naar Identifiers
  3. Klik bovenin op het blauwe plusje.
  4. Selecteer App ID's en druk op Continue.
  5. Kies onder Select a Type voor App en klik op Continue.
  6. Vul bij de Description en Bundle ID de reverse-domain style identifier in van de app (b.v. app.wijsneus.luidruchtig).
  7. Klik op Continue en dan op Register.

App aanmaken ​

  1. Navigeer naar Apps en klik bovenin op het blauwe plusje en kies New App.
  2. Selecteer iOS, vul de naam van de App in.
  3. Kies Dutch bij Primary Language.
  4. Kies de Bundle ID die hierboven is aangemaakt.
  5. Vul bij SKU de reverse-domain style identifier (b.v. app.wijsneus.luidruchtig) in van de app.
  6. Selecteer Full Access onder User Access.
  7. Klik op Create.

Provisioning Profile aanmaken ​

  1. Navigeer naar Certificates, IDs & Profiles › Profiles
  2. Klik bovenin op het blauwe plusje.
  3. Kies onder Distribution voor App Store Connect en druk op Continue.
  4. Kies onder App ID de app die hierboven is aangemaakt. Klik op Continue.
  5. Selecteer de juiste certificaten.
  6. Vul onder Provisioning Profile Name de reverse-domain style identifier (b.v. app.wijsneus.luidruchtig) in.
  7. Klik op Generate.
  8. Klik op Download en sla het bestand op in 1Password.

TestFlight instellen ​

  1. Open in App Store Connect de app die hierboven is aangemaakt. Navigeer naar TestFlight en klik op het blauwe plusje naast Internal Testing.
  2. Vul Beta Testers als Group Name in.
  3. Zorg dat Enable automatic distribution aangevinkt is.
  4. Voeg testers toe.

Appflow ​

App aanmaken ​

  1. Open het Appflow Dashboard en kies New App -> Import app
  2. Vul de app naam in, kies als native runtime Capacitor en klik op Continue naast het GitHub account.
  3. Selecteer j-jalving/wijsneus-app.

Appflow configureren ​

  1. Navigeer naar Overview. Hier vind je de App ID.
  2. Open het appflow.config.json bestand in het wijsneus-app project en de nieuwe app toe.
  3. Update de appId met de App ID en pas de root aan.
  4. Sla het bestand op en commit/push/merge deze.

Environment configureren ​

  1. Navigeer naar Build -> Environments.
  2. Klik op New environment.
  3. Vul Production in als naam.
  4. Vul onder Secrets de juiste FIREBASE_API_KEY en SENTRY_AUTH_TOKEN keys in.
  5. Vul onder Variables de juiste ASSISTANT_ID en FRONTEND_URL keys in.

Certificates toevoegen ​

  1. Navigeer naar Build -> Signing Certificates.
  2. Klik op Add certificate.
  3. Kies als name Jouri Jalving.
  4. Upload bij App development / Store certificate het bestand apple_distribution_certificate.p12 en het bijbehorende wachtwoord in (te vinden in 1Password).
  5. Upload bij Provisioning profiles het .mobileprovision wat hierboven is aangemaakt.
  6. Klik op 'Add certificate'.

Store Destinations toevoegen ​

  1. Navigeer naar Deploy -> Store Destinations.
  2. Klik op New store destination.
  3. Vul onder Name de reverse-domain style identifier (b.v. app.wijsneus.luidruchtig) in.
  4. Kies als Type voor Apple App Store.
  5. Vul onder Apple ID het account info@jourijalving.nl in.
  6. Maak een App Specific wachtwoord aan in je Apple Account bij het kopje App-Specific Passwords en vul deze in onder App-specific password.
  7. Open in App Store Connect de app die hierboven is aangemaakt. Navigeer naar App Information -> General Information -> Apple ID. Vul deze ID in onder App Apple ID.
  8. Open je Apple Developer account en zoek hier de Team ID onder het kopje Membership details. Vul deze in onder Team ID.
  9. Klik op Save.

Build starten ​

  1. Navigeer naar Build -> Builds.
  2. Klik op New build.
  3. Selecteer de juiste commit.
  4. Kies onder Target platform voor iOS.
  5. Kies onder Build type voor App Store.
  6. Kies onder Environment voor Production.
  7. Zet onder Destinations de knop achter App Store aan en kies de Store Destinations die hierboven is aangemaakt.
  8. Klik op Build.

Encryption compliance ​

  1. Open het bestand apps/%app_name%/ios/App/App/Info.plist.
  2. Voeg onderaan de voor de afsluitende </dict> tag de volgende regels toe:
    <key>ITSAppUsesNonExemptEncryption</key>
    <false />
  1. Sla het bestand op en commit/push/merge deze.

6. Distributie Android app ​

@TODO

@TODO Sentry configuratie @TODO Firebase configuratie