eliud_core 1.0.7+1 copy "eliud_core: ^1.0.7+1" to clipboard
eliud_core: ^1.0.7+1 copied to clipboard

Published 15 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.

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'

:three: 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

and press 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. When in edit mode, press the wizard icon Wizard to open the wizard dialog box
  4. 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 Hosting dashboard, find the "Add custom domain" button and add
DNS records
Domain: www.thoma5.com
Record type Host Value
A thoma5.com 123.123.123.123
TXT thoma5.com hosting-site=thoma5
TXT _acme-challenge.thoma5.com aBcdE1FghIj23k4lmnoPqrstUvw5xyZabcdeF6GHiJk
Domain: www.thoma5.com
Record type Host Value
CNAME www.thoma5.com thoma5.web.app

Step 21: Buy domain #

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

  2. Setup email forwarding

  1. 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
Host name/td> 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
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 22: Subscribe to mailtrap #
    1. Subscribe
    2. Update dns
    3. Get token

    Step 23: 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 23.1: Install firebase command line tools #

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

    Step 23.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 23.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 23.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 24: Enable APIs #

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

    Step 25: 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 26: Configure Android Studio project for web #

    TODO: See currently changed uncommitted stuff (visual code)

    1. Change index.html, include the client ID in metadata! web client ID
    2. Change main.dart
    3. 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 web:
    flutter build web --web-renderer html --release --no-tree-shake-icons
call firebase login
call firebase deploy --project thoma5

    Step 27: Create policies and membership page #

    1. Add the below dependency to pubspec.yaml
      eliud_pkg_wizards: ^1.0.3+6
    1. Run pub get
    2. Add the following import to main.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';
    1. Add the following line to register the wizards package
        eliud.registerPackage(WizardsPackage.instance());

    // needed for WizardsPackage:
    eliud.registerPackage(EtcPackage.instance());
    eliud.registerPackage(MediumPackage.instance());
    1. Restart your app
    2. Run policy wizard Also see policies.txt, i.e. copy this here (or reference!)

    -> update the pages, use the examples C:\src\apps\thoma5_app\assets\legal -> I've uploaded these to drive, so can be accessed from tablet

    -> construct the url

    ANCHOR : privacy_policy_url ANCHOR : terms_of_service_url ANCHOR : disclaimer_url

    1. Create memberdashboard page

    ANCHOR : member_dashboard_url

    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