DEV Community: Luiz Gabriel

Load Balancer

Luiz Gabriel — Thu, 03 Jul 2025 12:07:55 +0000

It is a tool for maintaining stability on your site, evenly distributing inputs to the web server in a balanced way.

The contents of this article will be based on the aws load balancer Elastic Load Balancing

What problem does Load Balancer solve?

As soon as your application becomes large, there will come a time when your software will have a huge number of requests and will have to efficiently and reliably process millions of simultaneous requests such as images, texts, videos, user data, etc.

The load balancer sits between the user and the web servers, serving as a facilitator and ensuring that all servers receive the load evenly, thus avoiding overloading.

An example use case could be when one of the servers goes down, so the load balancer redirects the reqs to another.

as shown in the image, the user is directed to the server via the load balancer, so users no longer have direct access to the server

Type of Load Balancers

Application Load Balancer (ALB)
Network Load Balancer (NLB)
Gateway Load Balancer (GLB)

Application Load Balancer (ALB)

The ALB has a component that acts as a receiver and is where the rules are applied.

Rules: It will determine how the load balancer will forward the requests to the destinations.

a group of targets classifies the targets registered in a group, so you can define rules to take specific requests only to a specific group.

Works with AWS Lambda IP addresses, instances and destination types
Support for HTTP, HTTPS and gRPC
Round-robin algorithm by default
Works on layer 7, the application layer.
proxy: Close the connection.

Big O Notations

Luiz Gabriel — Sun, 15 Dec 2024 20:08:22 +0000

It is a notation that determines how fast or slow an algorithm is running. This speed is not determined by seconds, but by how much the running time of an algorithm increases as the elements increase.

Big O is the relationship between time and size. Throughout the article you'll see graphs with these measures and you'll understand them better in practice. We have two types of complexity (spatial and temporal).

Temporal Complexity: Determines how long it will take to execute the algorithm proportional to the size of the input.

Spatial Complexity: Determines how much memory will be allocated to find the item we need.

Why study this?

With this you can determine how scalable an algorithm is
Big O always deals with the worst case, example below:

example:

You have a list and you want to search for an item but the item is at the end of the list. The worst case scenario is that you have to perform as many operations as possible until you find the data you want.

Execution times

Tempo Constante O(1):

regardless of the size of the array, it will always take the same amount of time

example:

Increment or decrement

function increment(value: number){
  return ++value
}

function decrement(value: number){
  return --value
}

Take a specific item

const fruits = ["apple", "orange", "grape", "banana"]

function getItem(items: string[], index: number) {
  return items[index]
}

const item = getItem(fruits, 2)
console.log(`fruit: ${item}`) // "grape"

Get the first element of an array

const animes = ["one piece", "dragon ball", "naruto", "demon slayer"]

function getFirstElement(items: string[]){
 return items[0]
}

Get the last item in an array

const animes = ["one piece", "dragon ball", "naruto", "demon slayer"]

function getLastElement(items: string[]){
 return items[item.length - 1]
}

let lastElement = getLastElement(animes)
console.log(`Last Element: ${lastElement}`)

Linear Time O(n):

Execution time grows proportional to the size of the array
Sorting and binary search algorithm
iteration using only one loop

examples:

To find the largest number in an array of 10 items, I will scroll through all the items until I find it.
In the worst case, the largest number will be the last one.

const numbers = [0, 4, 8, 2, 37, 11, 7, 48]

function getMaxValue(items: number[]) {
    let max = numbers[0];
    for (let i=0; i <= items.length; i++){
      if(items[i] > max) {
        max = items[i]
      }
    }

    return max;
}

let maxValue = getMaxValue(numbers)

console.log(`Max Value: ${maxValue}`)

Logarithmic Time O(log n)

Input size increases by n and execution time increases by log n, time grows in logarithmic proportion.
Remember that n is the number of elements in the array.
Input grows faster than execution time.

example:

we will perform a binary search in an array to find a specific item.

const numbers = [0, 9, 24, 78, 54, 88, 92, 100, 21, 90]

function binarySearch(nums: number[], target: number) {
    let left = 0;
    let right = nums.length - 1;

    while (left <= right) {
        let middle = Math.floor((right + left) / 2);

        if (nums[middle] === target) {
            return middle;
        } else if (nums[middle] < target) {
            left = middle + 1;
        } else {
            right = middle - 1;
        }
    }

    return -1;
}

let getTarget = binarySearch(numbers, 92)
console.log(`Target: ${getTarget}`)

To better understand logarithmic growth, let's look at it as follows: the array we're using in the example has 10 inputs, so:

log2(10) = 3.4
log2(20) = 4.3
log2(40) = 5.3

The graph below will make it easier to understand:

Linearithmic/quasilinear time O(n log n)

Time complexity of an algorithm that refers to the execution of logarithmic operations n times.
A mixture of O(log(n)) and O(n).
An example of a structure is the Merge Sort.
grows moderately.

One part scales in n and the other part scales in log(n), the example below is a lucky merge:

function merge(arr, left, middle, right) {

    const leftArraySize = middle - left + 1;
    const rightArraySize = right - middle;


    const leftArray = new Array(leftArraySize);
    const rightArray = new Array(rightArraySize);

    for (let i = 0; i < leftArraySize; i++) {
        leftArray[i] = arr[left + i];
    }
    for (let j = 0; j < rightArraySize; j++) {
        rightArray[j] = arr[middle + 1 + j];
    }

    let i = 0;
    let j = 0;
    let k = left;

    while (i < leftArraySize && j < rightArraySize) {
        if (leftArray[i] <= rightArray[j]) {
            arr[k] = leftArray[i];
            i++;
        } else {
            arr[k] = rightArray[j];
            j++;
        }
        k++;
    }

    while (i < leftArraySize) {
        arr[k] = leftArray[i];
        i++;
        k++;
    }

    while (j < rightArraySize) {
        arr[k] = rightArray[j];
        j++;
        k++;
    }
}

function mergeSort(arr, left = 0, right = arr.length - 1) {
    if (left < right) {
        const middle = Math.floor((left + right) / 2);

        mergeSort(arr, left, middle);
        mergeSort(arr, middle + 1, right);
        merge(arr, left, middle, right);
    }

    return arr;
}

function testMergeSort() {
    const arr1 = [64, 34, 25, 12, 22, 11, 90];
    console.log("Sorted array:", mergeSort([...arr1]));
}

testMergeSort();

Quadratic Time O(n²)

Execution time increases quadratically as the number of inputs increases.
Reading matrix.
Basically when 2 nested loops are required
Bubble Sort

example:

function createMatrix() {
    const matrix = [
      [2,4,5,],
      [89,0,12],
      [13,76,89]
    ];

    for (let i = 0; i < matrix.length; i++) {
      for (let j = 0; j < matrix[i].length; j++) {
        console.log(`Element at [${i}][${j}]: ${matrix[i][j]}`);
      }
    }
}

Time Exponential O(2ˆn)

With each element inserted into the input, the execution time will double.

an example of this code is fibonacci

function fibonacci(n) {
  if(n <= 1){
    return n
  } else {
    return fibonacci(n-1) + fibonacci(n-2)
  }
}

Factorial Time O(n!)

Execution time increases factorially according to the size of the input.

example:

Generate all permutations within an array

function factorialIterative(n) {

    if (n === 0 || n === 1) {
        return 1;
    }

    let result = 1;
    for (let i = 2; i <= n; i++) {
        result *= i;
    }

    return result;
}

i18n internationalization in React Native

Luiz Gabriel — Sun, 20 Oct 2024 03:12:41 +0000

Introduction

In a world where there are millions of application users, we need to understand that this goes beyond the code. By necessity we have to prepare our application to receive people from different countries and different languages and to do this we will use internationalization(i18n)

What is internationalization(i18n)?

The application of internationalization will help us to adapt our app to different languages, making it easy and avoiding many unnecessary changes or checks in our code.

The adapted elements will be texts and the lib we will use is: react-i18next

Implementation

install lib

yarn add i18next react-i18next

Create the files with the custom texts: create a folder with the languages and create the respective languages, we will use the following languages -> pt, en, es
Create a json for each language with all the texts

{
    "translation": {
        "name": "Nome",
        "welcome": "Seja Bem-Vindo",
        "choose": "Selecione um idioma",
        "portuguese": "Português",
        "english": "Inglês",
        "spanish": "Espanhol"
    }
}

{
    "translation": {
        "name": "Nombre",
        "welcome": "Bienvenido",
        "choose": "Seleccione un idioma",
        "portuguese": "Portugués",
        "english": "Inglés",
        "spanish": "Español"
    }
}

{
    "translation": {
        "name": "Name",
        "welcome": "Welcome",
        "choose": "Select a language",
        "portuguese": "Portuguese",
        "english": "English",
        "spanish": "Spanish"
    }
}

now that we have the json and the texts all assigned, we need to do the configuration:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// importing languages
import PtBR from "./languages/pt.json"
import EN from "./languages/en.json"
import ES from "./languages/es.json"

// Here are the languages used and the contents of each one
const resources = {
    pt: PtBR,
    en: EN,
    es: ES
};

// in this snippet is being initialized so we can use the lib 
i18n
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    // language resources
    resources,
    // here is the language you will use by default
    lng: 'pt',
  });

export default i18n;

Defining a language through a select

We will use the lib react-native-dropdown-picker to implement the dropdown, below is the implemented code

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, View } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import i18n from './internacionalization/i18n';

export default function App() {
// it is important to use the hook useTranslation(), it already updates the texts
// as soon as the user makes a change
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    { label: t('portuguese'), value: 'pt' },
    { label: t('english'), value: 'en' },
    { label: t('spanish'), value: 'es' },
  ]);

  return (
    <View style={styles.container}>
      <Text style={styles.greeting}>{t('welcome')}</Text>
      <Text style={styles.name}>{`${t('name')} Luiz Gabriel`}</Text>
      <View style={styles.dropDown}>
        <DropDownPicker
          open={open}
          value={value}
          items={items}
          setOpen={setOpen}
          setValue={setValue}
          onChangeValue={(value) => {
            // this function changes the language on the i18n
            i18n.changeLanguage(value);
          }}
          setItems={setItems}
          placeholder={t('choose')}
        />
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  dropDown: {
    marginTop: 20,
    paddingHorizontal: 40,
  },
  greeting: {
    fontSize: 30,
    fontWeight: 'bold',
  },
  name: {
    fontSize: 20,
  },
});

Defining language by user location

before getting the location you need to ask the user for permission
We will use the lib expo-location
install the library

npx expo install expo-location

config your app.json

{
  "expo": {
    "plugins": [
      [
        "expo-location",
        {
          "locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location.",
          "locationAlwaysPermission": "Allow $(PRODUCT_NAME) to use your location",
          "locationWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location"
        }
      ]
    ]
  }
}

solution below

import { StatusBar } from 'expo-status-bar';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, View } from 'react-native';

import i18n from './internacionalization/i18n';

import * as Location from 'expo-location';

export default function App() {
  const { t } = useTranslation();

  const setLanguageByLocation = async (latitude, longitude) => {
    try {
      // geocoding a location to a postal address      
const geocode = await Location.reverseGeocodeAsync({ latitude, longitude });
      // return country code
      const country = geocode[0]?.isoCountryCode;
      const countryToLanguage = {
        BR: 'pt',
        US: 'en',
        ES: 'es',
      };

      const language = countryToLanguage[country] || 'pt'; 
      // change the language
      i18n.changeLanguage(language);
    } catch (error) {
      console.error("Erro ao definir idioma pela localização", error);
    }
  };

  useEffect(() => {
    (async () => {
      // get permission to get location
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        console.log('Permissão para acessar a localização foi negada');
        return;
      }

      // get current location
      let location = await Location.getCurrentPositionAsync({});
      setLanguageByLocation(location.coords.latitude, location.coords.longitude)
    })();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.greeting}>{t('welcome')}</Text>
      <Text style={styles.name}>{`${t('name')} Luiz Gabriel`}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  greeting: {
    fontSize: 30,
    fontWeight: 'bold',
  },
  name: {
    fontSize: 20,
  },
});

Setting language by device language

we will use the lib expo-localization, I chose this lib because it provides access to locale data on the native device and under the hood uses libs like react-i18next
install lib

npx expo install expo-localization

config json

{
  "expo": {
    "plugins": ["expo-localization"]
  }
}

solution above

import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, View } from 'react-native';
import * as Localization from "expo-localization";

import i18n from './internacionalization/i18n';

export default function App() {
  const { t } = useTranslation();

  useEffect(() => {
    // get the current language of the device
    const langCode = Localization.getLocales()[0].languageCode;
    // if language is null, set language to default value
    const language = langCode || 'pt';
    // change language
    i18n.changeLanguage(language);
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.greeting}>{t('welcome')}</Text>
      <Text style={styles.name}>{`${t('name')} Luiz Gabriel`}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  greeting: {
    fontSize: 30,
    fontWeight: 'bold',
  },
  name: {
    fontSize: 20,
  },
});

Explaining what i18n is
Setting the language manually
Setting the language by user location
Set app language according to device language

Linkedin: Luiz Gabriel Rebelatto Bianchi
Github: Luizrebelatto

Stack Screen + Bottom Tab Navigation + Stack Screen

Luiz Gabriel — Tue, 15 Oct 2024 11:51:17 +0000

Working with several navigations mixed together.

Introduction

In this article we will present how to work with the merging of different types of navigation. In this project we will implement the following scenario:

User starts on a screen with stack screen navigation, goes to one with tab navigation and when clicking on any button within the tab navigation component will be moved to stack screen

Implementation

Step 1: Installing the libraries

use the package manager of your choice

yarn add @react-navigation/native

npx expo install react-native-screens react-native-safe-area-context

yarn add @react-navigation/bottom-tabs

yarn add @react-navigation/native-stack

Step 2: Structure Project

├── src
│   ├── routes
│   │   ├── groupScreen.routes.tsx
│   │   ├── index.tsx
│   │   ├── navigation.types.ts
│   │   ├── stack.route.tsx
│   │   └── tab.route.tsx
│   └── screens
│       ├── ScreenOne
│       │   └── index.tsx
│       └── Tabs
│           ├── GroupTabs
│           │   ├── TabThree
│           │   │   └── index.tsx
│           │   └── TabTwo
│           │       └── index.tsx
│           └── TabOne
│               └── index.tsx
├── app.tsx

Step 3: Configuring route files

Create a folder routes

Config React Navigation

Create the route file that encompasses all the others

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import StackMainRoutes from './stack.route';

export default function Routes() {
  return (
    <NavigationContainer>
      <StackMainRoutes/>
    </NavigationContainer>
  );
}

Go to app.tsx and place the routes component there

import React from 'react';
import Routes from './src/routes';

export default function App() {
  return (
    <Routes/>
  );
}

Start by creating the navigation that appears first

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import TabRoutes from "./tab.route";
import ScreenOne from "../screens/ScreenOne";

export default function StackMainRoutes(){
    const Stack = createNativeStackNavigator();

    return (
        <Stack.Navigator 
            initialRouteName="screenOne"
            screenOptions={{ 
                headerShown: false, 
                gestureEnabled: false, 
            }}
        >
            <Stack.Screen name="screenOne" component={ScreenOne}/>
            <Stack.Screen name="tabRoutes" component={TabRoutes}/>
        </Stack.Navigator>
    )
}

Create the bottom tab navigation configuration file

With the routes file configured, you will call the tab routes navigation within StackMainRoutes
In the tabThree screen, the tabBar will be hidden, we'll use this getFocusedRouteNameFromRoute function to apply the screen check.

import React from "react";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import TabOne from "../screens/Tabs/TabOne";
import StackGroupRoutes from "./groupScreen.routes";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";

export default function TabRoutes(){
    const Tab = createBottomTabNavigator()

    return (
        <Tab.Navigator 
        screenOptions={({ route }) => ({
            headerShown: false,
            tabBarStyle: ((route) => {
                const routeName = getFocusedRouteNameFromRoute(route) ?? '';
                if (routeName === 'tabThree') {
                  return { display: 'none' };
                }
              })(route),
            tabBarShowLabel: false
          })}
        >
            <Tab.Screen name="groupScreen" component={StackGroupRoutes} options={{ title: "Group Tab" }}/>
            <Tab.Screen name="tabOne" component={TabOne} options={{ title: "Tab One" }}/>
        </Tab.Navigator>
    )
}

Create the internal tab navigation screen group

In this code below, the stack screen navigation of one of the navigations tabs is configured


import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import TabTwo from "../screens/Tabs/GroupTabs/TabTwo";
import TabThree from "../screens/Tabs/GroupTabs/TabThree";

export default function StackGroupRoutes(){
    const Stack = createNativeStackNavigator();

    return (
        <Stack.Navigator
            initialRouteName="user"
            screenOptions={{ 
                headerShown: false, 
                gestureEnabled: false, 
            }}
        >
            <Stack.Screen name="tabTwo" component={TabTwo}/>
            <Stack.Screen name="tabThree" component={TabThree}/>
        </Stack.Navigator>
    )
}

Link GitHub Repository

Setup UIKIT Without StoryBoard

Luiz Gabriel — Sun, 01 Sep 2024 21:12:44 +0000

First you need create a new project

Delete the file main from your project

after that we will have to clean some properties where it refers to file main
click on the symbol ➖ and delete the property Storyboard Name

Access the main file, go to "build settings" and search about the reference "main"
delete the value's property

access the file scene delegate
inside function "scene", we will add this code above

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
  guard let windowScene = (scene as? UIWindowScene) else { return }
  let window = UIWindow(windowScene: windowScene)
  let vc = ViewController()
  window.rootViewController = vc
  window.makeKeyAndVisible()
  self.window = window
}

To test if works it, access the viewController add this line inside the method viewDidLoad()

import UIKit

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .yellow
  }
}

Just execute and magic happens 🍏

Improve the Build Process of your Apps

Luiz Gabriel — Mon, 29 Jul 2024 18:25:23 +0000

First of all, let's understand what this tool is:

What is Fastlane?

It's an open-source tool that will help you improve the development process and the distribution of your android and ios applications. With this tool you can automate processes such as:

Automatically generate screenshots for use in stores
Distribute beta versions to testers
Sign your own code
Upload a new version to testflight

It is possible to use external plugins to implement new flows; these plugins are developed by the open-source community.

How to configure on android?

access your project and enter the android folder

cd myApp/android

Initialize fastlane

Fastlane init

Now! you have to do configurations:

In the terminal you will be asked to enter the package name found in the path NameOfApp/android/app/build.gradle and in the namespace field.
As we are working with android at the moment, we need to make some settings in google. We'll have to generate the json file with some settings.

Google Configuration

Open the google console
Activate the api of the project you are working on, if you don't have a project created, create it here.
Open the google service accounts and select the project you are working on.

Create google services

Fill in the details and click done
Copy the email address provided by the service and save it as we will need it later

Create the keys, click on the 3 dots under actions
Manage keys

Create new key -> JSON -> Create
We will place this json inside our project, place this file inside the android/fastlane folder and define a name for it
We need to give permission for our service to work

User permissions

Open the google console and go to users and permissions
Invite user -> enter the email address of the service
Set permissions to admin

Configuring the AppFile

json_key_file("android/fastlane/keys.json") # Path to the json secret

# find this data inside android/build.gradle, we use this to identify the app we are working on
package_name("com.nameofapp")

Installing an automatic version change plugin

access the path yourProject/android/fastlane
run this command

gem 'fastlane-plugin-increment_version_code'

Configuring FastFile

This file is where we'll have our fastlane action flow

fastlane_require 'dotenv'

default_platform(:android)

# esta linha faz a leitura do arquivo gradle.properties para
# pegar algumas informações de config
def getGradleProperty(property_name)
  gradle_properties_content = File.read('../gradle.properties')
  property_regex = /^#{property_name}=(.+)/
  match = gradle_properties_content.match(property_regex)
  match[1] if match
end

platform :android do
  desc "Deploy to test internal to Google Play"

  lane :deployBeta do
    pathKeyJson = "android/fastlane/keys.json"

    # aumentar versão do build
    previous_build_number = google_play_track_version_codes(
      package_name: "com.nameofapp",
      json_key: pathKeyJson,
      track: "internal",
    )[0]

    current_build_number = previous_build_number + 1

    increment_version_code(
      gradle_file_path: "./app/build.gradle",
      version_code: current_build_number
    )

    gradle(task: 'clean')
    gradle(
      task: 'bundleRelease',
      properties: {
        "storeFile" => "../app/release.keystore",
        "android.injected.signing.store.password" => getGradleProperty('MYAPP_UPLOAD_STORE_PASSWORD'),
        "android.injected.signing.key.alias" => getGradleProperty('MYAPP_UPLOAD_KEY_ALIAS'),
        "android.injected.signing.key.password" => getGradleProperty('MYAPP_UPLOAD_KEY_PASSWORD'),
      }
    )

    supply(
      json_key: pathKeyJson,
      package_name: "com.nameofapp",
      track: 'internal',
      skip_upload_metadata: true,
      skip_upload_images: true,
      skip_upload_screenshots: true,
      skip_upload_apk: true,
      skip_upload_aab: false
    )
  end
end

Create script package.json

"fastlane:android": "cd android/Fastlane && Fastlane deployBeta"

How to configure on ios?

access your project and enter the android folder

cd myApp/android

Initialize fastlane

Fastlane init

Tools we will use:

app_store_connect_api_key: Tool that allows authentication with App Store Connect, this improves security and simplifies the implementation process.
build_app: Used to generate an ipa file of our application.
upload_to_testflight: Upload the ipa file to testflight

Generate api key

Select user and access, select tab api keys
Generate api key
Choose a name
Select the type of access -> generate the key
Paste the key file into the path myApp/ios/fastlane

Configuring AppFile

# enter your app identifier
app_identifier("your app_identifier")

# enter your apple_id
apple_id("your apple_id")

Configuring FastFile

default_platform(:ios)

platform :ios do
  desc "Deploy App to Testflight"
  lane :upload_testflight_beta do
    build_app(
      workspace: "myApp.xcworkspace", 
      scheme: "myApp",
      silent: true,
      clean: true,
    )

    api_key = app_store_connect_api_key(
      key_id: "your key id",
      issuer_id: "your issuer id",
      key_filepath: "path to file auth key",
      duration: 1200,
      in_house: false
    )

    upload_to_testflight(
      api_key: api_key,
      skip_submission: true,
      ipa: "myApp.ipa",
      skip_waiting_for_build_processing: true,
    )
  end
end

Create script package.json

"fastlane:ios": "cd iod/Fastlane && Fastlane upload_testflight_beta"

The Power of Binary Search

Luiz Gabriel — Mon, 01 Jul 2024 01:51:52 +0000

We have the following scenario: We have been given the task of searching for the Product red water bottle in a supermarket stock, in this stock there are 10,000 registered products.

What is Linear Search?

It's a simple search algorithm that searches element by element sequentially, with the first element having index 0.
Imagine that it takes 1 second to go through each element and the desired product is in position 4,500, this would take 1:15h to find. A totally unfeasible process.
In large lists, the cost is higher the maximum number of attempts is equal to the size of the list.
execution time O(n) -> Execution time increases linearly with the size of the data input.

import Foundation

func linearSearch(array: [Int], key: Int) -> Int? {
    for index in 0..< array.count {
        if array[index] == key {
            return index
        }
    }
    return nil
}


let numbers = [5, 3, 8, 1, 2, 9, 4, 10 , 11]
if let index = linearSearch(array: numbers, key: 9) {
    print("Item found in the index \(index)")
} else {
    print("Item not found")
}

What is Binary Search?

This data structure has some characteristics such as:

To use it, the list must be sorted; if it is not sorted, you can use a sorting algorithm.
execution time O(log n) -> n is the number of elements in the list Many frameworks already have this implemented.
To calculate the number of attempts, log2(n) is used.
The first step is to define the highest point, the lowest point and the middle.

Left = 0 (start of array)

Right = array size minus 1

*Middle = (left + right) / 2 (always integer division)
*

OBSERVATIONS:

if left and right meet, the target does not exist in the array
if middle > target then right will swap places and go to a position before middle
if middle < target then left will swap places and move to a position after middle
if the middle is equal to the target, we find the result

Suppose you want to find the number 100 in the array below:

Set the initial values of the lower, higher and middle points

left = 0
right = array.count - 1 (7)
middle = (left + right) / 2 (3)

Our target is 100, so we compare the middle with the target:

middle < target, then we take the left and drag it 1 position in front of the middle

left = 4
right = array.count - 1 (7)
middle = (left + right) / 2 (5)

we'll do the checks and assignments again until we find the target
middle == target

left = 5
middle = (left + right) / 2 (6)
right = array.count - 1 (7)

When not to use Binary search:

List with little data, use linear search to avoid over-engineering
If you need to access the data sequentially, it's better to choose another strategy to apply.
If the list has a lot of deletions and insertions, it will be difficult to use because you will always need to sort it.
Where the data is distributed in several places

Leetcode Example

704. Binary Search

Given an array of integers nums which is sorted in ascending order, and an integer target, write a function to search target in nums. If target exists, then return its index. Otherwise, return -1.

You must write an algorithm with O(log n) runtime complexity.

Example 1:

Input: nums = [-1,0,3,5,9,12], target = 9
Output: 4
Explanation: 9 exists in nums and its index is 4
Example 2:

Input: nums = [-1,0,3,5,9,12], target = 2
Output: -1
Explanation: 2 does not exist in nums so return -1

Constraints:

1 <= nums.length <= 104
104 < nums[i], target < 104
All the integers in nums are unique.
nums is sorted in ascending order.

Answer

func search(_ nums: [Int], _ target: Int) -> Int {
    var left = 0
    var right = nums.count - 1

    // will run until left and right meet
    while left <= right {
        var middle = (right + left) / 2

        if nums[middle] == target {
            return middle
        } else if nums[middle] < target {
            // if middle < target, advance to a position in front of middle
            left = middle + 1
        } else {
            // if middle > target, move to a position behind middle
            right = middle - 1
        }
    }
    // if none is found, return -1 
    return -1
}

List Exercises Leetcode

List: Link
Repository with my solutions: Link

Contact Me:

How to create an npm package + CI/CD in 10 minutes

Luiz Gabriel — Wed, 12 Jun 2024 12:14:34 +0000

In this article we will create a template library for react native, after this tutorial you will know how to create any package.

Requirements

Have an npm account, if not create one https://www.npmjs.com
Have an github account, if not create one https://github.com

Step 1 - Create your project

npx create-expo-app name-template --template

go to project folder

cd nameOfProject

Step 2 - NPM Config

run the command

npm init

after run command, you nesse answer some questions about your package

package name: (app-template)
version: (1.0.0)
description:
git repository:
keywords:
author:
license: (ISC)

now you need authenticate your user

npm adduser

after that you need to remove the line 'private: true' inside the file package.json, with this action you package become public

Step 3 - Config CI/CD

Go to your github repository
actions -> new workflow
insert the codes below

// name of project
name: Publish Npm Package

// any update or pull request directed to the master will activateo workflow
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    // machine that will run
    runs-on: ubuntu-latest

    steps: 
      // go to repo
      - name: Checkout repository
        uses: actions/checkout@v2

       // Install version node.js
      - name: setup version node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18.20.2'

      - name: Install dependencies
        run: npm install --force

        // Authenticate to npm before publish
      - name: Authenticate to npm
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" > ~/.npmrc

        // Publish your package npm
      - name: Publish to npm
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npm publish --access public

repo github: https://github.com/Luizrebelatto/template-reactnative-setup
Linkedin: https://www.linkedin.com/in/luizgabrielrebelatto/
Github: https://github.com/Luizrebelatto

Content Mode | IOS Swift

Luiz Gabriel — Sat, 06 Jan 2024 12:47:40 +0000

In this article we will talk about the ways in which elements can be worked with within a view, the value of this property by default comes as .scaleToFill.

We use this property when we want to implement resizable controls. For example, instead of having to redraw every time, we use content mode so that the element adapts as necessary.

.scaleToFill

Fills the entire view, so it can lose proportion

.scaleAspectFit

Adjusts the content to fit the view while maintaining the aspect ratio, any remaining area is transparent

.scaleAspectFill

It fills the view while maintaining the proportion, but the element may go beyond the limits of the view.

.center

Centers the content and maintains the same proportions

.top

Aligns and centers the content at the top of the view

.bottom

Aligns and centers the content at the bottom of the view

.left

Aligns and centers the content on the left side of the view

.right

Aligns and centers the content on the right side of the view

.topLeft

Aligns content to the left at the top of the view

.topRight

Aligns content to the right at the top of the view

.bottomLeft

Aligns content to the left at the bottom of the view

.bottomRight

Aligns content to the right at the bottom of the view

.redraw

Indicates that the view needs to be redrawn every time the size is changed, we use this when the content of the view depends on the view

Thanks for read this article!

How to configure your react native app for the store

Luiz Gabriel — Fri, 19 May 2023 14:04:13 +0000

Settings to do in your application to publish it on the play store

To publish an app in play store you need to generate an aab or an apk file, play store recommends generating an aab for publication. In this article I will teach you how to generate both types of files.

The first step is to access your project folder:

cd nameOfProject

Since we will be generating the file for the play store, it will only be the android part.

Go to the android folder and then go to the app folder:

cd android/app

Now we need to create a certificate in order to be able to generate the apk and the aab:

The keytool is the tool used to generate and is found in jdk

Windows

With this command we generate the certificate in Windows

keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

MacOS

With this command we generate the certificate in MacOS

sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

The next step is to create a password of at least 6 characters, this password will be used for you to access the key.

After creating and entering your password, you will be asked a few questions and at the end of the questions you have to confirm the creation of the key:

if you check the key is inside the path:

nameProject/android/app

Setting up Gradle variables

We need to add the variables below to the end of the file android/gradle.properties

now you replace the asterisks with your password

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****

Adding signing config to your app's Gradle config

edit the file android/app/build.gradle
Now you will find a piece of code where signingConfigs {} is present and paste the following

release {
  if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
    storeFile file(MYAPP_UPLOAD_STORE_FILE)
    storePassword MYAPP_UPLOAD_STORE_PASSWORD
    keyAlias MYAPP_UPLOAD_KEY_ALIAS
    keyPassword MYAPP_UPLOAD_KEY_PASSWORD
  }
}

In the block below inside buildtypes and inside release, you will add the following

signingConfig signingConfigs.release

Scripts to Generating the AAB and APK

APK

cd android && ./gradlew assembleRelease

AAB

cd android && ./gradlew bundleRelease

To make your life easier, I recommend that you create a script in package.json.

Example below:

"scripts": {
    "android:bundle": "cd android && ./gradlew bundleRelease",
    "android:apk": "cd android && ./gradlew assembleRelease"
  }

Where are these files generated?

APK is in the path:

nameOfProject/android/app/build/outputs/apk

AAB is in the path:

nameOfProject/android/app/build/outputs/bundle

References

https://reactnative.dev/docs/signed-apk-android#generating-the-release-aab

Follow me on LinkedIn and github

LinkedIn: https://www.linkedin.com/in/luizgabrielrebelatto/
Github: https://github.com/Luizrebelatto

Improving your React Native code using Path Aliases

Luiz Gabriel — Wed, 01 Mar 2023 02:38:53 +0000

When we develop an application with many folders the import paths are often too large and this affects the readability of your code as per the example below:

import Input from '../../../src/components/Input';
import HomeSvg from '../../../src/assets/home.svg';

To solve this problem we will have to make some settings:

1º Step: Libs Install

Install metro-react-native-babel-preset and babel-plugin-module-resolver as devDependencies

npm install metro-react-native-babel-preset --save-dev
yarn add metro-react-native-babel-preset -D

npm install babel-plugin-module-resolver --save-dev
yarn add babel-plugin-module-resolver -D

2º Step: Babel Configuration

alias: In will have the paths and the name that will be used when calling the specified path.
extensions: Extensions to the files that will be used

module.exports = function(api) {
  api.cache(true);
   return {
     presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],
     plugins: [
       "module-resolver",
       {
         alias: {
           // This needs to be mirroned in tsconfig.json/jsconfig.json
          components: "./src/components",
          svg: "./src/assets",
         },
         extensions: ['.js', '.jsx', '.tsx'],
       },
     ],
   };
};

3º Step: tsconfig/jsconfig configuration

Access the tsconfig.json or jsconfig.json file
If neither of these files exist, create them in the project root
paths: Add the same paths added in babel.config.js, if the called folder does not have an index calling all files it is necessary to put "/*"
baseUrl: Tell the typescript where to start importing

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      // This needs to be mirrored in babel.config.js
      "components": ["./src/components"],
      "svg/*": ["src/assets/*"],
    }
  },
  "extends": "expo/tsconfig.base"
}

Final Result

import Input from 'components/Input';
import HomeSvg from 'svg/home.svg';