eliud_core 1.0.12 copy "eliud_core: ^1.0.12" to clipboard
eliud_core: ^1.0.12 copied to clipboard

Published 14 months ago • verified publishereliud.io• Latest: 1.3.0
[unknown platforms]
→

Metadata

Eliud core

More...

eliud #

Documentation for eliud is under construction. Please be patient.

  • Eliud technology is open source technology.
  • The technology allows to build apps and/or websites. Today, app content can include photo galleries, pages with videos and images (html), social media, chat with or between members, your shop / shopping cart, photo sliders, documents, and more. A complete list below.
  • Eliud is a layer on top of Flutter. Flutter is an open-source UI software development kit created by Google. Flutter allows to develop cross platform applications for iOS, Android and web. Flutter supports Linux, macOS, Windows and Google Fuchsia. This hasn't been tested with eliud packages yet.
  • For those who know Worpress: Eliud is to Flutter as Wordpress is to html:
    • Html allows you to construct webpages. However, html requires some level of technical knowledge about building webpages.
      • Wordpress and many other similar technologies allow people without knowledge of html to build webpages and websites.
    • Flutter allows to build websites and apps, or even Windows, Linux, macOS and Google Fuchsia apps. However, Flutter requires programming skills and technical knowledge.
      • Eliud allows people without programming skills and technical knowledge to build cross platform apps and websites.
  • Eliud is pluggable technology, allowing developers
    • to extend / add functionalities by means of plugins / packages.
    • to change look and feel through using styles.
  • A website / app built with Eliud consist of its core Eliud package + one or more Eliud plugins. The app is constructed by configuring it. Configuration, images and videos are stored in Firebase database and Firebase storage.

The below steps document the creation of your own android + apple + web app and includes all instructions, all the way to pushing your app into the apple app store, android store and web.

Example Eliud apps #

These are some example apps which demonstrate what eliud can give you. Everything used is open source, part of eliud project.

App Ios Android Web
Logo Juuwle - An online store for jewels Juuwle on the App Store Juuwle on Google Play https://juuwle.net
Logo Minkey - Community making apps online This type of app is not allowed on apple store Minkey on Google Play https://minkey.io
Logo Thoma5 - Profile of Thomas. Under construction In development In development https://thoma5.com

I. Quick start #

This guide are all steps to create a minimum android, iOS or web app with Eliud.

Whenever this pops up, make note of this for what this is in your case, as you'll need it at some later stage. In the below text we provided this information whilst creating thoma5. Obviously for sensitive information, like passwords, we've provided fake info.

Step 1: Create a new google account #

  1. Goto https://www.google.com/account/about/
  2. Select "Create an account"
  3. Follow on screen instructions (recommended to use default settings)

Step 2: Create a new firebase project #

  1. Goto https://console.firebase.google.com
  2. Select "Create a project"
  3. And follow on screen instructions (recommended to use default settings)

Step 3: Configure your project #

  1. Goto https://console.firebase.google.com
  2. Select your project
  3. Select Project Overview > Project settings
  4. Select support email. Use your google account

Step 4: Setup Firebase database #

  1. Goto https://console.firebase.google.com

  2. Select your project

  3. Select Build > Firebase database

  4. Select "Create database"

  5. And follow on screen instructions (recommended to use default settings, start in production mode)

  6. With Cloud Firestore open, click on Rules and copy/paste the contents of firestore.rules and publish.

    For convenience, and to familiarise yourself with firebase, at this point we copy/paste these rules. However, later we will upload the same rules more efficiently using firestore commands from command line

Step 5: Setup Firebase storage #

  1. Goto https://console.firebase.google.com

  2. Select your project

  3. Select Build > Storage

  4. Select "Get started"

  5. And follow on screen instructions (recommended to use default settings, start in production mode)

  6. With Storage open, click on Rules and copy/paste the contents of storage.rules and publish.

    For convenience, and to familiarise yourself with firebase, at this point we copy/paste these rules. However, later we will upload the same rules more efficiently using firestore commands from command line

  7. With storage page open, retrieve your "bucket" from the url. You bucket is the bit in front of ".appspot" in the url. In our case the url is https://console.firebase.google.com/project/thoma5/storage/thoma5.appspot.com/files, hence the bucket is thoma5

Step 6: Setup Google Authentication #

  1. Goto https://console.firebase.google.com
  2. Select your project
  3. Select Authentication
  4. Select Sign-in method
  5. Select Google from Sign-in providers
  6. Enable the Google sign-in

Step 7: Generate key #

  1. Run the following command at command prompt:
keytool -genkey -v -keystore your_keystore_filename -storepass your_keystore_storepass -alias your_keystore_alias -keypass your_keystore_keypass -keyalg RSA -keysize 2048 -validity 36524

  1. Then follow onscreen instructions. Then store the key-file in a safe place. You will have to use it multiple times in the future.

  2. Now run:

keytool -list -v -alias your_keystore_alias -keystore your_keystore_filename -storepass your_keystore_storepass -keypass your_keystore_keypass

For example:

keytool -genkey -v -keystore %USERPROFILE%\\.android\\thoma5.keystore -storepass abc -alias thoma5key -keypass cde -keyalg RSA -keysize 2048 -validity 36524
keytool -list -v -alias thoma5key -keystore %USERPROFILE%\\.android\\thoma5b.keystore -storepass abc -keypass cde

MORE INFO

Step 8: Add Firebase Android App #

  1. Goto https://console.firebase.google.com
  2. Select your project
  3. Click 'Add app' and select platform 'Android'"
  4. Specify your android package name
  5. Specify your android app nickname
  6. Paste the SHA-1 key Your keystore SHA1
  7. Press "Register app"
  8. Then download the file google-services.json

Step 9: Create Android Studio project #

  1. Start Android studio

  2. Select File > New > New Flutter Project

  3. Specify

    1. Flutter SDK path and press Next

  4. Specify

    1. Project name: e.g. thoma5_app
    2. Project location: e.g. C:\src\apps\thoma5_app
    3. Description: e.g. Thoma5 app
    4. Project type: Should be "Application"
    5. Organization: e.g. com.thoma5
    6. Android language: Should be Java
    7. iOS language: Should be Swift
    8. Platforms: Should be Android, iOS and Web

    ❗ IMPORTANT ❗

    The android package name specified as Your Android app package name - e.g. com.thoma5.thoma5_app - should be equal to the concatenation of organisation - e.g. com.thoma5 - a dot and the project_name - e.g. thoma5_app

  5. Press finish

Step 10: Copy google_services.json #

  1. Switch to the Project view in Android Studio to see your project root directory.
  2. Move your downloaded google-services.json file into your module (app-level) root directory, e.g. thoma5_app/android/app

Step 11: Apply firebase SDK instructions #

  1. Goto https://console.firebase.google.com
  2. Select your project
  3. Find your app from "your apps" section, then press "See SDK instructions"
  4. You get to chance to re-download the google_services.json file, skip this by pressing next.
  5. Now apply the suggestions provided. Make sure to select Groovy (build.gradle) and Java.

At the time of writing this document, the changes to make were:

file location add
(1) thoma5_app/android/build.gradle buildscripts > dependencies classpath 'com.google.gms:google-services:4.3.15'
(2) thoma5_app/android/app/build.gradle plugins id 'com.google.gms.google-services'

(3) Finally the below at the bottom of thoma5_app/android/app/build.gradle had to be added 


dependencies {
    // Import the Firebase BoM
    implementation platform('com.google.firebase:firebase-bom:32.2.2')


    implementation 'com.google.firebase:firebase-analytics'


    // Add the dependencies for any other desired Firebase products
    // https://firebase.google.com/docs/android/setup#available-libraries
}

Step 12: Add key store file to your project #

  1. Create key.properties file in your android directory, e.g thoma5/android/key.properties

  2. Populate it with the below keys and values as below. Find your values specified before (follow the links)

    1. storeFile=Your keystore filename
    2. storePassword=Your keystore storepass
    3. keyPassword=Your keystore keypass
    4. keyAlias=Your keystore alias

    e.g.

    storePassword=abc
keyPassword=cde
keyAlias=thoma5key
storeFile=c:/Users/thomas/.android/thoma5.keystore

  3. Add the following lines to your android apps build.gradle file, e.g. thoma5/android/app/build.gradle

    1. Load the properties
    plugins {
   ...
}
   
// add this after plugins
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

// the rest of the file   
...
    1. Use the keystore for signinConfigs
    android {
    defaultConfig {
       ...
    }

    // add this after defaultConfig and before buildTypes
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
            storePassword keystoreProperties['storePassword']
        }
    }

    buildTypes {
       ...
    }
}
    1. Make sure your buildTypes is pointing to the releasing signingConfigs for both debug and release builds
    buildTypes {
     release {
         signingConfig signingConfigs.release
     }
     debug {
         signingConfig signingConfigs.release
         debuggable true
     }
}

Step 13: Update pubspec.yaml #

  1. Update you pubspec.yaml file to reflect the below
---
name: thoma5_app
description: Thoma5
homepage: https://thoma5.com
repository: https://github.com/eliudio/thoma5_app
version: 1.0.0
environment:
  sdk: '>=3.1.0 <4.0.0'
  flutter: '>=3.0.0'
dependencies:
  flutter:
    sdk: flutter
  eliud_core: ^1.0.6+1
  eliud_pkg_create: ^1.0.7+1
  eliud_stl_mona: ^1.0.1+6
dev_dependencies:
  flutter_lints: ^2.0.0
flutter:
  uses-material-design: true
  1. run pub get

Step 14: Update main.dart #

  1. Replace your main.dart with these contents.
import 'package:eliud_core/eliud.dart';
import 'package:eliud_core/style/_default/default_style_family.dart';
import 'package:eliud_core/core_package.dart';
import 'package:eliud_pkg_create/creator_package.dart';
import 'package:eliud_pkg_create/tools/basic_app.dart';
import 'package:eliud_pkg_text/text_package.dart';
import 'package:eliud_stl_mona/mona_stl_package.dart';
import 'package:eliud_pkg_create/creator_decoration.dart';
import 'package:eliud_stl_mona/mona_style_family.dart';
import 'package:flutter/cupertino.dart';
import 'package:firebase_core/firebase_core.dart';

Future<void> main() async {
  String APP_ID = "THOMA5_APP";

  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  var eliud = Eliud();

  try {
    eliud.registerPackage(CorePackage.instance());
    eliud.registerPackage(TextPackage.instance());
    eliud.registerPackage(MonaStlPackage.instance());
    eliud.registerPackage(CreatorPackage.instance());

    // register decorations, these are only required if you want to be able to change your app through the interface
    eliud.registerDecoration(CreatorDecoration());

    // register style families
    eliud.registerStyleFamily(MonaStyleFamily.instance());
    eliud.registerStyleFamily(DefaultStyleFamily.instance());

    // finish init
    eliud.finalizeInitialisation();
  } catch (exception) {
    throw Exception("Exception whilst initialising the app");
  }

  // create the app if it doesn't exist
  await BasicApp.checkApp(APP_ID);

  // let's go !
  eliud.run(APP_ID, false);
}

Step 15: Clean up #

  1. Delete the directory test, which contains widget_test.dart

Step 16: minSdkVersion #

  1. Goto your Flutter SDK path, subdirectory packages\flutter_tools\gradle\src\main\groovy and edit the file flutter.groovy and open it

  2. Update the value for minSdkVersion to be 21

    class FlutterExtension {
    ...

    /** Sets the minSdkVersion used by default in Flutter app projects. */
    static int minSdkVersion = 21

    ...
}

    ❗ REMARK ❗

    We only need to make this change to the minSdkVersion for the SDK 1 time, i.e. do not repeat this step for future projects / apps.

Step 17: Run your app #

  1. Run the app. Because this is the first time your start the app, it will install a basic app.
  2. When the app asks to choose an account to login, select your google account
  3. Ones the basic app is created, it will open

Step 18: Add some basic functionality to your app #

  1. After you've started your app in the previous step, a "Hello world" screen should appear.
  2. Press the pen icon Pen to toggle editing mode on.
  3. Then press the Pen - app button and in the general section
    1. change the title of your application
    2. change the home url to your home page url, e.g. https://www.thoma5.com
  4. When in edit mode, press the wizard icon Wizard to open the wizard dialog box.
  5. We have only activated a few packages in the code (using eliud.registerPackage), so hence not many wizards are initially available.
    1. Select signinbutton and press Go!
    2. Then select signoutbutton and press Go!

Next steps #

In the previous steps we've done the foundation to build an app. The next steps introduces

  • platforms: web deployment, apple app
  • authentication
  • a brief overview of the current base packages
  • functions to support packages
  • deployment: deploying to google play store and apple app store,

  1. create a logo and store into a file in your project directory, e.g. assets/logo/thoma5-logo-1.png

  2. add the below to pubspec.yaml

dev_dependencies:
  flutter_launcher_icons: ^0.13.1

flutter_icons: 
  android: launcher_icon
  ios: false
  image_path: assets/logo/thoma5-logo-1.png
  1. Run the below from your
flutter pub run flutter_launcher_icons:main

Step 20: Add Firebase Web App #

  1. Goto https://console.firebase.google.com
  2. Select your project
  3. Click 'Add app' and select platform 'Web'"
  4. Provide an App nickname, e.g. Thoma5
  5. Select Firebase Hosting.
  6. Select your project from the drop down box.
  7. Click on Register app.
  8. From the "Add Firebase to your web app" page, copy the firebaseConfig details
firebaseConfig 
const firebaseConfig = {
  apiKey: "ABcdEfG_H1Ij2KLmNo3PQ_RstUvwXY4Zabcdefg",
  authDomain: "thoma5.firebaseapp.com",
  projectId: "thoma5",
  storageBucket: "thoma5.appspot.com",
  messagingSenderId: "263405528229",
  appId: "1:123456789012:web:1a2345b6c7890d12ef345h",
  measurementId: "G-WL1A23456C"
};

Step 21: Retrieve hosting details #

  1. Goto https://console.firebase.google.com
  2. Find the "Add custom domain" button and add
  3. Make note of the DNS records. We'll need this in a later step.
DNS records

Domain: thoma5.com

Record type Host Value
A thoma5.com 123.123.123.123
TXT thoma5.com hosting-site=thoma5
TXT _acme-challenge.thoma5.com

aBcdE1FghIj23k4lmnoPqr

stUvw5xyZabcdeF6GHiJk

Domain: www.thoma5.com

Record type Host Value
CNAME www.thoma5.com thoma5.web.app

Step 22: Buy domain #

  1. Buy a domain name, e.g. on squarespace.com.

Step 23: Setup email forwarding #

  1. Setup email forwarding

Step 24: Subscribe to mailtrap #

  1. https://mailtrap.io/
  2. Select sign up
  3. Select "Use google account" and select your google account
  4. Select "Email Sending", enter your domain and press "Add Your DomaiN"
  5. Make note of the DNS records. We'll need this in a later step.
DNS records
Status Category Type Name Value
Missing

Domain

Verification

 CNAME 1abcdef2g34hijkl smpt.mailtrap.live
Missing SPF TXT -

v=spf1

include:_spf.smtp.mailtrap.live

~all
Missing DKIM CNAME rwmt1._domainkey rwmt1.dkim.smtp.mailtrap.live
Missing DKIM CNAME rwmt2._domainkey rwmt2.dkim.smtp.mailtrap.live
Missing DMARC TXT _dmarc

v=DMARC1;

p=none;

rua=mailto:dmarc@smtp.mailtrap.live;

ruf=mailto:dmarc@smtp.mailtrap.live;

rf=afrf;

pct=100
Missing

Custom

domain

tracking

 CNAME mt-link t.mailtrap.live
  1. Click next and in the SMTP/API Settings click API
  2. Press the "Copy" next to Api Token and keep it somewhere safe. We'll need it soon.

Step 25: Setup DNS records for firebase hosting #

Follow the guidelines of your domain registrar to configure your DNS in line with the DNS records specified in the firebase hosting dashboard.

Example 1: domains.google.com #

  1. Login into your account on https://domains.google.com
  2. Select "DNS"
  3. Select "Manage custom records"
  4. Create new records with the below information, obviously adjusted in line with your DNS records
Host name Type TTL Data
_acme-challenge TXT N/A aBcdE1FghIj23k4lmnoPqrstUvw5xyZabcdeF6GHiJk
A N/A 123.123.123.123
TXT N/A hosting-site=thoma5
www CNAME N/A thoma5.web.app

Example 2: squarespace.com #

For squarespace, for thoma5.com, this would the be done following these steps:

  1. Login into your account on https://www.squarespace.com/
  2. Select your domain from your domains and select "Manage domain settings"
  3. Edit DNS
  4. Add the below records, obviously adjusted in line with your DNS records
Host Type Priority Data
_acme-challenge TXT N/A aBcdE1FghIj23k4lmnoPqrstUvw5xyZabcdeF6GHiJk
@ A N/A 123.123.123.123
@ TXT N/A hosting-site=thoma5
www CNAME N/A thoma5.web.app

MORE INFO

Step 26: Setup DNS records for mailtrap #

Follow the guidelines of your domain registrar to configure your DNS in line with the DNS records specified in the mailtrap dashboard.

Example 1: domains.google.com #

  1. Login into your account on https://domains.google.com
  2. Select "DNS"
  3. Select "Manage custom records"
  4. Create new records with the below information, obviously adjusted with your DNS records
Host name/td> Type TTL Data
1abcdef2g34hijkl CNAME 3600 smtp.mailtrap.live
TXT 3600 v=spf1 include:_spf.smtp.mailtrap.live ~all
rwmt1._domainkey CNAME 3600 rwmt1.dkim.smtp.mailtrap.live
rwmt2._domainkey CNAME 3600 rwmt2.dkim.smtp.mailtrap.live
_dmarc TXT 3600 v=DMARC1; p=none; rua=mailto:dmarc@smtp.mailtrap.live; ruf=mailto:dmarc@smtp.mailtrap.live; rf=afrf; pct=100
mt-link CNAME 3600 t.mailtrap.live

Example 2: squarespace.com #

For squarespace, for thoma5.com, this would the be done following these steps:

  1. Login into your account on https://www.squarespace.com/
  2. Select your domain from your domains and select "Manage domain settings"
  3. Edit DNS
  4. Add the below records, obviously adjusted in line with your DNS records
Host Type Priority Data
1abcdef2g34hijkl CNAME 3600 smtp.mailtrap.live
@ TXT 3600 v=spf1 include:_spf.smtp.mailtrap.live ~all
rwmt1._domainkey CNAME 3600 rwmt1.dkim.smtp.mailtrap.live
rwmt2._domainkey CNAME 3600 rwmt2.dkim.smtp.mailtrap.live
_dmarc TXT 3600 v=DMARC1; p=none; rua=mailto:dmarc@smtp.mailtrap.live; ruf=mailto:dmarc@smtp.mailtrap.live; rf=afrf; pct=100
mt-link CNAME 3600 t.mailtrap.live

MORE INFO

Step 27: Verify mailtrap setup #

  1. Goto mailtrap.io and sign in with your google account
  2. From your dashboard, select Email Sending, then Sending Domains
  3. In the domain verification, select Verify all to verify if you've setup your DNS records correctly
  4. Follow the steps in Verify Setup, i.e. you'll have to answer some security questions to prove you're building a legit app. In our experience this has been a straightforward process. Questions:
    1. Describe business / project
    2. Website
    3. Linked in profile
    4. What type of emails do you plan to send?
    5. How do you get the list of recipients?
    6. Amount of emails planning to send / month

Step 28: Update firebase #

In this step we wil be updating / uploading:

  • storage rules
  • firestore indexes and rules
  • functions

We have uploaded rules in previous steps during the quick start. That was to get up and running quickly. The proper way to update rules is by using the firebase command line tools, which we will do in this step.

Step 28.1: Install firebase command line tools #

  1. Open cmd
  2. Run npm install -g firebase-tools

Step 28.2: Enable APIs #

  1. Goto https://cloud.google.com/build/docs/deploying-builds/deploy-firebase
  2. Click "Enable the APIs"
  3. Follow on screen instructions

Step 28.3: Enable firebase functions #

  1. Goto https://console.firebase.google.com
  2. Select your project
  3. Select functions
  4. Press "Get started" and select next

Step 28.4 Update firebase #

  1. Run the below (change firebase project and storage bucket to yours)
mkdir c:\src\apps\thoma5_app_firebase
cd c:\src\apps\thoma5_app_firebase
git clone https://github.com/eliudio/firebase.git
cd c:\src\apps\thoma5_app_firebase\firebase

firebase logout
firebase login
firebase functions:config:set mailtrap.token=a1bc234d5e6f7890123ghij45678k901 mailtrap.sender.email=info@thoma5.com mailtrap.sender.name=Thoma5 app.appname="Thoma5" app.collectionname="order" app.bucket="thoma5" stripe.secret=lalalala --project "thoma5"
firebase deploy --project thoma5

Where...

mailtrap.tokenmailtrap token
mailtrap.sender.emailinfo@thoma5.com
mailtrap.sender.nameThoma5
app.collectionnameorder
app.bucketstorage bucket
projectfirebase project

❗ NOTES ❗

  • You can use quotes to specify parameters. E.g. You could use sendgrid.apikey="NO KEY"

  • In the rules, indexes and functions we cover ALL packages that currently exist. If you only use some packages, then these obsolete rules, indexes and functions could be considered obsolete. However, they're harmless being there and it's the easiest way to get going.

  • When you require your own functions, we recommend to organise multiple functions as described here: https://firebase.google.com/docs/functions/organize-functions?gen=2nd

Step 29: Enable APIs #

  1. Enable People API: https://console.developers.google.com/apis/api/people.googleapis.com

Step 30: Configure oauth web client #

  1. Goto https://console.cloud.google.com/apis/credentials
  2. Find the OAuth 2.0 Client IDs with name "Web client". If you find more than one, select any, e.g. the first.
  3. Find the "ADD URI" and add these domains:
  4. Find "web client" and copy the client ID
  5. Press SAVE

Step 31: Configure Android Studio project for web #

Step 31.1: Update pubspec.yaml #

  1. Add the below dependency to pubspec.yaml
  eliud_pkg_wizards: ^1.0.4

This will result in your pubspec.yaml file to look like:

---
name: thoma5_app
description: Thoma5
homepage: https://thoma5.com
repository: https://github.com/eliudio/thoma5_app
version: 1.0.0
environment:
  sdk: '>=3.1.0 <4.0.0'
  flutter: '>=3.0.0'
dependencies:
  flutter:
    sdk: flutter
  eliud_core: ^1.0.7
  eliud_pkg_create: ^1.0.7+1
  eliud_pkg_wizards: ^1.0.4
  eliud_stl_mona: ^1.0.1+6
dev_dependencies:
  flutter_lints: ^2.0.0
  flutter_launcher_icons: ^0.13.1
flutter:
  uses-material-design: true
flutter_icons:
  android: launcher_icon
  ios: false
  image_path: assets/logo/thoma5-logo-1.png
  1. Run pub get

Step 31.2: Update main.dart #

  1. Add the following imports to main.dart
import 'package:flutter/foundation.dart';
import 'package:eliud_pkg_wizards/wizards_package.dart';
import 'package:eliud_pkg_etc/etc_package.dart';
import 'package:eliud_pkg_medium/medium_package.dart';
import 'package:eliud_pkg_workflow/workflow_package.dart';
  1. Replace the Firebase.initializeApp() line in your main.dart with the below: Make sure the values for apiKey -> measurementId correspond with your values available from firebaseConfig
  if (kIsWeb) {
    await Firebase.initializeApp(
        options: const FirebaseOptions(
          apiKey: "ABcdEfG_H1Ij2KLmNo3PQ_RstUvwXY4Zabcdefg",
          authDomain: "thoma5.firebaseapp.com",
          projectId: "thoma5",
          storageBucket: "thoma5.appspot.com",
          messagingSenderId: "263405528229",
          appId: "1:123456789012:web:1a2345b6c7890d12ef345h",
          measurementId: "G-WL1A23456C"
        ));
  } else {
    await Firebase.initializeApp();
  }
  1. Add the following extra eliud-dependencies:
    eliud.registerPackage(WizardsPackage.instance());

    // needed for WizardsPackage:
    eliud.registerPackage(EtcPackage.instance());
    eliud.registerPackage(MediumPackage.instance());
    eliud.registerPackage(WorkflowPackage.instance());
  1. So basically your main.dart will look like
import 'package:eliud_core/eliud.dart';
import 'package:eliud_core/style/_default/default_style_family.dart';
import 'package:eliud_core/core_package.dart';
import 'package:eliud_pkg_create/creator_package.dart';
import 'package:eliud_pkg_create/tools/basic_app.dart';
import 'package:eliud_pkg_text/text_package.dart';
import 'package:eliud_stl_mona/mona_stl_package.dart';
import 'package:eliud_pkg_create/creator_decoration.dart';
import 'package:eliud_stl_mona/mona_style_family.dart';
import 'package:flutter/cupertino.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart';
import 'package:eliud_pkg_wizards/wizards_package.dart';
import 'package:eliud_pkg_etc/etc_package.dart';
import 'package:eliud_pkg_medium/medium_package.dart';
import 'package:eliud_pkg_workflow/workflow_package.dart';

Future<void> main() async {
  String APP_ID = "THOMA5_APP";

  WidgetsFlutterBinding.ensureInitialized();

  if (kIsWeb) {
    await Firebase.initializeApp(
        options: const FirebaseOptions(
          apiKey: "ABcdEfG_H1Ij2KLmNo3PQ_RstUvwXY4Zabcdefg",
          authDomain: "thoma5.firebaseapp.com",
          projectId: "thoma5",
          storageBucket: "thoma5.appspot.com",
          messagingSenderId: "263405528229",
          appId: "1:123456789012:web:1a2345b6c7890d12ef345h",
          measurementId: "G-WL1A23456C"
        ));
  } else {
    await Firebase.initializeApp();
  }
  var eliud = Eliud();

  try {
    eliud.registerPackage(CorePackage.instance());
    eliud.registerPackage(TextPackage.instance());
    eliud.registerPackage(MonaStlPackage.instance());
    eliud.registerPackage(CreatorPackage.instance());
    eliud.registerPackage(WizardsPackage.instance());

    // needed for WizardsPackage:
    eliud.registerPackage(EtcPackage.instance());
    eliud.registerPackage(MediumPackage.instance());
    eliud.registerPackage(WorkflowPackage.instance());

    // register decorations, these are only required if you want to be able to change your app through the interface
    eliud.registerDecoration(CreatorDecoration());

    // register style families
    eliud.registerStyleFamily(MonaStyleFamily.instance());
    eliud.registerStyleFamily(DefaultStyleFamily.instance());

    // finish init
    eliud.finalizeInitialisation();
  } catch (exception) {
    throw Exception("Exception whilst initialising the app");
  }

  // create the app if it doesn't exist
  await BasicApp.checkApp(APP_ID);

  // let's go !
  eliud.run(APP_ID, false);
}

Step 31.3: Create images and stylesheet #

  1. Create favicon.png and overwrite the current existing one in the icons directory of your web folder

Create a png 16 x 16 pixels based on your logo.

  1. Download loading.gif

Download loading.gif and copy into the icons directory of your web folder

  1. Download styles.css

Download styles.css and copy into the root directory of your web folder

Step 31.4: Update index.html #

  1. Add the stylesheet
  <link rel="stylesheet" type="text/css" href="styles.css">
  1. Add the Web client ID in metadata
  <!== Google sign-in -->
  <meta name="google-signin-client_id" content="x-y.apps.googleusercontent.com">
  1. Add the loading gif
  <div id="progress">
  </div>

  <script>
    var img = document.createElement("img");
    img.className = "center";
    img.src = "icons/loading.gif";
    var src = document.getElementById("progress");
    src.appendChild(img);
  </script>
  1. Initialise pdfjs
  <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.12.313/build/pdf.js" type="text/javascript"></script>
  <script type="text/javascript">
    pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.12.313/build/pdf.worker.min.js";
    pdfRenderOptions = {
      cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.12.313/cmaps/',
      cMapPacked: true,
    }
  </script>

  1. Review meta data description and name

  2. Which results in the below index.html for thoma5


<!DOCTYPE html>
<html>
<head>
  <base href="$FLUTTER_BASE_HREF">

  <link rel="stylesheet" type="text/css" href="styles.css">
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Thoma5">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Thoma5">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">
  
  <!== Google sign-in -->
  <meta name="google-signin-client_id" content="x-y.apps.googleusercontent.com">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="icons/favicon.png"/>

  <title>Thoma5</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    const serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <div id="progress">
  </div>

  <script>
    var img = document.createElement("img");
    img.className = "center";
    img.src = "icons/loading.gif";
    var src = document.getElementById("progress");
    src.appendChild(img);
  </script>

  <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.12.313/build/pdf.js" type="text/javascript"></script>
  <script type="text/javascript">
    pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.12.313/build/pdf.worker.min.js";
    pdfRenderOptions = {
      cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.12.313/cmaps/',
      cMapPacked: true,
    }
  </script>
  <div id="loading"></div>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>
</body>
</html>

Step 32: Deploy your website #

  1. Create file firebase.json in your app root directory with these contents
{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
  1. Build your website
flutter build web --web-renderer html --release --no-tree-shake-icons
call firebase login
call firebase deploy --project thoma5

Step 33: Create policies / policy pages #

When publishing apps to the Google Play or Apple App Store, you will need to provide links to privacy policy and/or disclaimer. We recommend providing a privacy policy, terms of service and a disclaimer.

For more information, see policies.pdf

To create policies, you can choose to use your website or your android app. We're using the website as we find the interface easier for the below actions.

For each policy, follow these steps:

  1. Create a pdf of your policy, then export a jpg for each page and store these files into assets/legal/...

  2. Open your app. We open thoma5.com

  3. Login with your google account

  4. Run the policy wizard to create a new policy

  5. Construct the url

Step 34: Create membership page #

  1. Create memberdashboard page

TODO

https://console.cloud.google.com/apis/credentials/consent

select user type "External" select "create" fill in the details requested:

  • provide a logo
  • privacy policy will be available from https://[your domain name[/#[app name in code]/privacy_policy-1. In our example: https://juuwle.net/#JUUWLE_APP/privacy_policy-1
  • We will make the terms of service available from https://[your domain name[/#[app name in code]/terms_of_service-1. In our example: https://juuwle.net/#JUUWLE_APP/terms_of_service-1
  • Add your domain as Authorised domains, here juuwle.net
  • Specify developers email address
  • Add scopes:
  • .../auth/userinfo.email
  • .../auth/userinfo.profil Then press the "In production" button and go through the on screen instructions

NOTES: Your app will be available to any user with a Google Account.

You've configured your app in a way that requires verification . To complete verification, you will need to provide:

An official link to your app's Privacy Policy, use #privacy_policy_url A YouTube video showing how you plan to use the Google user data you get from scopes A written explanation telling Google why you need access to sensitive and/or restricted user data All your domains verified in Google Search Console

3.6 You will receive an email "OAuth Verification Request for Project" Follow instructions in the email

Step n: see create-new-app-removed-whats-put-in-README.txt #

overview packages / dependencies #

typical #

A typical app, here Minkey, uses the following dependencies:

Dependency diagram

Package Description
eliud_core This package
eliud_generator Eliud generator
eliud_pkg_apps Eliud package for creating apps through code, not gui
eliud_pkg_chat Eliud chat package
eliud_pkg_create Eliud create package
eliud_pkg_etc Eliud etc package
eliud_pkg_feed Eliud feed package
eliud_pkg_follow Eliud follow package
eliud_pkg_fundamentals Eliud fundamentals package
eliud_pkg_medium Eliud medium package
eliud_pkg_membership Eliud membership package
eliud_pkg_notifications Eliud notifications package
eliud_pkg_pay Eliud pay package
eliud_pkg_shop Eliud shop package
eliud_pkg_text Eliud text package
eliud_pkg_wizards Eliud wizards package
eliud_pkg_workflow Eliud workflow package
eliud_stl_mona Eliud mona style

← Metadata

3
likes
0
points
1.78k
downloads

Publisher

verified publishereliud.io

Weekly Downloads

Metadata

Eliud core

Homepage
Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

another_flushbar, bloc, cloud_firestore, cloud_functions, collection, crypto, datetime_picker_formfield, delayed_display, equatable, expandable, fast_image_resizer, firebase_auth, firebase_core, firebase_storage, flutter, flutter_bloc, flutter_colorful_tab, flutter_colorpicker, flutter_markdown, flutter_signin_button, google_sign_in, http, image, intl, meta, path, path_provider, pdfx, pointer_interceptor, sign_in_with_apple, transparent_image, tuple, uuid, video_thumbnail

More

Packages that depend on eliud_core

Back