Forem: aseem wangoo

Using FFIGen in Dart 2.18

aseem wangoo — Thu, 22 Dec 2022 14:49:40 +0000

In case it helped :)

We will cover briefly:

What’s FFIGen
What’s new in FFIGen
Dart CLI App and integrate obj-c-based libraries
Testing FFIGen

Wait, what’s FFIGen?

Before explaining the answer to this question, the reader needs to know about FFI (Foreign Function Interface)

What’s FFI

FFI enables programs written in one language to call libraries written in other languages. The term FFI comes from CommonLisp, however, it’s applicable to any language. Some languages such as Java, use FFI in their ecosystem and call it JavaNativeInterface.

If we refer to the low-level language as the “host” language and the high-level language as the “guest” language, below are the ways to communicate between them.

The host is expected to bridge the gap with the guest. We write host-language functions specifically to be called by the guest. An API is offered for the host language to communicate with guests.
The gap is bridged by some kind of tool that does not belong strictly to either the host or guest languages.
The guest is also expected to bridge the gap with the host. Guest language can call any host-language function, but it needs to support many low-level features, in order to communicate with the host language effectively.

According to Wikipedia, these are the things to consider for FFI:

If one language supports garbage collection (GC) and the other does not; care must be taken that the non-GC language code does nothing to cause GC in the other to fail.
Complicated or non-trivial objects or datatypes may be difficult to map from one environment to another.
One or both languages may be running on a virtual machine (VM); moreover, if both are, these will probably be different VMs.

Fortunately, we are able to use FFI in Dart through the dart:ffilibrary. With Dart v2.12 onwards, Dart FFI is available on the stable channel. Dart FFI allows you to use the existing code in C libraries. By using FFI we can avail the benefits of both portability and integration of highly tuned C code for performance-intensive tasks. We are not limited to C , in fact, we can write the code in any language that is compiled to the C library, for instance Go, Rust

Another use case for using Dart FFI can be there are times when the Flutter app needs to have greater control over memory management and garbage collection, for instance, an app using tensor flow.

Dart FFI can be used to read, write, allocate and deallocate the native memory. There are some packages that already used this feature:

file_picker, printing, win32, objectbox, realm, isar, tflite_flutter, and dbus.

Ways of using Dart FFI

There are times when you want to create your own fresh library, but the maximum number of times, the library would already exist (created by some other team) and you simply want to use it. In either of the cases, we have the following choices

Manually creating the FFI bindings
Automatically generating the FFI bindings

If you like automation, you probably chose the second option, and as a result, we have package:ffigen

The idea behind the package ffigen is: For large APIs, it can be very time-consuming to write the Dart bindings which allow the integration with the C code. Hence, the Dart team came up with a binding generator (ffigen) that automatically creates the FFI wrappers out of the C header files.

Under the hood, this package uses LLVM and LibClang to parse C header files. For installing LLVM inside macOS

brew install llvm

There are multiple types provided by dart:ffi for representing the types in C. However, they broadly are classified in

Instantiable Native Types
Purely marker Native Types

Instantiable Native Types: They or their subtypes can be instantiated in the Dart Code. For instance, Array Pointer Struct Union

Purely marker Native Types: They are platform agnostic and cannot be instantiated in the Dart Code. For instance, Bool Double Int64 Int32 etc

There are also ABI marker types that extend AbiSpecificInteger For instance Size Short etc

Until now, we have covered what’s FFI and what’s ffigen, let’s explore what’s new inside ffigen from Dart 2.18

What’s new in FFIGen

Dart 2.18

The Dart team wants Dart to support interoperability with all the primary languages on the platforms where Dart runs.

As of Dart 2.18 the Dart code can now call the Objective-C and Swift code since these are used for writing APIs for macOS and iOS. This interop mechanism is supported across all types of apps (for instance, CLI app to backend app to Flutter code)

This feature is not limited to command-line apps. Even the Dart mobile, and server apps running on the Dart Native platform, on macOS or iOS, can use dart:ffi

This unlocks the possibilities since before 2.18 it was only possible to call the C/C++based libraries.

According to the official blog,

This new mechanism utilizes the fact that Objective-C and Swift code can be exposed as C code based on API bindings. The Dart API wrapper generation tool, ffigen, can create these bindings from API headers

This support for Objective-C and Swift is marked as experimental starting from Dart 2.18 In case someone experiences any problems, they can comment on the feedback issue on GitHub.

Dart CLI App with Objective-C-based libraries

In this section, we create a Dart-based command line application that demonstrates how to call an Objective-C-based library using the new functionalities from ffigen

We will choose any Objective-C library present inside the macOS, and integrate it inside the Dart CLI App.

One such library is NSURLCache

macOS has an API for querying URL cache information exposed by the NSURLCache class.

The NSURLCache implements the caching of responses to URL load requests, by mapping NSURLRequest objects to NSCachedURLResponse objects. It provides a composite in-memory and on-disk cache, and lets you manipulate the sizes of both the in-memory and on-disk portions.

We will be integrating the NSURLCache inside Dart and call some of its functions:

currentDiskUsage : The current size of the on-disk cache, in bytes.
diskCapacity : The capacity of the on-disk cache, in bytes.
memoryCapacity : The capacity of the in-memory cache, in bytes.

Create Dart CLI App

We start by creating the Dart CLI App using the below command. Also, upgrade to the latest Dart version 2.18

dart create ffi_2_18
## ffi_2_18 is the name of the project which will be created

Note: There are various templates available for Dart, see below. By default, it selects console application.

Dart Templates

This gives us a basic template with all the necessary files, for instance, pubspec or linter Open the pubspec file to check the dependencies which come bundled with this template.

dev_dependencies:
  lints: ^2.0.0
  test: ^1.16.0

Edit your pubspec file to add the ffigen dev dependency. Next, specify the configuration under this dependency. Configurations can be provided in 2 ways-

In the project’s pubspec.yaml file under the key ffigen.
Via a custom YAML file, then specify this file while running — dart run ffigen --config config.yaml

We will see the option 2 first. Separate config files for the libraries

Create a file called url_cache_config.yaml and put the below contents inside it.

name: URLCacheLibrary
language: objc
output: "url_cache_bindings.dart"
exclude-all-by-default: true
objc-interfaces:
  include:
    - "NSURLCache"
headers:
  entry-points:
    - "/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Foundation.framework/Headers/NSURLCache.h"

Let’s see the above configuration options-

name The name for the class which will be generated, after we run the ffigen, this class will be called URLCacheLibrary
language Must be one of `c`, or ‘objc’. Defaults to ‘c’. Since the library we select is written in Objective-C, we specify objc
output Output path of the generated bindings. This file will have all the FFI bindings which take care of the functions inside Obj-C
headers This includes the path to the header files It includes everything from the location as specified under the entry-pointsIn our case, the header files are present inside the Foundation.framework
exclude-all-by-default When a declaration filter (eg functions or structs:) is empty, it defaults to including everything. If this flag is enabled, the default behavior is to exclude everything instead.

Objective-C config options

objc-interfaces This filters for the interface declarations. In our case, we specify the NSURLCache interface

objc-interfaces:
  include:
    # Includes a specific interface.
    - 'NSURLCache'
    # Includes all interfaces starting with "NS".
    - 'NS.*'
  exclude:
    # Override the above NS.* inclusion, to exclude NSURL.
    - 'NSURL'
  rename:
    # Removes '_' prefix from interface names.
    '_(.*)': '$1'

Generate Bindings

To generate the bindings, run the following:

dart run ffigen --config url_cache_config.yaml
## url_cache_config is the file which we created above

This command creates a new file (url_cache_bindings.dart) as specified inside the output parameter of the url_cache_config.yamlwhich contains a bunch of generated API bindings. Using this binding file, we can write our Dart main method.

Integrate into Dart

We generated the bindings using the ffigen in the above step. Let’s see how to integrate it inside the Dart We create a new dart file called url_cache.dart

Inside this file, we would be loading and interacting with the generated library.

void main() {
  const dylibPath = '/System/Library/Frameworks/Foundation.framework/Versions/Current/Foundation';
final lib = URLCacheLibrary(DynamicLibrary.open(dylibPath));
final urlCache = NSURLCache.getSharedURLCache(lib);
  if (urlCache != null) {
    print('currentDiskUsage: ${urlCache.currentDiskUsage}');
    print('currentMemoryUsage: ${urlCache.currentMemoryUsage}');
    print('diskCapacity: ${urlCache.diskCapacity}');
    print('memoryCapacity: ${urlCache.memoryCapacity}');
  }
}

We mention the path of the library in the first step. Since, the library we are using is an internal library, the dylib points to the macOS’s framework dylib We can consider this library to be dynamically linked.

Library linking

Note: We can also use our own library or a static library (linked inside our app)

Dynamic Linking: In this type, the external libraries are placed inside the final executable, however, the actual linking happens at the run time. In dynamic linking, only one copy of the shared library is kept inside the memory which reduces the program size, memory, and disk space. Since the libraries are shared, dynamic linking programs are slower in comparison to static linking programs.

A dynamically linked library is distributed in a separate file or folder within the app and loaded on demand. A dynamically linked library can be loaded into Dart via DynamicLibrary.open.

Static Linking: In this type, the modules are copied inside the program before creating the final executable. Since these programs include libraries, they are large in size. However, because of the libraries already compiled, these programs are faster than dynamically linked programs.

A statically linked library is embedded into the app’s executable image and is loaded when the app starts. Symbols from a statically linked library can be loaded using DynamicLibrary.executable or DynamicLibrary.process.

Next, we construct the URLCacheLibrary by using the constructor which needs the dylib path. For this, we call the DynamicLibrary.open This loads the library file and provides the access to its symbols.

Note: This process loads the library into the DartVM only once, regardless of the function calls.

Once the library gets initialized, we can call the different methods present inside it (which were generated).

We are looking for a NSURLCache class. This class implements the caching of responses to URL load requests, by mapping NSURLRequest objects to NSCachedURLResponse objects. For getting an instance of this class, we call sharedURLCache

final urlCache = NSURLCache.getSharedURLCache(lib)

Since we have the instance of URLCache we can access the different methods currentDiskUsage currentMemoryUsage diskCapacity memoryCapacity. Let’s run the dart code using

dart run bin/url_cache.dart

The result is as

NSURLCache data

Using configuration inside pubspec

In the above section, we saw how to use the configuration specified inside a separate config file, let’s see how to use the configuration inside the pubspec

We will choose another Objective-C library present inside the macOS.

One such library is NSTimeZone

This API is used for querying the time zones along with the standard time policies of a region. These time zones can have identifiers such as America/Los_Angeles and can also be identified by abbreviations such as PST for Pacific Standard Time.

The header for this library is present inside the NSTimeZone.hwhich can be found inside the Apple Foundation library. Let’s include the configuration inside the pubspec:

dev_dependencies:
ffigen:
  name: TimeZoneLibrary
  language: objc
  output: "timezone_bindings.dart"
  exclude-all-by-default: true
  objc-interfaces:
    include:
      - "NSTimeZone"
  headers:
    entry-points:
      - "/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Foundation.framework/Headers/NSTimeZone.h"

In the above configuration, we specify the

name This class will be called TimeZoneLibrary
language The library we select is written in Objective-C, we specify objc
headers The path to the header files which is present inside the Foundation.framework

For generating the bindings we run the following

dart run ffigen

This command creates a new file (timezone_bindings.dart) as specified inside the output parameter that contains a bunch of generated API bindings. Using this binding file, we can write our Dart main method.

We create a new dart file called timezones.dart Inside this file, we load and interact with the generated library.

const dylibPath='/System/Library/Frameworks/Foundation.framework/Versions/Current/Foundation';
final lib = TimeZoneLibrary(DynamicLibrary.open(dylibPath));
final timeZone = NSTimeZone.getLocalTimeZone(lib);
if (timeZone != null) {
  print('Timezone name: ${timeZone.name}');
  print('Offset: ${timeZone.secondsFromGMT / 60 / 60} hours');
}

We construct the TimeZoneLibrary by using the constructor which needs the dylib path. Once the library gets initialized, we call the different methods present inside it.

We will be integrating the NSTimeZone inside Dart and call some of its functions:

name : The geopolitical region ID that identifies the receiver.
secondsFromGMT : The current difference in seconds between the receiver and Greenwich Mean Time.

For getting an instance of this class, we call localTimeZone

final timeZone = NSTimeZone.getLocalTimeZone(lib)

Since we have the instance of NSTimeZone we can access the different methods name secondsFromGMT. Let’s run the dart code using

dart run bin/timezones.dart

The result is as

NSTimeZone data

Garbage Collection

Objective-C uses reference counting for memory management, but on the Dart side, memory management is handled automatically. The Dart wrapper object retains a reference to the Objective-C object, and when the Dart object is garbage collected, the generated code automatically releases that reference using a NativeFinalizer.

Limitations of Objective-C Interop

The issues with the multithreading currently are a limitation to Dart’s experimental support for Objective-C interop. However, these limitations are not intentional, but due to the relationship between the Dart isolates and OS threads, and also how Apple handles the multithreading.

While ffigen supports converting Dart functions to Objective-C blocks, but most Apple APIs don’t guarantee on which thread a callback will run.
Dart isolates are not the same as threads. Isolates run on threads but aren’t guaranteed to run on any particular thread. The VM can change which thread an isolate is running on without warning.
Apple APIs are not thread-safe.

Since the VM can change the thread in which an isolate can run, this means a callback created in one isolate might be invoked on a different or no isolate. However, there are some tweaks around this, as implemented in the cupertino:http

Testing FFIGen

Till now, we saw how to generate the bindings, and consume them from Dart CLI. In this section, we will see how to test the generated bindings.

We install the dependencies yaml and logging and create a file called ffi_2_18_test

Note: The tests should follow <name>_test.dart pattern

The yaml dependency helps in the parsing of a YAML file. Whereas logging provides us with the APIs useful for logging (based on the configuration as specified).

Setup Logging

We configure the logging level and add a handler for the log messages. The level is set to Level.SEVERE and next, we listen on the onRecord stream for LogRecord events.

void logWarnings([Level level = Level.WARNING]) {
  Logger.root.level = level;
  Logger.root.onRecord.listen((record) {
    print('${record.level.name.padRight(8)}: ${record.message}');
  });
}

This function logWarnings is called inside the setUpAll The function registered under setUpAll will be run once before all the tests.

Test for NSURLCache

test('url_cache', () {
  final pubspecFile = File('url_cache_config.yaml');
  final pubspecYaml = loadYaml(pubspecFile.readAsStringSync()) as YamlMap;
  final config = Config.fromYaml(pubspecYaml);
  final output = parse(config).generate();
  expect(output, contains('class URLCacheLibrary{'));
  expect(output, contains('static NSURLCache?getSharedURLCache('));
 });
}

We begin writing a test using the test method. The first thing we do is create the url_cache_config.yaml using a file object.

Next, we use the loadYaml the function which loads a single document from the YAML string. Since this method expects the parameter to be a string, we use the readAsStringSync to convert the file contents into string synchronously.

The return value is mostly normal Dart objects. Since we are using the YAMLfile, we specify the result as YamlMapYAML mappings support some key types that the default Dart map implementation doesn’t have.

Next, we use the Config from the ffigen to create the configuration required for testing from the above yaml map. Finally, we use the parse to generate the bindings.

The output from the above step is compared against the strings, for instance

expect(output, contains('class URLCacheLibrary{'));
expect(output, contains('static NSURLCache? getSharedURLCache('));

This is because once we run the test using

dart test test/ffi_2_18_test.dart

It generates the config file during the runtime and this gets compared with the strings above.

Test passed using FFIGen

Test for NSTimeZone

test('timezones', () {
  final pubspecFile = File('pubspec.yaml');
  final pubspecYaml = loadYaml(pubspecFile.readAsStringSync()) as YamlMap;
  final config = Config.fromYaml(pubspecYaml['ffigen'] as YamlMap);
  final output = parse(config).generate();
expect(output, contains('class TimeZoneLibrary{'));
  expect(output, contains('class NSString extends _ObjCWrapper {'));
  expect(output, contains('static NSTimeZone? getLocalTimeZone('));
 );
}

We create a file object using the pubspec.yaml file. Next, we use the loadYaml which loads the file from the YAML string.

Next, we use the Config from the ffigen to create the configuration required for testing from the above yaml map. Since the pubspec file has the property ffigen defined inside it, we straight away refer to that and specify the output type to be YamlMap

Note: For the NSTimeZone, we specified the ffigen configuration inside the pubspec.yaml

Finally, we use the parse to generate the bindings. The output from this step is compared against the strings, for instance

expect(output, contains('class TimeZoneLibrary{'));
expect(output, contains('static NSTimeZone? getLocalTimeZone('));

This is because once we run the test using

dart test test/ffi_2_18_test.dart

It generates the config file during the runtime and this gets compared with the strings inside the test.

Test passed using FFIGen

Source code

In case it helped :)

Using Redis for Caching (2023)

aseem wangoo — Thu, 20 Oct 2022 06:29:20 +0000

In case it helped :)

We will cover briefly:

Caching APIs (Go) using Redis
Redis Subscription using Pub/Sub
Calling API using React

What is Redis?

Redis, which stands for Remote Dictionary Server, is a fast, open source, in-memory, key-value data store. It delivers sub-millisecond response times, enabling millions of requests per second for real-time applications.

Redis is a key-value-based NoSQL database that stores data in memory, i.e. in RAM.

Use cases of Redis

Caching
Geospatial
Chat, messaging, and queues
Gaming leaderboards

Advantages of Redis

Simple, fast, and easy to use
Supports a variety of data structures
Allows storing key and value pairs as large as 512 MB
High availability using Redis Sentinel

Disadvantages of Redis

Requires huge RAM (although depends on the type of application)
Failover happens if the master at least 1 slave
Data can only be accessed via keys

Setting up Redis

We will setup Redis using Docker

docker run -d -p 6379:6379 --name redis redis

Nowadays there are some hosting providers such as AWS, Redis Labs, or Upstash that provide Redis on the cloud.

There are many ways of connecting to Redis. In our case, we will be using the RedisCLI Since we have the docker setup ready, let's connect.

Here is an example of using the RedisCLI tool to set, get and delete a value from the Redis

% docker exec -it redis redis-cli
127.0.0.1:6379> set key value
OK
127.0.0.1:6379> get key
"value"
127.0.0.1:6379> del key
(integer) 1
127.0.0.1:6379>

Some other useful commands

keys *: for finding all the keys

FLUSHALL : delete all keys from all databases.
FLUSHDB : delete all keys from the currently selected DB.

EXPIRE key 120: key will be deleted in 120seconds

Caching APIs (Go) using Redis

There are multiple clients available in Go for implementing Redis. However, in this article, we will be using Go-redis

Go-Redis

Go-Redis is a type-safe, Redis client library for Go.
It is a Redis client able to support a Redis cluster and is designed to store and update slot info automatically with a cluster change.
It supports features like Pub/Sub Sentinel, and pipelining

Create APIs using Gorilla Mux

We will be using Gorilla Mux to create the APIs locally
It implements a request router and dispatcher to match the incoming requests.

Install it using

go get -u github.com/gorilla/mux

We will register the following endpoints:

GET /users/:id — to get a user’s information based on the id. Sample response

[
   {
      "id":"116c24b1-9425-4fe4-aec2-86ba7384733e",
      "name":"Bob",
      "age":29,     
      "source":""
   },
   {
      "id":"a3fa13d4-67a9-4ae6-9713-dce7043844d7",
      "name":"Alice",
      "age":29,
      "source":""
   }
]

GET /users — returns the users present in the database. Sample response

{
   "id":"116c24b1-9425-4fe4-aec2-86ba7384733e",
   "name":"Bob",
   "age":29,
   "source":""
}

Next, we create the router instance using the mux.NewRouter() and assign the above-created routes to the respective handlers
Each of the corresponding handlers is passed ResponseWriter and Request as parameters, which help in returning the desired response to the client.
We then specify the server details using http.Server for running the HTTP server

srv := &http.Server{
 Handler:      router,
 Addr:         ":8081",
 WriteTimeout: 15 * time.Second,
 ReadTimeout:  15 * time.Second,
}
log.Fatal(srv.ListenAndServe())

Handler : This is the object that responds to the incoming HTTP requests (which we created above)

Addr : This specifies the TCP address for the server to listen on, which by default is 80

WriteTimeout : Maximum duration before timing out the writes of the response

ReadTimeout : Maximum duration for reading the entire incoming request

Finally, we run the server using ListenAndServe which listens on the network address specified in the Addr and serves the requests based on the Handler

Setting up Postgres

We will be using Postgres for our database. Install it using docker with the following

docker run \
  -d \                                     
  -e POSTGRES_HOST_AUTH_METHOD=trust \
  -e POSTGRES_USER=user \
  -e POSTGRES_PASSWORD=password \
  -e POSTGRES_DB=dbname \
  -p 5432:5432 \
  postgres

Verify if the new container is created and running at 0.0.0.0:5432docker ps -a For managing the database from the browser, install pgAdmin and connect to it using the above credentials, if all is good, you should see

Postgres database

We will create a table called users which will have the following schema

Users table

Let’s insert some dummy data using

INSERT INTO public.users(
 id, created_time, name, updated_time, age)
 VALUES (uuid_generate_v4(), NOW(), 'alice', NOW(), 29);
// IN CASE ANY ERROR RUN THIS
CREATE EXTENSION IF NOT EXISTS "uuid-ossp"

For connecting to Postgres using Go we will install this Here is the snippet

host := "127.0.0.1"
port := "5432"
user := "user"
password := "password"
dbname := "dbname"
psqlInfo := fmt.Sprintf("host=%s port=%s user=%s password=%s dbname=%s sslmode=disable", host, port, user, password, dbname)
result, err := sql.Open("postgres", psqlInfo)
if err != nil {  
   log.Fatalf("Error in connection : %s", err)
}

Here is the struct for the users

type Users struct {
 ID          uuid.UUID `json:"id"`
 Name        string    `json:"name"`
 Age         int       `json:"age"`
 CreatedTime string    `json:"created_time"`
 UpdatedTime string    `json:"updated_time"`
 Source      string    `json:"source"`
}

API and get users by id API are created, we will use the Gorilla Mux to create a localhost server and listen to the endpoints

Caching APIs

Redis between DB and client

For connecting to the Redis we create a Redis Client using NewClient We specify the address at which the Redis exists

client := redis.NewClient(&redis.Options{
 Addr:        "127.0.0.1:6379",
 DB:          0,
 DialTimeout: 100 * time.Millisecond,
 ReadTimeout: 100 * time.Millisecond,
})

The configuration options are available through the redis.Options parameter.

Addr : String of host and the port address, since we are hosting Redis locally, the value is 127.0.0.1 and by default, Redis runs on the port 6379

DB : The database which will the selected after connecting to the server. By choosing 0 we mean to use the default database.

DialTimeout : In case our connection to the Redis server gets broken, we specify the timeout for establishing the new connection

ReadTimeout : This allows putting a timeout for the socket reads. In case any of the Redis server requests reach this timeout, the command calling it will fail instead of blocking the server.

To check if we connected to the server, we call Ping using the client we created above. If there is no error, that implies we are connected to the Redis server.
Finally, we return the Redis client which internally may have zero or more connections.

if _, err := client.Ping().Result(); err != nil {
 return nil, err
}
return &Client{
 client: client,
}, nil

Get and Set Keys

The use case we would be following is whenever the front end asks for the details of a particular user, we would fetch it from the API and then cache it.
Subsequent requests for the particular user would be served from the cache until the cache key expires (which we set to 20 seconds )
We will be making use of Set to set the value in the cache

func (c *Client) SetUser(key string, user structs.Users) {
 json, err := json.Marshal(user)
 if err != nil {
  log.Fatal(err)
 }
 c.client.Set(key, json, 20*time.Second)
}

Note: Here we are taking the userstruct as input. We are then converting the Go struct into JSON (aka marshaling) since JSON is a language-independent data format.

We are setting the key pair with an optional expiration parameter of 20 seconds This means the key will automatically expire in the given duration.
In case there is no expiration parameter, it means Zero expiration meaning the key has no expiration time.

Get keys

We will be making use of Get for retrieving the value of the key

func (c *Client) GetUser(key string) (user *structs.Users) {
 val, err := c.client.Get(key).Result()
 resp := structs.Users{}
 err = json.Unmarshal([]byte(val), &resp)
 return &resp
}

The response is in the form of a string and then we convert the byte data into the original user struct (aka unmarshalling)
Inside this function, we additionally add a Redis publisher (which we will see in the next section).

Calling APIs

We have this API endpoint hosted locally GET /users/:id — to get a user’s information based on the id.

Once the client calls this endpoint, we first check in case the value for this request can be served from the cache.

Note: In case the data exists inside the cache, we set the source: "cache"

Logically, the first request will always hit the server, hence the time taken for getting the response will be more.

Note: For getting the value from the server, we set the source: "API"

router.HandleFunc("/users/{id}", func(w http.ResponseWriter, r *http.Request) {
 id := mux.Vars(r)["id"]
 val := redis.GetUser(id)
 if val != nil {
  val.Source = "cache"
  renderJSON(w, &val, http.StatusOK)
  return
 }
 user, err := GetUserByID(id)
 if err != nil {
  renderJSON(w, &user, http.StatusOK)
  return
 }
 redis.SetUser(id, user)
 user.Source = "API"
 renderJSON(w, &user, http.StatusOK)
})

As we can see in the above snippet, we first invoke redis.GetUser to check the cache.
This function checks for the id inside the cache, if the id is present, it returns the value.
If the result fails, the function returns null and we proceed to invoke the API GetUserByID which hits our Postgres database

{
   "id":"116c24b1-9425-4fe4-aec2-86ba7384733e",
   "name":"Bob",
   "age":29,
   "source":"API"
}

s how it looks when the key is not present in Redis

Key not present in Redis

The result from the API is then cached in Redis, so the subsequent requests are now served by the cache (until 20 seconds which is the key expiration duration)

{
   "id":"116c24b1-9425-4fe4-aec2-86ba7384733e",
   "name":"Bob",
   "age":29,
   "source":"cache"
}

This is how it looks when the key is present in Redis

Key present in Redis

Redis Subscription using Pub/Sub

In the field of software engineering, publish-subscribe is a pattern where senders (publishers) categorize the messages into channels without knowing if there may be any subscribers.
On the other hand, subscribers show interest in one or more channels and only receive messages that are of interest, without knowing if there may be any publishers.
This decoupling of publishers and subscribers enhances greater scalability.

Redis Pub/Sub

We will be using Redis for pub/sub, however, there are various other alternatives like Apache Kafka, Google cloud Pub/Sub, etc
In order to subscribe to channels, for instance, foo and bar the client uses SUBSCRIBE providing the names of the channels:

SUBSCRIBE foo bar

Messages sent by other clients to these channels will be pushed by Redis to all the subscribed clients.

Once we have a Redis client subscribing to a channel, that client can no longer execute any other operations except unsubscribing from the current channel or subscribing to more channels.

Go-Redis Publisher

Go-redis allows to publish messages and subscribe to channels. It also automatically re-connects to Redis Server when there is a network error.

Inside our get user function, we will create a publisher, using redis.Publish(). This function takes two arguments, the name of the channel to which we want to send the message and the message.
In our case, we set the channel name to send-user-name and the payload is the response from redis.GetUser (see above)
We are sending the marshaled payload to the channel using Publish This is because it allows transferring the data as []byte
Since we are using a User struct, it can be encoded into a []byte

// Sample payload we are sending using pub/sub
{
   "id":"116c24b1-9425-4fe4-aec2-86ba7384733e",
   "name":"Bob",
   "age":29,
   "source":"cache"
}
// Publish using Redis PubSub
payload, err := json.Marshal(resp)
if err := c.client.Publish("send-user-name", payload).Err(); err != nil {
 log.Fatal(err)
}

Go-Redis Subscriber

We create a subscriber using the redis.Subscribe() function.
We will have one argument, the channel we want to subscribe to, which in our case is send-user-name.
Subscribe subscribes to the client to the specified channels. Since this method does not wait on a response from Redis, so the subscription may not be active immediately.
We create a new file that connects to the same Redis instance and calls the following

topic := redisClient.Subscribe("send-user-name")
channel := topic.Channel()
for msg := range channel {
 u := &User{}
 // Unmarshal the data into the user
 err := u.UnmarshalBinary([]byte(msg.Payload))
 if err != nil {
  panic(err)
 }
fmt.Printf("User: %v having age: %v and id: %v\n", u.Name, u.Age, u.ID)
 log.Println("Received message from " + msg.Channel + " channel.")
}

The result of the subscribe is a PubSub and we extract the channel property out of this object
This Channel returns a Go channel for concurrently receiving messages. If the channel is full for 30 seconds the message is dropped.
We loop over the channel and extract the data from it, which is of the type Message Each message object comprises of

Channel : This is the channel name

Payload : The marshaled data received in the channel

Pattern : Pattern for the message

The data received inside the message can be fetched using msg.Payload Since its marshaled, we will unmarshal it using the UnmarshalBinary and transform back into User struct.
Finally, we can access the struct properties and print inside the console. We also print the message’s channel name, just for fun!!

Redis subscriber

Here, we get the message channel name send-user-name and the user details for Bob

Calling API using React

In the above section, we created and hosted the APIs locally using Gorilla Mux. We will now consume these APIs from the front end using React

We will be using Axios for calling the APIs. Let’s install this dependency.

npm install axios

Axios is a lightweight HTTP client which makes calling requests very intuitive. It is similar to the JavaScript Fetch API
It works well with JSON data and does the heavy lifting of setting the request headers.
It has better error handling for accessing the response and integrates well with async-await syntax.
It can be used on the server as well as the client.

Integrate into React

We will be using the hooks useEffect and useState A hookis a special function that lets you “hook into” React features.

useEffect

Using this Hook, we instruct React that our components need to do something after rendering. By default, useEffect runs after each render of the component where it’s called.
A common use of this hook is to fetch data and display it.
React remembers the function you passed, and invokes it later after the DOM updates.

Note: We have an empty array at the end of the useEffect Hook for making sure the internal function inside renders only once.

If we want our effects to run less often, we provide the second argument (which is an array of values). These can be considered as the dependencies for the effect and if any changes (since the last time), the effect runs again.

useState

It is a way of adding a state to the components and preservesome values between the function call.
In general, variables “disappear” when the function exits but state variables are preserved by React.
This state can be an array, object, number, boolean, etc.
The argument passed to the useState() is the initial state.

const [fetchedData, setFetchedData] = useState([]);
useEffect(() => {
  const getData = async () => {
      const data = await axios.get(
          "http://localhost:8081/users"
      );
      setFetchedData(data);
  };
  getData();
}, []);

To make a GET request using Axios we use the .get() method. The response is returned as an object.
We use the .data property from the response to get the requested data and set it inside the hook using the setFetchedData

Request responses:

When the page loads for the first time, the API hits our backend. The result fetchedData is then displayed on the page.

Notice, source: API

Source: API

And on the next request, the API hits our cache, displayed with source:cache

Source: Cache

Source code for Go

Source code for React

In case it helped :)

Using MVVM in Flutter (2022)

aseem wangoo — Sun, 04 Sep 2022 01:03:34 +0000

In case it helped :)

We will cover briefly:

What is MVVM
Using MVVM in Flutter
Extending MVVM with Repository and Services

What is MVVM

Model-View-ViewModel (MVVM) is a software architectural pattern that supports the separation of the UI (which is View) from the development of the business logic or the backend logic (Model). The view model inside MVVM is the bridge responsible for the conversion of data in a way that behaves in accordance with the changes happening on the UI

In addition, to know about the responsibilities of the three components, it’s also important to understand how the components interact with each other. At the highest level, the view “knows about” the view model, and the view model “knows about” the model, but the model is unaware of the view model, and the view model is unaware of the view.

MVVM Architecture

There are several advantages of using MVVM:

Separation of Concerns: It is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern. A concern is anything that matters in providing a solution to a problem.
Improved Testability
Defined Project Structure
Parallel development of UI
Abstract the View, thus reducing the quantity of business logic required in the code behind it

Some disadvantages of using MVVM:

It has a slightly steep learning curve. How all the layers work together may take some time to understand.
It adds a lot of extra classes, so it’s not ideal for low-complexity projects.

Since architectural or design patterns are platform-agnostic, they can be used with any framework, in our case Flutter.

Components

Model: This is basically the domain model or the model which represents the data from your backend (aka data access layer). Models hold information, but typically don’t handle behavior. They don’t format information or influence how data appears. The Model in the MVVM design pattern represents the actual data that will be used in application development

View: This is basically the only part of the application users actually interact with. For instance, the user presses the button, scrolls the list, edits the settings, etc and these events are then forwarded to the view model which then does the processing and returns the expected user response (which is some form of UI). It’s important to remember the View isn’t responsible here for handling the state.

A View should be as dumb as possible. Never put your business logic in Views.

View Model: The ViewModel acts as an intermediate between the View and the Model, in such a way that it provides data to the UI. The ViewModel may also expose methods for helping to maintain the View’s state, update the model based on the action’s on a View, and trigger events on the View. For Flutter, we have a listener called ChangeNotifier that allows ViewModel to inform or update the View whenever the data get updated.

The ViewModel has basically two responsibilities:

it reacts to user inputs (e.g. by changing the model, initiating network requests, or routing to different screens)
it offers output data that the View can subscribe to

In summary, the ViewModel sits behind the UI layer. It exposes data needed by a View and can be viewed as the source our Views go to for both data and actions.

What is ChangeNotifier?

ChangeNotifier is a class that provides change notifications to its listeners.

As per the official documentation

A class that can be extended or mixed in that provides a change notification API using VoidCallback for notifications.

It is O(1) for adding listeners and O(N) for removing listeners and dispatching notifications (where N is the number of listeners).

There are several ways to consume the change notifier in Flutter.

Using .addListener method, as the ChangeNotifier is a type of Listenable.
Using the combination of ChangeNotifierProvider, Consumer, and Provider. These all capabilities are provided to us by the Provider package.

We will use approach 2

In the real world, other classes can listen to an ChangeNotifier object. When the change notifier gets updated values, it can call a method called notifyListenersand then any of its listeners will receive the updated val



class Person extends ChangeNotifier {
  Person({this.name, this.age});
  final String name;
  int age;

  void increaseAge() {
    this.age++;
    notifyListeners();
  }
}
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Person(name: "Joe", age: 28),
      child: MyApp(),
    ),
  );
}

Inside the app, any class that listens to this Person will be notified in case the age changes. Internally, notifyListeners calls the registered listeners.

Using MVVM in Flutter

Flutter is declarative in nature. This means that Flutter builds UI by overriding your build methods to reflect the current state of your app:



UI = fn(state)

According to the Flutter documentation, the state is described as “ data you need to rebuild your UI at any point in time.”

A state can either be contained in a single widget, known as a local state. Flutter provides inbuilt classes and methods to deal with self-contained states like StatefulWidget and setState.

However, a state that has to be shared across different widgets is known as an app state. It is at this point we introduce state management tools.

We will be using Provider for the state management.

Let’s say you were to architect an application that includes only the below screen. How would you do?

Hint: Using MVVM

Sample Screen

Each screen should comprise its own folder. Create a folder called home which contains a view called home_view

Naming convention: Each screen is called view and the file is suffixed with _view The view will be listening to the changes happening on the view model, using the Consumer

Each view should have a view model associated with it. Create a file called home_view_model which will be responsible for accepting the user interactions, processing them by running some business logic, and finally responding back.

Naming convention: Each screen has a view model associated with it and the file is suffixed with _view_model The view model notifies the changes to the UI (if any) using the notifyListeners

Assuming the button calls some API (more on that later) and responds back with some response. This response should be converted as a model suffixed with _model and returned from the view model to the view.

MVVM Project Structure

This is the basics of MVVM, as we can see in the screenshot above. This can be replicated for all the screens of your app. Now, let’s see slight addition on top of this structure.

Extending MVVM with Repository and Services

In the real world, our app needs to interact with APIs or 3rd party integrated services. So here we introduce something called as Repository .

A repository pattern provides an abstraction of data so that your application can work with a simple abstraction that has an interface. Using this pattern can help achieve loose coupling. If implemented correctly, the Repository pattern can be a great way to ensure you follow the Single Responsibility Principle for your data access code

Some benefits of using the Repository pattern:

Separate the business logic for accessing external services.
Makes mocking easier and allows to do unit tests.
We can easily switch data sources without doing time-consuming code changes

Some disadvantages of using the Repository pattern:

Adds another layer of abstraction which adds a certain level of complexity making it overkill for small applications.

Continuing with the previous example, let’s say our button needs to call an API, let’s implement it using Repository pattern.

Dart has no interfaces like Java but we can create it with an abstract class. We begin by creating an abstract class that defines the interface for our home_repo



abstract class HomeRepository {
  Future<CarouselModel> fetchData();
}

This abstract class helps to create a boundary, and we are free to work on either side of that boundary. We could work on implementing the home repository (recommended), or we could just use the implementation directly in our app (not recommended).

Here, the HomeRepository has only one method which is fetchData and this method returns the response as a model called CarouselModel

Next, let’s implement the HomeRepository



class HomeRepositoryImpl extends HomeRepository {
  @override
  Future<CarouselModel> fetchData() async {
    await Future.delayed(const Duration(milliseconds: 1800));
    final resp = await rootBundle.loadString('assets/data/first_screen.json');
    return carouselModelFromJson(resp);
  }
}

Inside the method fetchDatawe introduce a delay and then load the data from the assets which is a JSON file. This delay is basically a substitute for calling the API, but I hope I am able to convey my thoughts to the reader.

As your application grows, you may find yourself adding more and more methods to a given repository. In this scenario, consider creating multiple repositories, and keeping related methods together.

Repository Pattern

So till now, we have

carousel_model representing the Model (M)
home_view representing the View (V)
home_view_model representing the View Model (VM)
home_repo representing the Repository

Register the Repository

Since our repository is ready, now we need to figure out how to register it and make it available inside our app. This is the time we introduce another concept called DI aka Dependency Injection. We make use of the package get_it As per the documentation:

This is a simple Service Locator for Dart and Flutter projects with some additional goodies highly inspired by Splat. It can be used instead of InheritedWidget or Provider to access objects e.g. from your UI.

GetIt is super fast because it uses just an Map<Type> inside which makes access to it O(1). GetIt itself is a singleton so you can access it from everywhere using its instance property (see below).

We install get_it it by including it inside the pubspec.yaml as



dependencies:
  get_it: ^7.2.0

Typically at the start of your app, you register the types that you want later access from anywhere in your app. After that, you can access instances of the registered types by calling the locator again.

The nice thing is you can register an interface or abstract class together with a concrete implementation. When accessing the instance you always ask for the interface/abstract class type. This makes it easy to switch the implementation by just switching the concrete type at registration time.

We create a file called as locator.dart inside which we will instantiate the object of get_it



final GetIt locator = GetIt.instance;
void setupLocator() {
  locator.registerFactory<HomeRepository>(() => HomeRepoImpl());
  // Alternatively you could write it
  GetIt.I.registerFactory<HomeRepository>(HomeRepoImpl());
}

As Dart supports global variables we assign the GetIt instance to a global variable to make access to it as easy as possible.

Although GetIt is a singleton we will assign its instance to a global variable locator to minimize the code for accessing GetIt. Any call to locator in any package of a project will get the same instance of GetIt.

Next, we use the locator and use the registerFactory to register our HomeRepository

Provider as an alternative to GetIt

The provider is a powerful alternative to GetIt. But there are some reasons why people use GetIt for Dependency injection:

Provider needs a BuildContext to access the registered objects, so you can’t use it inside business objects outside the Widget tree or in a pure dart package.
The provider adds its own Widget classes to the widget tree that are no GUI elements but are needed to access the in Provider registered objects.

Testing Repository

You can implement unit testing for different elements of your Flutter applications, such as widgets, controllers, models, services, and repositories. It’s possible to unit-test repository-based Flutter codebases with the following strategies:

Implement a mock repository class and test the logic
You don’t need to implement mock classes by yourself — the Mockito package helps you to generate them quickly and automatically.

Integrate Repository in ViewModel

Now comes the time to use the Dependency Injection. But before that let’s see what is it.

When class A uses some functionality of class B, then its said that class A has a dependency of class B.

Before we can use methods of other classes, we first need to create the object of that class (i.e. class A needs to create an instance of class B).

So, transferring the task of creating the object to someone else and directly using the dependency is called dependency injection.

Dependency Injection

Benefits of using DI

Supports Unit testing.
Boilerplate code is reduced, as initializing of dependencies is done by another component (locator in our case)
Enables loose coupling.

Drawbacks of using DI

It’s complex to learn, and if overused can lead to management issues and other problems.
Many compile time errors are pushed to run-time.

Coming back to our application, let’s see how we integrate.



class HomeViewModel extends ChangeNotifier {
  HomeViewModel({
    required this.homeRepo,
  });
  final HomeRepository homeRepo;
}

Here, we create a constructor inside our HomeViewModel and specify the homeRepo as our required parameter. This way we direct that whosoever needs access to our view model will first have to pass the homeRepo

Initialize the service locator

You need to register the services on app startup, so you can do that in main.dart

Replace the standard



void main() => runApp(MyApp());

with the following:



import 'locator.dart';

void main() {
  // INIT SERVICE LOCATOR  
  setupLocator();

  runApp(MyApp());
}

This will register any services you have with GetIt before the widget tree gets built.

And if we recall, our homeRepo was registered inside the locator So in order to declare our view model, we follow this



Future<void> main() async {

  setupLocator();
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => HomeViewModel(repo: locator<HomeRepo>()),
        ),
      ],
      child: MainApp(),
    ),
  );
}

Inside our main we call the setupLocator which is the method that comprises all the registered dependencies under locator.dart

Next, inside our MultiProvider, we specify the HomeViewModel under the ChangeNotifierProvider

ChangeNotifierProvider creates a ChangeNotifier using create and automatically disposes it when it is removed from the widget tree.

Using ViewModel inside the View

We have our repository registered and passed as a required parameter to our view model. Let’s see how to use the view model inside our view.

There are two ways to access the view model inside the view

Using the Consumer<T> widget.
Using the Provider.of<T>(context).



late HomeViewModel viewModel;
@override
void initState() {
  viewModel = Provider.of<HomeViewModel>(context, listen: false);
  WidgetsBinding.instance.addPostFrameCallback((_) {
    viewModel.fetchData();
  });
  super.initState();
}

We instantiate the viewModel using Provider. of inside the home_view

The Provider.of<T>(context) is used when you need to access the dependency but you don’t want to make any changes to the User Interface. We simply set the listen: false signifying that we don’t need to listen to updates from the ChangeNotifier. The listen: false parameter is used to specify whenever you're using Provider to fetch an instance and call a method on that instance.

Note: We can also use the below



viewModel = context.read<HomeViewModel>();

For reacting to the changes which happen to viewModel we use the Consumer when we want to rebuild the widgets when a value changes. It is a must to provide the type so that the Provider can understand which dependency you are referring to.



Consumer<HomeViewModel>(
    builder: (_, model, child) {
     // YOUR WIDGET                     
    },
    child: // SOME EXPENSIVE WIDGET
)

The Consumer widget doesn’t do any fancy work. It just calls Provider.of in a new widget, and delegates its build implementation to the builder.

The Consumer widget takes two parameters, the builder parameter and the child parameter (optional). The child parameter is an expensive widget that does not get affected by any Change in the ChangeNotifier.

This builder can be called multiple times (such as when the provided value change) and that is where we can rebuild our UI. The Consumer widget has two main purposes:

It allows obtaining a value from a provider when we don’t have a BuildContext that is a descendant of said provider, and therefore cannot use Provider. of.
It helps with performance optimization by providing more granular rebuilds.

Unit tests for the view model (Optional)

You can mock dependencies by creating an alternative implementation of a class by making use of the Mockito package as a shortcut.

MVVM Architecture + Repository

What are Services

Services are normal Dart classes that are written to do some specialized task in your app. The purpose of a service is to isolate a task, especially third-party packages that are volatile, and hide its implementation details from the rest of the app.

Some common examples you might create a service to handle:

Using a 3rd party package, for instance, read and write to local storage (shared preferences)
Using Cloud Providers like Firebase or some other third-party package.

Let’s say you’re using package_info to get the package details of your app.

You use the package directly inside the app and after some time you found an even great package. You go through and replace all the references of package_infowith the new package some_great_package. This was surely a waste of your time and effort.

Let’s say the product owners found, that no user was using this feature, instead, they request a new feature. You go through and remove all the references with the some_great_package This was again a waste of your time and effort.

The point is when you have tight coupling to some function scattered around your code, it makes it difficult and error-prone to change.

Clean coding takes upfront time and effort but will save you more time and effort in the long run.

This is where services come in. You make a new class and call it something like PackageInfoService. The rest of the classes in the app don’t know how it works internally. They just call methods on the service to get the result.



abstract class PackageInfoService {
  Future<String> appVersion();
}
class PackageInfoServiceImpl implements PackageInfoService {
  @override
  Future<String> appVersion() async {
    final packageInfo = await PackageInfo.fromPlatform();
    String version = packageInfo.version;
    String build = packageInfo.buildNumber;
    return 'v$version ($build)';
  }
}

This makes it easy to change. If you want to switch package_info to asome_great_package just alter the code inside the service class. Updating the service code automatically affects everywhere the service is used inside the app.
Supports swapping around implementations. You can create a “fake” implementation that just returns hard-coded data, while the other team is finalizing/developing the service implementation.
Sometimes the implementation may rely on other services. For example, you xyzService might use a service for making a network call to get other types of data.

Register your service

Using a service locator like GetIt is a convenient way to provide services throughout your app

We use the locator to register our PackageInfoService
We will be registering PackageInfoService as a lazy singleton. It only gets initialized when it’s first used. If you want it to be initialized on app startup, then use registerSingleton() it instead. Since it’s a singleton, you’ll always have the same instance of your service.



void setupLocator() {
locator.registerLazySingleton<PackageInfoService>(() =>
PackageInfoServiceImpl());
}

Using the service

Since we registered the service using the GetIt, we can get a reference to the service from anywhere in the code



class MyClass {
  PackageInfoService packageService = locator<PackageInfoService>();
}

Then you can use it within that class like this:

packageService.getSomeValue()
packageService.doSomething(someValue)

Unit tests for the service (Optional)

You can mock dependencies by creating an alternative implementation of the service class by making use of the Mockito package.

Brief:

A repository is for accessing objects in a collection-like manner.
A service is a class with methods for executing business logic, that may coordinate various other services (such as multiple repositories) to perform a single action or get a single result.

Source code.

In case it helped :)

Google Pay in Flutter

aseem wangoo — Sat, 20 Aug 2022 03:36:45 +0000

In case it helped :)

We will cover briefly:

What is Google Pay
Integration of Google Pay
Payment results
UI elements

What is Google Pay

Google Pay (known as G Pay) is a digital wallet platform and online payment system developed by Google to power in-app, online, and in-person contactless purchases on mobile devices. Users in the United States and India can also use an iOS device, albeit with limited functionality. In addition to this, the service also supports passes such as coupons, boarding passes, campus ID cards, car keys, event tickets, movie tickets, public transportation tickets, store cards, health records, and loyalty cards.

Google Pay logo

How it works

Inside the app, when a user taps the Google Pay button, they see a payment sheet that displays the payment methods saved to their Google Account. Users can quickly select a payment method, add an optional shipping address, or add new information before finalizing the payment.

Google Pay payment flow

The user taps the G Pay button and sees a payment sheet with a list of supported payment methods.
The user selects a payment method and G Pay returns a payment token for the selected method to the app.
The app submits the payment token to the backend
The backend processes the purchase and sends the payment token to the Payment Service Provider (PSP)

G Pay integrates with these payment processors (PSP).

Integration of Google Pay

We will be looking to the pay package for integration of Google Pay. This package takes care of both Apple Pay and Google Pay.

Under the hood, this package uses the Google Pay API. The things required to set up the Pay API will eventually be required to integrate the pay package

Setup:

Check out their integration requirements here. It basically mentions their environments, brand guidelines, and other stuff.
Check out their request for production access here, wherein you set up access to Google Wallet API and other checklists.

Now comes the setting up of your code.

Internally Google API requires the following Gradle dependency (from android native) which is handled by the



implementation "com.google.android.gms:play-services-wallet:18.0.0"

Hence, we need to change the following in the build.gradle of your app



minSdkVersion 19
compileSdkVersion 31

Include the package inside your pubspec.yaml



# pubspec.yaml
dependencies:
  pay: ^1.0.10

ess to the GooglePayButton and the ApplePayButton

GooglePayButton

Google Pay Button

It’s a widget to show the Google Pay button according to the rules and constraints specified in PayButton.

This widget provides an alternative UI-based integration path that wraps the API calls of the payment libraries and includes them as part of the lifecycle of the widget. Hence:

The widget only shows if the Pay.userCanPay method returns true.

For instance, in case the code was running on iOS, then instead ApplePayButton will be shown (provided you have set up the ApplePay configuration).

And tapping the button automatically triggers the Pay.showPaymentSelector method which starts the payment process.

This is what the GooglePayButton looks like.

Note: GooglePayButton



GooglePayButton(
  paymentConfigurationAsset: 'google_pay_config.json',
  paymentItems: _paymentItems,
  style: GooglePayButtonStyle.black,
  type: GooglePayButtonType.pay,
  margin: const EdgeInsets.only(top: 15.0),
  onPaymentResult: onGooglePayResult,
  loadingIndicator: const Center(
    child: CircularProgressIndicator(),
  ),
)

PaymentConfiguration

In the above snippet, we see PaymentConfiguration which is a required parameter. This parameter holds the information about a payment transaction.

It loads the configuration information needed for the payment transaction, which is based on the source. There are 2 options available for this:

from a remote server



PaymentConfiguration.fromJsonString(
    '{"provider": "apple_pay", "data": {}}');

folder like this

PaymentConfiguration from asset

Inside PaymentConfiguration

The PaymentConfiguration is a JSON in which each parameter stands for a request object as per the Google Pay



{
   "provider":"google_pay",
   "data":{
      "environment":"TEST",
      "apiVersion":2,
      "apiVersionMinor":0,
      "allowedPaymentMethods":[
         {
            "type":"CARD",
            "tokenizationSpecification":{
               "type":"PAYMENT_GATEWAY",
               "parameters":{
                  "gateway":"example",
                  "gatewayMerchantId":"gatewayMerchantId"
               }
            },
            "parameters":{
               "allowedCardNetworks":[
                  "VISA",
                  "MASTERCARD"
               ],
               "allowedAuthMethods":[
                  "PAN_ONLY",
                  "CRYPTOGRAM_3DS"
               ],
               "billingAddressRequired":true,
               "billingAddressParameters":{
                  "format":"FULL",
                  "phoneNumberRequired":true
               }
            }
         }
      ],
      "merchantInfo":{
         "merchantId":"01234567890123456789",
         "merchantName":"Example Merchant Name"
      },
      "transactionInfo":{
         "countryCode":"US",
         "currencyCode":"USD"
      }
   }
}

n either be apple_pay or google_pay
data : This is the core of the PaymentRequest which is a JSONObject itself
environment : This can either be TEST or PRODUCTION

There is a Test Card Suite provided by Google, which can only be used inside the TEST environment. For getting access to these test cards, join here

The test environment supports the

Visa, Mastercard, Discover, and Amex card networks
PAN_ONLY and CRYPTOGRAM_3DS authentication methods

apiVersion : The value is 2 for this specification.
apiVersionMinor : The value is 0 for this specification.
allowedPaymentMethods : This is of type PaymentMethod and specifies the support for one or more payment methods supported by the G Pay API.

PaymentMethod

This comprises 3 properties:

type : CARD is the only supported value for this parameter

2. tokenizationSpecification This is of type TokenizationSpecification and has two properties

TokenizationSpecification

type : For CARD payment method, use PAYMENT_GATEWAY.
parameters : Comprises a Gateway object which has two properties gateway and gatewayMerchantId.

Note: The values for Gateway depend on the supported gateway

3. parameters This is of type CardParameter and has 2 required and 5 optional parameters

CardParameter

allowedAuthMethods (required): A string array of fields that are supported to authenticate a card transaction. PAN_ONLY and CRYPTOGRAM_3DS

Note: We can only use these 2 under TEST environment

allowedCardNetworks (required): One or more card networks that you and Google Pay API support. eg AMEX, DISCOVER, INTERAC, JCB, MASTERCARD, VISA
billingAddressRequired : Set to true if you require a billing address. This can increase friction.
billingAddressParameters : This is of type BillingAddressParameters and has 2 parameters

BillingAddressParameters

format : Billing address format which is required to complete the transaction. eg MIN(Name, country code, and postal code) and FULL (long list of parameters)
phoneNumberRequired : Set to true if a phone number is required to process the transaction.

merchantInfo : This MerchantInfo object provides information about the merchant that requests payment data and comprises of

merchantName: This name is rendered in the payment sheet. In the TEST environment, or if a merchant isn't recognized, a “Pay Unverified Merchant” message is displayed on the payment sheet.

transactionInfo : This TransactionInfo object is used to present a payment authorization dialog. It comprises of

currencyCode (required) : ISO 4217 Alphabetic currency code

countryCode: ISO 3166–1 alpha-2 country code where the transaction is processed.

Payment Results

Once the G Pay button is clicked, it triggers the presentation of the payment sheet. Once the user makes a selection, the sheet closes a



{
   "apiVersion":2,
   "apiVersionMinor":0,
   "paymentMethodData":{
      "description":"YOUR CARD DESCRIPTION",
      "info":{
         "billingAddress":{
            "address1":"YOUR ADDRESS1",
            "address2":"YOUR ADDRESS2",
            "address3":"",
            "administrativeArea":"YOUR AREA",
            "countryCode":"YOUR COUNTRY",
            "locality":"YOUR LOCALITY",
            "name":"YOUR NAME",
            "phoneNumber":"YOUR PHONE NUMBER",
            "postalCode":YOUR POSTAL CODE,
            "sortingCode":""
         },
         "cardDetails":YOUR CARD DETAILS,
         "cardNetwork":"VISA"
      },
      "tokenizationData":{
         "token":"examplePaymentMethodToken",
         "type":"PAYMENT_GATEWAY"
      },
      "type":"CARD"
   }
}

ion : The value is 2 for this specification
apiVersionMinor : The value is 0 for this specification
paymentMethodData : This value is of type PaymentMethodData and comprises 4 parameters

PaymentMethodData

If the selection is successful, the result is fulfilled with a PaymentData object including relevant information about the payment method selected:

type : PaymentMethod type which was selected in the G Pay payment sheet
description : This contains the user-facing message describing the payment method
tokenizationData : This value is of type PaymentMethodTokentizationData and consists of 2 parameters

type : Type of tokenization applied to the selected payment method

token : Generated payment method token. eg PAYMENT_GATEWAY, DIRECT

info : This comprises 3 parameters billingAddress, cardDetails, and cardNetwork

The billing address is present in the form of an Address Object. CardDetails are present in a string that represents the details of the card. This value is commonly the last four digits of the selected payment account number.

CardNetwork is also a string that represents the payment card network of the selected payment. This value is one of the values present inside the format of allowedCardNetworks in CardParameters.

After Payment Result

You can now use this payment method information to perform the actual transaction. For instance, you can get the tokenizationData from the above response and extract the token from it.

Then, use this token to perform payment through your payment gateway. Check out the list of supported processors to find out more about specific implementation details on each processor.

UI Elements

GooglePayButton exposes one of the parameters called type (which is an enum) inside its definition. We can play with this param in order to display the Button as per the requirements. Following are the options provided:

GooglePayButtonType.pay (this is the default value)
GooglePayButtonType.book
GooglePayButtonType.buy
GooglePayButtonType.checkout
GooglePayButtonType.donate
GooglePayButtonType.order
GooglePayButtonType.plain
GooglePayButtonType.subscribe

For instance, in case you want the type to be GooglePayButtonType.subscribe then the result would be

Subscribe with GPay

If you prefer to have more control over each individual request and the button separately, you can instantiate a payment client and add the buttons to your layout independently, using RawGooglePayButton.



RawGooglePayButton(
  onPressed: onGooglePayPressed,
  style: GooglePayButtonStyle.white,
  type: GooglePayButtonType.plain,
)

The result of this button is

RawGooglePayButton

Once the user clicks this button, you can initiate the request using the Pay.withAssets which is an alternative to a Pay object with



// PayClient
Pay _payClient = Pay.withAssets([
  'YOUR_GOOGLE_PAY_JSON_FILE',
])
// On the Button Pressed
void onGooglePayPressed() async {
  final result = await _payClient.showPaymentSelector(
    provider: PayProvider.google_pay,
    paymentItems: _paymentItems,
  );  
}

The response which is the Google Pay token can be sent to your server / PSP

Source code.

In case it helped :)

How to add Flutter to Android App

aseem wangoo — Thu, 19 May 2022 08:39:18 +0000

In case it helped :)

We will cover briefly:

Adding flutter to the existing android app
Adding flutter to the new android app (Compose)

Note: This article assumes the reader knows about android

Add to App

It’s sometimes not practical to rewrite your entire application in Flutter. For those situations, Flutter can be integrated into your existing application piecemeal, as a library or module. That module can then be imported into your Android or iOS app to render a part of your app’s UI in Flutter.

The add-to-app feature supports integrating multiple instances of any screen size. Having multiple Flutter instances allows each instance to maintain an independent application and UI state while using minimal memory resources. See more on the multiple Flutters page.

Adding flutter to the existing android app

Flutter 3 was announced on 11th May 2022. There was a talk called What’s New In Flutter in which the speaker showed an application called Put Flutter to Work.

Put Flutter to Work

We will be adding the flutter feedback screen to the android app

Begin

Let’s open the app’s build.gradle and see the section under repositories

repositories {
    google()
    mavenCentral()
    String storageUrl = "https://storage.googleapis.com"
    maven {
        url '../../flutter_nps/build/host/outputs/repo'
    }
    maven {
        url "$storageUrl/download.flutter.io"
    }
}

We see the project depends upon a local path inside the flutter_nps
The same is observed if we open the project’s build.gradle
The project also depends upon the following flutter specific dependencies

debugImplementation 'com.example.flutter_nps:flutter_debug:1.0'
profileImplementation 'com.example.flutter_nps:flutter_profile:1.0'
releaseImplementation'com.example.flutter_nps:flutter_release:1.0'

As of now, the path flutter_nps/build/host/outputs/repo doesn’t exist in our machine, let’s investigate the flutter_nps project now

Add the Flutter module as a dependency

There are two ways to add the Flutter module as a dependency on your existing app. We will be going with the AAR (Android Archive)

The AAR mechanism creates generic Android AARs as intermediaries that package your Flutter module.

This packages your Flutter library as a generic local Maven repository composed of AARs and POMs artifacts.
We have the following folder structure for the flutter_nps app

Flutter_nps project

We use the following command for generating the AAR

flutter build aar

which also shows us the on-screen instructions to integrate

Flutter AAR integration steps

and now if we run our android app, it should work…🎉🎉🎉🎉

Note: The android app which was used in the above section doesn’t use the Compose. In the next section, we will integrate Flutter in a Compose app

Adding flutter to the new android app (Compose)

In this section, we will create a new android app but with Compose Activity.

Begin

Create New Project and Select EmptyComposeActivity and this will create a Compose project
We create a button component on the main screen

Compose Button

Let’s open the app’s build.gradle and under repositories add the following

repositories {
    google()
    mavenCentral()
    String storageUrl = "https://storage.googleapis.com"
    maven {
        url '../../flutter_nps/build/host/outputs/repo'
    }
    maven {
        url "$storageUrl/download.flutter.io"
    }
}

and also add the above to the project’s build.gradle

Inside the dependencies of app build.gradle add the following

debugImplementation 'com.example.flutter_nps:flutter_debug:1.0'
profileImplementation 'com.example.flutter_nps:flutter_profile:1.0'
releaseImplementation'com.example.flutter_nps:flutter_release:1.0'

Note: Try removing the profileImplementation in case the gradle gives any errors

The above steps implies that our new project requires the AAR from the flutter_nps (since we are reusing the same flutter project).
The steps for building the AAR remain the same as we saw in the above section.

Next, we create the Application class which extends the Application Also, register this inside our Manifest.xml under android:name="<YOUR APPLICATION CLASS>"

class AddFlutterApplication : Application() {
    lateinit var flutterEngine: FlutterEngine
    companion object {
        const val FLUTTER_ENGINE_NAME = "nps_flutter_engine_name"
    }
    override fun onCreate() {
        super.onCreate()
        flutterEngine = FlutterEngine(this)

        flutterEngine.dartExecutor.executeDartEntrypoint(
            DartExecutor.DartEntrypoint.createDefault()
        )

        FlutterEngineCache
            .getInstance()
            .put(FLUTTER_ENGINE_NAME, flutterEngine)
    }
}

We initialize the FlutterEngine which is the container through which Dart code can be run in an Android application
To start running Dart and/or Flutter within this FlutterEngine, we get a reference to this engine's DartExecutor and then use DartExecutor.executeDartEntrypoint(DartExecutor.DartEntrypoint)
Finally, we cache the flutter engine to be used by the FlutterActivity
FlutterEngineCache is useful for storing pre-warmed FlutterEngine instances. The ID of a given FlutterEngine can be any string

Since we are going to launch a Flutter activity, we will need to register it as an activity under Manifest.xml (otherwise it gives an error…)

<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
          android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|s creenLayout"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
/>

At last, we need to launch the FlutterActivity.

We do so by calling the startActivity from the context

context.startActivity(
  FlutterActivity
       .withCachedEngine(AddFlutterApplication.FLUTTER_ENGINE_NAME)
  .build(context)
)

This withCachedEngine can be used to configure an Intent to launch a FlutterActivity that internally uses an existing FlutterEngine that is cached and is identified using the cached engine ID (which is the same we used while registering inside the Application).

and now if we run our new android app, we see it working…🎉🎉🎉🎉

Source code.

In case it helped :)

Unit testing in React

aseem wangoo — Fri, 22 Apr 2022 09:56:49 +0000

In case it helped :)

We will cover briefly:

Write unit tests for components
Snapshot Testing with Jest

About Unit Testing

Unit testing is a testing method that tests an individual software unit in isolation. This involves verifying the output of a function or component for a given input.

In terms of React components, this means checking that the component

renders as expected for the specified props.

The main goal is to write tests that verify whether our component works as expected.

Intro to Jest

We will make use of jest in order to test our react components. As per the documentation

Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows you to write tests with an approachable, familiar and feature-rich API that gives you results quickly.

Let's see how to install it

Install the following dev dependencies

npm i --save-dev @testing-library/react react-test-renderer

Note: Make sure your react and react-test-renderer are using the same version

Write unit tests for components

We will start by creating a simple text component, which looks like this

Simple Text Component

It takes in a parameter text and displays using the h3 style tag onto the screen.

Take note of the data-testid. This will be used for testing this component

Let’s test this component now,

We create a folder called __tests__ which is present inside the components folder. Inside this, we create component-specific folders

Folder structure

We have all the components under components and all the tests under __tests__ This way we can create subfolders per component.

eg: For components/Text we have the corresponding test under components/__tests__/Text folder

All the tests should be comprised of the convention <TestName>.test.js This helps jest to understand the test files

So our test file would be Text.test.js

Next, we import the package testing-library/react along with the jest as

import { render, screen, cleanup } from "@testing-library/react";
import Text from "../../Text/Text";
import "@testing-library/jest-dom";

Note: we also need to import the component which we want to test. In our case, it's the Text

This is how our test looks like

test("should render text component", () => {
  render(<Text />);
  var textElem = screen.getByTestId("text");
  expect(textElem).toBeInTheDocument();
});

test: This creates a test closure, and takes in the param name (name of your test) and param fn (function for your test)

render: This comes from the testing-library/reactIt renders into a container that is appended to the document body.

In our case, we render the Text component

screen: This can be thought of as a document.body, which has every query that is bounded to the component you rendered in the previous call

We assigned a data-testid to our Text component, and we try to get that using getByTestId

Finally, we use expect and toBeInTheDocument to test that the element is present inside the rendered document.

The jest-dom utility library provides the .toBeInTheDocument() matcher, which can be used to assert that an element is in the body of the document, or not.

Run the tests using

npm test

Results from the unit test

And, we wrote our first test 🎉🎉🎉

Snapshot Testing with Jest

Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.

Any snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated as per the new version of the UI component.

Let’s test our Text component.

Snapshot testing with Jest

We will be making use of our react-test-renderer library which we installed in the previous step.

Instead of rendering the graphical UI, which would require building the entire app, we can use a test renderer to quickly generate a serializable value for your React tree.

We use renderer to create the Text component
Next, we save the response in the JSON using toJSON
Finally, we use the expect to compare the result using toMatchSnapshot which ensures that the value matches the most recent snapshot.
Run the tests using

npm test

Snapshot testing in React

Note: There will be no snapshots present when you run the snapshot tests for the first time. The console will tell to generate the snapshots

The snapshots are generated inside the __snapshots__ folder as

Snapshots generated

In case it helped :)

Source code.

Website: https://funwithreact.web.app/

Using compose destinations

aseem wangoo — Tue, 12 Apr 2022 14:47:15 +0000

In case it helped :)

We will cover briefly:

Current navigation in compose
Using compose destinations
(Optional) Modify existing test cases

Current navigation in compose

We get Compose Navigation from the Jetpack Compose. It provides a Navigation component that allows you to navigate between different composable.

Let’s see it in action using our code example.

Navigation Component

We have our NavigationComponent which is composable. You can assume this file contains all the routes in our app. As we can see, there are 3 routes here namely : Auth Home and AddTodo
The starting or the first route is the Auth and based on some logic(Sign in Google logic in our case) it redirects to the Home while passing an object user
All our routes need a Navigation Controller. The NavController is the central API for the Navigation component. It keeps track of the back stack of the screens in your app and the state of each screen.
We create a NavController by using the rememberNavController() method and pass it in our Views

val navController = rememberNavController()

Creating NavHost

Each NavController must be associated with a NavHost composable. The NavHost links the NavController with a navigation graph that specifies the composable destinations that you should be able to navigate between.
In order to tie this everything, we place the above NavigationComponent inside our main activity

Main Activity

For navigating a route, we use the navigate() method. navigate() takes a single String parameter that represents the destination’s route.

// Navigate to some screen
navController.navigate("screen_route")
// Pop everything up to the "home" destination off the back stack before
// navigating to the "friendslist" destination
navController.navigate("friendslist") {
    popUpTo("home")
}

// Pop everything up to and including the "home" destination off
// the back stack before navigating to the "friendslist" destination
navController.navigate("friendslist") {
    popUpTo("home") { inclusive = true }
}

Passing custom arguments

In order to do this, you add argument placeholders to your route, similar to how you add arguments to a deep link

navController.navigate(Destinations.Home.replace("{user}",userJson))

By default, all arguments are parsed as strings. Next, you should extract the NavArguments from the NavBackStackEntry that is available in the lambda of the composable() function.

composable(Destinations.Home) { backStackEntry ->
    val userJson = backStackEntry.arguments?.getString("user")
    // DO YOUR PROCESSING AND CONVERT TO USER OBJECT
    HomeView(navController, userModel = userObject!!)
}

If you are still reading, you may have realized is it too much work? And I agree with you. There is some boilerplate code, especially in the case of passing the custom arguments. Well, can this be improved? Yes!!!

Using compose destinations

Forget about the previous section, and start afresh. Assume you need to implement navigation inside your app.

Introducing Compose Destinations. As per the documentation

Compose Destination: A KSP library that processes annotations and generates code that uses Official Jetpack Compose Navigation under the hood. It hides the complex, non-type-safe and boilerplate code you would have to write otherwise. Most APIs are either the same as with the Jetpack Components or inspired by them.

Compose Destination

Setup

Install the dependencies inside build.gradle of your app

ksp 'io.github.raamcosta.compose-destinations:ksp:1.4.2-beta'
implementation 'io.github.raamcosta.compose-destinations:core:1.4.2-beta'

Add the following inside the plugin of build.gradle

plugins {
    id 'com.google.devtools.ksp' version '1.6.10-1.0.2'
}

Note: Compose Destinations takes advantage of annotation processing (using KSP) to improve the usability of Compose Navigation.

Include a kotlin block that defines the sourceSets for the generated code inside your build.gradle

kotlin {
    sourceSets {
        debug {
            kotlin.srcDir("build/generated/ksp/debug/kotlin")
        }
        release {
            kotlin.srcDir("build/generated/ksp/release/kotlin")
        }
    }
}

Implement Navigation

So you still have the routes : Auth Home and AddTodo Now let’s see how to implement navigation. You have your existing composables. Let’s annotate them

Compose Destination Annotation

We use the Destination annotation which comes from the Compose Destinations
We mark our AuthScreen with start = True which implies this destination is the start destination of the navigation graph
Next, we change the type of our navController to DestinationsNavigator

DestinationsNavigator is a wrapper interface to NavController.

For the other screens, let’s say AddTodo, we simply annotate it

@Destination
@Composable
fun AddTodoView(navController: DestinationsNavigator) {}

Let’s run the command below which generates all the Destinations

./gradlew clean build

If the result is a success, you should see the generated code inside the build/generated/ksp/debug/kotlin

Generated Destinations using Compose Destinations

Using NavHost

In case you realized, we no longer need the NavigationComponent class.

One final thing remaining is to add the NavHost inside our MainActivity

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContent {
      AppTheme {
          DestinationsNavHost(navGraph = NavGraphs.root)
      }
  }
 }
}

Our DestinationsNavHost includes the destinations of navGraph. It includes all the composables annotated with Destination inside NavGraphs generated file.
NavGraphs is a generated file that describes your navigation graphs and their destinations. By default, all destinations belong to the NavGraphs.root
Finally, for navigating to screens we still follow the same convention, but now we have the Destinations (like AddTodoViewDestination etc) mapped to each of the views.

// Navigate to add view screen
navController.navigate(AddTodoViewDestination)

// Pop everything up to and including the "auth" destination off
// the back stack before navigating to the "Home" destination
navController.navigate(HomeViewDestination) {
    popUpTo(AuthScreenDestination.routeId) { inclusive = true }
}

Passing custom arguments

Here’s why this gets interesting. Let’s see a case, for example, we have an Auth screen and we need to pass the user object to our Home screen.

Let’s create a Parcelable class GoogleUserModel This class basically contains the username and the email of the person once they signed in from google

@Parcelize
data class GoogleUserModel(
    val name: String?,
    val email: String?
) : Parcelable

We modify our Home composable as below

@Destination
@Composable
fun HomeView(
    navController: DestinationsNavigator,
    userModel: GoogleUserModel,
) {}

We add the parcelable classGoogleUserModel to the parameters and next, we again need to run our build command which updates the generated destination for the HomeView

Inside our AuthView once we get the required data from the API, we create the GoogleUserModel and pass it to the HomeViewDestination

navController.navigate(
    HomeViewDestination(
        GoogleUserModel(
            email = user.email,
            name = user.name,
        )
    )
) {
    popUpTo(route = AuthScreenDestination.routeId) {
        inclusive = true
    }
}

After we navigate to HomeView we pop the routes, including AuthView by specifying the AuthScreenDestination inside the popUpTo.

Modify existing test cases

We created some tests based on the NavigationComponent (when we were using it) but since we longer have it with us, we make use of the DestinationsNavigator

Since DestinationsNavigator is an interface, we create our own DestinationsNavigatorImpl the class.
Our DestinationsNavigatorImpl simply extends from the DestinationsNavigator class and we override all the methods from the DestinationsNavigator

DestinationsNavigatorImpl

Next, we simply replace the TestNavHostController with the DestinationsNavigatorImpl inside our existing tests,

// PREVIOUS
private lateinit var navController: TestNavHostController
// NOW
private var navController = DestinationsNavigatorImpl()

We replace NavigationComponentwith DestinationsNavHost inside our tests

composeTestRule.setContent {

     // PREVIOUS 
     NavigationComponent()

     // NOW
     DestinationsNavHost(navGraph = NavGraphs.root)
 }

Source code.

In case it helped :)

Deploy lambda using serverless

aseem wangoo — Tue, 05 Apr 2022 15:08:34 +0000

In case it helped :)

We will cover briefly:

Options for deploying lambda
Setup serverless
Create lambda (upload image to s3 bucket) using serverless
Deploy lambda using serverless

Options for deploying lambda

As of writing this article, there are two ways of deploying lambdas onto AWS

Deploy lambda using serverless

Using AWS SAM

The AWS Serverless Application Model (AWS SAM) is an open-source framework that you can use to build serverless applications on AWS

One of the key benefits of SAM is Local debugging and testing

It lets you locally build, test, and debug serverless applications that are defined by AWS SAM templates. which helps you catch issues upfront by providing parity with the actual Lambda execution environment

Using serverless

Develop, deploy, troubleshoot, and secure your serverless applications with radically less overhead and cost by using the Serverless Framework. The Serverless Framework consists of an open-source CLI.

Serverless allows us to focus on the code, while it takes care of the setting up policies, and provisioning of required infrastructure onto AWS

Setup serverless

To install serverless, follow here. Personally, I configured using the below

npm install -g serverless

Once installed you can access it by typing sls on your terminal
We now have access to multiple templates by this command

sls create --help

We will focus on the Go specific one, which is aws-go-dep Let's use this template to create a simple lambda. The final command for that is

sls create --template aws-go-dep --path upload-s3

--template is used to specify the template name

--path (Optional) is used to specify the directory in which your code is to be placed

We should see a folder structure like this

Golang serverless folder structure

By default, the aws-go-dep a template gives us two http (GET)based endpoints, which can be seen in the serverless.yml

functions:
  hello:
    handler: bin/hello
    events:
      - httpApi:
          path: /hello
          method: get
  world:
    handler: bin/world
    events:
      - httpApi:
          path: /world
          method: get

The equivalent files correspond to hello/main.go and world/main.go

In case you see errors, try to run the following commands

go mod init <SOME NAME HERE>
go mod tidy

This will help in setting the go.mod which is required for any go program

Create lambda (upload image to s3 bucket) using serverless

We will modify our lambda to upload an image to an S3 bucket.

We delete the unnecessary endpoints from the serverless.yml and unwanted folders like hello/main.go and world/main.go
Create a new folder called upload and inside it creates a file main.go

Our final upload lambda structure

We will define a request body struct that will accept filename and the body as input. (Note: the body would be the base64 encoder of an image)

For getting the base64 of any image, check here

type ImageRequestBody struct {
 FileName string `json:"filename"`
 Body     string `json:"body"`
}

We will parse the body from the input and decode it using DecodeString which returns the bytes represented by the base64 string

decoded, err := base64.StdEncoding.DecodeString(bodyRequest.Body)

All our image-related functions are inside img_utils.go. After decoding the image into bytes from the previous step, we now take those bytes and form a temporary file

func imageUpload(data []byte) {
  tmpFileName := fmt.Sprintf(`/tmp/%s`, bodyRequest.FileName)
  fileErr := ioutil.WriteFile(tmpFileName, []byte(data), 0644)

  // CALL THE UPLOAD FUNCTION
  UploadImage(tmpFileName)
}

In the first line, we are specifying the file at a location tmp . This is an important step and as per AWS documentation

The Lambda execution environment provides a file system for your code to use at /tmp. This space has a fixed size of 512 MB. Each time a new execution environment is created, this area is deleted.

Next, we write the file with the bytes using WriteFile

WriteFile writes data to a file named by filename. If the file does not exist, WriteFile creates it with permissions perm (before umask); otherwise WriteFile truncates it before writing, without changing permissions.

So now we have our temporary file created!

Now we will upload the file, onto the AWS S3 bucket. For that, we will be using the AWS GO SDK and in case you don’t have it installed follow this

go get github.com/aws/aws-sdk-go

We will pass our file to the upload function

func uploadToS3Bucket(file io.Reader, fileName string) {
 bucketName := os.Getenv("bucket_name")
 region := "us-east-2"
 conf := aws.Config{Region: &region}
 sess, _ := session.NewSession(&conf)
 uploader := s3manager.NewUploader(sess)
 upParams := &s3manager.UploadInput{
   Bucket: &bucketName,
   Key:    &fileName,
   Body:   file,
 }
 result, err := uploader.Upload(upParams)
}

We need to specify the region using aws.Config . In our case it was us-east-2.

We need to specify the region using aws.Config . In our case it was us-east-2.

session.Newsession returns a new Session created from SDK defaults, config files, environment, and user-provided config files.

aws-sdk-go gives us s3Manager which helps in uploading the file. It takes in

Bucket : Your AWS bucket name, in my case I get from serverless.yml environment variable

Key : Object key for which the PUT action was initiated. In our case, it's the filename.

Body : What is the body payload to send to S3. In our case, it's the file itself

Finally, using the above parameters, we call the Uploader.Upload
We return the response from the main.go back to the caller

Deploy lambda using serverless

Till now we were creating our lambda, but now it's time to deploy it onto AWS.

Let’s revisit our serverless.yml and make some changes

functions:
  upload:
    handler: bin/upload
    events:
      - httpApi:
          path: /uploadImage
          method: post

We add in the post endpoint uploadImage for our lambda

Next, since we are using the S3 bucket from inside lambda, we will add some IAMRoleStatements

custom:
  s3Bucket: test-bucket--aseem

iamRoleStatements:
    - Effect: Allow
      Action:
        - s3:*
      Resource: "arn:aws:s3:::${self:custom.s3Bucket}/*"

This specifies the bucket name using s3Bucket and allows executing the operations on this bucket

Finally, for specifying the environment variables, we make use of

environment:
    bucket_name: test-bucket--aseem

We will create a Makefile and put the following

deploy: clean build
 sls deploy --verbose
remove:
 sls remove

This will help in easing the lambda deployment, by simply calling

make deploy

If everything was successful, you should see something like this

Deploy lambda using serverless

For removing the lambda, we can call

make remove

For testing the lambda, use the

curl -X POST -H "Content-Type: application/json" \
-d '{"filename": "xyz.png", "body": "BASE_64_ENCODING_OF_AN_IMAGE"}' \
<YOUR_LAMBDA_URL>

Image uploaded to S3

Source code.

In case it helped :)

Using Mockito in Flutter

aseem wangoo — Mon, 28 Mar 2022 15:30:49 +0000

In case it helped :)

We will cover briefly:

Setup Mockito
Mocking repository using Mockito
Write unit tests for repository
Write unit tests for the view model
(Optional) Code coverage

Setup Mockito

There are often times when unit tests depend on classes that fetch data from live web services or databases. This is inconvenient for a few reasons:

Calling live services or databases slows down test execution.
It is difficult to test all possible success and failure scenarios by using a live web service or database.

Mockito

You can mock dependencies by creating an alternative implementation of a class. by making use of the Mockito package as a shortcut.

Following is the general idea behind Mockito

Rather than relying on a live web service or database, you can “mock” these dependencies. Mocks allow emulating a live web service or database and return specific results depending on the situation.

We use the mockito package for writing unit tests and for generating the implementation it relies on build_runner. Add the plugins to your pubspec.yaml file

# pubspec.yaml
dependencies:
  mockito: ^5.1.0
dev_dependencies:
  build_runner: ^2.1.7

Detailed description here.

Mocking repository using Mockito

Before starting this, let's see the architecture which we used for our app

The architecture used in the app

For each of the screens, we have the following:

Repository: Which handles our business logic
ViewModel: Bridge between the UI and the repository
View: Actual screen visible to the user
Model: Response being cast to models, in order to be consumed in the view.

Repository tests using Mockito

This is what our home repository looks like,

abstract class HomeRepo {
  Future<CarouselModel> fetchData();
}
class HomeRepoImpl extends HomeRepo {
  @override
  Future<CarouselModel> fetchData() async {
    await Future.delayed(const Duration(milliseconds: 1800));
    final resp = await  rootBundle.loadString('assets/data/first_screen.json');
    return carouselModelFromJson(resp);
  }
}

In the above snippet, we are creating a manual delay in order to simulate the network delay, and afterward, we simply fetch our JSON file (present under the assets).

For mocking our repository, we first create a file home_repo_test.dartunder test folder as below

Repository testing using Mockito

Note: The tests should follow test/folder_name/<name>_test.dart pattern

Inside the file, we add the annotation @GenerateMocks([HomeRepoTest]) to the main function to generate a MockHomeRepoTest class with mockito.

By annotating a library element (such as a test file’s main function, or a class) with @GenerateMocks, you are directing Mockito's code generation to write a mock class for each "real" class listed, in a new library.

// IMPORTS OMITTED FOR BREVITY
class HomeRepoTest extends Mock implements HomeRepo {}
@GenerateMocks([HomeRepoTest])
Future<void> main() async {
}

HomeRepoTest: The mock class which will be referred to in the generated class

MockHomeRepoTest: The generated mock class which implements the functions inside the HomeRepo

Next, generate the mocks running the following command:

flutter pub run build_runner build

The generated mocks will be located in home_repo_test.mocks.dart. Import this file to use them inside your test file.

We should see something like this if all the above steps were done correctly

Mockito generated class

Write unit tests for repository

Let’s write the unit tests for the repository now, with all the necessary setup done in the previous step.

We will initialize our mock repository inside the setUpAll

Future<void> main() async {  
  late MockHomeRepoTest homeRepo;
  setUpAll(() {
    homeRepo = MockHomeRepoTest();
  });
  test('test fetchData', () async {
    final model = CarouselModel();
    when(homeRepo.fetchData()).thenAnswer((_) async {
      return model;
    });
    final res = await homeRepo.fetchData();
    expect(res, isA<CarouselModel>());
    expect(res, model);
  });
  test('test fetchData throws Exception', () {
    when(homeRepo.fetchData()).thenAnswer((_) async {
     throw Exception();
    });
    final res = homeRepo.fetchData();
    expect(res, throwsException);
  });
}

We have two tests inside the repository: For the first one, we use the when, thenAnswerAPIs provide a stubbing mechanism. Once stubbed, the method will always return the stubbed value regardless of how many times it is called.

when: Creates a stub method response. Mockito will store the fake call and pair the exact arguments given with the response. The response generators from Mockito includethenReturn, thenAnswer, and thenThrow.

thenAnswer: Stores a function which is called when this method stub is called. The function will be called, and the return value will be returned.

We return the CarouselModel from the stub and use the expect to assert that actual matches matcher.

In our case, we expect it to be of type CarouselModel using isA

For the second test, we throw an Exception from the stub. We expect the actual matches throwsException which is a matcher for functions that throw Exception.

Write unit tests for the view model

We will first initialize our mock home repository and the view model inside the setUpAll

We pass in the Mock repository MockHomeRepoTestto our view model, as it expects the repository as a required parameter.

Future<void> main() async {
  late MockHomeRepoTest homeRepo;
  late HomeViewModel viewModel;
  setUpAll(() {
    homeRepo = MockHomeRepoTest();
    viewModel = HomeViewModel(repo: homeRepo);
  });
  test('test fetchData', () async {
    final model = CarouselModel();
   when(homeRepo.fetchData()).thenAnswer((_) async {
     return model;
   });
   await viewModel.fetchData();
   expect(viewModel.homeModel, model);
  });
}

In the test above, we use the when, thenAnswerAPIs

We call the homeRepo.fetchData() using the when and return the stub response as the CarouselModel

Next, we call the actual function fetchData() from inside the view model using viewModel.fetchData()

Finally, we expect it to be of type CarouselModel in the matcher, since we are setting the response from the repository to the model.

// HomeViewModel
Future<void> fetchData() async {
  isLoading = true;
  _homeModel = await repo.fetchData();
  isLoading = false;
  notifyListeners();
}

Code coverage

In case you are using Android Studio, you can simply right-click on the test and run tests with Coverage

Code Coverage using Android Studio

For VSCode, install the following extensions

Execute the following command

flutter test --coverage

This will generate the lcov.infowhich contains the coverage information.

Code Coverage

Now, click on the testing icon on the left side of the VSCode and you can see your code coverage. Good article here

Code coverage of view models

Source code.

In case it helped :)

Using Kafka in 2022

aseem wangoo — Thu, 10 Mar 2022 03:09:52 +0000

In case it helped :)

We will cover briefly:

Intro to Kafka
Setup Kafka on machine
Create Kafka Producer
Create Kafka Consumer
Running Producer and Consumer

Intro to Kafka

As per the docs, Kafka is an event streaming platform that can be used for collecting, processing, storing, and analyzing data at scale. Kafka is used by thousands of companies including over 60% of the Fortune 100.

Kafka is known for its excellent performance, low latency, fault tolerance, and high throughput, it’s capable of handling thousands of messages per second.

Kafka Overview

Usecases:

Process payments and financial transactions in real-time,
Continuously capture and analyze sensor data from IoT devices,
Collect and immediately react to customer interactions and orders,
Track and monitor cars, trucks, fleets, and shipments in real-time

Setup Kafka on machine

This section will help to set up Kafka on your machine.

Note: We are using a mac.

To install Kafka follow here. Navigate to the latest binary downloads, as of today, it’s Scala 2.13, and click on the link. It will open another webpage and click the link as below:

Download link for Kafka

Extract the folder and navigate to the folder (Downloads/kafka_2.12–3.1.0) in our case.

Note: Follow the below terminal commands at the path where you extract the Kafka zip.

sh bin/zookeeper-server-start.sh config/zookeeper.properties

Start Zookeeper

The above command starts Zookeeper . It is primarily used to track the status of nodes in the Kafka cluster and maintain a list of Kafka topics and messages.

Note: Starting with v2.8, Kafka can be run without Zookeeper. However, this update isn’t ready for use in production

Keep the above terminal open

Start Kafka broker service

Open another terminal at the above path(Downloads/kafka_2.12–3.1.0) and type

sh bin/kafka-server-start.sh config/server.properties

This starts the Kafka Broker. A Kafka cluster is made up of multiple Kafka Brokers. Each Kafka Broker has a unique ID (number). Kafka Brokers contain topic log partitions. Connecting to one broker bootstraps a client to the entire Kafka cluster. A Kafka cluster can have, 10, 100, or 1,000 brokers in a cluster if needed.

Keep this terminal open

Create a topic

Open a new terminal at the above path and type

sh bin/kafka-topics.sh --bootstrap-server localhost:9092 --create --topic test-topic

Kafka produces events across different machines, these events are organized and stored inside topics

In the above command, we are saying our

server is localhost:9092 and
topic created is test-topic

Verify the topic created

Open a new terminal at the above path and type

sh bin/kafka-topics.sh --bootstrap-server localhost:9092 --list

This should show you the test-topic

Create Kafka Producer

Note: Kafka Broker should be running in the terminal

Install dependencies

We will be using Eclipse IDE for creating our Kafka Producer

Kafka Producer

Create a Maven Project using the eclipse.
Go to the pom.xml, put in the following, and update your maven project

<dependencies> 

   <!-- Kafka Client -->
   <dependency>
    <groupId>org.apache.kafka</groupId>
    <artifactId>kafka-clients</artifactId>
    <version>3.1.0</version>
   </dependency>

   <!-- Simple logging -->
   <dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-api</artifactId>
    <version>2.0.0-alpha6</version>
   </dependency>
   <dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-simple</artifactId>
    <version>2.0.0-alpha6</version>     
   </dependency>
</dependencies>

This will add Kafka Client and slf4j to our project.

Create SampleProducer.java

Create a class called SampleProducer.java

public class SampleProducer {


 public SampleProducer() throws InterruptedException {
  Properties properties = new Properties();
  properties.put("bootstrap.servers", "localhost:9092");
  properties.put("key.serializer","org.apache.kafka.common.serialization.StringSerializer");
 properties.put("value.serializer","org.apache.kafka.common.serialization.StringSerializer");

  properties.put("kafka.topic", "test-topic");

  KafkaProducer kafkaProducer = new KafkaProducer(properties);
  int i=0;

  try {
   while (true) {
    i++;
    ProducerRecord producerRecord = new ProducerRecord("test-topic","key","message-" +i);

    Thread.sleep(3000);
    kafkaProducer.send(producerRecord);
   }
  } finally {
   kafkaProducer.close();
  }    
    }

}

We initialize the Properties with the following keys and values

bootstrap.servers : your local server host and port

key.serializer : for sending the serialized key over the network.

value.serializer : for sending the serialized value over the network.

kafka.topic : your Kafka topic

Next, we create an instance of KafkaProducer with the properties (as specified above)
We need to create a ProducerRecordfor sending the data to the Kafka producer.

This ProducerRecord takes in the topic name, key, and the value to be sent.

We send the record using kafkaProducer.
This block of code is placed inside the while loop, and after every 3 seconds, it sends a record to the Kafka broker.

Create KafkaProducerRunner.java

This will be class that invokes the above SampleProducer

public class KafkaProducerRunner {
 public static void main(String[] args) {
  SampleProducer sampleProducer = new SampleProducer();
 }
}

Create Kafka Consumer

Note: Kafka Broker should be running in the terminal

Create a class called SampleConsumer.java

public class SampleConsumer {

 public SampleConsumer() {
  Properties properties = new Properties();
  properties.put("bootstrap.servers", "localhost:9092"); 
  properties.put("kafka.topic", "test-topic"); 
  properties.put("key.deserializer","org.apache.kafka.common.serialization.StringDeserializer");
 properties.put("value.deserializer","org.apache.kafka.common.serialization.StringDeserializer");

 properties.put("group.id", "my-group");

  KafkaConsumer consumer = new KafkaConsumer(properties);
  consumer.subscribe(Arrays.asList(properties.getProperty("kafka.topic")));

       while(true) {
        ConsumerRecords<String, String> records = consumer.poll(Duration.ofMillis(100));
          for (ConsumerRecord record : records)  {
           System.out.printf("partition = %s, offset = %d, key = %s, value = %s\n", 
             record.partition(), record.offset(), record.key(), record.value());
          }
       }              

 }  
}

We initialize the Properties with the following keys and values

bootstrap.servers : your local server host and port

kafka.topic : your Kafka topic

key.deserializer : for deserializing the key over the network.

value.deserializer : for deserializing the value over the network.

group.id : specify the group id, used only on the Consumer side.

Next, we create an instance of KafkaConsumer with the properties (as specified above). This KafkaConsumer consumes the records from a Kafka cluster.
Next, we subscribe to the topic (which was created in the KafkaProducer) using subscribe
We get the data in the form of ConsumerRecords and we call poll every 100 ms in an infinite loop.
For each consumer record, we extract the partition, offset, key and value

Create KafkaConsumerRunner.java

This will be class that invokes the above SampleConsumer

public class KafkaConsumerRunner {
 public static void main(String[] args) {
  SampleConsumer sampleConsumer = new SampleConsumer();
 }
}

Running Producer and Consumer

If you followed the above steps correctly, you should have the below files

Let’s run the KafkaProducerRunner first, we should see something like this

Kafka Producer logs

Our Producer produces data every 3 seconds.

Let’s run the KafkaConsumerRunner, we should see something like this

Kafka Consumer logs

Our consumer receives the data, every 3 seconds and we print it onto the console

Source code.

In case it helped :)

Dart on AWS Lambda

aseem wangoo — Wed, 03 Nov 2021 15:33:22 +0000

In case it helped :)

We will cover briefly:

Dart runtime for AWS Lambda
Write lambda (using Dart)
Adding a POST endpoint
Deploy lambda on AWS

Dart runtime for AWS Lambda

With the introduction of custom AWS Lambda runtimes, it is possible to implement a runtime in any programming language.

AWS Lambda provides an HTTP API for custom runtimes to receive invocation events and send response data back within the Lambda execution environment.

Using the custom AWS Lambda runtime, we can also run Dart on Lambda with the recently published runtime for the Dart programming language.

AWS released a pub package aws_lambda_dart_runtime that packages the dart runtime to build lambda functions with AWS events.
It shows two ways to deploy the dart based lambda functions

Dart based lambda

In this article, we will go with the Serverless Framework approach

Write lambda (using Dart)

Pre-Requisite: You should have the aws cli configured in your machine. Check here

We will make use of the serverless framework to write lambda functions.

As per the docs,

Develop, deploy, troubleshoot and secure your serverless applications with radically less overhead and cost by using the Serverless Framework. The Serverless Framework consists of an open source CLI.

Serverless allows us to focus on the code, while it takes care of the setting up policies, and provisioning of required infrastructure onto AWS.

To install serverless, follow here. Personally, I configured using the below

npm install -g serverless

Setup for Dart

Currently, serverless has no support for dart, but there is a serverless plugin for Dart applications, called serverless-dart We will install serverless-dart using

npm i -D serverless-dart

Now, this plugin builds the dart lambda using docker, hence we also need to install docker

Note: In case something goes wrong, try installing the serverless framework, see above.

Create a Dart Project

Once the above setup is configured, it’s time to create a dart project. We make use of the below

npx serverless install \
  --url https://github.com/katallaxie/serverless-aws-dart \
  --name hello

This will download the source of a sample Dart application and unpack it as a service named hello in a directory called hello

Structure of the application

I didn’t need the .github/workflows hence, deleted the folder.
If we look into pubspec.yaml we will see the package aws_lambda_dart_runtime and build_runner under dev dependencies. We give both a version number.

dependencies:
  aws_lambda_dart_runtime: ^1.1.0
dev_dependencies:
  build_runner: ^2.1.0

Next, we look into the serverless.yml which is the brain behind this application. We modify the yml file with this

service: hello
provider:
  name: aws
  runtime: dart
  lambdaHashingVersion: 20201221
  memorySize: 128
package:
  individually: true
plugins:
  - serverless-dart
functions:
  hello:
    handler: main.hello
    events:
      - http:
          path: /hello
          method: GET

service: Name of the service (hello in our case)

functions: The functions to be exposed, along with their entry points. We currently have a function called hello Inside that, we specify the different configurations.

handler: This is the AWS registered handler and should be the same as inside our main.dart

events: The events that trigger this function. This includes http

http: REST API endpoint (API Gateway v1)

path: Path for this endpoint/hello and method being GET

Note: For detailed description: see here

Inspecting the main dart

We are left with one important file to inspect main.dart . We will change the contents of the file to below

// IMPORT OMITTED FOR BREVITY
void main() async {
 Handler&lt;AwsApiGatewayEvent> helloApiGateway=(context,event) async {
  final resp = {
    'message': 'Hello to ${context.requestId}',
    'host': '${event.headers.host}',
    'userAgent': '${event.headers.userAgent}',
  };
  final response = AwsApiGatewayResponse(
    body: json.encode(resp),
    isBase64Encoded: false,
    statusCode: HttpStatus.ok,
    headers: {
      "Content-Type": "application/json",
    },
  );
  return response;
};

Runtime()
..registerHandler&lt;AwsApiGatewayEvent>("main.hello", helloApiGateway)
..invoke();
}

Every dart program begins with the call to mainfunction.
The methods such as Handler, Runtime, etc are present inside the aws_lambda_dart_runtime package.

HelloApiGateway

We define a helloApiGateway which is the handler to be invoked once our API gets hit. This is of the type AwsApiGatewayEvent and exposes two important fields: Context and AwsApiGatewayEvent

The Context contains the Lambda execution context information. It comprises various parameters such as requestId etc.
AwsApiGatewayEvent is one of the events supported by the package. An Event is basically an abstraction for every event that can be ingested by a handler. It comprises of implementations such as AwsCognitoEvent , AwsS3Event , AwsKinesisDataStreamEvent etc

In our case, we register the event of type AwsApiGatewayEvent Hence, we can extract the details out of the incoming request. These details include headers , body , queryStringParameters etc

Finally, for sending the response back to the client, we make use of AwsApiGatewayResponse
We specify the body to the sent, along with the additional parameters such as isBase64Encoded , statusCode and headers

Register HelloApiGateway

Once the handler is written, now we need to register it to our Runtime

This is done using registerHandler which takes in two required parameters: a string name and our gateway
Under the name, we specify main.hello (which is the same as specified inside the serverless.yml)
Finally, we call invoke to run the Runtime in loop and digest events that are fetched from the API.

Adding a POST Endpoint

Inside our serverless.yml add another endpoint for the post-service

functions:
  hello:
    handler: main.hello
    events:
      - http:
          path: /hello
          method: GET
  postRequest:
    handler: main.postRequest
    events:
      - http:
          path: /postRequest
          method: POST

The post body our API accepts is of the following type

// POST BODY TO THE API
{
   "name":"aseem"
}

We will create a new endpoint called postApiGateway which is also of the type AwsApiGatewayEvent

Handler<AwsApiGatewayEvent> postApiGateway=(context,event) async {
   final requestBody = event.body;
   final requestModel = postRequestModelFromJson(requestBody);
   final responseBody = ResponseModel(
     message: 'Hello ${requestModel.name} from AWS Lambda!!',
   );
   final response = AwsApiGatewayResponse(
      body: responseModelToJson(responseBody),
      isBase64Encoded: false,
      statusCode: HttpStatus.ok,
      headers: {
        "Content-Type": "application/json",
      },
   );
   return response;
};

We extract the request body from the event convert it into a model and extract the name parameter.
We create ResponseModel with the message parameter.
Finally, we convert the model into JSON and send it back as AwsApiGatewayResponse

Inside our main dart, we register our post handler as

Runtime()
..registerHandler<AwsApiGatewayEvent>("main.hello", helloApiGateway)    
..registerHandler<AwsApiGatewayEvent>(
      "main.postRequest",
      PostRequest().postApiGateway,
)
..invoke();

Note: We specify main.postRequest (which is the same as specified inside the serverless.yml)

Deploy lambda on AWS

Till now, we have created our lambda function using dart. Now it’s time to deploy it.

Note: Make sure docker is running on your machine

We will create a Makefile and inside it put

.PHONY: build clean deploy
deploy:
 npx serverless deploy
remove:
 npx serverless remove

For deploying the lambda, we can call

make deploy

If everything was successful, you should see something like this

Lambda deployed successfully!!

For removing the lambda, we can call

make remove

Note: In case you don’t want to create a makefile, simply run npx serverless deploy

Dart Lambda Get endpoint

Source code.

In case it helped :)

Supercharge your Kotlin Project

aseem wangoo — Wed, 20 Oct 2021 15:02:12 +0000

In case it helped :)

This article shares some tips on things to include inside your kotlin project. We will cover briefly:

Ktlint
Detekt
Github workflow

Note: This article assumes the reader knows about Kotlin

Ktlint

Linting is the process of analyzing code for potential errors and one of the ways we can do that in Kotlin is using Ktlint. As per the documentation:

Ktlint is an anti-bikeshedding Kotlin linter

There are two ways to integrate Ktlint in a kotlin project.

jlleitschuh/ktlint-gradle
jeremymailen/kotlinter-gradle

We will be using ktlint-gradle, which is a wrapper over ktlint.

Setup

Head over to the project-level build.gradle
Inside the buildscripts add the latest version in ext and add the dependency under dependencies

ext {
   // https://github.com/JLLeitschuh/ktlint-gradle/releases
   ktlintPluginVersion = "10.2.0"
}
dependencies {
    classpath 'com.android.tools.build:gradle:7.0.0'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.32"

    ## KTLINT DEPENDENCY
    classpath "org.jlleitschuh.gradle:ktlint-gradle:$ktlintPluginVersion"    
}

Inside the repositories section, add this

repositories {
    google()
    mavenCentral()
    ## ADDED THIS FOR KTLINT
    maven {
        url "https://plugins.gradle.org/m2/"
    }
}

We create a separate file for configuring/customizing ktlint. Create a directory buildscriptsat the project level and inside it, create a new file called ktlint.gradle

apply plugin: "org.jlleitschuh.gradle.ktlint"
ktlint {
    // https://github.com/pinterest/ktlint/releases
    version = "0.42.1"
    reporters {
        reporter "plain"
        reporter "checkstyle"
        reporter "html"
    }
    outputColorName = "RED"
}

Finally, we apply this configuration to all our subprojects by adding the below inside our project-level build.gradle

subprojects {
    apply from: "../buildscripts/ktlint.gradle"
}

Click Sync Now If everything is successful, we should see a gradle task called ktlintformat

ktlintFormat Gradle task

Note: In case you are not able to see your gradle tasks, check this post

After running the task ktlintformat it outputs the results, (in case of errors, it will show the file which has the details of the files)

ktlintformat errors

Click on the .txt file and correct the errors accordingly.

Note: You will probably have a lot of file changes, since ktlintformat checks all your project files and corrects them as per the kotlin standard.

Detekt

Detekt is a static code analysis tool for the Kotlin programming language. It operates on the abstract syntax tree provided by the Kotlin compiler.

It analyzes the Kotlin code with multiple rule sets and flags the code that breaks any of its rules.

Setup

Head over to the project-level build.gradle
Inside the buildscripts add the latest version in ext and add the dependency under dependencies

ext {
   // https://github.com/detekt/detekt/releases
   detektVersion = "1.17.0"
}
dependencies {
    classpath 'com.android.tools.build:gradle:7.0.0'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.32"

    ## DETEKT DEPENDENCY
    classpath "io.gitlab.arturbosch.detekt:detekt-gradle-    plugin:$detektVersion"  
}

We create a separate file for configuring/customizing detekt. Create a directory buildscriptsat the project level (ignore if you created in the above step) and inside it, create a new file called detekt.gradle

apply plugin: "io.gitlab.arturbosch.detekt"

detekt {
    config = files("${rootProject.projectDir}/config/detekt/detekt.yml")

    reports {
        html.enabled = true
        xml.enabled = true
        txt.enabled = true
    }
}

Note: The config file detekt.yml doesn’t exist yet, we will see in the later step

Finally, we apply this configuration to all our subprojects by adding the below inside our project-level build.gradle

subprojects {
    apply from: "../buildscripts/detekt.gradle"
}

Click Sync Now If everything is successful, we should see a gradle task called detektGenerateConfig and run it

detekt generateConfig gradle task

After running the task, it generates the config file called detekt.yml

detekt config yml

which comprises of all the configurations, detekt comes with. We can customize it according to our preference.

Finally, we run the following in our project

./gradlew detekt

This will show you all the issues inside your project, along with the configuration name.

detekt issues in project

In case, you want to suppress some issue in a file, for instance, the above issues related to MagicNumber , we can simply go to the file and add

@file:Suppress("MagicNumber")

Github workflow

We saw in the above steps how to integrate ktlint and detekt inside our kotlin project.

In the last step, we will integrate both with our CI, ensuring the main branch, always remains standardized.

Add a .github directory inside the project.
Create a subdirectory workflows and inside it, create a file called android_build.yml

name: Android Build

on: push

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1

      - name: Set Up JDK
        uses: actions/setup-java@v1
        with:
          java-version: 1.11

      - name: Build Project
        run: ./gradlew assemble

      - name: Run Tests
        run: ./gradlew test

      - name: Lint Checks
        run: ./gradlew ktlintCheck detekt

In the last step, we include the ktlintCheck as well as detekt Since this job runs on push, we will be sure in case the code is according to our conventions.
We can also add a branch protection rule for requiring status checks to pass and selecting build

Branch protection rule

Source code.

In case it helped :)