Forem: SCADE for Developers

How to use OpenCombine framework with Android Studio

SCADE for Developers — Sat, 27 Jan 2024 07:02:06 +0000

Introduction

📱Namaste Mobile Developers Community 🙏! In the ever-evolving software development landscape, the demand for cross-platform solutions is more pronounced than ever. Developers seek tools that enable them to transfer their skills and codebases between different platforms seamlessly. When it comes to reactive programming in Swift, Apple's Combine framework stands as a robust solution. However, what if you want to extend the power of Combine to Android development?

Enter OpenCombine – an open-source implementation of Combine that opens the door to cross-platform reactive programming. With its declarative syntax, support for Combine-like features, and cross-platform compatibility, OpenCombine stands as a key player in the realm of reactive programming for Swift developers.

In the ongoing series of Swift for Android articles, we will delve into the intricacies of using OpenCombine with Android Studio, empowering developers to harness the magic of reactive programming on both Swift and Android. We will build a simple Task Management app where from Android’s activity the tasks can be created or deleted using Swift’s OpenCombine framework. The OpenCombine processes the tasks-data over time and updates the Android’s UI(Recyclerview) with the latest data.

Prerequisite

If you haven’t installed the SCADE IDE, download the SCADE IDE and install it on your macOS system. The only prerequisite for SCADE is the Swift language (at least basics). Also, please ensure that Android Studio with an Android emulator or physical device is running to test the Android application.

To know more about how to add Swift to existing Android projects, please go through these articles:

Display list of GitHub followers using Github API & Swift PM library - https://medium.com/@SCADE/implement-recyclerview-using-swift-pm-libraries-eacc1efd48af
Using Swift PM libraries in the Android Studio projects - https://medium.com/@SCADE/using-swift-pm-libraries-in-the-android-studio-projects-7cef47c300bf

Source Code of App

You can directly jump to the source code of the Task Management App using OpenCombine.
https://drive.google.com/file/d/1Eq12boTsBkUpg8VYQPUo79pyDbReNIiq/view?usp=sharing

What is OpenCombine?

OpenCombine is an open-source implementation of the Combine framework, which is designed for reactive programming in Swift. It enables developers to work with asynchronous and event-driven code in a more declarative and concise manner. Combine is particularly powerful in the context of SwiftUI, where changes in data trigger automatic updates to the user interface. But it also works perfectly with the Android Studio Swift toolchain.

Key Features of OpenCombine:

Publishers and Subscribers: Open Source Combine framework revolves around the concepts of publishers that emit values and subscribers that receive and react to those values.
Operators: Combine provides a set of operators that allow developers to transform, filter, and combine streams of values.
Error Handling: Combine includes mechanisms for handling errors in a reactive way, making it well-suited for handling asynchronous tasks.
Declarative Syntax: With Combine, developers can express complex asynchronous logic in a more declarative manner, making the code more readable and maintainable.

Integrate OpenCombine using SPM

To seamlessly integrate OpenCombine into your Swift project, we can add the dependency using Swift Package Manager (SPM) by modifying the Package.swift file.

dependencies: [
   .package(url: "https://github.com/scade-platform/swift-java.git", branch: "main"),
   .package(url: "https://github.com/OpenCombine/OpenCombine.git", from: "0.10.0")
],

These declarations ensure that the necessary frameworks are included, fostering a unified development environment that harnesses the combined power of Swift and Java for cross-platform scenarios.

.target(
   name: "SwiftAndroidExample",
   dependencies: [
           .product(name: "Java", package: "swift-java"),
           .product(name: "OpenCombine", package: "OpenCombine"),
   ]),

Create the Task-App's Backend in Swift

Before diving into creating and deleting functionality for Tasks, it's imperative to set the groundwork by importing the necessary packages.

import Dispatch
import Foundation
import Java
import OpenCombine

The Swift OpenCombine code encapsulates task management logic, featuring a singleton TaskListViewModel with reactive capabilities through a tasksPublisher. Designed for a cross-platform app, this backend seamlessly integrates with an Android UI, allowing consistent task handling across Swift and Android platforms. The use of shared business logic ensures a unified approach to task management in the application.

Task Struct:

There's a Task struct representing a model for a task with two properties: id of type Int and title of type String. The struct conforms to the Identifiable protocol.

TaskListViewModel Class:

TaskListViewModel is a class responsible for managing tasks.
It's a singleton class with a static instance accessible through viewModel.
The initializer is marked as private, ensuring that instances of this class can only be created from within the class itself.

Tasks Array:

The class contains a tasks property, which is an array of Task objects. This array serves as the storage for the tasks managed by the view model.

Tasks Publisher:

There's a tasksPublisher property, which is an instance of PassthroughSubject<[Task], Never>. This subject acts as a publisher for changes in the tasks array.

addTask Method:

The addTask method adds a new task to the tasks array, prints a message indicating that the task has been added, and then sends the updated array through the tasksPublisher.

removeTask Method:

The removeTask method removes a task from the tasks array based on its index, prints a message indicating that the task has been removed, and sends the updated array through the tasksPublisher.

getTasksResultString Method:

The getTasksResultString method returns the string array containing all the current tasks.

This TaskListViewModel is designed for managing a collection of tasks, providing methods for adding, removing, and retrieving task information. The use of a publisher (tasksPublisher) allows for reactive programming, notifying subscribers of changes in the tasks array.

// Model for a task
struct Task: Identifiable {
 let id: Int
 let title: String
}

// ViewModel to manage tasks
class TaskListViewModel {
 static let viewModel = TaskListViewModel()
 private init() {
 }
 var tasks: [Task] = []
 let tasksPublisher = CurrentValueSubject<[Task], Never>([])
 private var cancellables: [AnyCancellable] = [] // Use non-optional array

 func addTask(_ task: Task) {
   tasks.append(task)
   print("Task added: \(task.title)")
   tasksPublisher.send(tasks)
 }

 func removeTask(_ task: Task) {
   tasks.remove(at: task.id)
   print("Task removed: \(task.title)")
   tasksPublisher.send(tasks)
 }

   func getTasksResultString() -> [String] {
    var taskStringArray = [String]()
    print("Current tasks:")
    for task in tasks {
      taskStringArray.append(task.title)
    }
    return taskStringArray
  }

 func subscribeToChanges(handler: @escaping ([Task]) -> Void) {
         tasksPublisher
             .sink { tasks in
                 handler(tasks)
             }
             .store(in: &cancellables)
 }
}

Design UI for Task Management App

The activity’s XML layout defines the user interface for the task management app on Android. Key UI widgets to be added in XML include:

RecyclerView for Task List:

The RecyclerView with the ID recyclerview is the focal point for displaying the list of tasks. It's configured to match the parent width and have a dynamic height based on its content.

Floating Action Button (FAB) for Adding Tasks:

The FloatingActionButton with the ID fab serves as a prominent button for adding new tasks. It is positioned at the bottom right of the screen and adorned with a plus icon.

Top Layout for App Logo and Title:

The topLayout contains an ImageView displaying the app logo (scade_logo) and a TextView presenting the title "Task Management App." This layout is oriented vertically and centered on the screen.

Layout for No Tasks Present:

The noTasksPresentLayout is a container that holds a TextView with a message ("No Tasks present. Add a Task!"). It is initially set to gone and becomes visible when there are no tasks to display.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <LinearLayout
       android:id="@+id/topLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical">

       <ImageView
           android:layout_width="95dp"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:layout_margin="4dp"
           android:adjustViewBounds="true"
           android:src="@drawable/scade_logo" />

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:layout_marginTop="8dp"
           android:gravity="center"
           android:padding="8dp"
           android:text="Task Management App"
           android:textColor="@color/black"
           android:textSize="20sp"
           android:textStyle="bold" />

   </LinearLayout>

   <LinearLayout
       android:id="@+id/layoutTasks"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_below="@+id/topLayout"
       android:layout_margin="8dp"
       android:orientation="vertical">

       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/recyclerview"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />

   </LinearLayout>

   <com.google.android.material.floatingactionbutton.FloatingActionButton
       android:id="@+id/fab"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentRight="true"
       android:layout_alignParentBottom="true"
       android:layout_gravity="bottom|end"
       android:layout_margin="16dp"
       app:srcCompat="@android:drawable/ic_input_add" />

   <LinearLayout
       android:id="@+id/noTasksPresentLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:orientation="vertical"
       android:visibility="gone">

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:gravity="center"
           android:padding="8dp"
           android:text="No Tasks present. \nAdd a Task!"
           android:textColor="@color/red"
           android:textSize="18sp" />
   </LinearLayout>
</RelativeLayout>

The structure emphasizes a clean and intuitive design, where the RecyclerView is central for visualizing tasks, and user prompts are presented elegantly for adding tasks when the list is empty. Also, We will dynamically add tasks at runtime, and an EditText is employed within an AlertDialog for user input at the click of fab button.

Create RecyclerView Adapter to Display Tasks

The Android RecyclerViewAdapter efficiently connects a list of task models to a RecyclerView. It utilizes a MyViewHolder to define the appearance of each task, with a TextView displaying the task title.

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder> {
   private Context context;
   private List<String> taskModels;
   private final OnTaskItemClickListner taskItemClickListner;

   public RecyclerViewAdapter(Context context, List<String> taskModels, OnTaskItemClickListner taskItemClickListner) {
       this.context = context;
       this.taskModels = taskModels;
       this.taskItemClickListner = taskItemClickListner;
   }

   public interface OnTaskItemClickListner {
       void onTaskItemClick(String taskModel);

       boolean onTaskItemLongClick(String taskModel);
   }

   @NonNull
   @Override
   public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       View itemView = LayoutInflater.from(context).inflate(R.layout.task_item_layout, parent, false);
       return new MyViewHolder(itemView);
   }

   @Override
   public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
       holder.bind(taskModels.get(position), taskItemClickListner);
   }

   @Override
   public int getItemCount() {
       return taskModels.size();
   }

   class MyViewHolder extends RecyclerView.ViewHolder {
       TextView titleTV;

       public MyViewHolder(@NonNull View itemView) {
           super(itemView);
           titleTV = (TextView) itemView.findViewById(R.id.titleTV);
       }

       public void bind(final String taskModel, final OnTaskItemClickListner taskItemClickListner) {
           titleTV.setText(taskModel);
           itemView.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View view) {
                   taskItemClickListner.onTaskItemClick(taskModel);
               }
           });

           itemView.setOnLongClickListener(new View.OnLongClickListener() {
               @Override
               public boolean onLongClick(View view) {
                   return taskItemClickListner.onTaskItemLongClick(taskModel);
               }
           });
       }
   }
}

The adapter's interface, OnTaskItemClickListner, facilitates item click and long-click events. Clicking an item triggers the onTaskItemClick method, while a long-click invokes onTaskItemLongClick. This streamlined adapter ensures the separation of concerns, managing UI-related tasks, and delegating interaction events to the implementing class.

Define Swift Methods in Android’s activity

We will first initialize the Swift runtime in activity by calling SwiftFoundation.Initialize. The first argument is a pointer to the Java context (activity), and the second argument is always set to false. Then it loads the dynamic library "SwiftAndroidExample" containing Swift code using System.loadLibrary.

try {
   // initializing swift runtime.
   // The first argument is a pointer to java context (activity in this case).
   // The second argument should always be false.
   org.swift.swiftfoundation.SwiftFoundation.Initialize(this, false);
} catch (Exception err) {
   android.util.Log.e("SwiftAndroidExample", "Can't initialize swift foundation: " + err.toString());
}

// loading dynamic library containing swift code
System.loadLibrary("SwiftAndroidExample");

Initialize the TaskManager class

The Android declaration introduces the native method initTaskManager(), acting as a bridge between Java and Swift in the Android app. \

private native void initTaskManager();

Its Swift implementation, denoted by MainActivity_initTaskManager, leverages the @_silgen_name attribute for native function linkage. This Swift method, residing in the MainActivity, initializes the Task Manager by creating a JObject wrapper for the Android activity object. It then prepares the associated Swift TaskListViewModel by calling the updateTasksList method, ensuring seamless integration and readiness for adding or deleting tasks within the Android app.

// NOTE: Use @_silgen_name attribute to set native name for a function called from Java
@_silgen_name("Java_com_example_swiftandroidexample_MainActivity_initTaskManager")
public func MainActivity_initTaskManager(
 env: UnsafeMutablePointer<JNIEnv>, activity: JavaObject
) {
  // Create JObject wrapper for activity object
  let mainActivity = JObject(activity)
  let viewModel = TaskListViewModel.viewModel

  viewModel.subscribeToChanges { _ in
    updateTasksList(activity: mainActivity)
  }

  updateTasksList(activity: mainActivity)
}

Native Methods to add/delete a Task

The Android native methods addTask and removeTask, declared in the Java activity, find their Swift implementations through the @_silgen_name attribute, ensuring seamless cross-language integration.

public native void addTask(String taskName);

public native void removeTask(String taskName);

The Swift MainActivity_addTask method receives a task name from Java, converts it to a Swift string, creates a new task, and adds it to the TaskListViewModel. Similarly, MainActivity_removeTask removes the specified task from the viewModel's task list. Both Swift methods conclude by calling updateTasksList to synchronize the changes back to the Android activity, demonstrating a bi-directional flow of task management between Java and Swift in the Android app.

// NOTE: Use @_silgen_name attribute to set native name for a function called from Java
@_silgen_name("Java_com_example_swiftandroidexample_MainActivity_addTask")
public func MainActivity_addTask(
 env: UnsafeMutablePointer<JNIEnv>, activity: JavaObject,
 taskName: JavaString
) {
 // Create JObject wrapper for activity object
 let mainActivity = JObject(activity)

 // Convert the Java string to a Swift string
 let taskTitle = String.fromJavaObject(taskName)

 let viewModel = TaskListViewModel.viewModel

 let task1 = Task(id: viewModel.tasks.count, title: taskTitle)

 viewModel.addTask(task1)
}

// NOTE: Use @_silgen_name attribute to set native name for a function called from Java
@_silgen_name("Java_com_example_swiftandroidexample_MainActivity_removeTask")
public func MainActivity_removeTask(
 env: UnsafeMutablePointer<JNIEnv>, activity: JavaObject,
 taskName: JavaString
) {
 // Create JObject wrapper for activity object
 let mainActivity = JObject(activity)

 // Convert the Java string to a Swift string
 let taskTitle = String.fromJavaObject(taskName)

 let viewModel = TaskListViewModel.viewModel

 for task in viewModel.tasks {
   if task.title == taskTitle {
     viewModel.removeTask(task)
   }
 }
}

Display current Tasks in RecyclerView

In the Swift code, the updateTasksList method orchestrates the synchronization of task data between Swift and Java in the Android app. By accessing the TaskListViewModel, it retrieves the result string representing the current tasks. This string is then passed to the Java activity through the activity.call method, invoking the printTasks method in Java.

public func updateTasksList(activity: JObject) {
  let viewModel = TaskListViewModel.viewModel
  let tasksList = viewModel.getTasksResultString()
  activity.call(method: "printTasks", tasksList)
}

The corresponding printTasks method in Java receives the task result string. If the string is empty, it adjusts the visibility of UI elements to prompt the user to add tasks. Otherwise, it parses the tasks from the string, configures a RecyclerViewAdapter with a click listener for removing tasks, and dynamically updates the RecyclerView to display the tasks in the Android activity. This seamless interaction exemplifies the bidirectional communication between Swift and Java for effective task management in cross-platform applications.

    public void printTasks(String[] taskResultString) {
        if (taskResultString.length == 0) {
            // show add tasks
            findViewById(R.id.noTasksPresentLayout).setVisibility(View.VISIBLE);
            findViewById(R.id.layoutTasks).setVisibility(View.GONE);
            return;
        }
        findViewById(R.id.noTasksPresentLayout).setVisibility(View.GONE);
        findViewById(R.id.layoutTasks).setVisibility(View.VISIBLE);
        List<String> tasks = getTasksFromString(taskResultString);
        RecyclerViewAdapter recyclerViewAdapter = new RecyclerViewAdapter(MainActivity.this, tasks, new RecyclerViewAdapter.OnTaskItemClickListner() {
            @Override
            public void onTaskItemClick(String taskModel) {
                showDialogToRemoveTask(taskModel);
            }

            @Override
            public boolean onTaskItemLongClick(String taskModel) {
                return false;
            }
        });
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(MainActivity.this);
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setAdapter(recyclerViewAdapter);
    }

Implement Dialog to Remove Tasks

The showDialogToRemoveTask method in Android presents an AlertDialog to confirm the removal of a task. The dialog displays the task name in the title, providing clarity to the user. The positive button, labeled "Delete," triggers the removeTask method if clicked, initiating the removal process. On the negative button, labeled "Cancel," the dialog is dismissed, offering users the option to reconsider. This interactive and user-friendly dialog, coupled with Swift's implementation of the removeTask method, ensures a seamless and intuitive task removal experience in the cross-platform application.

private void showDialogToRemoveTask(String taskModel) {
   AlertDialog.Builder builder = new AlertDialog.Builder(this);
   builder.setTitle("Remove the task: " + taskModel);

   // Set up the buttons
   builder.setPositiveButton("Delete", new DialogInterface.OnClickListener() {
       @Override
       public void onClick(DialogInterface dialog, int which) {
           removeTask(taskModel);
       }
   });
   builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
       @Override
       public void onClick(DialogInterface dialog, int which) {
           dialog.cancel();
       }
   });

   builder.show();

}

Run & Test the App!

Let's test the app now & check if OpenCombine smoothly updates the task list in the RecyclerView as we add or remove the tasks. Keep an eye on the user interface, and ensure the tasks reflect real-time changes, validating the effectiveness of OpenCombine in seamless cross-platform communication.

Add Task:

Remove Task:

Trying out OpenCombine in Android Studio for our task management app was pretty cool! It brings the power of reactive Swift programming to Android, making cross-platform development a breeze. Give it a shot and if you run into any hiccups, hop into our SCADE’s Discord community – we're always here to help! 🚀

Swift for Android: How to use Swift-Crypto with Android Studio

SCADE for Developers — Tue, 14 Nov 2023 14:27:27 +0000

Introduction

📱👋 Greetings Swift Developer Community! In the ongoing Swift for Android series of articles, We will continue building apps in the Android Studio that use Swift for the Android platform. It is now possible to compile and write the Swift code in Android Studio with SCADE’s Swift toolchain. With SCADE’s Swift toolchain for Android Studio, you can now easily use Swift to develop Android apps. You can easily add Swift packages to your Android Studio projects using the Swift Package Manager (SPM). To make this happen, SCADE has an SPM library “swift-java” that significantly simplifies communication with JVM from Swift. Without using this library, one needs to write a large of interoperability methods using the SilegenName attribute.

In this article, we delve into a compelling case where an Android app not only seamlessly integrates Swift through the Swift Package Manager (SPM) but also leverages Swift-Crypto for advanced security features. We will build a simple Android app to accept the password string and confirm-password string and we will return whether the password matches using the Swift-Crypto library.

Prerequisite

To know more about how to add Swift to an existing Android project, please go through these articles:

Display list of GitHub followers using Github API & Swift PM library - https://medium.com/@SCADE/implement-recyclerview-using-swift-pm-libraries-eacc1efd48af
Using Swift PM libraries in the Android Studio projects - https://medium.com/@SCADE/using-swift-pm-libraries-in-the-android-studio-projects-7cef47c300bf

Source Code: https://github.com/scade-platform/FusionExamples/tree/main/SwiftCryptoAndroidExample

Design the UI

For our secure password validator app, we'll need a user-friendly interface for users to interact with. Here are some UI elements to be created in Activity’s XML:

Text Input Fields: We'll include text fields for users to input their desired password and confirm it.
Validation Result Text View: A TextView to display the validation result, indicating whether the passwords match or not.
Validation Button: A button to trigger the validation of Swift-Crypto’s method.
Material Design Elements: We'll utilize Android’s Material Design components for a clean and modern look.

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_below="@+id/topLayout"
   android:layout_margin="4dp"
   android:gravity="center"
   android:orientation="vertical">

   <com.google.android.material.textfield.TextInputLayout
       android:id="@+id/passwordInputLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginStart="32dp"
       android:layout_marginTop="64dp"
       android:layout_marginEnd="32dp"

       android:hint="Enter the password">

       <com.google.android.material.textfield.TextInputEditText
           android:id="@+id/passwordET"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:inputType="textWebPassword"
           android:textColor="@color/black"
           android:textSize="18sp" />
   </com.google.android.material.textfield.TextInputLayout>

   <com.google.android.material.textfield.TextInputLayout
       android:id="@+id/confirmPasswordLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginStart="32dp"
       android:layout_marginTop="64dp"
       android:layout_marginEnd="32dp"
       android:hint="Confirm password">

       <com.google.android.material.textfield.TextInputEditText
           android:id="@+id/confirmPasswordET"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:inputType="textWebPassword"
           android:textColor="@color/black"
           android:textSize="18sp" />
   </com.google.android.material.textfield.TextInputLayout>

   <com.google.android.material.button.MaterialButton
       android:id="@+id/validatePasswordBtn"
       android:layout_width="200dp"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:layout_marginTop="40dp"
       android:gravity="center"
       android:padding="4dp"
       app:backgroundTint="@color/colorPrimary"
       android:text="Validate Password"
       android:textColor="@color/white" />

   <TextView
       android:id="@+id/validationResultTV"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="left"
       android:layout_marginTop="22dp"
       android:gravity="center"
       android:padding="8dp"
       android:textColor="@color/black"
       android:textSize="16sp"
       android:textStyle="italic" />

</LinearLayout>

The layout will be simple yet effective, allowing users to easily enter their passwords and receive immediate feedback on their validity.

Create Swift Methods in Activity

In order to make the Android app work smoothly and connect the Java part with Swift, we need to set up SwiftFoundation. This setup is crucial as it lets the app run Swift methods and share their results with the Java part of the app through a bridge called JNI. We kickstart this process in the onCreate() method of the app's activity. This way, we establish the connection between Java and Swift, ensuring the app can take advantage of Swift's capabilities and work seamlessly. This connection enhances the app's overall performance and flexibility.

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

try {
// initializing swift runtime.
// The first argument is a pointer to java context (activity in this case).
// The second argument should always be false.
org.swift.swiftfoundation.SwiftFoundation.Initialize(this, false);
} catch (Exception err) {
android.util.Log.e("SwiftAndroidExample", "Can't initialize swift foundation: " + err.toString());
}

// loading dynamic library containing swift code
System.loadLibrary("SwiftAndroidExample");
}

Add Swift Crypto library using SPM

In the Package.swift file, we're setting up the basic rules for our Swift package. We're specifying that we need at least Swift version 5.8 to run our code. We're also adding two important tools, "swift-java" and "swift-crypto," which help us connect Swift and Java and perform secure cryptographic operations.

dependencies: [
   .package(url: "https://github.com/scade-platform/swift-java.git", branch: "main"),
   .package(url: "https://github.com/apple/swift-crypto.git", .branch("main"))
]

With these pieces in place, we're ready to create a dynamic library that makes it easy to use Swift and Java in our Android app.

dependencies: [
       .product(name: "Java", package: "swift-java"),
       .product(name: "Crypto", package: "swift-crypto")
])

Implement Crypto methods in Swifts

Import the modules

We will first import the necessary required modules for implementing Swift-Crypto methods to hash the password. The Crypto package is the most important as it contains the SHA256 class to hash the password. The Java package is basically the compiler of Java objects to Swift equivalent.

import Foundation
import Dispatch
import Java
import Crypto

Implement hashing of password

The hashPassword() function securely hashes a password using Swift Crypto. First, it turns the password into a special type of data object. Then, it combines this password data with a unique piece of information called a "salt." It takes this combined data and applies a mathematical process (SHA-256) to create a unique hash. Finally, it converts this hash into a readable format and returns it. The salt adds an extra layer of security, making it harder for attackers to guess the original password.

// Function to hash a password securely using Swift Crypto
public func hashPassword(_ password: String, salt: Data) throws -> String {
 let passwordData = Data(password.utf8)

 // Concatenate the salt and password
 let saltedPassword = salt + passwordData

 // Hash the salted password using SHA-256
 let hashedPassword = SHA256.hash(data: saltedPassword)

 // Encode the hashed password as base64 for storage
 return Data(hashedPassword).base64EncodedString()
}

Create Salt Key

The function generateRandomSalt() creates a random and unique "salt" – an api key or equivalent. It generates 16 random numbers (bytes) and forms them into a unique data structure. The randomness comes from a secure source called the SystemRandomNumberGenerator. This salt is crucial for making it harder for attackers to crack passwords because it's different for each user, even if they have the same password. It adds an extra layer of protection by ensuring that the hashed password will be unique for each user.

// Function to generate a random salt
public func generateRandomSalt() -> Data {
 var randomBytes = [UInt8](repeating: 0, count: 16)
 var generator = SystemRandomNumberGenerator()
 randomBytes.withUnsafeMutableBufferPointer { buffer in
   for i in buffer.indices {
     buffer[i] = generator.next()
   }
 }
 return Data(randomBytes)
}

Implement Verify Password Method

The verifyPassword() function checks if a password matches a previously hashed value securely. It starts by decoding the stored hashed password from its base64 format. Then, it prepares the provided password and combines it with the original salt. It also applies the same SHA-256 process used during hashing to create a new hash for the provided password.

Finally, it compares this new hash to the stored one. If they match, the function returns 'true,' indicating that the password is correct; if not, it returns 'false,' indicating the password is incorrect.

// Function to verify a password against a hashed value
public func verifyPassword(_ password: String, against hashedPassword: String, salt: Data) throws
 -> Bool
{
 // Decode the stored hashed password from base64
 guard let storedHashedPasswordData = Data(base64Encoded: hashedPassword) else {
   return false
 }

 let passwordData = Data(password.utf8)

 // Concatenate the salt and provided password
 let saltedPassword = salt + passwordData

 // Hash the salted password using SHA-256
 let computedHashedPassword = SHA256.hash(data: saltedPassword)

 // Verify if the computed hash matches the stored hash
 return computedHashedPassword == storedHashedPasswordData
}

Call Swift Methods from Android’s Activity

The method validatePassword() is declared in MainActivity and implemented later in the Swift file. It is required to carry out the specialized password validation or security-related functions in the Swift section of the Android application. This arrangement facilitates the seamless cooperation of Java and Swift, enabling Java to trigger Swift code for specific tasks and functions.

private native void validatePassword(String passwordString,
                                    String confirmPasswordString);

As the next step, we will call the validatePassword() function on the click of Validate Password button and pass the password string and confirm-password string. It will internally call the Swift implementation of the method validatePassword.

validateButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       String passwordString = passwordET.getText().toString().trim();
       String confirmPasswordString = confirmPasswordET.getText().toString().trim();
       if (TextUtils.isEmpty(passwordString) || TextUtils.isEmpty(confirmPasswordString)) {
           Toast.makeText(getApplicationContext(), "One or more fields are empty!", Toast.LENGTH_SHORT).show();
           return;
       }
       // starting validation of password
       validatePassword(passwordString, confirmPasswordString);
   }
});

Implementation of method in Swift

In the Swift implementation of validatePassword() method, an important linkage between Java and Swift is established. Using the @_silgen_name attribute, the Swift function "MainActivity_validatePassword" is given a specific native name that Java can recognize when calling this function. It takes several parameters, including a reference to the Java environment ("env"), the Java activity object ("activity"), and two Java strings, "passwordString" and "confirmPasswordString."

It uses the Swift representation of the activity object using JObject. It then converts the Java strings into Swift strings, making the data compatible for processing within Swift.

Finally, it initiates the password validation process by calling the validatePassword() swift function, utilizing the converted data.

// NOTE: Use @_silgen_name attribute to set native name for a function called from Java
@_silgen_name("Java_com_example_swiftandroidexample_MainActivity_validatePassword")
public func MainActivity_validatePassword(
 env: UnsafeMutablePointer<JNIEnv>, activity: JavaObject, passwordString: JavaString,
 confirmPasswordString: JavaString
) {
 // Create JObject wrapper for activity object
 let mainActivity = JObject(activity)

 // Convert the Java string to a Swift string
 let passwordStr = String.fromJavaObject(passwordString)
 let confirmPasswordStr = String.fromJavaObject(confirmPasswordString)

 // Start the password validation
 validatePassword(activity: mainActivity, passwordStr: passwordStr, confirmPasswordStr: confirmPasswordStr)

}

The Swift method validatePassword() is responsible for both hashing (encrypting) a password and verifying it against the confirm password, subsequently executing a callback within the main activity to relay the validation result. It first generates a random "salt," which adds a layer of security to the password hashing process. The password is then hashed using the hashPassword swift function, incorporating the password and salt.

The hashed password is compared to the confirm-password string for validation using the verifyPassword() function, with the same salt used for both. Based on the result of this comparison, the function calls a Java method using the activity instance. If the passwords match, it calls onPasswordValidated() java method with the successful message string and if they don't match, it sends an unsuccessful message string.

Implementation of function in Java (`onPasswordValidated`)

The Java method onPasswordValidated is invoked from Swift code, and it takes a parameter called validationResult(), which is a string. The method sets the text of this resultant TextView to the value passed in the "validationResult" parameter. Essentially, this method is responsible for displaying the validation result in the app's user interface.

// method is called from swift code, and the result is sent as an input parameter  
public void onPasswordValidated(String validationResult) {  
    validationResultTV.setText(validationResult);  
}

Run the App!

The development phase is complete, and it's time to put the app to the test. We need to ensure that Swift methods can successfully make API calls and return the data to the Activity. Before proceeding, please make sure that you have an emulator or a physical device up and running.

Working with Swift libraries, such as Swift-Crypto, in Android Studio has been a fascinating experience. For those curious about trying out Swift libraries in this environment, you're in for a treat! It's an exciting opportunity to tap into the power of Swift within your Android Studio projects. Give it a try, and you might just find it as cool and rewarding as we did! 😊🎉

Implement RecyclerView using Swift PM libraries

SCADE for Developers — Thu, 28 Sep 2023 07:44:05 +0000

Introduction

Greetings, Swift Community! In our previous article, we delved into Swift PM libraries within Android Studio projects. Today, we will continue our series on developing Android applications by harnessing the power of Swift PM libraries.

As we already know, Android app development has long relied on Java and Kotlin. But for Swift-savvy developers, known for its expressiveness and safety, the allure of using it in Android is strong. Until recently, running Swift on Android posed a challenge. Thankfully, the SCADE toolchain now solves this, bringing Swift to Android.

In this article, we will develop a simple Android application to implement Recyclerview to display a list of Github followers using Github API & Swift PM library.

Github Code: https://github.com/scade-platform/FusionExamples/tree/main/SwiftAndroidGithubApiExample

Setup Android Project with Swift PM library

Let’s start Android Studio, and create a new project, selecting an appropriate template that suits your application needs. In this guide, we'll use the Empty Views Activity template as our project's foundation. Once you've chosen the template, click "Next."

On the second page, set project details like the name (SwiftAndroidExample), and package name (com.example.myapplication), and choose Java as the primary language for the project.

To initialize a new Swift Package Manager (SPM) project within the app/src/main/swift subdirectory, execute the following commands in the terminal:

cd SwiftAndroidExample/app/src/main/swift

swift package init --name SwiftAndroidExample

Add it build.gradle

implementation fileTree(dir: 'lib', include: ['*.jar'])

Add it in build.gradle at end

task buildSwiftProject(type: Exec) {
commandLine '/Applications/Scade.app/Contents/PlugIns/ScadeSDK.plugin/Contents/Resources/Libraries/ScadeSDK/bin/scd',
'spm-archive', '--type', 'android',
'--path', 'src/main/swift',
'--platform', 'android-arm64-v8a',
'--platform', 'android-x86_64',
'--android-ndk', '~/Library/Android/sdk/ndk/25.2.9519653'
}

tasks.whenTaskAdded { task ->
if (task.name == 'assembleDebug' || task.name == 'assembleRelease') {
task.dependsOn buildSwiftProject
}
}

This code creates a special task called "buildSwiftProject" in Gradle. This task uses scd (part of SCADE) to build the Swift project for Android on two different types of devices (ARM64 and x86_64). It needs the Android NDK to do this, and you should make sure to provide the correct NDK location, which might vary depending on the NDK version you have. If you installed SCADE in a custom location, replace /Applications/Scade.app with the actual path on your computer. This path points to where the scd tool is stored within the SCADE IDE application.

Give manifest permission

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myapplication">

<!-- Other manifest entries -->

<!-- Add INTERNET permission to allow network access -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Add ACCESS_NETWORK_STATE permission to check network connectivity -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<!-- Other manifest entries -->
</manifest>

Create Swift Methods in Activity

Now we need to initialize the SwiftFoundation so that it can call the Swift runtime environment and load the JNI library to execute the Swift methods and pass the results from Swift methods to JVM environment using the JNI bridge.

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);

   try {
       // initializing swift runtime.
       // The first argument is a pointer to java context (activity in this case).
       // The second argument should always be false.
       org.swift.swiftfoundation.SwiftFoundation.Initialize(this, false);
   } catch (Exception err) {
       android.util.Log.e("SwiftAndroidExample", "Can't initialize swift foundation: " + err.toString());
   }

   // loading dynamic library containing swift code
   System.loadLibrary("SwiftAndroidExample");
}

As the next step, let’s declare the Swift method in Activity which will be implemented in Swift class. The Android activity will consume the result of Swift method and will use the result to display in activity’s UI.

private native void loadData(String url);

Now let’s call the loadData() method in onCreate() method of Activity. It will call the implementation of the loadData() method in Swift class.

Implement the API Call in Swift class

As soon as loadData() method is called, it will call the Java equivalent native Swift method defined in Swift class. So lets define it using activity class name.

// NOTE: Use @_silgen_name attribute to set native name for a function called from Java
@_silgen_name("Java_com_example_swiftandroidexample_MainActivity_loadData")
public func MainActivity_loadData(env: UnsafeMutablePointer<JNIEnv>, activity: JavaObject, javaUrl: JavaString) {
   // Create JObject wrapper for activity object
   let mainActivity = JObject(activity)

   // Convert the Java string to a Swift string
   let str = String.fromJavaObject(javaUrl)

   // Start the data download asynchronously in the main actor
   Task {
       await downloadData(activity: mainActivity, url: str)
   }
}

In this method, we will create Java object wrapper for the activity instance which will convert the Java string to a Swift string using fromjavaObject method. Finally, we will call an asynchronous network call defined in another method downloadData(). It accepts activity instance and the API base url which was called from onCreate of Activity.

import Foundation
import Dispatch
import Java

// Downloads data from specified URL. Executes callback in main activity after download is finished.
@MainActor
public func downloadData(activity: JObject, url: String) async {

 var request = URLRequest(url: URL(string: url)!,timeoutInterval: Double.infinity)
 request.addValue("application/vnd.github+json", forHTTPHeaderField: "Accept")
 request.addValue("Bearer XXXXXXX", forHTTPHeaderField: "Authorization")
 request.addValue("2022-11-28", forHTTPHeaderField: "X-GitHub-Api-Version")

 request.httpMethod = "GET"

 let task = URLSession.shared.dataTask(with: request) { data, response, error in
   guard let data = data else {
     print(String(describing: error))
      activity.call(method: "onDataLoaded", "Error")
     return
   }

   let dataStr = (String(data: data, encoding: .utf8)!)
   activity.call(method: "onDataLoaded", dataStr)

 }
 task.resume()
}

In downloadData() method we will make network call to Github service to fetch the followers of a github user. We will pass the API authorization token and other request parameters. Using the URLSession class to make network call, it will return the data and response as callback parameters.

As the next step, using the activity instance we will call back the Java method of onDataLoaded and pass the data equivalent string as input parameter.

public void onDataLoaded(String data) {
  // use data result called from Swift class
}

Build UI for Recyclerview

Let’s build the simple UI XML layouts for activity_main.xml to load recyclerview in activity. We will use Relativelayout to display recyclerview and a progress-bar to display till data is loaded into UI.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <LinearLayout
       android:layout_below="@+id/followers"
       android:id="@+id/container"
       android:layout_margin="18dp"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">

       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/recyclerview"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />

   </LinearLayout>

   <ProgressBar
       android:id="@+id/progressBar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true" />
</RelativeLayout>

As the next step, we need to build Ui for the generic recycler item for displaying the list of followers.

It uses LinearLayout to display a card layout containing the image of follower user and the github ID.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_margin="4dp"
   android:layout_height="wrap_content"
   android:orientation="vertical">

   <androidx.cardview.widget.CardView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:elevation="2dp"
       app:cardBackgroundColor="@color/white"
       app:cardCornerRadius="2dp"
       app:cardElevation="2dp">

       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="horizontal">

           <ImageView
               android:id="@+id/imageFollowerIV"
               android:layout_width="140dp"
               android:layout_height="wrap_content"
               android:adjustViewBounds="true"
               android:background="@color/white" />

           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="vertical">

               <TextView
                   android:id="@+id/githubUserNameTV"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:gravity="center"
                   android:padding="4dp"
                   android:textStyle="bold"
                   android:text="Github User Name"
                   android:textColor="@color/black"
                   android:textSize="16sp" />
           </LinearLayout>
       </LinearLayout>
   </androidx.cardview.widget.CardView>
</LinearLayout>

Build Adapter for Recyclerview

The adapter class is very important for loading the Recyclerview. We need to first define the data model class to contain the follower data object. Let’s create GithubFollowerModel that will contain the imageUrl and userName of Github follower user.

public class GithubFollowerModel implements Serializable {
   private String imageUrl;
   private String userName;

   public GithubFollowerModel(String imageUrl, String userName, String userID) {
       this.imageUrl = imageUrl;
       this.userName = userName;
   }

   public String getImageUrl() {
       return imageUrl;
   }

   public void setImageUrl(String imageUrl) {
       this.imageUrl = imageUrl;
   }

   public String getUserName() {
       return userName;
   }

   public void setUserName(String userName) {
       this.userName = userName;
   }
}

As the next step, we will create the ViewHolder class that will inflate the recycler item layout using onCreateViewHolder().

@NonNull
@Override
public GithubFollowerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
   View view =  LayoutInflater.from(context).inflate(R.layout.follower_recycler_item, parent, false);
   return new GithubFollowerViewHolder(view);
}

The ViewHolder instance will be used to display the image and Github userID in onBindViewHolder method. Here, we use Picasso library to load image from image url in Android.

@Override
public void onBindViewHolder(@NonNull GithubFollowerViewHolder holder, int position) {
   GithubFollowerModel currGithubFollower = githubFollowerModels.get(position);
   holder.githubUserNameTV.setText(currGithubFollower.getUserName());
   // load the github profile image of follower
   if(currGithubFollower.getImageUrl() != null) {
       Picasso.get().load(Uri.parse(currGithubFollower.getImageUrl())).into(holder.githubUserImageIV);
   }
}

Finally Call the Adapter in `onDataLoaded` method

We will need to call the ReyclerView adapter on the main thread and attach the adapter to the Recyclerview ui element.

// access recyclerview on main thread instance
Handler mainHandler = new Handler(getMainLooper());
Runnable myRunnable = new Runnable() {
   @Override
   public void run() {
       followersHeadingTV.setText("Followers: ("+githubFollowerModels.size()+")");
       if (githubFollowerModels.size() == 0) {
           progressBar.setVisibility(View.GONE);
           noFollowersTV.setVisibility(View.VISIBLE);
       } else {
           LinearLayoutManager linearLayoutManager = new LinearLayoutManager(MainActivity.this);
           recyclerView.setLayoutManager(linearLayoutManager);
           GithubFollowerRecyclerAdapter githubFollowerRecyclerAdapter = new GithubFollowerRecyclerAdapter(MainActivity.this, githubFollowerModels);
           recyclerView.setAdapter(githubFollowerRecyclerAdapter);
           progressBar.setVisibility(View.GONE);
       }
   }
};
mainHandler.post(myRunnable);

In this method we are using the main thread operation to declare the ReycyclerView adapter instance and set it to the recyclerview. Also, progress bar is used to display till data is loaded and displayed into the UI.

Now Run and Test the App

We have completed our development and it is now time to run the app and check if Swift method is able to make API calls and send the data back to Activity. Please make sure the emulator or physical device is running. Click on the Run button.

It was really interesting to create a Recyclerview Swift app in Android for Swift Developers who want to try Swift on Android Studio 🎉. It is really cool. You can now easily integrate the Swift runtime into your Android Studio application projects 😊.

Collection View in Cross-Platform Swift Apps

SCADE for Developers — Fri, 19 May 2023 08:37:01 +0000

Introduction

📱🔍🔍 As mobile apps become increasingly popular and versatile, developers are tasked with creating dynamic user interfaces that can adjust to various screen sizes and orientations. One way to achieve this is through the use of collection views, which allow for the creation of a grid-like layout that can display UI elements with variable rows and columns.

🎨🤩 Collection views offer an incredible degree of flexibility and customization, allowing developers to create beautiful and functional user interfaces that stand out from the crowd. By adjusting the size, spacing, and content of each cell, you can create unique layouts that are tailored to the needs of your app and its users. Whether you want to display a collection of products, a gallery of photos, or a list of articles, collection views provide an intuitive and engaging way to present your content. Plus, with built-in support for animations, scrolling, and user interactions, collection views offer a seamless and immersive experience that keeps users coming back for more.

So, let's get ready to take your app's user interface to the next level with the power of collection views! 🚀🙌

IMPORTANT Announcement📢

The latest version of Nimble & SCADE editor has the following features:

Swift 5.8 support: We can use all newly Swift 5.8 released features like the lazy keyword inside result builders, Collection downcasts in cast patterns, and concise magic file names are also now supported, etc. For more on Swift 5.8 features, please refer here.
Custom LSP: We can now easily define the custom Language Server Protocol in Swift & Python in the Nimble editor. In this article, we will discuss in detail how to integrate the custom LSP.
Collection View UI Widget: We can now create dynamic UI views with the variable number of rows and columns in the new release of the SCADE editor. In this article, we will build a SCADE example application to demonstrate the same.

Prerequisite

If you haven’t installed the SCADE IDE, download the SCADE IDE and install it on your macOS system. The only prerequisite for SCADE is the Swift language (at least basics). Also, please ensure the Android emulator or physical device is running if you want to run SCADE apps on an Android device.

Please install the latest version of Nimble editor if you want to try out the custom LSP support in Swift/Python, here.

Source Code

Configuration for Custom LSP

Assuming, you have the Nimble IDE installed and running. Navigate to the (Nimble → Settings… → Settings). You will be able to see the Settings where you can set the configurations for the Custom LSP. To create an external server, you will have to pass the following parameters:

languages: This parameter refers to the list of languages supported by the custom Language Server Protocol (LSP) implementation. It is a mandatory parameter, and it typically specifies the programming or markup languages for which the LSP will provide language support and features.
executable: The executable parameter is also mandatory and represents the path to the installed executable server. It is the actual server program that will handle the LSP communications and provide language-specific features and functionality.
arguments: This optional parameter allows you to provide additional arguments or options that should be passed to the server executable when it is launched. These arguments can be used to customize the behavior of the server or enable specific features.
environment: The environment parameter is an optional dictionary of environment variables and their corresponding key-value pairs. You can define environment variables specific to the server process using this parameter. These variables can influence the behavior of the server or provide configuration settings.
initializationOptions: This optional parameter allows you to pass a list of values to the server during the initialization phase. These values should align with the specifications of the Language Server Protocol. The initializationOptions parameter enables you to provide any additional information or configuration required by the server during its initialization process., for more details, please, refer to the documentation of the Language Server Protocol

By configuring these parameters, you can set up and customize your custom LSP implementation to support specific languages, utilize the appropriate server executable, provide additional arguments, define environment variables, and pass initialization options as needed.

Adding original LSP server for Swift (shipped together with Xcode)

1. Open the Settings file. You should be able to find the settings by clicking on (Nimble → Settings… → Settings).
2. Edit editor.lsp.servers configuration:

editor.lsp.servers:  
- languages: ["swift"]  
  executable: "/usr/bin/sourcekit-lsp"

3. Restart the Nimble IDE.

This would add and register the system SourceKit LSP server for the Swift language.

Adding original LSP server for Python

To add the configuration for LSP Python server, follow the below steps:

1. Install the Python LSP server using pip (for more details please refer to the pip help) from Terminal:

pip install python-lsp-server
or, 
pip3 install python-lsp-server

2. Check the path of the LSP server in your system after installation

which pylsp

3. Open “Settings“ (Nimble → Settings… → Settings)
4. Add an entry to the editor.lsp.servers setting as presented in the following code snippet:

editor.lsp.servers: 
  - languages: ["python"]
    executable: "/usr/local/bin/pylsp" # Add a path to on your system

5. Restart Nimble IDE.

If you want to check if the configuration is working as expected or not, you can create a .py file and try autocompletion & diagnostics which is inbuilt in Nimble editor.

Collection View SCADE App

As you are already aware that the latest version of SCADE now supports the Collection View and you can create it with ease for the dynamic number of UI items with the variable number of rows and columns. Let’s create the SCADE application in Swift to demonstrate the Collection View, compatible with both Android & iOS platforms.

Design the App

Let’s first create the UI of the application. In main.page file, add the following UI widgets by drag-drop to the editor.

Horizontal/Vertical Collection: The parent UI widget will be the Horizontal Collection or Vertical Collection, which you will be able to see in the latest version of the SCADE editor. Drag and drop any one of these two widgets which will act as the container to hold the Template by default.

In Horizontal CollectionView, the items are arranged by the number of rows defined in main.page.swift, and the columns are adjusted by the size of the items.

Similarly for Vertical CollectionView, the items are arranged by the number of columns defined in main.page.swift, and it calculates the number of rows by default to wrap all the items.
Image: Add the Image UI widget to the generated template widget of the Horizontal/Vertical Collection view which will display the image from assets.

Add the ScadeExtensions package dependency

As the next step, navigate to Package.swift and add the ScadeExtensions library via SPM.

// swift-tools-version:5.3

import PackageDescription
import Foundation

let SCADE_SDK = ProcessInfo.processInfo.environment["SCADE_SDK"] ?? ""

let package = Package(
    name: "CollectionView3",
    platforms: [
        .macOS(.v11)
    ],
    products: [
        .library(
            name: "CollectionView3",
            type: .static,
            targets: [
                "CollectionView3"
            ]
        )
    ],
    dependencies: [
      .package(name: "ScadeExtensions", url: "https://github.com/scade-platform/ScadeExtensions", .branch("main")),
    ],
    targets: [
        .target(
            name: "CollectionView3",
            dependencies: ["ScadeExtensions"],
            exclude: ["main.page"],
            swiftSettings: [
                .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
                .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
            ]
        )
    ]
)

The ScadeExtensions repository contains several utility functions to create better UI widgets. You can refer here for the details about CollectionView UI.

Let’s code the `main.page.swift`

Navigate to the main.page.swift and import the below-required packages.

import ScadeKit
import ScadeUI
import ScadeExtensions

Add a few images to the assets and rename them properly, eg. with numeric namings which will be easy to assign values programmatically.

Then, declare the Collection view widget by name defined in the main.page and assign rows and columns.

    if let cv = self.collectionView as? SCDWidgetsCollectionView {
      cv.elementProvider { (text: String, element) in
        element["image", as: SCDWidgetsImage.self]?.url = "Assets/\(text)"
      }

      cv.rows = 6
      cv.items = [
        "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg",
        "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg",
        "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg",
        "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg",
      ]
    }

After defining the CollectionView widget, inside the same block we need to define the element provides as the type of SCDWidgetsImage and pass the image URL to it. Then we can define the rows and columns. Please note that if we define only rows, then it will by default adjust the number of columns to wrap the content.

That’s it, a few lines of code is sufficient enough to code dynamically UI views. Let’s now run the application and test it on Android and iOS platforms.

Run the App on iOS/Android

In order to run the app on iOS/Android devices, please ensure the physical devices or simulator/emulator are up and running. SCADE apps can be run on SCADE emulators, iOS & Android devices as well as Apple and Android emulators.

You can also build the app for Android (APK/AAB) or iOS (IPA) to publish them to the respective app stores. You need to click on the App Name button and choose the device target accordingly.

iOS

Android

It was really interesting to create a cross-platform Swift app for iOS and Android to implement CollectionView 🎉. It is really cool. You can now easily integrate the CollectionView into your application projects 😊.

Cache Implementation in Cross-Platform Swift Apps

SCADE for Developers — Fri, 21 Apr 2023 14:20:55 +0000

Introduction

Have you ever used a mobile app that remembered your login information or preferences, even after you closed the app? This is thanks to the magic of SharedPreferences in Android and UserDefaults in iOS.

👀 In this article, we'll explore how these two features work to store and retrieve key-value data in a cross-platform Swift app. 🔍 We'll start with an overview of what SharedPreferences and UserDefaults are and how they differ from each other. 💡 Then, we'll dive into some examples of how to use them in your Android and iOS apps and show you how to make your app's data persistent even when the user closes the app.

Whether you're a seasoned mobile developer or just getting started with cross-platform development, understanding how to use SharedPreferences and UserDefaults is an essential skill. So, let's get started and explore how these features can make your app more user-friendly and efficient! 🙌

SharedPreference & UserDefaults

First, let's talk about SharedPreferences, which is a lightweight and efficient way to store key-value pairs in Android. To use SharedPreferences in a cross-platform Swift app, you can use a library such as SwiftyUserDefaults or UserDefaultsWrapper. These libraries provide a convenient and type-safe way to access SharedPreferences in Swift, using syntax similar to that of UserDefaults in iOS.

Speaking of UserDefaults, this is a built-in mechanism in iOS that allows apps to store and retrieve user preferences and other small amounts of data. To use UserDefaults in a cross-platform Swift app, you can create a wrapper class that abstracts away the platform-specific details and provides a unified API for accessing user defaults.

Prerequisite

If you haven’t installed the SCADE IDE, download the SCADE IDE and install it on your macOS system. The only prerequisite for SCADE is the Swift language (at least basics). Also, please ensure the Android emulator or physical device is running if you want to run SCADE apps on an Android device.

We will try to implement saving the key-value pairs in Cache for both Android & iOS specific environments. One of the common uses of persistence is saving the login result after successful login. We will build a simple login screen and try to save the result if the authentication is successful.

Source Code

Design a SCADE Page

Let’s quickly design a screen with input fields User’s name & email. There will be a button to save the key-value pairs. Similarly, there will be other two labels and a button to fetch the key-value pairs stored in Cache.

Code for iOS

For the iOS platform, we will use UserDefaults in the Foundation package to store key-value pairs. UserDefaults is a built-in tool in iOS that provides a simple way to store small amounts of data persistently between app launches. It is commonly used to store user preferences, settings, or small pieces of data.

You can access the UserDefaults object anywhere in your SCADE IDE. To get started, you should create an instance of UserDefaults.

Let’s save the current name and email string text to some variables.

    var currEmailText = ""
    var currNameText = ""

    self.email_tb.onTextChange.append(
      SCDWidgetsTextChangeEventHandler { ev in
        currEmailText = ev!.newValue
      })

    self.name_tb.onTextChange.append(
      SCDWidgetsTextChangeEventHandler { ev in
        currNameText = ev!.newValue
      })

Then, attach the onClick listener to the Save button and call the saveTocache() method which saves the key-value pairs to persistence.

    self.save_btn.onClick { _ in
      print("Email: \(currEmailText) Name: \(currNameText)")
      if currEmailText.isEmpty || currEmailText.isEmpty {
        print("Name or Email is empty")
        return
      }
      self.saveToCache(email: currEmailText, name: currNameText)
    }

As per the code snippet, it uses UserDefaults to save the persistence. Here, the keys are “email” and “name” which stores the values.

  func saveToCache(email: String, name: String) {
    #if os(iOS)
      UserDefaults.standard.set(email, forKey: "email")
      UserDefaults.standard.set(name, forKey: "name")
    #endif
  }

Now let’s fetch the Key-Value pairs

Now we will fetch the values for the keys stored in the Cache. Let’s write generic methods to get the values for the keys as Integer, String, and boolean values. It will use the same UserDefaults.standard.* property to get the values.

 func retrieveIntegerFromCache(key: String) -> Int {
    #if os(iOS)
      return UserDefaults.standard.integer(forKey: key) ?? 0
    #endif
    return 0
  }

  func retrieveStringFromCache(key: String) -> String {
    #if os(iOS)
      return UserDefaults.standard.string(forKey: key) ?? ""
    #endif
    return ""
  }

  func retrieveBoolFromCache(key: String) -> Bool {
    #if os(iOS)
      return UserDefaults.standard.bool(forKey: key) ?? false
    #endif
    return false
  }

Code for Android

We will now add the Android code in Swift to implement SharedPreferences. You can refer here for details about how the Android SDK SharedPreferences classes are mapped to the Swift equivalent.

Now let’s add the Android Swift library to the Package.swift.

// swift-tools-version:5.3

import Foundation
import PackageDescription

let SCADE_SDK = ProcessInfo.processInfo.environment["SCADE_SDK"] ?? ""

let package = Package(
  name: "ScadeProject",
  platforms: [
    .macOS(.v10_14)
  ],
  products: [
    .library(
      name: "ScadeProject",
      type: .static,
      targets: [
        "ScadeProject"
      ]
    )
  ],
  dependencies: [
    .package(
      name: "ScadeExtensions", url: "https://github.com/scade-platform/ScadeExtensions",
      .branch("main")),
    .package(
      name: "Android", url: "https://github.com/scade-platform/swift-android.git",
      .branch("android/24")),
  ],
  targets: [
    .target(
      name: "ScadeProject",
      dependencies: [
        .product(name: "Android", package: "Android", condition: .when(platforms: [.android])),
        .product(name: "AndroidOS", package: "Android", condition: .when(platforms: [.android])),
        .product(name: "AndroidApp", package: "Android", condition: .when(platforms: [.android])),
        .product(
          name: "AndroidContent", package: "Android", condition: .when(platforms: [.android])),
      ],
      exclude: ["main.page"],
      swiftSettings: [
        .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
        .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
      ]
    )
  ]
)

As the next step, import the Android packages and use the SharedPreferences methods to save/retrieve the key-value pairs.

#if os(Android)
  import Android
  import AndroidContent
  import AndroidApp
  import AndroidOS
  import Foundation
  import Java
#endif

We will now use the SharedPreferencesEditor which will be used to update/fetch the key-value pairs from the SharedPreferences.

  #if os(Android)
    private var currentActivity: Activity? { Application.currentActivity }
    var delegate: SharedPreferences?
    var delegateEditor: AndroidContent.SharedPreferencesEditor?
  #endif

Then, initialize the variables delegate and delegateEditor using the activity instance. Here, we will use the mode as 0(MODE_PRIVATE) to allow both read and write operations privately by application with the keyword-defined “SCADE” instance.

    #if os(Android)
      delegate = Application.currentActivity?.getSharedPreferences(name: "SCADE", mode: 0)
      delegateEditor = delegate?.edit()
    #endif

Let’s write separate methods for saving and fetching the values using the delegateEditor instance.

Saving the Key-Value pairs

    public func putInt(value: Int32, key: String) {
        let val32:Int32 = value
        delegateEditor!.putInt(key: key, value: val32)
        delegateEditor!.commit()
    }

    public func putBoolean(value: Bool, key: String) {
        delegateEditor!.putBoolean(key: key, value: value)
        delegateEditor!.commit()
    }

    public func putString(value: String, key: String) {
        delegateEditor!.putString(key: key, value: value)
        delegateEditor!.commit()
    }

    public func putFloat(value: Float, key: String) {
        delegateEditor!.putFloat(key: key, value: value)
        delegateEditor!.commit()
    }

Fetching the Key-Value pairs

    public func getInt(key: String) -> Int32 {
        let intValue:Int32 = (delegate?.getInt(key: key, defValue: 0)) ?? 0
        return intValue
    }

    public func getString(key: String) -> String {
        let strValue:String = delegate?.getString(key: key, defValue: "DEFAULT_VALUE_STRING")  ?? ""
        return strValue
    }

    public func getBoolean(key: String) -> Bool {
        let boolValue:Bool = delegate?.getBoolean(key: key, defValue: false)  ?? false
        return boolValue
    }

    public func getFloat(key: String) -> Float {
        let floatValue:Float = delegate?.getFloat(key: key, defValue: 0.0)  ?? 0.0
        return floatValue
    }

    public func containsKey(key: String) -> Bool {
        return delegate!.contains(key: key)
    }

Now we will use the above methods wherever required to save and fetch the values for the keys: “email” & “name”. Hence the below method is used to update the values.

  func retrieveStringFromCache(key: String) -> String {
    #if os(iOS)
      return UserDefaults.standard.string(forKey: key) ?? ""
    #endif

    #if os(Android)
      return self.getString(key: key)
    #endif

    return ""
  }

After fetching the values stored in the application’s cache, update the text for name & email labels.

    self.fetch_btn.onClick { _ in
      print(
        "retrieve from cache: \(self.retrieveStringFromCache(key: "email")) \(self.retrieveStringFromCache(key: "name"))"
      )

      self.email_fetch.text = "Email: \(self.retrieveStringFromCache(key: "email"))"
      self.name_fetch.text = "Name: \(self.retrieveStringFromCache(key: "name"))"

    }

Run the App on iOS/Android

You can also build the app for Android (APK/AAB) or iOS (IPA) to publish them to the respective app stores. You need to click on the App Name button and choose the device target accordingly.

iOS

Android

Voila 🎉! It was really interesting to create an iOS or Android app using the SCADE IDE by implementing Cache. It is really cool. We encourage you to implement SharedPreferences with SCADE😊.

Announcement: Swift 5.7 is now compatible with SCADE IDE

SCADE for Developers — Thu, 23 Mar 2023 09:29:42 +0000

Announcement📢

Hi everyone 🙋🏻‍♂️! My name is Vedant, and I have an important announcement to make.

The SCADE IDE now officially supports Swift 5.7 🎉.

In this article, we will discuss what’s new in Swift 5.7 that is supported by the SCADE editor as well. We will discuss the Swift-nio application and try using the async/await feature with the SCADE editor.

What’s new in Swift 5.7 + SCADE 🔥

Concurrency in top-level code: SwiftNIO is compatible with the SCADE IDE. The good thing is SCADE now builds the Swift NIO classes for the Android platform as well.
Async/await much easier to Use: The much-awaited async/await is now compatible with the latest SCADE version. In this article, its usage is explained.
Distributed actor isolation: Introduces the ability for actors to work in a distributed form – to read and write properties or call methods over a network using remote procedure calls (RPC). We can now use the actor keyword in SCADE.

SwiftNIO with SCADE

SwiftNIO is a cross-platform asynchronous event-driven network application framework for the rapid development of maintainable high-performance protocol servers & clients.

As SCADE now supports Swift 5.7 it is very easy to implement protocol clients using async/await functionality. We will implement a TCP protocol connection as an example to demonstrate the functionality of SwiftNIO with the SCADE editor.

To begin, please make sure you have the latest SCADE editor build(greater than v2.0.57) installed. Create a sample SCADE project and set up the iOS and Android platforms simulators to test the application.

Integrate Apple’s swift-nio SDK

You can check Apple's swift-nio SDK here. It is open-source and you can easily add it to the project using SPM in Package.swift.

// swift-tools-version:5.7

import PackageDescription
import Foundation

let SCADE_SDK = ProcessInfo.processInfo.environment["SCADE_SDK"] ?? ""

let package = Package(
    name: "UgSwiftNioExample",
    platforms: [
        .macOS(.v10_14)
    ],
    products: [
        .library(
            name: "UgSwiftNioExample",
            type: .static,
            targets: [
                "UgSwiftNioExample"
            ]
        )
    ],
    dependencies: [
        .package(url: "https://github.com/apple/swift-nio.git", from: "2.46.0")
    ],
    targets: [
        .target(
            name: "UgSwiftNioExample",
            dependencies: [
                .product(name: "NIO", package: "swift-nio")
            ],
            exclude: ["main.page"],
            swiftSettings: [
                .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
                .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
            ]
        )
    ]
)

Create a TCP Client & Handler class

Now we will create two classes TCPClient & TCPClientHandler. These classes use the NIO framework to establish the TCP connection. Let’s import the required packages.

import Foundation
import NIO
import ScadeKit

The TCPClient class will take the host and port as the input endpoints to make a connection request.

As the next step, the ClientBootstrap instance is used so that a Channel is created & initialized. It will accept the TCPClientHandler instance.

class TCPClient {
  private let group = MultiThreadedEventLoopGroup(numberOfThreads: 10)
  private var host: String
  private var port: Int
  private var channel: Channel?
  private var dataHandler: (String) -> Void

  init(host: String, port: Int, dataHandler: @escaping (String) -> Void) {
    self.host = host
    self.port = port
    self.dataHandler = dataHandler
  }

  func start() async throws -> Bool {
    do {
      let bootstrap = ClientBootstrap(group: group)
        .channelOption(ChannelOptions.socket(SocketOptionLevel(SOL_SOCKET), SO_REUSEADDR), value: 1)
        .channelInitializer { channel in
          channel.pipeline.addHandler(TCPClientHandler(client: self))
        }

      channel = try await bootstrap.connect(host: host, port: port).wait()
      return true
    } catch let error {
      print(error)
      return false
    }
  }

  func callDataHandler(data: String) -> String {
    dataHandler(data)
    return data
  }

}

TCPClientHandler contains the lifecycle methods for receiving the data packets.

channelActive: invoked as soon the channel is initialized. Then it establishes the HTTP connection in the given context of the current channel.
channelRead: Once data gets available, the current channel reads the data in bytes. In this method, we can preprocess the data or append it to the final data string.
channelInactive: After all data is consumed, the existing channel instance gets closed. In this method, the TCPClient instance receives the final fetched data string.
errorCaught: During the entire TCP connection, if there is some sort of error occurred, this method gets called and terminates the TCP connection.

public class TCPClientHandler: ChannelInboundHandler {
  public typealias InboundIn = ByteBuffer
  public typealias OutboundOut = ByteBuffer
  private var client: TCPClient
  private var allData: String = ""

  init(client: TCPClient) {
    self.client = client
  }

  // channel is connected, send http request
  public func channelActive(context: ChannelHandlerContext) {
    let message = "GET / HTTP/1.0\r\n\r\n"
    var buffer = context.channel.allocator.buffer(capacity: message.utf8.count)
    buffer.writeString(message)
    context.writeAndFlush(wrapOutboundOut(buffer), promise: nil)
  }

  // channel data available, read data
  public func channelRead(context: ChannelHandlerContext, data: NIOAny) {
    var buffer = unwrapInboundIn(data)
    let readableBytes = buffer.readableBytes
    if let received = buffer.readString(length: readableBytes) {
      allData += received
    }
  }

  // channel closed, invoking data handler
  public func channelInactive(context: ChannelHandlerContext) {
    client.callDataHandler(data: allData)

  }

  public func errorCaught(context: ChannelHandlerContext, error: Error) {
    print("error: \(error.localizedDescription)")
    context.close(promise: nil)
  }
}

Design some UI for SCADE App

We will create a page design to enter the input fields host & port. With the click of a button, it will display the fetched data on a label.

It is optional and you can also create the page as per your choice of design.

Call the TCPClient Methods in SCADE App

As the first step, let’s fetch the values stored in the Host & Port text fields, and store them in some variables.

    var currHostString: String = ""
    var currPortString: String = ""

    self.host_tb.onTextChange.append(
      SCDWidgetsTextChangeEventHandler { ev in
        currHostString = ev!.newValue
      })

    self.port_tb.onTextChange.append(
      SCDWidgetsTextChangeEventHandler { ev in
        currPortString = ev!.newValue
      })

On the click of the Get Data button, it will initialize the TCPClient instance with the host & port as parameters.

    self.getdata_btn.onClick { _ in
      print("\(currHostString) \(currPortString)")

      if currHostString.isEmpty || currPortString.isEmpty {
        print("Host or Port is Empty")
        return
      }

      self.client = TCPClient(host: currHostString, port: Int(currPortString)!) {
        data in
        print(data)
        let stringData: String = String(data)
        let a = stringData.index(stringData.startIndex, offsetBy: 500)
        let result = stringData.substring(to: a)
        self.response_label.text = result
      }
}

It has a callback function that returns the data. Then as soon as the data is returned, the label displays the data string.

Async/Await usage to start the TCPClient

The final step is now to call the start() method of the TCPClient instance. Since this action is asynchronous in nature, we will use the async/await keyword to make an async call here. The good news is SCADE's latest version is now compatible with the Async/Await usage.

Task {
        let result = try await self.client?.start()
}

Here we used the await keyword to call the start() method of the client as this one is an async network call. The start() function of the client is also marked async as shown below.

func start() async throws -> Bool {
    do {
      let bootstrap = ClientBootstrap(group: group)
        .channelOption(ChannelOptions.socket(SocketOptionLevel(SOL_SOCKET), SO_REUSEADDR), value: 1)
        .channelInitializer { channel in
          channel.pipeline.addHandler(TCPClientHandler(client: self))
        }
 …

`actor` is now supported by SCADE

In Swift, an actor is a new feature introduced in Swift 5.5 that allows for safe and efficient concurrency. Actors are a type of class that provides a way to encapsulate state and behavior while ensuring that only one piece of code can access the actor's mutable state at any given time. Actors in Swift can be thought of as objects that execute in a separate task, allowing multiple tasks to concurrently communicate with and access the actor's state. This concurrency model enables the safe sharing of mutable states between tasks without the need for locks or other synchronization primitives.

To define an actor in Swift, you use the actor keyword before the class keyword, as shown in the example:

actor MyActor {
  // actor implementation
}

SCADE example App using `actor`

Given below is a small example demonstrating the usage of actor keyword in SCADE application. We have created an async method asynCalculation() which uses await keyword to perform the asynchronous operation.

Here we use the MainActor.run() method to run the concurrent operation on the main thread. The MainActor helps to call the UI widgets inside the run() method.

class Calculator {
    private var adapter: MainPageAdapter

    public init(adapter: MainPageAdapter) {
        self.adapter = adapter
    }

    func runCalculation() {
        print("runCalculation BEGIN")
        Task.detached(priority: .background) {
            print("runCalculation BACKGROUND")
            let _ = await self.asyncCalculation()
            print("runCalculation BACKGROUND 1")
            await MainActor.run {
                print("runCalculation SET TEXT")
                self.adapter.label.text = "Async task finished!"
            }
            print("runCalculation BACKGROUND END")
        }

        print("runCalculation END")
    }


    func asyncCalculation() async -> Bool {
        await Task.sleep(3 * 1_000_000_000)
        return true
    }
}

Hence, we are able to use the actor functionality in SCADE editor. Let’s now deploy the application and test it for iOS and Android platforms.

Run the App!

Let’s now first run the app on any iOS simulator and check if it’s working fine or not.

iOS

Android

Voila 🎉! It is very easy to integrate AppleNIO with the async/await & actor keywords into the SCADE app. You can find the full source code of the demo application here. We recommend you to use the SCADE editor for developing cross-platform Swift apps. Thank you for reading and see you in the next article!

FusionPayments: Part I - Integrate Apple Pay SDK

SCADE for Developers — Wed, 08 Feb 2023 06:06:26 +0000

Introduction

Hi everyone 🙋🏻‍♂️! My name is Vedant, and this time we are going to explore another Fusion library, FusionPayments. This is part 1 of the article which explains how to integrate Apple Pay. Apple Pay is a mobile payment and digital wallet service by Apple Inc. that allows users to make payments in person, in iOS apps, and on the web. Integrating Apple Pay into a website or application can provide a seamless and secure payment experience for customers.

In this article, we will discuss how to create a Fusion library for payments, the steps involved in integration, and the requirements for integrating Apple Pay into a website or application. Overall, this article aims to provide a comprehensive guide for developers and businesses looking to integrate Apple Pay into their payment systems, and later on, will integrate Google Pay for Android-specific devices.

Benefits of Cross-Platform(SCADE + Fusion) SDKs

Cost-effective: Cross-platform SDKs allow developers to write code once and use it on multiple platforms, reducing the time and cost of development.
Consistent User Experience: Cross-platform SDKs provide a consistent user experience across different platforms, which enhances the overall user experience and helps to build brand recognition.
Reach a wider audience: By developing SDKs for multiple platforms, a business can reach a wider audience and expand its customer base.
Easier Maintenance: Cross-platform SDKs make it easier to maintain and update the code, as changes can be made in one place and then applied to all platforms. Access to
Native Features: Cross-platform SDKs provide access to native features of different platforms, allowing for enhanced functionality and better performance.
Faster Time-to-Market: Cross-platform development enables businesses to launch their applications faster, as they don't have to develop separate versions for each platform.

Fusion SDK

Recently, the SCADE team has gone open-source with their breakthrough technology called Fusion libraries. Fusion enables us to invoke the Android APIs using the SCADE Fusion SDK. The benefit is that we don’t have to bother about setting up the Android platform-specific stuff in the gradle or anywhere. Even iOS-specific settings are very straightforward and no further prerequisite is required.

SCADE swift codebase acts as the single source of truth in this case, and Fusion SDK makes it possible. Currently, Fusion SDK provides easy integrations for the Geolocation, Bluetooth, NFC, and Media Player, and many more Fusion libraries are in development by the SCADE developers.

Understand FusionPayments Implementation!

You can check the codebase of FusionPayments here. It is open-source and you are most welcome to contribute to the Fusion repository to add more features.

You need to first understand the protocol of FusionPayments. It contains the method initiatePayment which accepts the PaymentRequest object and returns the callback function for PaymentStatus and PaymentSheet view state.

public protocol FusionPaymentsManagerProtocol  {
    init(paymentRequest: PaymentRequest)

    /*
     * @property initiatePayment
     *
     * @discussion request payment(Apple/Google pay)
     *             paymentRequest is passed as input parameter
     *
     * @param paymentRequest: passed as input parameter
     *        paymentStatus: contains the payment result
     *        paymentSheetViewState: contains the current state of the payment-sheet
     *
     */
    func initiatePayment( paymentRequest: PaymentRequest, paymentStatus: @escaping (PaymentStatus, PaymentError?) -> Void, paymentSheetViewState: @escaping (PaymentSheetViewState) -> Void )
}

The iOS part of the FusionPayments uses the PassKit module to implement the Apple Pay feature. The payment view controller presents the payment sheet and accepts the payment request object. \

// Using PassKit methods to intiate the Apple Pay transaction
        if PKPaymentAuthorizationViewController.canMakePayments(usingNetworks: paymentNetworks) {
            let request = PKPaymentRequest()
            request.currencyCode = paymentRequest.currencyCode  // 1
            request.countryCode = paymentRequest.countryCode  // 2
            request.merchantIdentifier = paymentRequest.merchantIdentifier//"merchant.com.vedant.fusionpayments"  // 3
            request.merchantCapabilities = PKMerchantCapability.capability3DS  // 4
            request.supportedNetworks = paymentNetworks  // 5
            request.paymentSummaryItems = [paymentItem]  // 6

            guard let paymentVC = PKPaymentAuthorizationViewController(paymentRequest: request) else {
                print("Unable to present Apple Pay authorization dialog")
                completionHandler?(.FAILED, .AUTHORIZATION_ERROR)
                return
            }
            paymentVC.delegate = self
            self.paymentVC = paymentVC
#if os(iOS)
            UIApplication.shared.delegate?.window??.rootViewController?.present(
                paymentVC, animated: true, completion: nil)
            paymentSheetViewState(.PAYMENT_SHEET_OPENED)
#endif

        } else {
            // displayDefaultAlert(title: "Error", message: "Unable to make Apple Pay transaction.")
            print("Unable to make Apple Pay transaction!")
            completionHandler?(.FAILED, .UNSUPPORTED_PAYMENT_NETWORK)
        }

        completionHandler = paymentStatus
        self.paymentSheetViewState = paymentSheetViewState

Integrate FusionPayments SDK

We will now start the development of the SCADE app by integrating the FusionPayments SDK into our project. Navigate to Package.swift and add the below code snippet.

// swift-tools-version:5.3

import PackageDescription
import Foundation

let SCADE_SDK = ProcessInfo.processInfo.environment["SCADE_SDK"] ?? ""

let package = Package(
    name: "ScadePaymentsApp",
    platforms: [
        .macOS(.v10_14)
    ],
    products: [
        .library(
            name: "ScadePaymentsApp",
            type: .static,
            targets: [
                "ScadePaymentsApp"
            ]
        )
    ],
   dependencies: [
    .package(
      name: "FusionPayments", url: "https://github.com/scade-platform/FusionPayments.git",
      .branch("main")),

  ],
    targets: [
        .target(
            name: "ScadePaymentsApp",
            dependencies: [
                .product(name: "FusionPayments", package: "FusionPayments"),
            ],
            exclude: ["main.page"],
            swiftSettings: [
                .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
                .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
            ]
        )
    ]
)

Call the FusionPayments Methods

We will now start the development of the SCADE app by creating some UI like adding a payment button. As the next step, initialize the fusionPaymentsManager variable at the class level.

import FusionPayments
var paymentManager: FusionPaymentsManager?

Then, declare the supported Payment Networks like Visa, Mastercard, etc which will be used to make the payments, and declare the countries where this payment will be valid.

let pNetworks: [PaymentNetwork] = [PaymentNetwork.amex, .visa, .masterCard]

let countries: Set<String> = ["US", "UK"]

Now we will create a PaymentSummaryItem which will contain the amount to pay and the title for the payment.

let paymentSummaryItem: PaymentSummaryItem = PaymentSummaryItem(
        label: "SomeLabelForShopping", amount: 3.3)

The above-created variables are required to create a final PaymentRequest object which will be passed to paymentManager to initiate the payment.

let paymentRequest: PaymentRequest = PaymentRequest(
        merchantIdentifier: "merchant.com.vedant.fusionpayments", countryCode: "US",
        currencyCode: "USD", supportedNetworks: pNetworks,
        paymentSummaryItem: paymentSummaryItem, supportedCountries: countries)

      self?.paymentManager = FusionPaymentsManager(paymentRequest: paymentRequest)

Finally, we will have to call the intiatePayment method of the paymentManager object.

It will take the paymentRequest as the parameter and will provide a callback function for the payment status and the view state of paymentSheetViewState.

      self?.paymentManager?.initiatePayment(
        paymentRequest: paymentRequest,
        paymentStatus: { (status: PaymentStatus, error: PaymentError?) in
          print(status)
          print(error)

        },
        paymentSheetViewState: {
          viewState in
          print("viewed state")
          print(viewState)
        })

As you can notice from the above snippet, we have printed the status of the payment or the error if payment didn’t go through successfully. Furthermore, it also returns the current state of the payment bottom sheet whether it is visible or hidden.

Run the App!

Let’s now run the app on any iOS simulator and check if it’s working fine or not.

Voila 🎉! It is very easy to integrate FusionPayments SDK into the SCADE app. We are able to make a successful Apple Pay transaction now. You can find the full source code of the demo application here. We recommend you use the FusionPayments SDK in your cross-platform Swift apps if you want to accept payments from the users. Thank you for reading and see you in the next article!

FusionLocation: Cross-Platform Swift Mobile App Development

SCADE for Developers — Wed, 09 Nov 2022 11:25:15 +0000

Introduction

Hi everyone 🙋🏻‍♂️! My name is Vedant, and it is time to build another SCADE app! We all love hybrid tech stack when it comes to building cross-platform mobile apps. And then we start having discussions within the team for the possible tech stack to implement the new app idea. But what if the team is not willing to learn any other language?

SCADE solves this problem for us and makes it super easy to code cross-platform mobile apps using the only language Swift. It’s like developing Android apps using Swift, without coding a single line in Java or Kotlin. In this article, we will explore the map and geolocation apps that use just a few lines of Swift code, to develop using SCADE.

Fusion SDK

Recently, the SCADE team has gone open-source with their breakthrough technology called Fusion libraries. Fusion enables us to invoke the Android APIs using the Scade Fusion SDK. The benefit, is we don’t have to bother about setting up the Android platform-specific stuff in the gradle or anywhere. Even iOS-specific settings are very easy and no further prerequisite is required for the same.

We will now start the development of the FusionLocation app by integrating the Fusion extension in our SCADE project. Navigate to the Package.swift and add the below code snippet.

dependencies: [
        .package(name: "FusionLocation", url: "https://github.com/scade-platform/FusionLocation.git", .branch("main"))
    ],    
targets: [
        .target(
            name: "GeoLocation",
            dependencies: [
                .product(name: "FusionLocation", package: "FusionLocation")
            ],
            exclude: ["main.page"],
            swiftSettings: [
                .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
                .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
            ]
        )
    ]

We also need to provide the location permission in build.yaml for both iOS and Android platforms.

ios:
  ...
  plist:
    ...
    - key: NSLocationAlwaysAndWhenInUseUsageDescription
      type: string
      value: This app just tracks your location to test FusionLocation      
    - key: NSLocationWhenInUseUsageDescription
      type: string
      value: This app just tracks your location to test FusionLocation
    ...

android:
  ...
  permissions: ["ACCESS_FINE_LOCATION"]

Please note that the Google API key can also be passed as the value of the key google-api-key in build.yaml for invoking Google Cloud APIs related to maps and geolocation.

Tracking User Location

FusionLocation has utility methods for performing location updates in the background. We often require background location update operations for various use cases related to mobility and delivery of mobile apps. All we need to do is to initialize the LocationManager instance, authenticate the instance and call the location update method of the LocationManager.

// initialize the LocationManager
let locationManager = LocationManager(usage: .always)

// request authorization
locationManager.requestAuthorization()

// start location tracking
locationManager.startUpdatingLocation { location in
    print("Location Updated.")
    print(location?.coordinate)
}

Get the Distance between two Coordinates

In order to find the distance between two locations, we will call the inbuilt distanceBetween method and will pass the location value for the from and to params.

let mallLocation = Location(latitude: 12.9574292, longitude: 77.6383552)
let parkLocation = Location(latitude: 12.973826, longitude: 77.590591)

let dist = locationManager.distanceBetween(
          from: familyMallLocation, to: cubbon_parkLocation)

print("Distance between Mall and the Park:")
print(String(dist))

We will get the output somewhat like this with real-time updates of the user location coordinates and the distance in meters.

Get Bearing distance

Bearing distance is required in various domains like aircraft navigation or land surveying. Fusion makes it very easy to calculate the bearing distance between two coordinates.

// get bearing between from and to
locationManager.bearingBetween(from: from, to: to)

SCADE Map Integration

SCADE provides MapUIControl to integrate the map widget into our mobile app. Let’s start integrating the map into our existing Fusion SCADE app. Navigate to the main.page and add the below UI widgets.

a.) MapUI Control: Drag the map widget to the page and we will make the map to cover the entire main.page height and width.

b.) RowViewUI Control: We need RowView to contain a set of buttons horizontally laid at the bottom of the page.

c.) 5 UI Buttons: We will now create 5 buttons horizontally in the RowView, namely Airport and Seaport to mark the location in the map, and the other 3 buttons will be used to set the type of map at runtime.

First, we will define a few location coordinates which will be used throughout the app.

let airport_coordinate = SCDPlatformLocationCoordinate(latitude: 28.556160, longitude: 77.100281)

let seaport_coordinate = SCDPlatformLocationCoordinate(latitude: 13.08441, longitude: 80.2899)

In order to navigate to the defined coordinate region on the map, we use the setRegion method of the mapWidget.

func goto(coordinates: SCDPlatformLocationCoordinate) {
        self.mapWidget.setRegion(coordinates, latitudinalMeters: 1000, longitudinalMeters: 1000)
}

It takes the coordinates as the input parameter along with the latitudinalMeters and longitudinalMeters to display the location for the given width and height of the region. We will call this goto method for the above-defined buttons to navigate to the coordinates on the map.

// Goto Airport location
self.btnAirport.onClick.append(
  SCDWidgetsEventHandler { _ in
    self.goto(coordinates: self.airport_coordinate)

})
// goto Seaport location
self.btnSeaport.onClick.append(
    SCDWidgetsEventHandler { _ in
        self.goto(coordinates: self.seaport_coordinate)

})

To show the marker image for the location on the map, we use the map annotations to append the marker image using the SCDWidgetsMapAnnotation class.

func setPinAsAnnotaton(coordinate:   SCDPlatformLocationCoordinate, imagePath: String) {

    let svgImage = SCDSvgImage(width: SCDSvgUnit(value: 55),  height: SCDSvgUnit(value: 55))
    svgImage.xhref = imagePath

    let ann = SCDWidgetsMapAnnotation(location: coordinate)
    ann.drawing = svgImage

    self.mapWidget.annotations.append(ann)
}

We will now call the above utility method and pass the coordinate and image file path as input parameters.

self.setPinAsAnnotaton(coordinate: airport_coordinate,  imagePath: "Assets/mpin.png")

iOS

Android

SCADE map widget provides the feature to change the map type to Standard, Satellite, and Hybrid. SCDWidgetsMapType class has the inbuilt methods for these map types.

func setMapType(_ name: String) {
    switch name {
    case "btnHybrid":
      self.mapWidget.mapType = SCDWidgetsMapType.hybrid
    case "btnSatelite":
      self.mapWidget.mapType = SCDWidgetsMapType.satellite
    case "btnStandard":
      self.mapWidget.mapType = SCDWidgetsMapType.standard
    default:
      print("not covered")
    }
}

We will now set the click listeners to the rest of the buttons to change the map type at runtime.

// satellite mode
self.btnSatelite.onClick.append(
   SCDWidgetsEventHandler { _ in
      self.setMapType("btnSatelite")
})
// Standard mode
self.btnStandard.onClick.append(
   SCDWidgetsEventHandler { _ in
      self.setMapType("btnStandard")
})

// Hybrid mode
self.btnHybrid.onClick.append(
   SCDWidgetsEventHandler { _ in
       self.setMapType("btnHybrid")
})

We are now ready to run the app and test if everything is working as expected. Please save the project otherwise the changes won’t reflect in the app.

iOS

Android

Voila 🎉! It is very easy to integrate SCADE map and Fusion SDK to create an iOS or Android app for all location needs. We don’t have to bother about any native Android/iOS environment setup or anything like that. We call Android APIs directly through Fusion SDK.

It is cool right! You should try FusionLocation in your next app for maps and geolocation 😊.

FusionNFC: Implement NFC for Cross-Platform Swift Mobile Apps

SCADE for Developers — Fri, 21 Oct 2022 15:48:54 +0000

Introduction

Hi everyone 🙋🏻‍♂️! My name is Vedant, and it is time to explore another Fusion library! We use NFC tags for various daily use cases like making payments, sending SMS and virtual business cards, etc. If we want to develop an app for both platforms iOS and Android which will use the NFC feature then it seems almost impossible to use the same codebase at all without bothering about the configuration of each platform. Android and iOS NFC implementations differ a lot in terms of configuration so we will require to take care of individual edge cases.

FusionNFC is part of the Fusion project and provides you with one Swift API for developing NFC applications for both Android and iOS. So It becomes easy to use core NFC features seamlessly without bothering about the edge cases for Android. In this article, we will read and write an NFC tag by building a cross-platform native Swift app using SCADE that uses just a few lines of Swift code✌🏼.

How does FusionNFC work

FusionNFC wraps the NFC-relevant Android NDK APIs and iOS APIs and presents the NFC functionality as one easy-to-use API. FusionNFC is designed so that you don’t have to deal with iOS and Android os specific issues.

RFID & NFC

Radio Frequency Identification (RFID) is the general term for exchanging data using radio frequency, both actively or passively, using a variety of radio frequencies that allow communication across different distances. More specific to mobile apps, NFC stands for Near Field Communication and is a wireless technology that allows the exchange of data between your Android or iOS phone and the RFID device/chip using radio frequencies across short distances, usually centimeters.

Prerequisite

If you haven’t installed the SCADE IDE, download the SCADE IDE and install it on your macOS system. Please make sure that the XCode version is less than or equal to 13.0 and the Swift version is less than or equal to 5.4, otherwise, it will not be able to run on the Android platform.

Please also make sure you have the NFC tags ready with you and an NFC-enabled physical device (either an Android phone or an iPhone).

Integrate FusionNFC Library

SCADE provides users with all the necessary APIs including Swift foundation and objective C libs that are required to integrate the FusionNFC library. Let’s start by creating a new project, File -> New -> New Project. Then select the SCADE option, enter the name of the project, and click Create. We are ready to integrate the Fusion library into the SCADE app.

Now navigate to the Package.swift file and add the FusionNFC git URL as shown in the below SPM dependency:

// swift-tools-version:5.3

import Foundation
import PackageDescription

let SCADE_SDK = ProcessInfo.processInfo.environment["SCADE_SDK"] ?? ""

let package = Package(
  name: "NFCTool",
  platforms: [
    .macOS(.v10_14), .iOS(.v13),
  ],
  products: [
    .library(
      name: "NFCTool",
      type: .static,
      targets: [
        "NFCTool"
      ]
    )
  ],
  dependencies: [
    .package(
      name: "FusionNFC", url: "https://github.com/scade-platform/FusionNFC.git", .branch("main"))
  ],
  targets: [
    .target(
      name: "NFCTool",
      dependencies: [
        .product(name: "FusionNFC", package: "FusionNFC")
      ],
      exclude: ["main.page"],
      swiftSettings: [
        .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
        .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
      ]
    )
  ]
)

Design the App

We need to create a basic container to accommodate pages for reading and writing NFC tags. So navigate to main.page file and drag and drop the following UI widgets.

a.) Toolbar: It will contain the readerButton and writerButton which will navigate to the Reader/Writer page.

b.)** PageContainer**: It will contain the Reader/Writer page content in the fragment area.

Now we will create two pages namely the Reader and Writer page.

Reader Page:

a.) Label1: The urlLabel will be used to display the URL stored in the memory of the NFC tag.

b.) Label2: The descriptionLabel will be used to display the description stored in the memory of the NFC tag.

c.) Button: Upon the click of the readButton, it will read the data in the NFC tag.

Writer Page:

a.) TextBox1: The urlTextBox will be used to edit the URL which will be stored in the memory of the NFC tag.

b.) TextBox2: The descriptionTextBox will be used to edit the description which will be stored in the memory of the NFC tag.

c.) Button : Upon the click of the writeButton, it will write the data to the NFC tag.

Let’s dive into the Code

We have created the layout file above to declare the pages and the widgets that we will use.

Main Page:

We will create the references for the ReaderPageAdapter and WriterPageAdapter so that these pages will be contained in the pageContainer.

  let readerPage: ReaderPageAdapter = ReaderPageAdapter()
  let writerPage: WriterPageAdapter = WriterPageAdapter()
  var pageContainer: SCDLatticePageContainer?

Now let’s include these snippets in the load method of main.page.swift :

    self.readerPage.load("reader.page")
    self.writerPage.load("writer.page")

    self.readerButton.onClick { _ in self.showPage(self.readerPage) }
    self.writerButton.onClick { _ in self.showPage(self.writerPage) }

    // Now,we get a reference to the page container
    self.pageContainer = self.page!.getWidgetByName("pageContainer1") as? SCDLatticePageContainer

    // Finally, we use the page container to show page1 (ReaderPage)
    self.reader.show(view: self.pageContainer)

  func showPage(_ page: SCDLatticePageAdapter) {
    page.show(view: self.pageContainer)
  }

Write NFC Page:

Let’s declare the nfcManager variable and instantiate it to use the core NFC features. On the click of the writeButton we will declare the write() method to write the URL and description to the NFC tags.

  var nfcManager: NFCManager?

Now inside the load() method, we will attach the onClick() listener method to call the write() method. Also, for the Android-specific code, we need to disable the foreground dispatcher for the NFC.

   override func load(_ path: String) {
    super.load(path)
    // initialize the NFCManager
    nfcManager = NFCManager(alertMessage: "Hold your iPhone near an NFC tag.")

    // connect the button action to write func
    self.writeButton.onClick { _ in
      print("clicked write button")
      self.write()
    }

    // Below code is only for Android
    self.page!.onExit.append(
      SCDWidgetsExitEventHandler { _ in
        self.nfcManager?.disableForegroundDispatch()
      })
  }

We will declare the NFCURIRecord and NFCTextRecord variables. Then assign the text values to these variables which will be used to create the NFCMessage object. It accepts the uriRecord and textRecord as input parameters. Finally, we will write this nfcMessage object to the NFC tag using writeTag() method.

 // write func
 func write() {

    // prepare the NFCURIRecord from the URL
    var uriRecord: NFCURIRecord?
    if let url = URL(string: urlTextBox.text) {
      uriRecord = NFCURIRecord(url: url)
    }

    // prepare the NFCTextRecord from the String and Locale
    let textRecord = NFCTextRecord(
      string: descriptionTextBox.text, locale: Locale(identifier: "en"))

    // initialize the NFCMessage with NFCURIRecord and NFCTextRecord
    let nfcMessage = NFCMessage(uriRecord: uriRecord, textRecord: textRecord)

    // initialize the NFCMessage
    nfcManager = NFCManager(alertMessage: "Hold your iPhone near an NFC tag.")

    // write NFC Tag
    nfcManager?.writeTag(nfcMessage)
  }

Read NFC Page:

Similarly to the write NFC page, we will declare the nfcManager variable and instantiate it to use the core NFC features. On the click of the readButton we will declare the read() method to read the URL and description stored in the memory of the NFC tags.

import FusionNFC
var nfcManager: NFCManager?

  override func load(_ path: String) {
        super.load(path)
        // initialize the NFCManager
        nfcManager = NFCManager(alertMessage: "Hold your iPhone near an NFC tag.")

        // connect the button action to read func
        self.readButton.onClick{_ in 
        print("clicked read ubtton")
        self.read()}

        // Below code is only for Android
        self.page!.onExit.append(SCDWidgetsExitEventHandler{_ in
            self.nfcManager?.disableForegroundDispatch()
        })     
    }

Let’s declare the read() NFC function which will internally use the readTag() method by nfcManager. The message object is returned which contains the textRecord and uriRecord and we will display the data using the urlLabel and descriptionLabel.

  // read func
  func read() {
    // read NFC Tag
    nfcManager?.readTag { message in

      // get url and text from NFCMessage
      guard let message = message else { return }
      if let uriRecord = message.uriRecord {
        self.urlLabel.text = "URL: \(uriRecord.url.absoluteString)"
     }

      if let textRecord = message.textRecord {
        self.descriptionLabel.text = "Description: \(textRecord.string)"
      }
    }
  }

Test the write/read feature for NFC tags:

Let’s test the write feature of the SCADE app that we have developed till now. We will either require an Android or iOS device. Navigate to the build.yaml file and add the build settings for each environment. For iOS declare the provisioning profile and the certificate as shown below:

  sign:
    provision-profile: /Users/vj/Desktop/certs/vj.mobileprovision
    certificate: /Users/vj/Desktop/certs/vj.p12

  plist:
    - key: CFBundleShortVersionString
      type: string  # string, bool, int, list or dict
      value: 1.0
    - key: CFBundleVersion
      type: string
      value: 1
    - key: NSLocationWhenInUseUsageDescription
      type: string
      value:
    - key: NSCameraUsageDescription
      type: string
      value: Take pictures from camera
    - key: NSPhotoLibraryUsageDescription
      type: string
      value: Choose a photo from your library
    - key: NFCReaderUsageDescription
      type: string
      value: This app read and write tags
    - key: UIRequiredDeviceCapabilities
      type: list
      value: ["armv7", "nfc"]

For the Android build settings, create one file AndroidManifest.xml, and add the below snippet to the build.yaml under the Android settings.

android:
  name: NFCTool
  id: com.scadefusion.nfc
  version-name: 1.0.0
  version-code: 1
  build-type: Debug
  key-store-properties:
  google-api-key:
  manifest-file: AndroidManifest.xml
  permissions: ["NFC"]

Now navigate to the AndroidManifest.xml file and add the below snippet to declare the NFC permissions and related settings.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.scade.rendersvg"
    android:versionCode="1"
    android:versionName="1.0.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="28" />

    <uses-permission android:name="android.permission.NFC" />

    <uses-feature android:glEsVersion="0x00020000"/>
    <uses-feature android:name="android.hardware.nfc" android:required="true" />

    <application
        android:name="com.scade.phoenix.PhoenixApplication"
        android:allowBackup="false"
        android:icon="@drawable/ic_launcher"
        android:label="RenderSVG"
        android:theme="@android:style/Theme.Black.NoTitleBar">
        <activity
            android:name="com.scade.phoenix.MainActivity"
            android:label="RenderSVG"
            android:windowSoftInputMode="adjustResize|stateHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>


        </activity>

        <receiver android:name="com.FusionNFC_Android.NFCReceiver"/>

        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="AIzaSyAYoreZUQAcxs-Yt18zEAidBSqEuoqnKP4"/>
        <uses-library
            android:name="org.apache.http.legacy"
            android:required="false" />
    </application>

</manifest>

Now we are good to build the .apk or .ipa files and test the build on the Android or iOS system.

Voila 🎉! It was super easy to build an iOS/Android app using the SCADE IDE to read/write NFC tags. Fusion SDK offers a wide variety of libraries that are easy to understand and easy to integrate for various use cases.

It is cool. We encourage you to integrate any Fusion SDKs and try them out yourself 😊.

Source Code: https://github.com/6vedant/FusionNFCTool

Gesture Implementation for Cross Platform native Swift mobile apps

SCADE for Developers — Tue, 04 Oct 2022 02:35:21 +0000

Introduction

Hello everyone 👋

In our continuous series of SCADE articles, today we will be developing a SCADE application that will demonstrate the gesture implementation for both Android/iOS platforms. This app will contain the use case of displaying the touch effect to buttons when pressed. It improves the user experience for the SCADE apps. The good part is, the same codebase is used for both Android & iOS platforms.

Swift + SCADE = Awesome App ✌

So let’s start 😎.

Prerequisite

If you haven’t installed the SCADE IDE, download the SCADE IDE and install it on your macOS system. The only prerequisite for SCADE is the Swift language (at least basics). Also, please ensure the Android emulator or physical device is running if you want to run SCADE apps on an android device.

Getting Started

To keep it simple, let’s understand the concepts by creating a new SCADE project, File -> New -> New Project. Then select the SCADE option, enter the project name, and click Create. We are ready to code the SCADE app.

We will now create the user interface of the application. Now navigate to the folder/sources/main.page and click on the + button on the top right of the editor and drag the widgets such as label, button, etc.

Create Some UI

Let’s start by creating the Pin Code entry panel user interface. It will require a few buttons for the digits 0-9 and a few labels to display the entered digits.

Please choose the desired font family, size & color from the design palette for the labels.

Label 1: We will add the app heading and assign the text (“Please choose your personal 5-digit pincode”)
RowView: A RowView is required to hold the 5 labels, which will actually display the entered 5 digits by the user. It will contain 5 labels, equidistant from each other.
Label 2: Let’s add another label with text(“Please choose a 5-digit pin code”).
GridView: Add a GridView widget that will contain the panel of digits. There will be 3 columns and 4 rows. We will add the buttons from 0-9 and a backspace button as well as equidistant from each other as shown in the above image.

Let’s dive into the Code

We have developed the UI for the application. Let’s now write the logic to fetch the entered pin digits by the user.

We will initialize a variable position to 0 to get the position of the digit entered by the user. Then accordingly, we will store the input digit to the corresponding labels as per the value of the position. If the value of the position exceeds 5, we will initialize all digit labels to zero. The logic of the same is implemented in the below code snippet.

 var position = 0
 func updatePin(val: Int) {
   if val == -1 {
     if position == 1 {
       self.digit_1.text = "*"
       position -= 1
     } else if position == 2 {
       self.digit_2.text = "*"
       position -= 1
     } else if position == 3 {
       self.digit_3.text = "*"
       position -= 1
     } else if position == 4 {
       self.digit_4.text = "*"
       position -= 1
     } else if position == 5 {
       self.digit_5.text = "*"
       position -= 1
     }
   } else {
     position += 1
     if position == 1 {
       self.digit_1.text = String(val)

     } else if position == 2 {
       self.digit_2.text = String(val)

     } else if position == 3 {
       self.digit_3.text = String(val)

     } else if position == 4 {
       self.digit_4.text = String(val)

     } else if position == 5 {
       self.digit_5.text = String(val)
       pinString =
         "\(self.digit_1.text)\(self.digit_2.text)\(self.digit_3.text)\(self.digit_4.text)\(self.digit_5.text)"
       self.callFinalMethod(pin: pinString)
     } else {
       position = 5
       print("Exceeded")
     }
   }
 }

Let’s implement the touch gesture

Let’s implement the touch effect to buttons whenever they are pressed. For this, let us first define the colors which will be visible upon clicking the buttons.

  // colors
  let colorDefaultGreen = SCDGraphicsRGB(red: 211, green: 211, blue: 211, alpha: 255)
  let whiteColor = SCDGraphicsRGB(red: 255, green: 255, blue: 255, alpha: 255)

As the next step, we will now use SCDSvgPanGestureRecognizer instance which will override the method onPanAction(), which provides the interface to implement the gesture handler logic.

 func getUpDownGestureForButton(btn: SCDWidgetsButton, val: Int) -> SCDSvgPanGestureRecognizer {

   // Create action*
   func onPanAction(recognizer: SCDSvgGestureRecognizer?) {

     // depending on whether we are inside or outside of the button,
     // we set the button background a different color
     switch recognizer!.state {
     case .began:
       btn.backgroundColor = self.colorDefaultGreen
       self.updatePin(val: val)
     case .ended:
       btn.backgroundColor = self.whiteColor
     default:
       return
     }
   }

   // create recognizer
   let panGestureRecognizer = SCDSvgPanGestureRecognizer(onPanAction)

   // Configure gesture --> nothing to configure. Return it
   return panGestureRecognizer

 }

SCDSvgGestureRecognizer instance returns the state of the event, for example, it returns two states began and ended. We can implement the logic to add the touch effect here by changing the background colors of the buttons as soon as it changes the state from began to ended.

Finally, let’s append the above method getUpDownGestureForButton to each of the buttons.

// add gesture to button. It changes the background color
// of the button when button is pressed (began) and finger is lifted // up (ended)
    self.b0.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b0, val: 0))
    self.b1.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b1, val: 1))
    self.b2.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b2, val: 2))
    self.b3.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b3, val: 3))
    self.b4.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b4, val: 4))
    self.b5.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b5, val: 5))
    self.b6.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b6, val: 6))
    self.b7.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b7, val: 7))
    self.b8.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b8, val: 8))
    self.b9.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b9, val: 9))
    self.b_cancel.drawing!.gestureRecognizers.append(
      getUpDownGestureForButton(btn: self.b_cancel, val: -1))

The above code snippet implements the gestureRecognizers method which calls the gesture implementation method as parameter.

Run the App on iOS/Android

In order to run the app on iOS/Android devices, please make sure the physical devices or simulator/emulator are up and running. SCADE apps can be run on SCADE emulators, iOS & Android devices as well as Apple and Android emulators.

You can also build the app for Android (APK/AAB) or iOS (IPA) to publish them to the respective app stores. You need to click on the App Name button and choose the device target accordingly.

iOS

Android

Now we are good to test the code on Android devices. Set the target to any Android device you like and test if it is working as expected.

Voila🎊! We have successfully implemented the touch effect to buttons using the gesture feature available in SCADE. This is one of the examples of using a gesture-powered feature by the SCADE editor. You should definitely try the SCADE editor to build some of the cross platforms apps.

We will be releasing a series of articles related to the SCADE & swift-android compiler. Thank you for reading and see you in the next article!

Happy Coding 😊!

Share Content with other Apps: Cross Platform App Development

SCADE for Developers — Tue, 13 Sep 2022 13:08:04 +0000

Introduction

Hello everyone 👋

My name is Vedant, and today’s article is about sharing textual content with other apps using the swift-android compiler. It will work for both Android & iOS mobile platforms. As you already know that sharing content with other apps is a widespread use case and we often want the app users to share some content with the other installed apps on the device. For example, you may want to share some textual content or a link with your friend or colleague on WhatsApp or Slack.

In this article (exclusively for the SCADE community), we will implement the textual content sharing feature that works well for Android and iOS platforms.

So let’s start 😎.

Prerequisite

If you haven’t installed the SCADE IDE, download the SCADE IDE and install it on your macOS system. The only prerequisite for SCADE is the Swift language (at least basics). Also, please ensure the Android emulator or physical device is running if you want to run SCADE apps on an android device.

Getting Started

To keep it simple, let’s understand the concepts by creating a new SCADE project, File -> New -> New Project. Then select the SCADE option, enter the project name, and click Create.

iOS Implementation

For the iOS implementation, we will use UIActivityViewController class and will pass the text string which we want to share to other apps. So let’s create an instance of this class, and then pass the rootView of the SCADE application to the activity view controller instance.

 // set up activity view controller
#if os(iOS)
  let textToShare = [ text ]
  let activityViewController = UIActivityViewController(activityItems: textToShare, applicationActivities: nil)
        activityViewController.popoverPresentationController?.sourceView = self.rootView 

  // present the view controller   
  UIApplication.shared.delegate?.window??.rootViewController?.present(activityViewController, animated:     
  true, completion: nil)
#endif

popoverPresentationController parameter will attach the source view to the SCADE application’s rootView. Finally, we will call the present() method of the current rootViewController of the UIApplication global object. The parameter to be passed in the present() method is basically the instance of the UIActivityViewController class that we have already created.

You can test the above code snippet. Yes, it works 😀! You can target a range of iOS devices and can easily share the textual content with other iOS apps.

Let’s implement it for Android

Before getting started with the implementation of the Sharing of the textual content constants for the Android platform, let us briefly discuss the swift-android compiler. SCADE developers have developed internally the swift compiler for the Android SDK (currently it is supporting API 24). The repository is now open source and anyone can use the existing Swift classes to develop various Android use cases.

https://github.com/scade-platform/swift-android/tree/android/24

We will use the Intent(action: Intent.ACTION_SEND) method with the action intent type of ACTION_SEND parameter by creating an instance of the Intent class.

   /*Create an ACTION_SEND Intent*/
   Intent intent = new Intent(android.content.Intent.ACTION_SEND);

   /*This will be the actual content you wish you share.*/
   String shareBody = "Here is the share content body";

   /*The type of the content is text, obviously.*/
   intent.setType("text/plain");

   /*Applying information Subject and Body.*/
   intent.putExtra(android.content.Intent.EXTRA_SUBJECT, getString(R.string.share_subject));
   intent.putExtra(android.content.Intent.EXTRA_TEXT, shareBody);
   startActivity(Intent.createChooser(intent, getString(R.string.share_using)));

As the next step of native Android implementation, we will set the intent data type to plain text and pass the content’s subject and description using the putExtra() method. Finally, to display a list of apps to choose from, call the startActivity() method and pass the Intent instance.

Swift compiler for Android code

The swift-android repository contains the swift classes which are generated from the Android SDK. We will inject the required classes into our SCADE app and achieve similar functionality accordingly. It uses SPM a lot to inject the necessary dependencies into the SCADE app.

For the Android code snippet above, we require the applicationContext and resources instance to call the necessary methods. We will add the below Android packages into Package.swift.

// swift-tools-version:5.3

import Foundation
import PackageDescription

let SCADE_SDK = ProcessInfo.processInfo.environment["SCADE_SDK"] ?? ""

let package = Package(
  name: "ScadeDemoApp",
  platforms: [
    .macOS(.v10_14)
  ],
  products: [
    .library(
      name: "ScadeDemoApp",
      type: .static,
      targets: [
        "ScadeDemoApp"
      ]
    )
  ],
  dependencies: [
    .package(
      name: "Android", url: "https://github.com/scade-platform/swift-android.git",
      .branch("android/24"))
  ],
  targets: [
    .target(
      name: "ScadeDemoApp",
      dependencies: [
        .product(name: "Android", package: "Android", condition: .when(platforms: [.android])),
        .product(name: "AndroidOS", package: "Android", condition: .when(platforms: [.android])),
        .product(name: "AndroidApp", package: "Android", condition: .when(platforms: [.android])),
        .product(
          name: "AndroidContent", package: "Android", condition: .when(platforms: [.android])),
      ],
      exclude: ["main.page"],
      swiftSettings: [
        .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
        .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
      ]
    )
  ]
)

As the next step, we will now import these packages for the Android in main.page.swift file.

import ScadeKit

#if os(Android)
  import Android
  import AndroidApp
  import AndroidContent
#endif

We are now ready to call the respective swift methods for the given above java methods.

 #if os(Android)
       let intent: Intent = Intent(action: Intent.ACTION_SEND)
       intent.setType(_type: "text/plain")
       intent.putExtra(name: Intent.EXTRA_SUBJECT, value: "The Subject of the Message")
       intent.putExtra(name: Intent.EXTRA_TEXT, value: text)
       Application.currentActivity?.startActivity(intent: intent)
 #endif

Let us understand the above code snippet and what it does basically. Firstly, we create an instance of Intent with the type of ACTION_SEND. We set the content to be plain text.

In order to access the Application’s context, we use the currentActivity instance which returns the context. Using this context, we call startActivity method to launch the implicit intent that we created in the first step.

Now we are good to test the code on Android devices. Set the target to any Android device you like and test if it is working as expected.

Voila🎊! We have successfully implemented the sharing of content with other apps using the swift-android compiler. This is one of the examples of coding cross-platform apps using the SCADE platform. Integrating any Android-specific feature is very easy into the SCADE app using the swift-android library. You should definitely try the swift-android to build some of the useful components to build cross-platform apps.

We will be releasing a series of articles related to the swift-android compiler. Thank you for reading and see you in the next article!

Happy Coding 😊

Create AlertDialog for Cross-Platform Mobile Apps

SCADE for Developers — Tue, 12 Jul 2022 18:32:22 +0000

Introduction

Hello everyone 👋

My name is Vedant, and I love building apps using Swift and Android SDK. In the previous article, we discussed how we can use the swift-android repository to use the Android Swift classes to calculate the SafeArea constants. We will continue exploring other possibilities and will try to build an AlertDialog for both Android & iOS platforms.

In this article (exclusively for SCADE enthusiasts), we will learn how to use Android widgets using the swift-android repository. This approach will give you a basic understanding of how to use the equivalent Swift classes for Java classes.

I am sure it will be fun! So let’s start 😎.

Prerequisite

If you haven’t installed the SCADE IDE, download the SCADE IDE and install it on your macOS system. The only prerequisite for SCADE is the Swift language (at least basics). Also, please make sure the Android emulator or physical device is running if you want to run SCADE apps on an android device.

Source Code

You can directly see the sample example on scade-platform repository.

https://github.com/scadedoc/UgExamples/tree/master/UgModalDialogDemo

Getting Started

This will be similar to creating a new SCADE project, click on File -> New -> New Project. Then select the SCADE option, enter the name of the project and click Create.

It is easy to build the AlertDialog for the iOS platform, we just need to use the same native iOS code to create an alert. For Android, we will integrate the swift-android repository via SPM to Package.swift.

Code for iOS

To calculate for iOS devices, we can use the exact same native swift codebase for creating an AlertDialog with a title and description along with two buttons.

This code will be explicitly written for iOS so we will place the OS checks first. This is required otherwise it will throw an error when run for Android.

import ScadeKit

#if os(iOS)
 import UIKit
#endif

We use the UIAlertController widget to create an AlertDialog and pass the title, and message to it.

let alert = UIAlertController(
       title: "Did you bring your towel?",
       message: "It's recommended you bring your towel before continuing.",
       preferredStyle: .alert)

The preferredStyle parameter is set to .alert so that it will display the Alert format with the title and message.

Then, let’s add a few buttons by using the addAction() method.

alert.addAction(UIAlertAction(title: "Yes", style: .default, handler: { _ in print("yes") }))
alert.addAction(UIAlertAction(title: "No", style: .cancel, handler: { _ in print("no") }))

SCDApplication.rootViewController?.present(alert, animated: true)

It will add two buttons with the default style and handler. Finally, to display the dialog use the present() method of the SCDApplication.rootViewController.

Then, set the target to an iOS emulator and check if the AlertDialog is working fine.

Great! The native iOS code works fine with the SCADE editor. Let’s continue integrating the AlertDialog for Android.

Integrate swift-android via SPM

We can’t use directly Java classes in SCADE editor rather we will need the equivalent Swift classes. We will add the swift-android library via SPM into the Package.swift.

// swift-tools-version:5.3
import PackageDescription
import Foundation

let SCADE_SDK = ProcessInfo.processInfo.environment["SCADE_SDK"] ?? ""

let package = Package(
   name: "UgModalDialogDemo",
   platforms: [
       .macOS(.v10_14)
   ],
   products: [
       .library(
           name: "UgModalDialogDemo",
           type: .static,
           targets: [
               "UgModalDialogDemo"
           ]
       )
   ],
   dependencies: [
     .package(name: "Android", url: "https://github.com/scade-platform/swift-android.git", .branch("android/24"))       
   ],
   targets: [
       .target(
           name: "UgModalDialogDemo",
           dependencies: [
               .product(name: "Android", package: "Android", condition: .when(platforms: [.android])),
               .product(name: "AndroidOS", package: "Android", condition: .when(platforms: [.android])),
               .product(name: "AndroidApp", package: "Android", condition: .when(platforms: [.android])),
               .product(name: "AndroidContent", package: "Android", condition: .when(platforms: [.android])),           
           ],
           exclude: ["main.page"],
           swiftSettings: [
               .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
               .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
           ]
       )
   ]
)

We require AndroidApp module of the swift-android repository. It will require important classes such android.app.AlertDialog.

The code below is the native implementation of the Android code. We use the AlertDialog.Builder class to create a Dialog with a title and message.

new AlertDialog.Builder(context)
   .setTitle("Title")
   .setMessage("Message")

   // Specifying a listener allows you to take an action before dismissing the dialog.
   // The dialog is automatically dismissed when a dialog button is clicked.
   .setPositiveButton(android.R.string.yes, new DialogInterface.OnClickListener() {
       public void onClick(DialogInterface dialog, int which) {}
    })

   // A null listener allows the button to dismiss the dialog and take no further action.
   .setNegativeButton(android.R.string.no, null)
   .setIcon(android.R.drawable.ic_dialog_alert)
   .show();

We now need to convert the above Java code into Swift using the equivalent classes of the swift-android repository.

Swift compiler for Android code

We require the applicationContext and AndroidApp classes to call the necessary methods for the Android code snippet above.

As the next step, we will import these packages for Android in the main.page.swift file.

import ScadeKit

#if os(Android)
  import Android
  import AndroidApp
  import AndroidContent
#endif

We are now ready to call the respective swift methods for the given above java methods.

#if os(Android)
     let builder: AlertDialogBuilder = AlertDialogBuilder(context: Application.currentActivity!)
     builder.setTitle(title: "Did you bring your towel?")
     builder.setMessage(message: "It's recommended you bring your towel before continuing.")

     // setting buttons
     builder.setPositiveButton(text: "Yes", listener: nil)
     builder.setNegativeButton(text: "No", listener: nil)

     let dialog: AlertDialog = builder.create()!
     dialog.show()
     print("Dialog shown")
#endif

Let us understand the above code snippet and what it does basically. In order to access the Activity context, we use the currentActivity instance which returns the context. Using this context, we call AlertDialogBuilder to access the resource globally.

The builder method of the AlertDialogBuilder class allows the creation of the dialog user interface including title, description, and buttons. We can also customize the dialog interface accordingly. As of now, let’s build a dialog with basic functionality.

You can see, that we have just converted the above Java code to Swift code using the swift-android classes. Finally, we just display the dialog using the show() method of the AlertDialog class.

Now we are good to test the code on Android devices. Set the target to any Android device you like and test if it is working as expected.

Voila🎊! We have successfully developed the AlertDialog interface for our SCADE app. Integrating any Android-specific feature is very easy into the SCADE app using the swift-android library. You should definitely try the swift-android to build some of the useful components to build cross-platform apps.

This is another example of using the swift-android repository. Please give it a try to convert the Android Java classes to the respective Swift class. Thank you for reading and see you in the next article!

Happy Coding 😊

Forem: SCADE for Developers

How to use OpenCombine framework with Android Studio

Introduction

Prerequisite

Source Code of App

What is OpenCombine?

Key Features of OpenCombine:

Integrate OpenCombine using SPM

Create the Task-App's Backend in Swift

Design UI for Task Management App

Create RecyclerView Adapter to Display Tasks

Define Swift Methods in Android’s activity

Initialize the TaskManager class

Native Methods to add/delete a Task

Display current Tasks in RecyclerView

Implement Dialog to Remove Tasks

Run & Test the App!

Add Task:

Remove Task:

Swift for Android: How to use Swift-Crypto with Android Studio

Introduction

Prerequisite

Design the UI

Create Swift Methods in Activity

Add Swift Crypto library using SPM

Implement Crypto methods in Swifts

Import the modules

Implement hashing of password

Create Salt Key

Implement Verify Password Method

Call Swift Methods from Android’s Activity

Implementation of method in Swift

Implementation of function in Java (onPasswordValidated)

Run the App!

Implement RecyclerView using Swift PM libraries

Introduction

Create Swift Methods in Activity

Implement the API Call in Swift class

Build UI for Recyclerview

Build Adapter for Recyclerview

Finally Call the Adapter in onDataLoaded method

Now Run and Test the App

Collection View in Cross-Platform Swift Apps

Introduction

IMPORTANT Announcement📢

Prerequisite

Source Code

Configuration for Custom LSP

Adding original LSP server for Swift (shipped together with Xcode)

Adding original LSP server for Python

Collection View SCADE App

Design the App

Add the ScadeExtensions package dependency

Let’s code the main.page.swift

Run the App on iOS/Android

iOS

Android

Cache Implementation in Cross-Platform Swift Apps

Introduction

SharedPreference & UserDefaults

Prerequisite

Source Code

Design a SCADE Page

Code for iOS

Now let’s fetch the Key-Value pairs

Saving the Key-Value pairs

Fetching the Key-Value pairs

Run the App on iOS/Android

iOS

Android

Announcement: Swift 5.7 is now compatible with SCADE IDE

Announcement📢

The SCADE IDE now officially supports Swift 5.7 🎉.

What’s new in Swift 5.7 + SCADE 🔥

SwiftNIO with SCADE

Integrate Apple’s swift-nio SDK

Create a TCP Client & Handler class

Design some UI for SCADE App

Call the TCPClient Methods in SCADE App

Async/Await usage to start the TCPClient

Implementation of function in Java (`onPasswordValidated`)

Finally Call the Adapter in `onDataLoaded` method

Let’s code the `main.page.swift`

`actor` is now supported by SCADE

SCADE example App using `actor`