DEV Community: Bahadır Kurul

Creating Image Optimizer With Rio

Bahadır Kurul — Tue, 06 Dec 2022 08:30:09 +0000

In this project we will upload an image and get image with different sizes.

We will use nanoid to create ids for images. Sharp to resize images and zod for models.

  # classes/Image/package.json

  "dependencies": {
    "@retter/rdk": "1.1.15",
    "nanoid": "3.3.4",
    "sharp": "0.30.6",
    "zod": "3.19.1"
  },
  "devDependencies": {
    "@types/node": "17.0.45",
    "@types/sharp": "0.31.0",
    "ts-node": "10.9.1"
  }

As you can see we will have 3 functions upload, get and remove.

# classes/Image/template.yml

init: index.init
getInstanceId: index.getInstanceId
methods:
  - method: get
    type: STATIC
    handler: image.get

  - method: upload
    type: STATIC
    inputModel: UploadInput
    handler: image.upload

  - method: remove
    type: STATIC
    inputModel: RemoveInput
    handler: image.remove

Models

Export uploadInput and removeImageInput to use as inputModel.

import { z } from 'zod'

const imageId = z.string().regex(/^[\dA-Za-z-]{5,50}$/)

export const uploadInput = z.object({
    content: z.string()
})

export const resizedImageParameters = z.object({
    id: z.string(),
    width: z
        .preprocess((value) => Number.parseInt(value as string, 10), z.number())
        .optional()
        .default(128),
    height: z
        .preprocess((value) => Number.parseInt(value as string, 10), z.number())
        .optional()
        .default(128),
    quality: z.enum(['low', 'default', 'medium', 'high']).optional().default('default'),
    fit: z.enum(['contain', 'cover', 'fill', 'inside', 'outside']).optional().default('inside'),
    content: z.any(),
})

export const removeImageInput = z.object({
    imageId: z.string()
})

export const parsedPath = z.object({
    imageId: z.string(),
    width: z.string().optional(),
    height: z.string().optional(),
    quality: z.string().optional(),
    format: z.string().optional(),
    fit: z.string().optional(),
})

export type UploadInput = z.infer<typeof uploadInput>
export type ResizedImageParameters = z.infer<typeof resizedImageParameters>
export type RemoveImageInput = z.infer<typeof removeImageInput>
export type ParsedPath = z.infer<typeof parsedPath>

Index.ts

Authorizer just returns statusCode: 200. And getInstanceId is like below.

// classes/Image/index.ts

export async function getInstanceId(): Promise<string> {
    return "default"
}

Image.ts

const imagePrefix = 'IMAGE_'
const defaultImage = 'defaultImage'

Upload Function

Here content is base64 encoded image. Checking if content is in base64 format.

// classes/Image/image.ts

const { content } = data.request.body as UploadInput
const projectId = data.context.projectId

// 10 Character ID
const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-', 10)
const imageId = nanoid();

if (Buffer.from(content, 'base64').toString('base64') !== content) {
    throw new Error('Content is not base-64 format')
}

After that uploading image with generated id and checking if upload succeeded.

// classes/Image/image.ts

const setFileResponse = await rdk.setFile({
        filename: imagePrefix + imageId,
        body: content,
})

if (!setFileResponse?.success) {
    throw new Error('Image could not be uploaded!')
}

Lastly our functions response is like below.

// classes/Image/image.ts

data.response = {
        statusCode: 200,
        body: {
            message: 'Image has been uploaded',
            id: imageId,
            url: `https://${projectId}.api.retter.io/${projectId}/CALL/Image/get/${imageId}_1024x1024_default_inside.png`
        },
}

Get Function

This function will be called by an url like this. Example

// classes/Image/image.ts

const path = data.context.pathParameters.path

if (!path) {
    throw new Error('Path does not exist')
}

const newPath = parsePath(path)

parsePath function is below. This function splits url path with _, ., x seperators. Example imageId_500x500_high_cover.png. This way we are giving parameters of function with url.

// classes/Image/image.ts
const parsePath = (path: string): ParsedPath => {
    // Get path
    const fullPath = path.split('/')[1]
    // Get before "." and split it every "_"
    const ids = fullPath.split('.')[0].split('_')
    if (ids.length < 2 || ids.length > 4 || !fullPath.includes('.')) {
        throw new Error('Invalid image path')
    }

    const quality = ids.length > 2 ? ids[2] : undefined
    const fit = ids.length > 3 ? ids[3] : undefined
    const parameterObject = {
        imageId: ids[0],
        width: ids[1].split('x')[0],
        height: ids[1].split('x')[1],
        quality,
        format: fullPath.split('.')[1],
        fit,
    }

    return parameterObject
}

After getting parameters on newPath we are getting our file like below.

// classes/Image/image.ts

if (!file?.success) {
    file = await rdk.getFile({
            filename: imagePrefix + defaultImage,
    })
}
if (!file?.success) throw new Error("Something went wrong while getting file!")

Now we will use sharp to resize our image with given parameters. Uploaded string contains data header like this data:image/png;base64,. We have to remove this or sharp throws an error.

// classes/Image/image.ts

const fileData: string = file.data
const uri = fileData.split(';base64,').pop()
const image = Buffer.from(uri, 'base64')

const parameters: ResizedImageParameters = resizedImageParameters.parse({
        content: image,
        id: newPath.imageId,
        width: newPath.width,
        height: newPath.height,
        quality: newPath.quality,
        fit: newPath.fit,
})

Calling getResizedImage function with parameters.

// classes/Image/image.ts

const resizedImage = await getResizedImage(parameters)

getResizedImage function is below. This function is outside our get function.

// classes/Image/image.ts

const getResizedImage = async ({ 
        height, width, quality, content, fit 
    } : ResizedImageParameters): Promise<Buffer> => {
    const image = await sharp(content)
        .resize(width, height, {
            fit,
        })
        .toFormat('png', { quality: qualities[quality] })
        .toBuffer()

    return image
}

Finally returning resizedImage in response.

// classes/Image/image.ts

data.response = {
    statusCode: 200,
    body: resizedImage.toString("base64"),
    isBase64Encoded: true,
    headers: {
        "Content-Type": "image/jpg"
    }
}

Remove Function

Removing image with given imageId.

// classes/Image/image.ts

const { imageId } = data.request.body as RemoveImageInput

if (!imageId) throw new Error('Invalid remove request')

const deleteFileResponse = await rdk.deleteFile({
    filename: imagePrefix + imageId,
})

if (!deleteFileResponse?.success) {
    throw new Error('Image file could not removed')
}

data.response = {
    statusCode: 200,
    body: {
        message: 'Image has been removed.',
    }
}

And thats it. Here is all code for the project. Thanks.

References

Rio Docs
Zod Github
Nanoid Github
Sharp Github

Creating Simple Authentication With Rio

Bahadır Kurul — Mon, 28 Nov 2022 10:38:33 +0000

We will have 2 classes, Authenticator and User. Authenticator will be used for login and sending OTP mail. User will be used for keep user info for each user. Lets begin.

Authenticator Class

Authenticator will get an email on initial payload. On init we will save that email to state. And sendOTP will generate otp and send it to the email from state.

Dependencies

We will use mailjet to send otp mails and zod for models.

"node-mailjet": "5.1.1",
"zod": "3.19.1"

Models

Turn this zod models into Rio models by following instructions on this link.

// classes/Authenticator/types.ts

import { z } from 'zod'

export const initInputModel = z.object({
    email: z.string().email()
})

export const loginModel = z.object({
    otp: z.number()
})

// Optional
export const privateState = z.object({
    email: z.string().email(),
    otp: z.number()
})

export type InitInputModel = z.infer<typeof initInputModel>
export type Login = z.infer<typeof loginModel>
export type PrivateState = z.infer<typeof privateState>

Template.yml

You have to convert zod models above to rio models to use as an input model. As you can see we have models for init and login function.

# classes/Authenticator/template.yml

init: 
  handler: index.init
  inputModel: AuthInitInputModel
getInstanceId: index.getInstanceId
getState: index.getState
methods:
  - method: login
    type: WRITE
    inputModel: LoginModel
    handler: index.login

  - method: sendOTP
    type: WRITE
    handler: index.sendOTP

Index.ts

We will use mailjet to send mails. So let's configure mailjet.

// classes/Authenticator/index.ts

import mailjet from 'node-mailjet'

const mailjetClient = new mailjet({
    apiKey: 'YOUR_API_KEY',
    apiSecret: 'YOUR_API_SECRET'
});

Init Function

We are getting email here and saving it to state, later we will get email from state.

// classes/Authenticator/index.ts

export async function init(data: Data): Promise<Data> {
    data.state.private.email = data.request.body.email
    return data
}

GetInstanceId Function

Making instanceId same as email, this way we will not create a billion instances.

// classes/Authenticator/index.ts

export async function getInstanceId(data: Data): Promise<string> {
    return data.request.body.email
}

sendOTP Function

Then lets create a function that handles sending mails. This function gets email from state. And generating a six digit otp.

// classes/Authenticator/index.ts

export async function sendOTP(data: Data): Promise<Data> {
    try {
        const { email } = data.state.private
        const otp = Math.floor(100000 + Math.random() * 900000)
        await mailjetClient
            .post("send", { 'version': 'v3.1' })
            .request({
                "Messages": [
                    {
                        "From": {
                            "Email": "bahadir@rettermobile.com",
                            "Name": "Bahadır"
                        },
                        "To": [
                            {
                                "Email": email
                            }
                        ],
                        "Subject": "Greetings from Retter.",
                        "TextPart": "OTP Validation Email",
                        "HTMLPart": `OTP: ${otp}`,
                        "CustomID": "AppGettingStartedTest"
                    }
                ]
            })
        data.state.private.otp = otp
        data.response = {
            statusCode: 200,
            body: { emailSent: true },
        }
    } catch (error) {
        console.log(error)
        data.response = {
            statusCode: 400,
            body: { error: error.message },
        };
    }
    return data
}

Login Function

First checking if received otp is a match. If not just throws an error.

// classes/Authenticator/index.ts

const { otp: recivedOtp } = data.request.body as Login
const { otp, email } = data.state.private as PrivateState

if (recivedOtp !== otp) throw new Error(`OTP is wrong`);

After checking otp We are looking for an instance in User class with our email lookup key. If can't find it we are initializing a new instance. Checking if maybe initialization failed.

Giving email inside body because when user class initializing it will set email lookup key with this email and we will keep that email in state.

// classes/Authenticator/index.ts

// Get existing USER INSTANCE
let getUser = await rdk.getInstance({
    classId: "User",
    body: {
        email
    },
    lookupKey: {
        name: "email",
        value: email
    }
})

if (getUser.statusCode > 299) {
    // CREATE USER INSTANCE -> User class will connect email as lookup key itself
    getUser = await rdk.getInstance({
        classId: "User",
        body: {
        email
    }
    })

    if (getUser.statusCode > 299) throw new Error('Couldnt create user instance')
}

After that, generating custom token and Using instanceId as userId and returning it inside body.

// classes/Authenticator/index.ts

const customToken = await rdk.generateCustomToken({
    userId: getUser.body.instanceId,
    identity: 'enduser'
})

data.state.private.relatedUser = getUser.body.instanceId
data.state.private.otp = undefined
data.response = {
    statusCode: 200,
    body: customToken
};

Authorizer Function

Here we are allowing init and get. Allowing getting state if developer because state keeps ours otp. For login and sendOTP checking if we have instanceId, æction is "CALL".

// classes/Authenticator/index.ts

export async function authorizer(data: Data): Promise<Response> {
    const { methodName, identity, instanceId, action } = data.context

    switch (methodName) {  
        case 'INIT':
        case 'GET': {
            return { statusCode: 200 }
        }

        case 'STATE': {
            if (identity === 'developer') return { statusCode: 200 }
        }

        case 'login':
        case 'sendOTP': {
            if (instanceId && action === 'CALL') return { statusCode: 200 }
        }
    }

    return { statusCode: 403 };
}

User Class

Dependencies

I used uuid library to generate userId's. Instance id's will be created with this.

"uuid": "9.0.0",
"zod": "3.19.1"

Models

Turn this zod models into Rio models by following instructions on this link.

// classes/User/types.ts

import { z } from 'zod'

export const privateState = z.object({
    email: z.string().email(),
    userId: z.string()
})

export const userInitModel = z.object({
    email: z.string().email()
})

export type PrivateState = z.infer<typeof privateState>
export type UserInitModel = z.infer<typeof userInitModel>

Template.yml

You have to convert zod models above to rio models to use as an input model. We have input model for init function here.

# classes/User/template.yml

init: 
  handler: index.init
  inputModel: UserInitInputModel
getState: index.getState
getInstanceId: index.getInstanceId
methods:
  - method: getProfile
    type: READ
    handler: index.getProfile

Index.ts

GetInstanceId Function

Generating userId and making it instance id.

// classes/User/index.ts

import { v4 as uuidv4 } from 'uuid';

export async function getInstanceId(): Promise<string> {
    return uuidv4()
}

Init Function

Saving email and userId to state. And setting lookup key so we can find this instance with email.

// classes/User/index.ts

export async function init(data: Data): Promise<Data> {
    const { email } = data.request.body as UserInitModel
    data.state.private = {
        email,
        userId: data.context.instanceId
    } as PrivateState
    await rdk.setLookUpKey({ key: { name: 'email', value: email } })
    return data
}

GetProfile Function

This function just returns state because user data is in state.

// classes/User/index.ts

export async function getProfile(data: Data): Promise<Data> {
    data.response = {
        statusCode: 200,
        body: data.state.private,
    };
    return data;
}

Authorizer Function

State keeps user data so we don't want everyone to access it. And allowing getProfile if it fulfills the requirements.

// classes/User/index.ts

export async function authorizer(data: Data): Promise<Response> {
    const { identity, methodName,instanceId, userId } = data.context
    if (identity === "developer" && methodName === "getState") {
        return { statusCode: 200 };
    }
    if (identity === "enduser" && methodName === "getProfile" && userId === instanceId) {
        return { statusCode: 200 };
    }
    return { statusCode: 403 };
}

Here is the all code for the project .

Now you have an idea of how to create an authentication system. Im glad if I helped. Thanks!

References

Rio Docs
Zod Github
Mailjet Github
Uuid Github

How to Integrate and Write Ava Unit Test In Rio Project

Bahadır Kurul — Mon, 21 Nov 2022 08:35:59 +0000

Git -> https://github.com/retterio/Ava-UnitTest/tree/main

AVA is a test runner for Node.js. In this article we will learn how to integrate it to our Rio Project. As project we will use Rio template project created with "rio init". So let's dive into it.

Dependencies

First we should add required dependencies to our project. Add dependencies below to package.json in project directory.
After that save and install the dependencies.

{
    "@types/node": "14.17.2",
    "ts-node": "10.4.0",
    "tsconfig-paths": "^3.13.0",
    "dotenv": "16.0.0",
    "ava": "4.0.1",
}

Configuration

After adding dependencies, Ava needs a config file that lets us tell Ava where the test files are located. So let's create this config file.

ava.config.cjs

in project directory and add code below to that file.

module.exports = {
  timeout: '180s',
  files: ['**/__tests__/**/*.ava.ts', '**/__tests__/**/*.ava.ts', '**/__tests__/**/*.test.ts'],
  extensions: ['ts', 'js'],
  require: ['ts-node/register', 'tsconfig-paths/register', 'dotenv/config'],
  environmentVariables: {},
}

Now create a folder called "__tests__" inside desired class, for us this is the "Test" class. This folder will keep our test files. Inside this folder you can create your test files.

Writing Tests

Now we can begin testing! So create a file named "index.test.ava.ts", naming is important here. In config we told Ava where to search for tests and what to expect in file names. Now add code below to this file.

import { Data } from "@retter/rdk"
import test from 'ava'
import { cloneDeep } from 'lodash'

const getMockedRioData = (): Data => ({
    state: {
        public: {},
        private: {},
    }, 
    request: {},
    response: {},
} as any)

"getMockedData" is the data we will send to our functions. You can see we have state, request and response here. So let's create our target function and its unit test !

Test Your Response

Lets write a test that simply checking status code of our response

Function

export async function responseTest(data: Data): Promise<Data> {
    data.response = {
        statusCode: 200,
        body: { message: "Hello World!" },
    };
    return data;
}

** Scenario 1 **

test.serial('test that suppose to succeed', async (t) => {
    const data = getMockedRioData()
    await responseTest(data)
    t.is(data.response.statusCode, 200)
    t.is(data.response.body.message, "Hello World!")
})

Result

** Scenario 2 **

test.serial('Test that suppose to fail', async (t) => {
    const data = getMockedRioData()
    await responseTest(data)
    t.not(data.response.statusCode, 200)
})

Result

Test Your Request

Function

export async function requestTest(data: Data): Promise<Data> {
    const { name }  = data.request.body
    data.state.public.name = name
    data.response = {
        statusCode: 200,
    };
    return data;
}

Test

test.serial('Request Test', async (t) => {
    const data = getMockedRioData()
    data.request.body = {
        name: "Bahadir"
    }
    await requestTest(data)
    t.is(data.state.public.name, "Bahadir")
})

We sent name in our body, our function suppose to change our state with this input so in test we are checking if states name got equal with requests name

Finally to run test you can install Visual Studio Code extension called ava-launch or you can type npx Ava in terminal.

And that's it now you can create tests for your Rio projects. I hope you understand it :)

Thanks for reading this article. See you on the next one :)

References

Rio Docs -> https://docs.retter.io
Ava -> https://github.com/avajs/ava

How to Turn Zod Models Into Rio Models

Bahadır Kurul — Mon, 21 Nov 2022 08:34:03 +0000

Git -> https://github.com/retterio/ZodToRioModels/tree/main

Create a Rio template project with "rio init". Inside template project we have a class called "Test". Inside "Test" create a typescript file called "types.ts". This file will keep our zod models.

Before continuing let's add needed dependencies to our project. Add dependencies below to package.json inside project root. After adding, don't forget to run "npm i".

"devDependencies": {
    "zod-to-json-schema": "3.17.0",
    "ts-node": "10.4.0"
  },

Now we are ready to create a zod model. Let's add a zod model like below to "types.ts" that we just created..

 import { z } from 'zod'

export const person = z.object({
    name: z.string(),
    age: z.number(),
    email: z.string().optional()
})

export type Person = z.infer<typeof person>

We have a script to turn this zod model into Rio model. Script is right below. Create a folder called "scripts" inside "Test" class. Inside "scripts" create a typescript file called "export-models.ts". Add code below to that file.

import { zodToJsonSchema } from 'zod-to-json-schema'
import fs from 'fs'
import path from 'path'
import { ZodType } from 'zod'
import { person } from '../types'

const modelExporter = (t: ZodType<any>, name: string) => {
  const r = zodToJsonSchema(t, { name, $refStrategy: 'none' })
  fs.writeFileSync(path.join(__dirname, '..', '..', '..', 'models', `${name}.json`), JSON.stringify(r.definitions[name], null, 4))
}

modelExporter(person, 'Person')

modelExporter(zodModelName, newRioModelFileName). To run this script we will add a script into "classes/Test/package.json".

  "scripts": {
    "export-models": "ts-node scripts/export-models.ts"
  },

Now we can run our script in terminal with "npm run export-models". Before that be sure that there is "models" file inside project directory.

Input/Output

//Input types.ts
export const person = z.object({
    name: z.string(),
    age: z.number(),
    email: z.string().optional()
})

//Output Person.json
{
    "type": "object",
    "properties": {
        "name": {
            "type": "string"
        },
        "age": {
            "type": "number"
        },
        "email": {
            "type": "string"
        }
    },
    "required": [
        "name",
        "age"
    ],
    "additionalProperties": false
}

Now you can convert zod models into Rio models! Hope this article helped you.

Thanks!

References

Rio Models -> https://docs.retter.io/docs/projects/models
Zod Github -> https://github.com/colinhacks/zod
Zod-to-json -> https://github.com/StefanTerdell/zod-to-json-schema

Creating a Android Todo App With Rio Android SDK

Bahadır Kurul — Sat, 19 Nov 2022 15:16:01 +0000

Rio SDK Docs -> https://docs.retter.io/docs/sdks
Project Git-> https://github.com/retterio/rio-android-todo
Backend Git -> https://github.com/retterio/simple_todo_example

In this article we will create a todo app with rio android sdk. Im not going to go so deep into android app creation, we will mostly focus on how to use SDK. If you want to see how ui things done, go to github. So let's begin.

Installation

First we need to install SDK to our project. To do so, go to link and follow instructions. You can add maven into settings.gradle like this.

Initialization

Create class App and paste code below to it. We will init SDK here. Change projectId with yours. If you are using a custom domain, you need to set it like below. If necessary you can set region too. Inside AndroidManifest under application tag add android:name=".App".

import android.app.Application
import com.rettermobile.rio.Rio
import com.rettermobile.rio.service.RioNetworkConfig

class App : Application() {
    companion object {
        lateinit var rio: Rio
    }

    override fun onCreate() {
        super.onCreate()
        rio = Rio(
            applicationContext = applicationContext,
            projectId = "2g8eht73b",
            culture= "en",
            config = RioNetworkConfig.build {
                //region = RioRegion.EU_WEST_1
                //customDomain = "yourDomain"
            }
        )
    }
}

Main Activity

Now let's do simplest authentication. There is a function in my backend that returns a customToken. This function is inside class Authenticate.

Authentication

As you can see our function returns a custom token when we called.

export async function generateCustomToken(data: Data): Promise<StepResponse> {
  const { userId } = data.request.body
  data.response = {
    statusCode: 200,
    body: await rdk.generateCustomToken({
      userId,
      identity: 'enduser'
    })
  }
  return data
}

We will call this function under onCreate. Let's do so. We get classes from backend like below.

rio.getCloudObject(RioCloudObjectOptions(
    classId = "Authenticate",
    instanceId = "01gj4yxz2ax9txgsxjnxd4rhrf"
), onSuccess = { cloudObj ->
    cloudObj.call()
}, onError = { throwable ->
    Log.d("TAG", throwable!!.message.toString())
})

Inside onSuccess we can call our functions like below.

cloudObj.call<AuthResponse>(
    RioCallMethodOptions("generateCustomToken",body = AuthRequest()),
    onSuccess = {
        //Authenticating with `rio.authenticateWithCustomToken()`.
        rio.authenticateWithCustomToken(it.body!!.data!!.customToken.toString())
    },
    onError = {
        Log.e("", "")
    })

AuthResponse and AuthRequest are like models.

Auth.kt

data class AuthRequest (
    var userId: String = "userId",
    var identity: String? = "enduser"
)

data class AuthResponse(val data: Token? = null)
data class Token(val customToken: String?)

Get Todos

Now we are doing authentication. Let's get Todos. We will get todos inside onCreate.

// Get class
rio.getCloudObject(RioCloudObjectOptions(
    classId = "TodoProject",
    instanceId = "01gj501gb69yse4sbt0jp61vdq"
),
    onSuccess = { cloudObj ->
        //cloudObj.public.subscribe()
}, onError = { throwable ->
    Log.d("TAG", throwable!!.message.toString())
})

Subscibe is for listening live changes. Here we are listening public state changes.

cloudObj.public.subscribe( eventFired = { event ->
     // cloudObj.call()

}, errorFired = { fThrowable ->
    Log.d("TAG", fThrowable!!.message.toString() )
})

When public state changes we get todos from backend.

cloudObj.call<GetTodosResponse>(RioCallMethodOptions(
    method = "GetTodos"
), onSuccess = { response ->
    val todos = response.body!!.todos
    val listView: ListView = findViewById<View>(R.id.todosListView) as ListView
    listView.adapter = listViewAdapter(this, todos)
}, onError = {
    Log.d("TAG", it!!.message.toString() )
})

// app/src/main/java/com/retter/rettersdk/network/GetTodos.kt

data class GetTodosResponse(val success: Boolean, val todos: ArrayList<Todos>)
data class Todos(val todo: String, val id: Number)

Adding Todo

For my app I added a button to action bar. When this button is clicked it shows an alert dialog. Alert dialog has an input. When add is clicked we call our function.

// app/src/main/java/com/retter/rettersdk/MainActivity.kt

rio.getCloudObject(RioCloudObjectOptions(
    classId = "TodoProject",
    instanceId = "01gj501gb69yse4sbt0jp61vdq"
),
    onSuccess = { cloudObj ->
        cloudObj.call<UpsertTodoResponse>(RioCallMethodOptions(
            method = "UpsertTodo",
            body = UpsertTodoRequest(input.text.toString())
        ), onSuccess = { response ->
            Log.d("TAG", "succesfully added" )
        }, onError = {
            Log.d("TAG", "fError" + it!!.message.toString())
        })
    }, onError = { throwable ->
        Log.d("TAG", throwable!!.message.toString())
    })

// app/src/main/java/com/retter/rettersdk/network/UpsertTodo.kt
data class UpsertTodoRequest (
    var todo: String
)
data class UpsertTodoResponse(
    val success: Boolean, 
    val newTodo: ArrayList<Todos>, 
    val error: String
)

Edit and Remove Todo

I added button for every item in list view. To achieve this created a custom layout and custom adapter for list view. Editing and removing is done inside adapter class. You can find it on GitHub repository.

Editing Todo

To edit todos we don't have a separate function. In UpsertTodo, if todo with given id exists its changes todo.

Every item in list view has todo and id. We get selected id from list view inside adapter. We use alert dialog to edit todos. There is an input in alert dialog. input.text.toString() is the value of that input.

rio.getCloudObject(RioCloudObjectOptions(
    classId = "TodoProject",
    instanceId = "01gj501gb69yse4sbt0jp61vdq"
), onSuccess = { cloudObj ->
    cloudObj.call<UpsertTodoResponse>(
        RioCallMethodOptions(
            method = "UpsertTodo",
            body = EditTodoRequest(selectedId, input.text.toString())
        ), onSuccess = { response ->
            Log.d("TAG", "Succesfully edited." )
        }, onError = {
            Log.d("TAG", "fError" + it!!.message.toString())
        })
}, onError = { throwable ->
    Log.d("TAG", throwable!!.message.toString())
})

EditTodoRequest is inside UpsertTodo.kt like this.

class EditTodoRequest (
    var id: Number,
    var todo: String
)

Removing Todo

To remove we get id from list view as well. Then simply calling function that removes todos with id of todo will be removed.

rio.getCloudObject(RioCloudObjectOptions(
    classId = "TodoProject",
    instanceId = "01gj501gb69yse4sbt0jp61vdq"
), onSuccess = { cloudObj ->
    cloudObj.call<RemoveTodoResponse>(
        RioCallMethodOptions(
            method = "RemoveTodo",
            body = RemoveTodoRequest(selectedId)
        ), onSuccess = { response ->
            Log.d("TAG", "Succesfully removed." )
        }, onError = {
            Log.d("TAG", "fError" + it!!.message.toString())
        })
}, onError = { throwable ->
    Log.d("TAG", throwable!!.message.toString())
})

// app/src/main/java/com/retter/rettersdk/network/RemoveTodo.kt

data class RemoveTodoRequest (
    var id: Number
)
data class RemoveTodoResponse(val success: Boolean, val message: String)

Now you know how to create a simple todo application with Rio android SDK.

Here is the entire code for our project.

Thanks.

How To Integrate and Write Ava Unit Test In Rio Project

Bahadır Kurul — Thu, 17 Nov 2022 19:46:20 +0000

Git -> https://github.com/retterio/Ava-UnitTest/tree/main

AVA is a test runner for Node.js. In this article we will learn how to integrate it to our Rio Project. As project we will use Rio template project created with "rio init". So let's dive into it.

Dependencies

First we should add required dependencies to our project. Add dependencies below to package.json in project directory.
After that save and install the dependencies.

{
    "@types/node": "14.17.2",
    "ts-node": "10.4.0",
    "tsconfig-paths": "^3.13.0",
    "dotenv": "16.0.0",
    "ava": "4.0.1",
}

Configuration

After adding dependencies, Ava needs a config file that lets us tell Ava where the test files are located. So let's create this config file.

ava.config.cjs

in project directory and add code below to that file.

module.exports = {
  timeout: '180s',
  files: ['**/__tests__/**/*.ava.ts', '**/__tests__/**/*.ava.ts', '**/__tests__/**/*.test.ts'],
  extensions: ['ts', 'js'],
  require: ['ts-node/register', 'tsconfig-paths/register', 'dotenv/config'],
  environmentVariables: {},
}

Now create a folder called "__tests__" inside desired class, for us this is the "Test" class. This folder will keep our test files. Inside this folder you can create your test files.

Writing Tests

import { Data } from "@retter/rdk"
import test from 'ava'
import { cloneDeep } from 'lodash'

const getMockedRioData = (): Data => ({
    state: {
        public: {},
        private: {},
    }, 
    request: {},
    response: {},
} as any)

"getMockedData" is the data we will send to our functions. You can see we have state, request and response here. So let's create our target function and its unit test !

Test Your Response

Lets write a test that simply checking status code of our response

Function

export async function responseTest(data: Data): Promise<Data> {
    data.response = {
        statusCode: 200,
        body: { message: "Hello World!" },
    };
    return data;
}

** Scenario 1 **

test.serial('test that suppose to succeed', async (t) => {
    const data = getMockedRioData()
    await responseTest(data)
    t.is(data.response.statusCode, 200)
    t.is(data.response.body.message, "Hello World!")
})

Result

** Scenario 2 **

test.serial('Test that suppose to fail', async (t) => {
    const data = getMockedRioData()
    await responseTest(data)
    t.not(data.response.statusCode, 200)
})

Result

Test Your Request

Function

export async function requestTest(data: Data): Promise<Data> {
    const { name }  = data.request.body
    data.state.public.name = name
    data.response = {
        statusCode: 200,
    };
    return data;
}

Test

test.serial('Request Test', async (t) => {
    const data = getMockedRioData()
    data.request.body = {
        name: "Bahadir"
    }
    await requestTest(data)
    t.is(data.state.public.name, "Bahadir")
})

We sent name in our body, our function suppose to change our state with this input so in test we are checking if states name got equal with requests name

Finally to run test you can install Visual Studio Code extension called ava-launch or you can type npx Ava in terminal.

And that's it now you can create tests for your Rio projects. I hope you understand it :)

Thanks for reading this article. See you on the next one :)

References

Rio Docs -> https://docs.retter.io
Ava -> https://github.com/avajs/ava

How To Turn Zod Models Into Rio Models

Bahadır Kurul — Wed, 16 Nov 2022 22:04:11 +0000

Git -> https://github.com/retterio/ZodToRioModels/tree/main

Create a Rio template project with "rio init". Inside template project we have a class called "Test". Inside "Test" create a typescript file called "types.ts". This file will keep our zod models.

Before continuing let's add needed dependencies to our project. Add dependencies below to package.json inside project root. After adding, don't forget to run "npm i".

"devDependencies": {
    "zod-to-json-schema": "3.17.0",
    "ts-node": "10.4.0"
  },

Now we are ready to create a zod model. Let's add a zod model like below to "types.ts" that we just created..

 import { z } from 'zod'

export const person = z.object({
    name: z.string(),
    age: z.number(),
    email: z.string().optional()
})

export type Person = z.infer<typeof person>

import { zodToJsonSchema } from 'zod-to-json-schema'
import fs from 'fs'
import path from 'path'
import { ZodType } from 'zod'
import { person } from '../types'

const modelExporter = (t: ZodType<any>, name: string) => {
  const r = zodToJsonSchema(t, { name, $refStrategy: 'none' })
  fs.writeFileSync(path.join(__dirname, '..', '..', '..', 'models', `${name}.json`), JSON.stringify(r.definitions[name], null, 4))
}

modelExporter(person, 'Person')

modelExporter(zodModelName, newRioModelFileName). To run this script we will add a script into "classes/Test/package.json".

  "scripts": {
    "export-models": "ts-node scripts/export-models.ts"
  },

Now we can run our script in terminal with "npm run export-models". Before that be sure that there is "models" file inside project directory.

Input/Output

//Input types.ts
export const person = z.object({
    name: z.string(),
    age: z.number(),
    email: z.string().optional()
})

//Output Person.json
{
    "type": "object",
    "properties": {
        "name": {
            "type": "string"
        },
        "age": {
            "type": "number"
        },
        "email": {
            "type": "string"
        }
    },
    "required": [
        "name",
        "age"
    ],
    "additionalProperties": false
}

Now you can convert zod models into Rio models! Hope this article helped you.

Thanks!

References

Rio Models -> https://docs.retter.io/docs/projects/models
Zod Github -> https://github.com/colinhacks/zod
Zod-to-json -> https://github.com/StefanTerdell/zod-to-json-schema