DEV Community: Tarlan Isaev 🍓

Cross-posting automation across multiple social media platforms with Make.com and Airtable

Tarlan Isaev 🍓 — Wed, 08 Mar 2023 08:29:42 +0000

Social media has become an essential part of our lives, and it’s no longer just a tool for personal communication. It has become an integral part of businesses’ marketing strategies, and for good reason. Social media platforms provide a powerful way to reach a vast audience, increase brand awareness, and engage with customers.

However, managing multiple social media accounts can be a time-consuming and challenging task. Each platform has its own requirements and best practices for posting content, and keeping up with all of them can be overwhelming. That’s where scenario blueprints come in.

Scenario blueprints allow you to automate the process of cross-posting content to multiple social media platforms. With just a few clicks, you can schedule posts in advance and have them automatically posted to all of your social media accounts at once, without having to manually post to each platform separately.

This can save a significant amount of time and streamline your social media management. Rather than having to log in to each account separately and post the same content individually, you can manage all of your social media accounts in one place and post to multiple platforms simultaneously.

Furthermore, using scenario blueprints ensures consistency in your social media posts. Consistency is essential in social media management, and cross-posting content to multiple platforms using a single tool ensures that your content is consistently posted across all platforms. This can help to increase engagement and reach across all of your social media accounts.

Customization is another benefit of using scenario blueprints. With Make.com’s scenario editor, you can customize your cross-posting settings for each social media platform. This allows you to tailor your posts to each platform’s specific requirements and audience, while still saving time by using a single tool to manage all of your accounts.

Make.com is a powerful automation tool that can help streamline your workflow and manage multiple social media accounts efficiently. One of the key features of Make.com is its ability to get data from Airtable, which is a cloud-based database tool. By combining the power of Make.com with Airtable, you can automate workflows based on data stored in your Airtable database.

To import a scenario blueprint and set up cross-posting across various social media platforms, follow these steps:

Click on the “Import” button in the bottom middle part of the screen. Also, we can export our blueprint in json format. Don’t forget to press on and set the scheduling time.

Select the scenario blueprint file that you want to import from this link on Google Drive.
Once the file is imported, click on the scenario name to open it in the scenario editor.
Add the “Social Media” action to your scenario by clicking on it in the sidebar.
Click on the “Configure” button next to the “Social Media” action to open the settings window.
Select the social media platforms that you want to cross-post to and enter your login credentials for each platform.
Customize the message and other settings as needed for each social media platform on Airtable.

Select channels several channels where you’d like to share your post and make the status Approved.

Now select the Status to Approved and move to Approved for Publishing table.

Save your changes and run the scenario to start cross-posting to your social media accounts.

By following these steps, you can set up Make.com with Airtable and import a scenario blueprint to automate cross-posting across various social media platforms. This can save you time and ensure consistency in your social media posts, ultimately increasing engagement and reach across all of your social media accounts.

That’s it! With these steps, you can easily import a scenario blueprint to Make.com and set up cross-posting via several social media platforms to increase your online presence and reach

To summarize, scenario blueprints provide an excellent solution for managing multiple social media accounts efficiently. By automating the process of cross-posting content to multiple platforms, you can save time, ensure consistency, and increase engagement across all of your social media accounts. With the power of Make.com’s scenario editor and Airtable, you can customize your posts to each platform’s specific needs while streamlining your social media management.

Resources:

The Youtube channel Business Automated Tutorials helped me understand all the settings
Airtable of Foodshare Social Media Calendar
Blueprint to download
ChatGPT

Please let me know what you think. Thank you :)

make #airtable #smm #socialmedia #twitter #instagram #facebook #linkedin #telegram

Supabase: count and discount raws from the likes table

Tarlan Isaev 🍓 — Sun, 19 Feb 2023 14:40:18 +0000

Hi guys. Here's how I solved the count or discount problem of raws from the likes table with a unique post_id that matches a unique profile_id column.

This function is designed to be called as a trigger function, and it takes no parameters. Instead, it uses the NEW row variable to get the post_id value of the row that was just inserted or updated in the likes table. It then updates the post_like_counter column in the posts table using the post_id value from the NEW row.

Assuming the following:

The likes table has columns id, profile_id, and post_id
The posts table has columns id, post_like_counter, and profile_id
The profiles table has columns id
Each profile can only like a post once
You want to update the post_like_counter column in the posts table with the count of likes for each post, but only for likes made by profiles that exist in the profiles table

Finally, the trigger function returns the NEW row to indicate that the trigger executed successfully. You can use this function as a trigger function to automatically update the post_like_counter column whenever a row is inserted or updated in the likes table.

You can use the following PostgreSQL query to achieve that:

-- Create function counter that increments post likes
CREATE OR REPLACE FUNCTION get_count()
RETURNS TRIGGER
LANGUAGE plpgsql
AS $$
BEGIN
UPDATE posts
SET post_like_counter = (
SELECT count(*)
FROM (
SELECT DISTINCT ON (likes.profile_id) likes.post_id
FROM likes
WHERE likes.post_id = NEW.post_id
AND likes.profile_id IN (SELECT id FROM profiles)
) AS unique_likes
)
WHERE id = NEW.post_id;

RETURN NEW;
END;
$$;

-- Trigger the function every time a user is added/liked a post in the likes table
CREATE trigger on_post_user_liked
after insert on likes
for each row execute procedure public.get_count();

To create a function that decrements the post_like_counter counter, you can modify the existing function to subtract 1 from the post_like_counter instead of counting the likes.

Here's the function named get_uncount:

-- Create function counter that decrements the value in the 'post_like_counter' column in the 'posts' table
CREATE OR REPLACE FUNCTION decrement_count()
RETURNS TRIGGER
LANGUAGE plpgsql
AS $$
BEGIN
UPDATE posts
SET post_like_counter = post_like_counter - 1
WHERE id = OLD.post_id;

RETURN OLD;
END;
$$;

-- Trigger the function every time a user unliked/ delited post in the `likes` table
CREATE TRIGGER on_post_user_unliked
AFTER DELETE ON likes
FOR EACH ROW EXECUTE PROCEDURE public.decrement_count();

Please let me know if there is a more elegant way to count the likes. Thanks :)

Adapted Firestore data migration to Supabase

Tarlan Isaev 🍓 — Wed, 25 Jan 2023 13:30:27 +0000

As I continue my journey with data migration with my awesome dev team, I am adapting another tutorial and providing some SQL snippets for reference. I have previously mentioned that this task is quite difficult for me, but I am finding it to be an enjoyable learning experience. I am discovering new and useful knowledge, and I hope that it is not too intimidating for those who are also learning. Despite the challenges, I am eager to keep pushing forward and making progress. Data migration can be a complex process, but with dedication and perseverance, it is possible to master. I will keep sharing my experiences and insights along the way, in the hopes that it will be helpful for others who are also working on data migration projects :)

Please note that before updating the column, make sure to take the backup of the table or if you are using it in production take care of the down time as well.

Supabase provides several tools to convert data from a Firebase Firestore database to a Supabase PostgreSQL database. The process copies the entire contents of a single Firestore collection to a single PostgreSQL table.

The Firestore collection is "flattened" and converted to a table with basic columns of one of the following types: text, numeric, boolean, or jsonb. If your structure is more complex, you can write a program to split the newly-created json file into multiple, related tables before you import your json file(s) to Supabase.

Set up the migration tool
Clone the firebase-to-supabase repository:

git clone https://github.com/supabase-community/firebase-to-supabase.git
In the /firestore directory, create a file named supabase-service.json with the following contents:

{
  "host": "database.server.com",
  "password": "secretpassword",
  "user": "postgres",
  "database": "postgres",
  "port": 5432
}

Go to the Database settings for your project in the Supabase Dashboard.
Under Connection Info, copy the Host string and replace the entry in your supabase-service.json file.
Enter the password you used when you created your Supabase project in the password entry in the supabase-service.json file.

Generate a Firebase private key [#generate-firebase-private-key]
Log in to your Firebase Console and open your project.
Click the gear icon next to Project Overview in the sidebar and select Project Settings.
Click Service Accounts and select Firebase Admin SDK.
Click Generate new private key.
Rename the downloaded file to firebase-service.json.
Command line options
List all Firestore collections
node collections.js

Dump Firestore collection to JSON file

node firestore2json.js <collectionName> [<batchSize>] [<limit>]

batchSize (optional) defaults to 1000
output filename is .json
limit (optional) defaults to 0 (no limit)

In my case, I dumped Users collection from Firestore:
node firestore2json.js Users 1000 0

Customize the JSON file with hooks

I've done this step on VS Code. You can customize the way your JSON file is written using a custom hook. A common use for this is to "flatten" the JSON file, or to split nested data into separate, related database tables. For example, you could take a Firestore document that looks like this:

[{ "user": "mark", "score": 100, "items": ["hammer", "nail", "glue"] }]

And split it into two files (one table for users and one table for items):

[{ "user": "mark", "score": 100 }]

[
  { "user": "mark", "item": "hammer" },
  { "user": "mark", "item": "nail" },
  { "user": "mark", "item": "glue" }
]

Import JSON file to Supabase (PostgreSQL) [#import-to-supabase]#
node json2supabase.js <path_to_json_file> [<primary_key_strategy>] [<primary_key_name>]

The full path of the file you created in the previous step (Dump Firestore collection to JSON file ), such as ./my_collection.json
Is one of:
none (default) No primary key is added to the table.
smallserial Creates a key using (id SMALLSERIAL PRIMARY KEY) (autoincrementing 2-byte integer).
serial Creates a key using (id SERIAL PRIMARY KEY) (autoincrementing 4-byte integer).
bigserial Creates a key using (id BIGSERIAL PRIMARY KEY) (autoincrementing 8-byte integer).
uuid Creates a key using (id UUID PRIMARY KEY DEFAULT uuid_generate_v4()) (randomly generated UUID).
firestore_id Creates a key using (id TEXT PRIMARY KEY) (uses existing firestore_id random text as key).
Name of primary key. Defaults to "id".

I imported using this command:
node json2supabase.js ./Users.json uuid id 1000 0

If you get duplicates in your table, you can use the following SQL snippets, such as this one:

DELETE FROM users_duplicate s
USING
(SELECT firestore_id, 
max (ctid) as max_ctid
FROM users_duplicate
GROUP by firestore_id, email) t
WHERE s.ctid <> t.max_ctid 
AND s.firestore_id=t.firestore_id;

Note that I renamed the 'users' table with a low case and created a duplicate 'users_duplicate' table in case I screw something up and need to return it to its original state. This way, we can copy an exact copy of any table.

When you're done with migration you can add a foreigh key relation to 'user' column and matching by email from 'profiles' or 'users' table.

Supabase allows you to write values as NULL and in the beginning I enabled the Allow Nullable option, after filling all users in the 'profile' table I disabled it right on the fly - very handy option :)

Custom hooks

Hooks are used to customize the process of exporting a collection of Firestore documents to JSON. They can be used for:

Customizing or modifying keys
Calculating data
Flattening nested documents into related SQL tables

Write a custom hook

Create a .js file for your collection

If your Firestore collection is called users, create a file called users.js in the current folder.

Construct your .js file

The basic format of a hook file looks like this:

module.exports = (collectionName, doc, recordCounters, writeRecord) => {
  // modify the doc here
  return doc
}

Parameters

collectionName: The name of the collection you are processing.
doc: The current document (JSON object) being processed.
recordCounters: An internal object that keeps track of how many records have been processed in each collection.
writeRecord: This function automatically handles the process of writing data to other JSON files (useful for "flatting" your document into separate JSON files to be written to separate database tables). writeRecord takes the following parameters:

name: Name of the JSON file to write to.
doc: The document to write to the file.
recordCounters: The same recordCounters object that was passed to this hook (just passes it on).

Examples

Add a new (unique) numeric key to a collection

module.exports = (collectionName, doc, recordCounters, writeRecord) => {
  doc.unique_key = recordCounter[collectionName] + 1
  return doc
}

Add a timestamp of when this record was dumped from Firestore
module.exports = (collectionName, doc, recordCounters, writeRecord) => {
  doc.dump_time = new Date().toISOString()
  return doc
}

Flatten JSON into separate files

Flatten the users collection into separate files:

[
  {
    "uid": "abc123",
    "name": "mark",
    "score": 100,
    "weapons": ["toothpick", "needle", "rock"]
  },
  {
    "uid": "xyz789",
    "name": "chuck",
    "score": 9999999,
    "weapons": ["hand", "foot", "head"]
  }
]

The users.js hook file:

module.exports = (collectionName, doc, recordCounters, writeRecord) => {
  for (let i = 0; i < doc.weapons.length; i++) {
    const weapon = {
      uid: doc.uid,
      weapon: doc.weapons[i],
    }
    writeRecord('weapons', weapon, recordCounters)
  }
  delete doc.weapons // moved to separate file
  return doc
}

The result is two separate JSON files:

[
  { "uid": "abc123", "name": "mark", "score": 100 },
  { "uid": "xyz789", "name": "chuck", "score": 9999999 }
]

[
  { "uid": "abc123", "weapon": "toothpick" },
  { "uid": "abc123", "weapon": "needle" },
  { "uid": "abc123", "weapon": "rock" },
  { "uid": "xyz789", "weapon": "hand" },
  { "uid": "xyz789", "weapon": "foot" },
  { "uid": "xyz789", "weapon": "head" }
]

Here are the SQL snippets in the Supabase interface. You can combine them into multiple queries for the same table in one snippet.

In case you want to delete duplicates based on values of multiple columns, here is the query template:

DELETE FROM users_duplicate
WHERE id IN
    (SELECT firestore_id
    FROM 
        (SELECT firestore_id,
         ROW_NUMBER() OVER( PARTITION BY firestore_id,
         email
        ORDER BY firestore_id ) AS row_num
        FROM users_duplicate ) t
        WHERE t.row_num > 1 );

Find duplicates:

SELECT firestore_id, 
COUNT(1) 
FROM users_duplicate 
GROUP by firestore_id

Identify each record in a table with PostgresQL inbuilt column ctid:

SELECT firestore_id, 
ctid
FROM users_duplicate;

List down required i.e. distinct rows:

SELECT firestore_id, 
max (ctid) as max_ctid
FROM users_duplicate
GROUP by firestore_id;

We can delete duplicate records with below query:

DELETE FROM users_duplicate s
USING
(SELECT firestore_id, 
max (ctid) as max_ctid
FROM users_duplicate
GROUP by firestore_id, email) t
WHERE s.ctid <> t.max_ctid 
AND s.firestore_id=t.firestore_id;

Get column names:

SELECT column_name, data_type
FROM information_schema.columns
WHERE table_name = 'users_duplicate';

Update from one table to another based on a id match:

UPDATE profiles
SET email = (
SELECT
email
FROM
auth.users
WHERE
profiles.id = auth.users.id
-- AND auth.users.id = 8
);

Update first_name in profiles table from another table users_duplicate matching by email
UPDATE profiles
SET first_name = users_duplicate.first_name
FROM users_duplicate
WHERE profiles.email = users_duplicate.email;
);

Update rows in several columns at profiles table from another table users_duplicate matching by email:

UPDATE profiles
SET
first_name = users_duplicate.first_name,
second_name = users_duplicate.second_name,
username = users_duplicate.username,
avatar_url = users_duplicate.avatar_url,
phone_number = users_duplicate.phone_number,
user_metro_station = users_duplicate.user_metro_station,
birth_date = users_duplicate.birth_date,
user_location = users_duplicate.user_location,
liked_post = users_duplicate.liked_post,
about_me = users_duplicate.about_me,
user_address = users_duplicate.user_address,
created_time = users_duplicate.created_time,
firestore_id = users_duplicate.firestore_id
FROM users_duplicate
WHERE profiles.email = users_duplicate.email;

Update at admin table updated_at column with null value to the curront stams:

UPDATE admin
SET updated_at = (now() AT TIME ZONE 'utc'::timestamptz)
WHERE updated_at IS NULL;

Update at posts from null to empty string:

UPDATE posts
SET post_views = '0'::numeric
WHERE post_views IS NULL;

Update null value in column five_star to false boolean at post table:

UPDATE posts
SET five_star = 'false'::boolean
WHERE five_star IS NULL;

Update column gif_url2 at posts table from another gif_url column:

gif_url table if value is null
UPDATE posts
SET gif_url_2 = gif_url
WHERE gif_url_2 IS NULL;

This query will delete all rows in the "chat_messages" table where the "text" column is not unique, by keeping only the row with the minimum "id" for each group of duplicate rows:

DELETE FROM chat_messages
WHERE text IN (
SELECT text
FROM chat_messages
GROUP BY text
HAVING COUNT(*) > 1
) AND id NOT IN (
SELECT MIN(id)
FROM chat_messages
WHERE text IN (
SELECT text
FROM chat_messages
GROUP BY text
HAVING COUNT(*) > 1
)
GROUP BY text
);

Delete all rows in the "chat_messages" table where the "text" column is not unique, by keeping only the row with the minimum "id" for each group of duplicate rows where value of the text column is null:

DELETE FROM chat_messages
WHERE text IS NULL AND id NOT IN (
SELECT MIN(id)
FROM chat_messages
WHERE text IS NULL
GROUP BY text
);

Working with timestamptz data format

To update the "last_message_timee" column in the "chats" table with the value of the "_seconds" key from the "last_message_time" column, converted to a timestamptz value, you can use the following query:

UPDATE chats SET last_message_timee = to_timestamp(jsonb_extract_path_text(last_message_time, '_seconds')::bigint) AT TIME ZONE 'UTC'

This query uses the jsonb_extract_path_text() function to extract the value of the "_seconds" key from the "last_message_time" column, and then uses the to_timestamp() function to convert the seconds to a timestamptz value, and the AT TIME ZONE 'UTC' is used to set the time zone to UTC, and update the last_message_timee column with the result.

Now we can delete 'last_massage_time' and rename another 'last_massage_timee' column with converted data to 'last_massage_time'.

To convert jsonb to timestamptz type of data manualy we can use this awesome resource: unixtimestamp.com For example we have last_message_time column with jsonb data type:

{
  "_seconds": 1655911605,
  "_nanoseconds": 442000000
}

I don't need nanoseconds and just simply converting seconds 1655911605 to timestamptz:

Format  Seconds
GMT Wed Jun 22 2022 15:26:45 GMT+0000
Your Time Zone  Wed Jun 22 2022 18:26:45 GMT+0300 (Moscow Standard Time)
Relative    7 months ago

In conclusion, data migration can be a daunting task, but it is also an exciting opportunity to learn and grow as a data professional. I find that by approaching the process piece by piece and utilizing helpful tutorials and SQL snippets, I'm able to make steady progress. I'm reminded that even though there may be challenges and obstacles along the way, the end result is worth the effort. So grateful for the opportunity to take on this project and I'm looking forward to continuing this exciting journey. I encourage others who may be facing similar challenges to not be discouraged and to keep pushing forward, as the rewards of a successfully completed data migration project on Supabase are well worth the effort.

Thank you, guys :)

Adapted Firebase Auth Migration for the FlutterFlow project

Tarlan Isaev 🍓 — Mon, 02 Jan 2023 20:01:08 +0000

Huge thanks to the FlutterFlow team for providing this great feature. Supabase promises very bright opportunities and a future for developers as an open-source project. I know it's going to be difficult, but I think now is a good time to start migrating the whole Foodshare Firebase to Supabase piece by piece :)

Supabase provides several tools to help migrate auth users from a Firebase project to a Supabase project. There are two parts to the migration process:

firestoreusers2json (TypeScript, JavaScript) exports users from an existing Firebase project to a .json file on your local system.
import_users (TypeScript, JavaScript) imports users from a saved .json file into your Supabase project (inserting those users into the auth.users table of your PostgreSQL database instance).

Set up the migration tool

Before we start we need to Google auth in terminal:
gcloud auth login

Set your project:
gcloud config set project <your-project>

Install npm moment module to avoid an error with it:
npm i moment

Clone the firebase-to-supabase repository: git clone https://github.com/supabase-community/firebase-to-supabase.git

CD to /auth directory and in the /auth directory, create a file named supabase-service.json with the following contents:

{ "host": "database.server.com", "password": "secretpassword", "user": "postgres", "database": "postgres", "port": 5432 }

Go to the Database settings for your project in the Supabase Dashboard.
Under Connection Info, copy the Host string and replace the entry in your supabase-service.json file.
Enter the password you used when you created your Supabase project in the password entry in the supabase-service.json file.

Generate a Firebase private key

Log in to your Firebase Console and open your project.
Click the gear icon next to Project Overview in the sidebar and select Project Settings.
Click Service Accounts and select Firebase Admin SDK.
Click Generate new private key.
Rename the downloaded file to firebase-service.json.

Save your Firebase password hash parameters

Log in to your Firebase Console and open your project.
Select Authentication (Build section) in the sidebar.
Select Users in the top menu.
At the top right of the users list, open the menu (3 dots) and click Password hash parameters.
Copy and save the parameters for base64_signer_key, base64_salt_separator, rounds, and mem_cost.

hash_config { algorithm: SCRYPT, base64_signer_key: XXXX/XXX+XXXXXXXXXXXXXXXXX+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX==, base64_salt_separator: Aa==, rounds: 8, mem_cost: 14, }

Command line options

Dump Firestore users to a JSON file #

node firestoreusers2json.js [<filename.json>] [<batch_size>]

In my case, it was: node firestoreusers2json.js users.json 1000

filename.json: (optional) output filename (defaults to ./users.json)
batchSize: (optional) number of users to fetch in each batch (defaults to 100)
If an error like the one below occurs, check your JSON dump file for a missing comma. This is easily detected by the highlighted line in VS Code.
`node:events:491
throw er; // Unhandled 'error' event check out your dumped file`

Import JSON users file to Supabase Auth (PostgreSQL: auth.users)

node import_users.js <path_to_json_file> [<batch_size>]

In my case: node import_users.js ./users.json 1000

path_to_json_file: full local path and filename of .json input file (of users)
batch_size: (optional) number of users to process in a batch (defaults to 100)

Notes
For more advanced migrations, including the use of a middleware server component for verifying a user's existing Firebase password and updating that password in your Supabase project the first time a user logs in, see the firebase-to-supabase repo.

Thank you :)

FlutterFlow | Codemagic CI with Google Play Store

Tarlan Isaev 🍓 — Tue, 03 May 2022 12:00:37 +0000

**TL:DR :)

Setting up a Flutter project**

Files preparation

Before listing our app on Codemagic we shoul prepare our project for the delivery. Here's my "build.gradle" file with the complete code.

Path: ../android/app/build.gradle

`def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
localPropertiesFile.withReader('UTF-8') { reader ->
localProperties.load(reader)
}
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services' // Google Services plugin

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {
compileSdkVersion 31
ndkVersion '23.1.7779620'
sourceSets {
main.java.srcDirs += 'src/main/kotlin'
}

lintOptions {
    disable 'InvalidPackage'
}

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "com.flutterflow.foodshare"
                minSdkVersion 21
    targetSdkVersion 31
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
               ndk {
                       debugSymbolLevel 'FULL'
              }
}
signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
        storePassword keystoreProperties['storePassword']
    }
}

buildTypes {
    release {
        // TODO: Add your own signing config for the release build.
        // Signing with the debug keys for now, so `flutter run --release` works.
        signingConfig signingConfigs.release
    }
}

}

flutter {
source '../..'
}

dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}`

Acording to our delivering build we have to increase our "version: 1.0.0+1" build in root folder of our project "../pubspec.yaml". The second build is going to be "version: 1.0.0+2" and so on and so forth.

Path: ../pubspec.yaml

... version: 1.0.0+13 ...

Version inconsistency between local and Codemagic

First, you need to make sure that the gradlew file isn’t in ".gitignore". Look for "../android/gradlew", and if it’s in ".gitignore", delete it from there. I simply commented two lines. Then add "!gradle-wrapper.jar" to a new line in ".gitignore" to create an exception so that "gradle-wrapper.jar" would also be excluded from ".gitignore".

Path: "../android/.gitignore"

`gradle-wrapper.jar
!gradle-wrapper.jar
/.gradle
/captures/
/gradlew
/gradlew.bat

/gradlew

/gradlew.bat

/local.properties
GeneratedPluginRegistrant.java`

Change "distributionUrl" to version "7.2" in "../android/gradle/wrapper/gradle-wrapper.properties"

Path: ../android/gradle/wrapper/gradle-wrapper.properties

distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists

In our case, run "./gradlew wrapper --gradle-version 7.2" inside "../android" locally to create gradlew and gradle-wrapper.properties files in your repository.

Change icons

A bit annoyng part for me is changing icons in a few folders. Otherwise we will see the default flutter icon on installed app. Hopefully it will be fixed soon by FlutterFlow team :)

Following path "../android/app/src/main/res" and directories within it:

../android/app/src/main/res/mipmap-hdpi
../android/app/src/main/res/mipmap-mdpi
../android/app/src/main/res/mipmap-xhdpi
../android/app/src/main/res/mipmap-xxhdpi
../android/app/src/main/res/mipmap-xxxhdpi

For toasting those icons I've been using online tools. Not sure which platforms in particular. Here's a few anyway :)

Codemagic configuration

I'll just simply share my configuration to make things way easier 🙂

Build for platforms

Android

Run build on

Free - macOS Standard VM (2.3GHz Quad Core / 8GB)
No "Build triggers"
No "Environment variables"
No "Dependency caching"

Add custom settings

No "Post-clone script"
No "Pre-test script"

Tests

No tests are covered yet

*Add custom settings for post-tests *

No "Post-test script"
No "Pre-build script"

Build
In my case I changed a few settings:

Flutter version: channel Beta
Mode: release

*Add custom settings for post-build scripts *

No "Post-build script"

Distribution

*Enable Android code signing. *
Was covered in Build and release an Android app to Google Play Store.

Keystore*: upload keystore
Keystore password: add keystore password
Key alias: upload
Key password: add key password

Enable Google Play publishing

Add "Credentials (.json)*" key.

If you don't have the json key or file is corrupted you should generated it on "Google Cloud Platform" at "IAM & Admin" section and "Service accounts".

Press "Create Service Account". Here's my overview.

Add the service account name and click "Done".

Grant this service account access to project:

Cloud Build Editor
Firebase Service Management Service Agent
Service Account Token Creator
Service Account User

Finalise it - click "Done".

Create new or add JSON key in key category. For my project I added a new key.

Generated and added key should look like this.

Firebase App Distribution

Disabled

Notifications

Enable email publishing and add your email.
Slack is disabled.

Post-publish script

No any script

Configs in yaml format
Here's the complete config codemagic.yaml file
Track: internal

`# Automatically generated on 2021-11-13 UTC from https://codemagic.io/app/6179aca0a05d5e8795c3cfa0/settings

Note that this configuration is not an exact match to UI settings. Review and adjust as necessary.

workflows:
default-workflow:
name: Default Workflow
max_build_duration: 30
environment:
vars:
FCI_KEYSTORE_PATH: /tmp/keystore.keystore
FCI_KEYSTORE: Encrypted(Z0FBQUF...2TGxYYVBBPT0=)
FCI_KEYSTORE_PASSWORD: Encrypted(Z0FBQUF...g0Ni1xVlE9PQ==)
FCI_KEY_PASSWORD: Encrypted(Z0FBQUFB...FMZHc9PQ==)
FCI_KEY_ALIAS: Encrypted(Z0FBQUF...ZWWQ5aWc9PQ==)
flutter: beta
xcode: latest
cocoapods: default
scripts:
- |
# set up key.properties
echo $FCI_KEYSTORE | base64 --decode > $FCI_KEYSTORE_PATH
cat >> "$FCI_BUILD_DIR/android/key.properties" < storePassword=$FCI_KEYSTORE_PASSWORD
keyPassword=$FCI_KEY_PASSWORD
keyAlias=$FCI_KEY_ALIAS
storeFile=/tmp/keystore.keystore
EOF
- |
# set up local properties
echo "flutter.sdk=$HOME/programs/flutter" > "$FCI_BUILD_DIR/android/local.properties"
- flutter packages pub get
- flutter build appbundle --release
artifacts:
- build//outputs/apk//.apk
- build//outputs/bundle//.aab
- build//outputs//mapping.txt
- flutter_drive.log
publishing:
email:
recipients:
- tamerlanium@gmail.com
google_play:
credentials: Encrypted(Z0FBQUF...VNUdUMU09)
track: internal
in_app_update_priority: 0`

Last step
Run following "flutter clean" command on terminal and commit the changes then rerun your Codemagic build.

Troubleshooting

Error caused by dependencies or could be something else
If you encounter an error with dependencies pls try out to clean your project through the terminal:

sudo flutter clean && sudo rm ios/Podfile && sudo rm ios/Podfile.lock pubspec.lock && sudo rm -rf ios/Pods ios/Runner.xcworkspace && sudo rm -Rf ios/.symlinks && sudo rm -Rf ios/Flutter/Flutter.framework && sudo rm -Rf ios/Flutter/Flutter.podspec

and

flutter pub get && flutter packages pub run build_runner build --delete-conflicting-outputs

then once again commit the changes and rerun your Codemagic build.

That should help you to set up the CI/CD pipeline :)

Thank you :)

FlutterFlow | Build and release an Android app on Google Play Store

Tarlan Isaev 🍓 — Tue, 03 May 2022 11:51:24 +0000

Geez I was facing an issue all day long with signing my android app today, but finally overcame the pain lol :)

*Preparation before the flight :) *

Before signing my app I increased "compileSdkVersion 30", "minSdkVersion 23", "targetSdkVersion 30". Also added "signingConfigs" a few "def" properties and change "signingConfigs" to "release" mode in "build.grudle" file.

Here's the complete "build.grudle" file:

// Beginning | sorry the code snippet isn't properly displayed for some reason. Pls copy as it's.
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
localPropertiesFile.withReader('UTF-8') { reader ->
localProperties.load(reader)
}
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
flutterVersionName = '1.0'
}

android {
compileSdkVersion 30
ndkVersion '23.1.7779620'
sourceSets {
main.java.srcDirs += 'src/main/kotlin'
}
lintOptions {
disable 'InvalidPackage'
}
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.flutterflow.foodshare"
minSdkVersion 23
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
ndk {
debugSymbolLevel 'FULL'
}
}
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
storePassword keystoreProperties['storePassword']
}
}
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so 'flutter run --release' works.
signingConfig signingConfigs.release
}
}
}
flutter {
source '../..'
}
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'io.card:android-sdk:5.+'
}
// End

Created file "key.properties" with these properties where storePassword and keyPassword are your later generated password for key. You'll put them on the terminal.

storePassword=your_password keyPassword=your_password keyAlias=upload storeFile=/Users/organic/Development/foodshare-flutter/android/app/upload-keystore.jks

Signing the app

Before building the app we must sign it by the key, however I got this error initially:

Java Algorithm HmacPBESHA256 not available

How did I solve it? Instead of the default command on Mac/Linux, I used the following command and it helped after a few hours of the struggle:

/Users/organic/Library/Java/JavaVirtualMachines/openjdk-16.0.1/Contents/Home/bin/keytool -genkey -v -keystore android/app/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload -storetype JKS

That command creates and stores key's stores the upload-keystore.jks file in your home directory. If you want to store it elsewhere, change the argument you pass to the -keystore parameter. However, keep the keystore file private; don’t check it into public source control!

If I've understood it correctly the Openjdk v11 doesn't allow to issue JKS keys and it's only available from the version Openjdk v12. In my case I've used Openjdk v16 installed by Homebrew.

Make sure you you've selected the right JDK (Java Development Kit) home path. In my case it locates in the directory below:

/Users/organic/Library/Java/JavaVirtualMachines/openjdk-16.0.1/Contents/Home

Creation of the lightweight bundle.

Congrats, our key is generated and we're ready to build appbundle release 🙂

Use this following command on your app folder:

flutter build appbundle --release --build-name=foodshare-1.0.0 --build-number=2

Just wait until it's finally baked and you'll see the complete file "app-release.aab" by path "../your-app/build/app/outputs/bundle/release/app-release.aab".

Production release time.

Drop your app bundle there to upload and send it for moderation 🙂

Now it looks complete I hope ahah

Pls let me know if something is wrong here :)
Thank you everyone :)

*UPD: *

*1. If you reset your repository to HEAD commit: *

sudo git reset --hard HEAD

You should copy key and properties files each time "upload-keystore.jks" to the "../your-flutterflow-project/android/app/upload-keystore.jks" directory and "key.properties" to "../your-flutterflow-project/android/key.properties" directory in case to be able to create the app builds.

2.Reseting the upload key through Google Play Developer Support.

Open a ticket on Google Play Developer Support and they will help ti reset the upload key for your app, com.flutterflow.yourapp. The new upload key will be used to sign APKs that you upload to Play.

Google recommend that you adjust your planning to include a buffer period of 48 hours from when the upload key has been reset before you can use the new upload key. You can learn more about using app signing by Google Play here.

Here’s how to generate and register a new upload key:

Follow the instructions in the Android Studio Help Center to generate a new key. It must be different from any previous keys. Alternatively, you can use the following command line to generate a new key:

keytool -genkeypair -alias upload -keyalg RSA -keysize 2048 -validity 9125 -keystore keystore.jks

This key must be a 2048 bit RSA key and have 25-year validity.

Export the certificate for that key to PEM format:

keytool -export -rfc -alias upload -file upload_certificate.pem -keystore keystore.jks

Reply to the open ticket email and attach the upload_certificate.pem file.

FlutterFlow | Popup BottomSheet on the markers for GoogleMap

Tarlan Isaev 🍓 — Tue, 03 May 2022 11:43:08 +0000

While developing your app, it could be not quite obvious how to leverage "Markers" all configured at least for me 🙂

You may need to pass data to another page from the "GoogleMap" page. For example, sending a listing item from "ListView" or "Column" to the "Component" in my case. To pass any data from one page to another component or page, you will need a few parameters. You can think of a parameter as a variable that holds the value being passed from one page to another.

Now, let's configure the essential parts of our app for passing data by creating a page "GoogleMaps" that sends the message from one page to another "Component". You can see the "Users" and "Posts" collections are being passed from one page to the next one down below.

Here could be your "Query Collection" for any events.

Add Action in "GoogleMap".

Passing Parameters from the GoogleMap to the Component

Add the "Component" to the "Action Type" named "Bottom Sheet" on "GoogleMap".

In the List or "Column" add "Query Collection". In case, to be able to set "Paths" to a variable.

Now it's time to define the "Parameters" on the "Details Page" of the component.

At this moment it should be all set to go. Click-clack - it works 😀

Thank you Mike Startup for navigating me in the right direction :)