Forem: Upsilon

What’s the App Development Cost in 2023?

Upsilon — Fri, 27 Jan 2023 08:33:46 +0000

If you're planning to build a mobile app in 2023, it's important to know how to get a realistic estimate for your project before taking the plunge. The cost of app development can get shaky as so many things affect the final price. Let’s go over the main points 👇

Ultimately, ensuring your mobile app is tailored specifically to meet user demand requires diligent forethought, not just in terms of how big your budget should be but also how long the process will take before launch.

💰 Although app development costs usually fall within a certain price range (30k-300k USD), estimates can vary depending on the individual project. So, analyze each factor carefully. Hence, when thinking about what developing an app can cost you, you must consider various points, such as:

🔹 the app type;
🔹 the design intricacy;
🔹 the required engineering hours;
🔹 the timeline and scope;
🔹 and more.

What else can make a difference in pricing? For instance, how you hire developers, the region your developers are from, and their level of expertise. It is vital to understand this cost landscape, both locally and worldwide, as it will strongly influence the price tag for creating an app. As such, based on the rates of Eastern European developers, outsourcing may be much more cost-effective than using the services of US-based developers.

🤔 As you see, calculating the cost of app development requires careful examination of factors like:

🔵 the people you hire;
🔵 app size and complexity;
🔵 the chosen platform;
🔵 how complicated the app design and implementation are;
🔵 how much time you’ll need for testing;
🔵 the money that’ll be needed after release for ongoing app maintenance and updates.

Taking all this into consideration when estimating the cost of developing a mobile application can help ensure you create a successful product without going over budget.

If you don’t know where to start with estimates on your own, it would be wise to get professional advice to come up with accurate numbers. You may also take advantage of free consultations or use the cost estimator calculators available across many platforms to get an idea of what outsourcing a mobile application may cost in 2023.

If you’d like to dive a little deeper into the peculiarities influencing the overall app pricing when calculating app development costs and find out how to get realistic numbers, keep reading here 👉

App Development Cost in 2023: Estimation Guide

React Native Animation Tutorial – Creating Animations with Reanimated

Upsilon — Tue, 24 May 2022 12:59:11 +0000

Animations are a big part of making user interface of applications easier to use and understand. In this article, we are going to have a look at the process of creating animations with React Native Reanimated.

Smooth animations are a big part of making applications more user-friendly and easy to understand. In this article, we are going to discuss the process of creating animations using React Native Reanimated.

React Native simplifies cross-platform application development in a significant way. It allows the developers to use a single codebase to build applications on Android and iOS, focusing primarily on the application code as a whole, without worrying about platform-specific APIs and quirks too much. But in spite of the simplified model, creating animations with React Native can still be quite challenging. So, here’s where the React Native Reanimated library comes in handy.

Overview - React Native Reanimated and How it Works

Reanimated is a React Native animation library that helps to build smooth animations and gestures. It has been designed to match the React Native’s API while being more accurate in defining interactions. Reanimated is a library that replaces the Animated API, providing APIs based on JavaScript, which are easier to use and run on the native thread, enhancing performance.

Most of the animation logic is dealt with by the JavaScript thread. Another important thing is that now it is possible to use worklets and hook-based animations. This allows you to write in JavaScript instead of using declarative codes, which are not as intuitive.

Benefits and Limitations

Reanimated version 2 has a number of improvements compared to version 1:

This model allows the animations and the entire application to perform better.
The animations are written in JS in the form of so-called “worklets,” which are pieces of JS code extracted from the main react-native code and run in a separate context on the main thread.
Due to the new API, you will need fewer “Animated Values” to create an animation in React Native.
The animations can be created in different ways: triggering animated change on a shared value or returning the animated value from the useAnimatedStyle hook.
The worklets can serve as event handlers. It is possible to define a separate worklet for handling each handler state.

Though Reanimated version 2 has improved a lot compared to Reanimated 1, it is still in its early days, so there can be some limitations:

It doesn’t support remote debugging. You can use Flipper for debugging your code, but connecting debuggers that run on the UI thread is not available.
Objects passed to worklets from React Native don’t pave the correct prototypes in JavaScript, which somewhat limits the ways you can use them.
Animating the virtual components of layout, like nested components, is not supported.

How To Create Animations Using React Native Reanimated

Now let’s have a look at some examples of creating animations using React Native Reanimated.

Example 1: Animated Contacts List

Install Node.js‍
Install yarn.
npm install yarn — global
Create a project
npx react-native init animatedApp
Navigate to the project.
cd animatedApp
Install React-Native-Reanimated and other dependencies.
yarn add react-native-reanimated
Starting a development server:
yarn start

Let's start by creating an animated list of your contacts. We will use @faker-js/faker to create fake users, which generates massive amounts of fake (but realistic) data. As a result, we’ll get a list of contacts with names and avatars and, thanks to animations, a nice UI with an animated header.

First, notice this bit:

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

RN's FlatList component isn't animatable by default, so we need to make it animatable using the createAnimatedComponent method by Reanimated. This allows us to pass animated props or styles to this component.

import faker, {GenderType} from '@faker-js/faker';
import * as React from 'react';
import {
  Dimensions,
  FlatList,
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

import {Colors} from '../colors';
import getRandomColor from '../utils/generateRandomColor';

const {width, height} = Dimensions.get('screen');

const COLUMNS = 2;
const ITEM_SIZE = width / 2;
const SPACING = 10;
const HEADER_SPACING = height * 0.3;
const HEADER_FONTSIZE = 74;

const AnimatedContactsScreen: React.FunctionComponent = () => {
  const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

  faker.seed(4);

  type PersonItem = {
    key: string;
    hasAvatar: boolean;
    avatar: string;
    firstName: string;
    lastName: string;
    initials: string;
    backgroundColor: string;
    text: string;
  };

  const data: PersonItem[] = [...Array(50).keys()].map(() => {
    const backgroundColor = getRandomColor();
    const text = Colors.WHITE;
    const hasAvatar = faker.datatype.boolean();
    const gender = faker.name.gender();
    const firstName = faker.name.firstName(gender as GenderType);
    const lastName = faker.name.lastName(gender as GenderType);
    return {
      key: faker.datatype.uuid(),
      hasAvatar,
      avatar: hasAvatar
        ? `https://i.pravatar.cc/200?u=${faker.datatype.uuid()}`
        : '',
      firstName,
      lastName,
      initials: `${firstName.substring(0, 1)}${lastName.substring(0, 1)}`,
      backgroundColor,
      text,
    };
  });

  const scrollY = useSharedValue(0);
  const headerHeight = useSharedValue(height);

  const onScroll = useAnimatedScrollHandler(event => {
    scrollY.value = event.contentOffset.y;
  });

  const textStyles = useAnimatedStyle(() => {
    return {
      fontSize: interpolate(
        scrollY.value,
        [0, HEADER_SPACING, headerHeight.value],

        [HEADER_FONTSIZE, 24, 24],
        Extrapolate.CLAMP,
      ),
    };
  });

  const headerContainerStyle = useAnimatedStyle(() => {
    return {
      marginBottom: interpolate(
        scrollY.value,
        [
          -1,
          0,
          HEADER_SPACING + HEADER_FONTSIZE,
          headerHeight.value + HEADER_FONTSIZE,
        ],
        [HEADER_SPACING + 1, HEADER_SPACING, 0, 0],
      ),
    };
  });

  const listHeaderStyle = useAnimatedStyle(() => {
    return {
      height: headerHeight.value,
    };
  });

  const renderItem = ({item}: {item: PersonItem}) => {
    return (
      <View
        style={[
          styles.itemStyle,
          {
            width: ITEM_SIZE,
            height: ITEM_SIZE,
            backgroundColor: item.backgroundColor,
          },
        ]}>
        {item.hasAvatar ? (
          <Image source={{uri: item.avatar}} style={styles.image} />
        ) : (
          <Text
            style={[
              styles.initials,
              {
                color: item.text,
              },
            ]}
            numberOfLines={1}
            adjustsFontSizeToFit>
            {item.initials}
          </Text>
        )}
        <LinearGradient
          colors={
            item.hasAvatar
              ? ['transparent', 'rgba(0,0,0,0.3)', 'rgba(0,0,0,.8)']
              : ['transparent', 'transparent']
          }
          style={[
            StyleSheet.absoluteFillObject,
            styles.nameContainer,
            {padding: SPACING},
          ]}>
          <Text
            numberOfLines={1}
            adjustsFontSizeToFit
            style={[
              styles.textName,
              {
                color: item.hasAvatar ? Colors.WHITE : item.text,
              },
            ]}>
            {item.firstName} {item.lastName}
          </Text>
        </LinearGradient>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <View
        style={[styles.main, styles.statusBar, {padding: SPACING}]}
        onLayout={ev => {
          if (
            headerHeight.value === ev.nativeEvent.layout.height ||
            headerHeight.value !== height
          ) {
            return;
          }
          headerHeight.value = withTiming(ev.nativeEvent.layout.height, {
            duration: 0,
          });
        }}>
        <Animated.View>
          <Animated.Text
            style={[
              styles.text,
              textStyles,
              {paddingRight: width / 4 - SPACING * 2},
            ]}
            numberOfLines={1}
            adjustsFontSizeToFit>
            Friends
          </Animated.Text>
          <Text style={styles.subtitle}>{data.length} contacts</Text>
        </Animated.View>
        <Animated.View style={headerContainerStyle} />
      </View>
      <AnimatedFlatList
        data={data}
        numColumns={COLUMNS}
        keyExtractor={item => item.key}
        scrollEventThrottle={16}
        onScroll={onScroll}
        ListHeaderComponent={<Animated.View style={listHeaderStyle} />}
        stickyHeaderIndices={[0]}
        renderItem={renderItem}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.WHITE,
  },
  main: {
    zIndex: 1,
    position: 'absolute',
    left: 0,
    right: 0,
    backgroundColor: Colors.WHITE,
  },
  statusBar: {
    paddingTop: 20,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  text: {
    color: Colors.TOMATO,
    fontSize: 54,
    fontWeight: '700',
    letterSpacing: -1,
  },
  subtitle: {
    color: Colors.TOMATO,
  },
  image: {
    width: '100%',
    height: '100%',
  },
  initials: {
    fontSize: 94,
    fontWeight: 'bold',
    opacity: 0.1,
  },
  itemStyle: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  nameContainer: {
    justifyContent: 'flex-end',
  },
  textName: {
    fontWeight: '600',
  },
});

export default AnimatedContactsScreen;

We want to animate the header based on the onScroll method in our FlatList. Thanks to a convenience hook useAnimatedScrollHandler, we can use the scrollY value to interpolate the header.

When we think of animation, we generally think of animating various styles. Reanimated gives us a useAnimatedStyle hook that allows us to animate styles using shared values.

In the example above, we use useAnimatedStyle to create a style that is dynamic based on our shared value, scrollY. We pass animated styles to Animated.View and Animated.Text, and as we scroll our contacts list, the header will increase or decrease (depending on which way we scroll).

This is how our animated contacts list looks:

Example 2: Comparing Pictures Using Gesture Handler

Let's continue working with animations with the following example. Imagine that we want to compare two photos. And to do this better, we need to enlarge one of the photos by swiping to the left or right.

Reanimated provides a useAnimatedGestureHandler hook that allows us to configure a gesture handler declaratively, and then we can provide that handler to a gesture handler component. If we are interested in handling the movement of a finger on the screen, we need to receive a continuous stream of touch events. For this purpose, PanGestureHandler from react-native-gesture-handler package can be used.

import 'react-native-gesture-handler';

import * as React from 'react';
import {
  Dimensions,
  ImageBackground,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';
import Animated, {
  interpolate,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const {width} = Dimensions.get('window');
const image =
  'https://images.pexels.com/photos/302896/pexels-photo-302896.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500';
const secondImage =
  'https://images.pexels.com/photos/302888/pexels-photo-302888.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
const bg =
  'https://images.pexels.com/photos/585750/pexels-photo-585750.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';

const IMAGE_HEIGHT = 300;
const HANDLER_SIZE = 6;

const ComparePhotoScreen = () => {
  const posX = useSharedValue(0);
  const gestureHandler = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
      ctx.startX = posX.value;
    },
    onActive: (event, ctx) => {
      posX.value = ctx.startX + event.translationX;
    },
  });

  const leftImage = useAnimatedStyle(() => {
    return {
      flex: interpolate(posX.value, [-width / 2, 0, width / 2], [0, 1, 2]),
    };
  });
  const rightImage = useAnimatedStyle(() => {
    return {
      flex: interpolate(posX.value, [-width / 2, 0, width / 2], [2, 1, 0]),
    };
  });

  return (
    <ImageBackground
      source={{uri: bg}}
      style={styles.container}
      blurRadius={80}>
      <StatusBar hidden />
      <View style={styles.main}>
        <Text style={styles.header}>Compare Photos</Text>
        <View style={styles.imgView}>
          <Animated.Image
            source={{uri: image}}
            style={[styles.imageStyle, {height: IMAGE_HEIGHT}, leftImage]}
          />
          <PanGestureHandler onGestureEvent={gestureHandler}>
            <Animated.View
              style={[
                styles.animatedContainer,
                {
                  width: HANDLER_SIZE,
                },
              ]}>
              <View style={styles.arrowContainer}>
                <MaterialIcons name={'arrow-left'} size={30} color="black" />
                <MaterialIcons name={'arrow-right'} size={30} color="black" />
              </View>
            </Animated.View>
          </PanGestureHandler>
          <Animated.Image
            source={{uri: secondImage}}
            style={[{height: IMAGE_HEIGHT}, styles.imageStyle, rightImage]}
          />
        </View>
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 20,
  },
  main: {alignItems: 'center'},
  header: {
    fontSize: 28,
    fontWeight: '700',
    marginBottom: 20,
    color: '#fff',
    opacity: 0.7,
  },
  imgView: {
    flexDirection: 'row',
    borderRadius: 16,
    overflow: 'hidden',
  },
  arrowContainer: {
    width: 60,
    height: 60,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    borderRadius: 30,
  },
  animatedContainer: {
    backgroundColor: 'transparent',
    zIndex: 9999,
    alignItems: 'center',
    justifyContent: 'center',
  },
  imageStyle: {
    resizeMode: 'cover',
    flex: 1,
  },
});

export default ComparePhotoScreen;

We need to dig into some of this code, though. The useAnimatedGestureHandler hooks allow us to configure our gesture handler based on various lifecycle hooks for the gesture, such as onStart, onActive, onEnd, and so on. The handler has a context object that we can use to pass information between the different lifecycle methods, which is quite useful for stateful gestures. We use the onStart method when the user starts to pan the handle, so we can attach the current progress value (or the progress value at the start of the pan) to the context object and use it later in the useAnimatedStyle hook for our photos.

Next, we use the onActive callback, which is called as the user is actively panning. This callback exposes an event object, as well as the previously mentioned context object. The event object will tell us how much the user has panned since the start via the event.translationX property. To determine the new progress value, we take the starting progress value and add to it the amount by which the handle's horizontal position has changed (e.g., (final value) = (starting value) + (change in value) ). Technically, this is all we need to enlarge or reduce the photo by swiping.

This is how our feature for comparing two photos looks:

If you want to study the code examples in more detail, you can do it in the repository on our Github. Here you will be able to find the whole code that we used and some extra components necessary to make everything work.

Conclusion

Hope that this article helped you learn more about the Reanimated library, and how it makes the creation of animations quicker and easier. Also, we created two animation examples to showcase some of the useful animation techniques and how they can be used together with Reanimated. Though Reanimated 2 is still in its early days, it has a bright and promising future.

Create a Slack Bot with TypeScript in 3 Steps

Upsilon — Tue, 17 May 2022 11:42:44 +0000

Today Slack has become a tool that more and more companies use for communication within their teams. Though Slack App Directory offers a great number of applications, sometimes it is necessary to create a custom bot. In this guide you will be able to learn how to create a simple Slack bot of your own.

Today more and more companies use Slack to ensure communication within their teams. Slack includes different features, including direct messages, private and public channels, voice and video calls, file searching, and bot integrations.

This article is a tutorial on how to make a Slack bot. A Slack bot is a program that can perform different tasks, like sending messages, files, pictures, opening modals, sending emoji reactions, alerting on various events, etc.

Why create a Slack bot?

Though Slack offers a lot of applications for any purpose in the Slack App Directory, there can still be a need for custom Slack Bots, as every business has its own needs and requirements. Sometimes it is extremely hard to find a suitable option from the existing ones. In this case, it can be a great idea to create a Slack bot of your own.

There are many ways Slack bots can be used to simplify work processes or to increase revenue, so let’s recall some of them.

Automating business processes;
Integrating with the tools used for marketing, sales or project management;
Giving the users an option to perform actions without leaving Slack;
Providing support services;
Assistance in sales, allowing to place orders using a Slack bot;
Creating a fun tool that can be a part of your company's culture.

If you want to create your own bot, let’s take a look at an example of how to make a simple Slack bot.

Step 1: Initial Slack Bot Setup

For study purposes we’ll create a simple Slack bot that adds a new command to your workspace that mentions all admins in your workspace.

All code listed below can be found in our repository:

It’s assumed that you have Node.js installed on your computer. Open your favorite editor and start a new project. Create a package.json file in there and paste:

{
  "name": "slack-bot-example",
  "version": "0.1.0",
  "description": "",
  "private": true,
  "scripts": {
    "start": "ts-node index.ts"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@slack/bolt": "^3.10.0",
    "ts-node": "^10.7.0"
  }
}

We need ts-node as we use TypeScript (hope you do it as well), and @slack/bolt — official Slack package to create bots.

Now we need you to write actual code. Create index.ts file and paste:

import { App } from "@slack/bolt";

const SLACK_APP_TOKEN = "<PASTE ME>";
const SLACK_BOT_TOKEN = "<PASTE ME>";

const app = new App({
  appToken: SLACK_APP_TOKEN,
  token: SLACK_BOT_TOKEN,
  socketMode: true,
});

app.command("/admins", async ({ ack, client }) => {
  const { members } = await client.users.list();
  const admins = members!.filter((member) => member.is_admin);

  await ack({
    blocks: [
      {
        "type": "section",
        "text": {
          "type": "mrkdwn",
          "text": `${admins.map((admin) => `@${admin.name}`).join(", ")}`
        }
      },
    ],
    response_type: "ephemeral", // change to "in_channel" to make it visible to others
  });
});

app.start().catch((error) => {
  console.error(error);
  process.exit(1);
});

In general, Slack bot is simply an HTTP server that provides webhook endpoints and handles events sent by Slack. How Slack might reach your local machine HTTP server? Well, in this exact case it doesn’t as we use so called Socket Mode. It makes our application connect to Slack servers and listen to events from there instead of Slack connecting to our server. If there were no Socket Mode, we would have to use something like ngrok to expose our local port to the Internet. Read more about Socket Mode on official documentation.

As you can see, there are SLACK_APP_TOKEN and SLACK_BOT_TOKEN variables missing in index.ts, these are used to authenticate our application. In order to get them, we should register a new Slack application.

Step 2: Creating a Slack Bot

Go to https://api.slack.com/apps?new_app=1. You should see a modal window there:

Choose “From an app manifest”, select your workspace in the dropdown and then paste the following YAML to the text area, and then press “Create”:

display_information:
 name: Article Test App
features:
 bot_user:
   display_name: Article Test App
   always_online: false
 slash_commands:
   - command: /admins
     description: Mention all admins in your workspace.
     should_escape: false
oauth_config:
 scopes:
   bot:
     - commands
     - users:read
settings:
 interactivity:
   is_enabled: true
 socket_mode_enabled: true

You will be redirected to the app page. Press the “Install to Workspace” button, and then allow access to your workspace. When you click “Allow”, Slack grants the permissions you asked in the manifest. If you should add a new permission, you should reinstall the application as well.

Next we need an app-level token to use Socket Mode. When you’re redirected back to the app page, scroll down to “App-Level Tokens” sections and click “Generate Token and Scopes” there. Enter a name and add connection:write scope as on the picture below:

Copy the token you got here to the SLACK_APP_TOKEN variable.

Next we need an OAuth token. In production you will ask the user to install your application to the user’s workspace and then store an OAuth token you got from Slack in the database. But for the development purposes Slack also provides a special OAuth token that can be found right in the admin panel. Remember that it grants access only to the workspace you chose when you created the application. You can find the OAuth token in the “Install App” section in the sidebar. There you’ll find a bot token, copy it to the SLACK_BOT_TOKEN variable.

Step 3: Running and Testing the Application

Run npm install and then npm start in your terminal, no error should appear there.

Go to any channel and start typing “/admins”. You should see a suggestion with your app command.

Choose it and then send the message. An ephemeral message will be sent to the channel (hence only you can see the message).

In order to make messages visible to others, change response_type to in_channel in your index.ts file. But try not to annoy others too much:)

Conclusion

Slack applications can be a powerful tool to automate your business' workflows and make them more effective. When you think about how to create a Slack bot, it is very important to consider its infrastructure, the events it receives and the user experience.

Hope that this guide helped you better understand how to make a Slack bot that can perform some useful tasks. It is also possible to add some extra features to your bot, or modify it so that it will suit your requirements.

10 React Native Libraries to Use in Your Next Project

Upsilon — Thu, 02 Dec 2021 09:08:48 +0000

In this article, we have gathered some of the most popular React Native libraries among developers that will simplify and speed up the creation and implementation of some widespread features for your next mobile app.

React Native is a JavaScript framework used to build natively rendered mobile applications for both iOS and Android operating systems. It is based on React, a JavaScript library for building user interfaces. The difference is that React Native promotes mobile applications while React is targeted towards websites. In other words, React developers can efficiently build mobile applications using React Native because of their similarity to what they excel in. Moreover, this framework provides a fully native interface with the possibility to share code between different platforms. It enhances the development process, providing developers with reusable code for mobile apps that can be run on all existing platforms (iOS and Android).

This was one of the reasons for the gained popularity of React Native. According to Statista, it ranked first among cross-platform mobile frameworks used by software developers worldwide in 2019 and 2020. Cross-platform development and time and cost efficiency due to the reusability are not the only advantages of React Native that make developers choose this framework. React Native also has one of the most vibrant open source communities on the web. Its repository is one of the top-rated repos on GitHub by contributors. There you can find a wide variety of libraries and modules for almost everything you want to implement in your future project.

In this article, we have gathered some of the most popular React Native libraries among developers that are able to boost the development effectiveness and provide you with ready-to-use tools. Listed libraries will simplify and speed up the creation of the most useful and widespread features for mobile applications, letting you focus on business logic and other parts of your future product.

10 React Native Libraries to Use in Your Next Project

React Navigation

Mobile apps are never made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. React Navigation provides a straightforward navigation solution, with the ability to present common navigation patterns on both Android and iOS.

React Navigation has packages for different kinds of navigators such as stacks, tabs and drawers. As the tool is fully customizable, platform-specific and easy-to-use, you can combine multiple navigators and create a complex app architecture.

React Navigation is written with TypeScript and exports type definitions for TypeScript projects, which can be used to type check screens, navigation options, and the navigation prop.

React Native AsyncStorage

AsyncStorage is an asynchronous and unencrypted by default module that allows you to persist data offline in React Native apps. This library is perfect for developers that had no previous experience with React Native. The persistence of data is done in a key-value storage system.

This library can help you in many cases. For example, when you restart an app, you still get the data and the settling variables available in the same state they were left before closing the app. Simply put, you get persisting data in a mobile app.

React Native Reanimated

React Native Reanimated is an open source library for React Native mobile development, which allows you to create smooth animations and interactions that run on the UI thread. With it, you can declare animations on the JavaScript thread and run them on the native one to achieve smooth animations regardless of whether the JS thread is busy or not. Moreover, this library solves the problem of an inbuilt React Native Animated API and provides flexibility for gesture-based interactions.

When creating any animation using React Native Reanimated, JavaScript is used. It is also backward compatible, which means that you do not need to change huge chunks of code or recreate the animation for a specific React Native core component if you plan to use this library and migrate from Animated API.

React Native Snap Carousel

React Native Snap Carousel is a simple carousel component with snapping effect on both Android and iOS. It allows to create featuring previews, multiple layouts, parallax images, performant handling of a considerable number of items, and more. React Native Snap Carousel is well documented and contains useful tips and tricks for better performance, implementation of navigation, handling device rotation, and other features.

React Native Gifted Chat

This all-in-one chat component library will help you to set up a Chat UI for React Native. Based on TypeScript, React Native Gifted Chat includes fully customizable components for loading earlier messages or coping messages to clipboard, clickable links, and more.

To enhance user experience, it enables localized dates, multi-line TextInput, avatars as user’s initials, quick reply messages via bot and system message.

React Native Image Picker

Picking images from the device's Gallery or directly from the Camera is one of the most important and basic functionalities needed in almost all apps today. With React Native Image Picker, it can be done effectively and straightforwardly.

It is a module based on an ImagePicker component that provides access to the system UI for selecting a photo/video. The React Native Image Picker plugin offers many options to manage the ImagePicker component. It includes title, cancel button title, take photo button title, custom buttons, tint color, camera type, quality, and other options in the ImagePicker method.

React Native Fast Image

If your app has so many images to load, you may find issues such as flickering, cache miss, and low performance. React Native Fast Image library provides you a high-performance image component with a number of features to make your development process easier: aggressively cache images, add authorization headers, prioritize images, preload images, GIF support, and border radius.

React Native Fast Image is a performant replacement for React Native’s Image component that more aggressively caches images.

React Native Maps

React Native Maps library offers highly customizable map components for both Android and iOS. React Native Maps provide an intuitive and react-like API for declaratively controlling features on the map.

Using this library, you can change the map view region, customize map style, overlay other elements on the map, and customize the markers. And the issue of cluttering the map with pins, icons, and other elements can be solved with the mapbox/supercluster library, which we used in one of our projects.

React Native Svg

Rendering SVGs in mobile apps is not as simple as on the web, where you can use SVG directly as an image source or paste the SVG code into your HTML file. This is because there isn’t a built-in React Native component that can render SVGs directly. React Native SVG library solves this problem. It provides SVG support to React Native on both iOS and Android platforms, and a compatibility layer for the web.

React Native Modal

React Native Modal library allows you to present content above an enclosing view. It expands the original React Native’s built-in Modal component component by adding animations, style customization options, and new features, while still providing a simple API. React Native Modal features include smooth enter/exit animations, plain simple and flexible APIs, scrollable, swipeable, customizable backdrop opacity, color and timing, and others.

Conclusion

React Native libraries make the development process considerably easier and help developers create their apps much faster. Therefore, it is necessary to take a comprehensive approach when choosing available tools and solutions before diving into a new project. Knowing your project requirements and business needs will simplify this task and help you select the most suitable library.

At UpsilonIT, we are invested in getting your app up and running fast and efficiently, and we believe that React Native libraries will help you get there. If you have any questions regarding mobile development, contact our business development specialists for a consultation.

How to Do Map Clustering with React Native

Upsilon — Thu, 19 Aug 2021 08:50:25 +0000

In this article, we will describe how we used clustering to display a large number of markers on a map and provide you with the React Native code needed for its implementation.

Most developers working with React Native or any other programming language for mobile app development sooner or later get a project where they need to add maps to an app. Here they meet the challenge of lack of performance. The more data it is, the worse performance can become. The reason for this is excessive re-rendering; it means that there takes place more frequent rendering of components than it should, which is time-consuming. Such rendering does not relate to the component (marker in this case) but changes in part of the state. While allowing only necessary re-rendering with changes in the state of the marker, the performance will become distinctly better.

Moreover, when operating with lots of markers, the map becomes overcharged and can negatively impact the mobile UX. Displaying all the markers at once creates a poor user experience. At UpsilonIT, we had this issue with events on our map in one of the recent projects. With a small number of pins, the map looked fine. But when increasing the number of markers, the map looks cluttered and does not provide the best overview of where events are happening.

The most intuitive solution here is to use clustering. By clustering the markers together (zoom-out feature) and de-clustering (zoom-in feature), you can greatly improve app performance while presenting the data in a more approachable way. In this article, we will describe in detail how we did map clustering, and provide you with the programming code we used.

Setup

Install Node.js
Install the Expo CLI and yarn. npm install expo-cli yarn --global
Create your Expo project. expo init rn-clustering-example
Navigate to the project. cd rn-clustering-example
Install Super Cluster and other dependencies. yarn add react-native-maps supercluster @mapbox/geo-viewport
Start up the server. expo start

Implementation

Let’s start with creating a basic map using react-native-maps library and adding some markers. This will construct a native MapView that is used to render the Map component on the screen. We pass the Marker components inside the MapView and it shows them on the map.



import React, { useEffect, useState } from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
import MapView, { Marker, Region } from 'react-native-maps'

import MapZoomPanel from './components/MapZoomPanel'

function getRandomLatitude(min = 48, max = 56) {
  return Math.random() * (max - min) + min
}

function getRandomLongitude(min = 14, max = 24) {
  return Math.random() * (max - min) + min
}
interface Markers {
  id: number
  latitude: number
  longitude: number
}

function App(): JSX.Element {
  const [zoom, setZoom] = useState(18)
  const [markers, setMarkers] = useState<Markers[]>([
    { id: 0, latitude: 53.91326738786109, longitude: 27.523712915343737 },
  ])
  const region: Region = {
    latitude: 53.91326738786109,
    longitude: 27.523712915343737,
    latitudeDelta: 0.1,
    longitudeDelta: 0.1,
  }
  const map = React.useRef(null)

  const generateMarkers = React.useCallback((lat: number, long: number) => {
    const markersArray = []

    for (let i = 0; i < 50; i++) {
      markersArray.push({
        id: i,
        latitude: getRandomLatitude(lat - 0.05, lat + 0.05),
        longitude: getRandomLongitude(long - 0.05, long + 0.05),
      })
    }
    setMarkers(markersArray)
  }, [])

  useEffect(() => {
    generateMarkers(region.latitude, region.longitude)
  }, [])

  const getRegionForZoom = (lat: number, lon: number, zoom: number) => {
    const distanceDelta = Math.exp(Math.log(360) - zoom * Math.LN2)
    const { width, height } = Dimensions.get('window')
    const aspectRatio = width / height
    return {
      latitude: lat,
      longitude: lon,
      latitudeDelta: distanceDelta * aspectRatio,
      longitudeDelta: distanceDelta,
    }
  }

  const mapZoomIn = () => {
    if (zoom > 18) {
      setZoom(18)
    } else {
      setZoom(zoom + 1)
      const regn = getRegionForZoom(region.latitude, region.longitude, zoom + 1)
      map.current.animateToRegion(regn, 200)
    }
  }

  const mapZoomOut = () => {
    if (zoom < 3) {
      setZoom(3)
    } else {
      setZoom(zoom - 1)
      const regn = getRegionForZoom(region.latitude, region.longitude, zoom - 1)
      map.current.animateToRegion(regn, 200)
    }
  }

  return (
    <View style={styles.container}>
      <MapView ref={map} mapType="hybrid" style={styles.mapView} initialRegion={region}>
        {markers.map((item) => (
          <Marker
            key={item.id}
            coordinate={{
              latitude: item.latitude,
              longitude: item.longitude,
            }}></Marker>
        ))}
      </MapView>
      <MapZoomPanel
        onZoomIn={() => {
          mapZoomIn()
        }}
        onZoomOut={() => {
          mapZoomOut()
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mapView: { flex: 1, width: '100%', height: '100%' },
})

export default App

If you’ve ever used react-native-community’s react-native-maps package to add a native MapView to your react-native app, you probably encountered the common issue of cluttering the map with pins, icons, and other content.

We decided to solve this issue with the mapbox/supercluster library.

Supercluster is a geospatial point clustering solution for a cluttered react-native-maps MapView. It is easy and fast to implement, and it works pretty much out of the box.

Cluster logic is used for combining some amount of markers (let’s say for 5+) into one clustered marker when we zoom out the map. Clustered marker contains the number of markers inside and when we press on it, it zooms the map in and shows the markers that were inside of the clustered marker.

We also need the mapbox/geo-viewport library to turn the bounding boxes into centerpoint & zoom combos on the maps.

Implementation of basic clustering using SuperCluster and its integration with MapView can be done in a few steps:

Install SuperCluster and mapbox/geo-viewport using Yarn (yarn add supercluster @mapbox/geo-viewport) or NPM (npm install --save supercluster @mapbox/geo-viewport)
To integrate clustering into react-native-maps’ MapView, we need custom markers, types and helpers used for geodata processing, styling clusters, etc. You can find them on our Github.
To finish it off we need to put together the basic map, custom components, and the cluster logic, and the code should look like this:



import React, { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react'
import { Dimensions, LayoutAnimation, Platform } from 'react-native'
import MapView, { MapViewProps, Polyline } from 'react-native-maps'
import SuperCluster from 'supercluster'

import { MapClusteringProps } from './ClusteredMapViewTypes'
import ClusterMarker from './ClusteredMarker'
import {
  calculateBBox,
  generateSpiral,
  isMarker,
  markerToGeoJSONFeature,
  returnMapZoom,
} from './helpers'

const ClusteredMapView = forwardRef<MapClusteringProps & MapViewProps, any>(
  (
    {
      radius,
      maxZoom,
      minZoom,
      minPoints,
      extent,
      nodeSize,
      children,
      onClusterPress,
      onRegionChangeComplete,
      onMarkersChange,
      preserveClusterPressBehavior,
      clusteringEnabled,
      clusterColor,
      clusterTextColor,
      clusterFontFamily,
      spiderLineColor,
      layoutAnimationConf,
      animationEnabled,
      renderCluster,
      tracksViewChanges,
      spiralEnabled,
      superClusterRef,
      ...restProps
    },
    ref,
  ) => {
    const [markers, updateMarkers] = useState([])
    const [spiderMarkers, updateSpiderMarker] = useState([])
    const [otherChildren, updateChildren] = useState([])
    const [superCluster, setSuperCluster] = useState(null)
    const [currentRegion, updateRegion] = useState(restProps.region || restProps.initialRegion)

    const [isSpiderfier, updateSpiderfier] = useState(false)
    const [clusterChildren, updateClusterChildren] = useState(null)
    const mapRef = useRef()

    const propsChildren = useMemo(() => React.Children.toArray(children), [children])

    useEffect(() => {
      const rawData = []
      const otherChildren = []

      if (!clusteringEnabled) {
        updateSpiderMarker([])
        updateMarkers([])
        updateChildren(propsChildren)
        setSuperCluster(null)
        return
      }

      propsChildren.forEach((child, index) => {
        if (isMarker(child)) {
          rawData.push(markerToGeoJSONFeature(child, index))
        } else {
          otherChildren.push(child)
        }
      })

      const superCluster = new SuperCluster({
        radius,
        maxZoom,
        minZoom,
        minPoints,
        extent,
        nodeSize,
      })

      superCluster.load(rawData)

      const bBox = calculateBBox(currentRegion)
      const zoom = returnMapZoom(currentRegion, bBox, minZoom)
      const markers = superCluster.getClusters(bBox, zoom)

      updateMarkers(markers)
      updateChildren(otherChildren)
      setSuperCluster(superCluster)

      superClusterRef.current = superCluster
    }, [propsChildren, clusteringEnabled])

    useEffect(() => {
      if (!spiralEnabled) {
        return
      }

      if (isSpiderfier && markers.length > 0) {
        const allSpiderMarkers = []
        let spiralChildren = []
        markers.map((marker, i) => {
          if (marker.properties.cluster) {
            spiralChildren = superCluster.getLeaves(marker.properties.cluster_id, Infinity)
          }
          const positions = generateSpiral(marker, spiralChildren, markers, i)
          allSpiderMarkers.push(...positions)
        })

        updateSpiderMarker(allSpiderMarkers)
      } else {
        updateSpiderMarker([])
      }
    }, [isSpiderfier, markers])

    const _onRegionChangeComplete = (region) => {
      if (superCluster && region) {
        const bBox = calculateBBox(region)
        const zoom = returnMapZoom(region, bBox, minZoom)
        const markers = superCluster.getClusters(bBox, zoom)
        if (animationEnabled && Platform.OS === 'ios') {
          LayoutAnimation.configureNext(layoutAnimationConf)
        }
        if (zoom >= 18 && markers.length > 0 && clusterChildren) {
          if (spiralEnabled) {
            updateSpiderfier(true)
          }
        } else {
          if (spiralEnabled) {
            updateSpiderfier(false)
          }
        }
        updateMarkers(markers)
        onMarkersChange(markers)
        onRegionChangeComplete(region, markers)
        updateRegion(region)
      } else {
        onRegionChangeComplete(region)
      }
    }

    const _onClusterPress = (cluster) => () => {
      const children = superCluster.getLeaves(cluster.id, Infinity)
      updateClusterChildren(children)

      if (preserveClusterPressBehavior) {
        onClusterPress(cluster, children)
        return
      }

      const coordinates = children.map(({ geometry }) => ({
        latitude: geometry.coordinates[1],
        longitude: geometry.coordinates[0],
      }))

      mapRef.current.fitToCoordinates(coordinates, {
        edgePadding: restProps.edgePadding,
      })

      onClusterPress(cluster, children)
    }

    return (
      <MapView
        {...restProps}
        ref={(map) => {
          mapRef.current = map
          if (ref) {
            ref.current = map
          }
          restProps.mapRef(map)
        }}
        onRegionChangeComplete={_onRegionChangeComplete}>
        {markers.map((marker) =>
          marker.properties.point_count === 0 ? (
            propsChildren[marker.properties.index]
          ) : !isSpiderfier ? (
            renderCluster ? (
              renderCluster({
                onPress: _onClusterPress(marker),
                clusterColor,
                clusterTextColor,
                clusterFontFamily,
                ...marker,
              })
            ) : (
              <ClusterMarker
                key={`cluster-${marker.id}`}
                {...marker}
                onPress={_onClusterPress(marker)}
                clusterColor={
                  restProps.selectedClusterId === marker.id
                    ? restProps.selectedClusterColor
                    : clusterColor
                }
                clusterTextColor={clusterTextColor}
                clusterFontFamily={clusterFontFamily}
                tracksViewChanges={tracksViewChanges}
              />
            )
          ) : null,
        )}
        {otherChildren}
        {spiderMarkers.map((marker) => {
          return propsChildren[marker.index]
            ? React.cloneElement(propsChildren[marker.index], {
                coordinate: { ...marker },
              })
            : null
        })}
        {spiderMarkers.map((marker, index) => (
          <Polyline
            key={index}
            coordinates={[marker.centerPoint, marker, marker.centerPoint]}
            strokeColor={spiderLineColor}
            strokeWidth={1}
          />
        ))}
      </MapView>
    )
  },
)

ClusteredMapView.defaultProps = {
  clusteringEnabled: true,
  spiralEnabled: true,
  animationEnabled: true,
  preserveClusterPressBehavior: false,
  layoutAnimationConf: LayoutAnimation.Presets.spring,
  tracksViewChanges: false,
  // SuperCluster parameters
  radius: Dimensions.get('window').width * 0.06,
  maxZoom: 20,
  minZoom: 1,
  minPoints: 2,
  extent: 512,
  nodeSize: 64,
  // Map parameters
  edgePadding: { top: 50, left: 50, right: 50, bottom: 50 },
  // Cluster styles
  clusterColor: '#00B386',
  clusterTextColor: '#FFFFFF',
  spiderLineColor: '#FF0000',
  // Callbacks
  onRegionChangeComplete: () => {},
  onClusterPress: () => {},
  onMarkersChange: () => {},
  superClusterRef: {},
  mapRef: () => {},
}

export default memo(ClusteredMapView)

After implementing the steps above, you will get a Custom MapView component that has clustering functionality.

This is how the Clustered Custom Map look:

We have created a repository on our Github where you can explore code examples in more detail. Also, if you decide to use this article as a guideline, you may need some extra components to make everything work, so be sure to check out our Github with the whole programming code that we used.

Concluding Thoughts

Clustering makes the map light and allows users to have a clear overview of everything that is happening instead of hiding the map on top of markers that overlap each other. Quickly see your points aggregated into smaller groupings of points. This provides a better understanding of how many points exist within an area. That’s why it is crucial to think about both performance and UX while working on your map. With map clustering, you will be able to build faster, more responsive applications that can provide a superb user experience.

Have questions? We welcome any feedback and will be glad to start a discussion in the comments section.

Top 10 Headless CMS. Market-leading Headless CMS Comparison

Upsilon — Thu, 15 Jul 2021 09:39:09 +0000

How to choose the best headless CMS for your business? In this article, we have identified several types of headless CMS for different business requirements and compiled a list of the most effective ones. Learn more about the alternatives, compare features, and narrow down your search based on the pros and cons of each platform to find the most suitable headless CMS.

Content has become a number one driver in customer engagement. Companies are now looking for a way to future-proof their digital experience architecture, enabling omnichannel support for their customers available today and in the future. At the same time, it is essential to give developers, managers, and content creators the possibility to create more interactive experiences for customers with less investment of money and time, offering businesses a competitive edge. As a result, there is a demand for agile and flexible software to effectively manage vast amounts of digital content. And here is where a headless CMS with all its killer features comes to the fore.

What is a headless CMS?

The term ‘headless’ comes from the concept of chopping the ‘head’ (the front end, i.e., the website or app) off the ‘body’ (the back end, i.e., the content repository, database, etc.). So a headless CMS is a back-end-only CMS built from the ground up as a content repository that delivers content from databases (SQL and NoSQL) and files to any platform or device via API.

A headless CMS remains with an interface to manage content and a RESTful or GraphQL API to deliver content wherever you need it. The main focus of headless CMS is on storing and delivering structured content and allowing content editors to collaborate on new content. In a headless CMS, the responsibility of content presentation and layout is given to the delivery channels. Due to this approach, a headless CMS does not care about how and where your content is displayed. It enables each channel to represent the content in its own individual way.

The demand for a headless CMS among business owners is constantly growing. The reason for this is the benefits it can bring to your business. Among the main advantages of headless CMS over a traditional one are:

Flexibility: Delivery channels that ultimately use content from the CMS build the layout and presentation layers in their own individual way using their favorite tools and frameworks. As a result, it creates a unique user experience.
Focus on content: A headless CMS comes with a well-defined API, thus, allocating more time for content creation and storage rather than managing and presenting it.
Compatibility: It gives the ability to distribute content across various platforms and devices from a single backend.
Security: As the Content publishing environment isn’t accessible from the database, using this will prevent malware attacks.
Scalability: front-end and backend are detached, so there is no additional time needed for maintenance. You can make customized digital assets and upgrade them without affecting the performance of the entire system.
Control: Developers can integrate with any codebase and use any preferred language of their choice.

Today, we see a growing interest from businesses toward headless CMS aided by new software architecture trends, enhanced AI capabilities to deliver personalized content, headless commerce tools that create new choices and customization options for users. However, not all companies can pin down a reliable solution that’s equipped to fuel their unique and specific digital presence for the foreseeable future due to the large CMS market supply.

To help you, we have identified several types of headless CMS for different business requirements and compiled a list of the most popular headless CMS. So you can learn more about the alternatives, compare features, and narrow down your search based on the pros and cons of each platform to choose the best headless CMS for your company.

Types of headless CMS. SaaS (cloud-hosted) and On-premise (self-hosted) solutions.

If we were to split Headless CMS into two categories, we have SaaS and on-premise CMS based on the type of hosting.

What is an on-premise CMS?

On-premise solutions are software that is installed and run on individuals computers or the organization using the software. You download it, install on your choice of server and complete the initial setup. With this comes the individual responsibility for the website infrastructure and its software dependencies like databases, necessary software libraries, and more. On-premise CMS can be run locally on your own computer for free, or, if you want to be able to access it from outside of this environment, you can install it on a server with a hosting service for a small monthly fee.

What are the benefits of investing in an on-premise CMS?

There are several reasons why using on-premise CMS is better than going with cloud-hosted solutions. They include the following:

You have full control over data. It makes your business GDPR-compliant.
You host the website. Thus, you are in complete control of the website customization and have more freedom in its management.
It can efficiently work without any updates and plugins, if you don’t want to install them.
Ability to extend the backend API services and the Admin Panel GUI with your own custom features.

What is a SaaS CMS?

Simply put, a SaaS CMS is software that exists entirely in a cloud environment. In this case, the solution is provided as a service, reducing the need to support the website infrastructure by software infrastructure and IT teams as it happens with an on-premise CMS.

The "service" part of SaaS CMS means that the vendor will handle all the questions with upgrading, maintaining, or hosting the website or apps. It allows you to focus on more pressing issues. It can become a problem for companies that deal with sensitive data regularly and don't want to transfer the security of their data to a third-party company. At the same time, maintaining high levels of security compliance across your own website does take a lot of work, so eventually it might be easier for businesses to find a trustworthy vendor with a strong history of client satisfaction to take care of their platform.

Why use a SaaS CMS?

While the type of hosting is the primary difference between SaaS and on-premise CMS, it only scratches the surface of SaaS benefits. Some of the resulting benefits of SaaS CMS are:

Seamless upgrades and enhancements: You get the most up-to-date version of the software without needing to re-implement your solution because all releases and updates are the responsibility of your vendor.
Speed to innovation: This CMS offers content admins increased speed to market and reduced friction. Moreover, it makes the adoption to new market trends much easier as the entire change process is streamlined.
Simplified maintenance and management: When you move to a SaaS CMS, your vendor typically takes care of maintaining the system and ensuring it’s secure and scalable.
Increased time to value: Efficient and simple installation gets your experiences live faster.

Each kind of headless CMS can be considered for different business purposes and project requirements. When you decide on the type of hosting, you will face the question of choosing a platform with headless functionality. Further, we will explore some of the best available SaaS and on-premise headless CMS options. We will pay attention to the features offered by each option and the main differences between them.

Top Headless CMS 2021 Comparison

NetlifyCMS

SaaS or on-premise? On-premise.

NetlifyCMS is one of the most popular Git-based platform in the headless CMS ecosystem. It is built as a single-page React app and works with all static site generators for a faster and flexible web project. NetlifyCMS allows for the creation of a website or an app with continuous deployment and one-click HTTPs. It’s usually the number one choice by developers when it comes to creating modern static websites and apps.

Features:

Editor-friendly user interface
Intuitive workflow for content teams
With Git Gateway, you can add CMS access for any team member
Fastest static hosting

Pros:

Fast, web-based UI
Platform agnostic because it works with most static site generators.
Easy installation. You add two files to your site and hook up the backend by including those files in your build process or linking to our Content Delivery Network (CDN).
Modern authentication using GitHub, GitLab, or Bitbucket and JSON web tokens.
Flexible content types. NetlifyCMS gives you access to an unlimited number of content types with custom fields.
Fully extensible. You can create custom-styled previews, UI widgets, and editor plugins.

Cons:

It requires a learning curve. You will need basic knowledge of how websites work, how to set up a static website, and what a Git repository actually means. Coding skills are also needed to set everything up.

Appernetic

SaaS or on-premise? SaaS.

Appernetic.io is a cloud-based platform for managing and generating static content for GitHub Pages. It allows you to build faster and more secure websites, it is the bridge between the simplicity of static websites and the user-friendliness of CMS authoring interfaces.

Features:

Responsive layout
Using the visual tree view, you can navigate between file systems
Configuration
Editor which enables users to build their own webpages with the help of design templates and formatting toolbars
Static website generator which pre-designs website content rather than running queries in the CMS database which increases the page load speed

Pros:

Easy and fast setup
Full control over the source code by developers
Integration with Github and Gitlab
You can automatically get a cloudinary link
Powerful content model

Cons:

Lack of theme choice
No asset pipeline
There is no easy way to add a plugin or extension engine

GraphCMS

SaaS or on-premise? SaaS.

GraphCMS is a native GraphQL headless CMS. The main focus of it is to provide users with an exceptional digital experience while making it easier to manage the content part. GraphCMS is front-end agnostic and it is developed by GraphCMS GmbH. The hosted content APIs can be consumed by websites, apps, or any other platform.

GraphCMS boasts the JAMstack approach to development, which means a stack of Javascript, API, and Markup. GraphCMS is a client-side and JAMstack compatible CMS.

Features:

Digital asset management which allows developers to transform their digital assets into different formats and structures.
Content personalization and flexible content modeling. It enables developers to create dynamic content for target audiences and tailor the content to match the user requirements by modeling the content.
GraphCMS uses authentication tokens to authorize the API requests.

Pros:

Scalability
The easy-to-use localization API feature
No technical knowledge required
Flexibility on what data models we can create and how those models are formed

Cons:

GraphCMS requires deep knowledge of the system and needs lots of time to be efficient, especially around creating specific data patterns/relationships.

Contentful

SaaS or on-premise? SaaS.

Contentful offers an API-driven headless CMS where you focus on your content and backend. It uses RESTful API to give developers complete control of content, digital assets, and all programming languages. Contentful is also familiar with caching techniques and external CDN integrations, enabling it to deliver API payloads in the sub-10ms range.

Features:

The ability to display JSON snippets
Rich-text editor
Content modeling feature enabling content admins to arrange individual fields and content modules such as text, images and calendars.
The fully decoupled write and read API ensures a fault-tolerant system.

Pros:

Clear and intuitive user interface
It supports a wide range of frameworks and languages to help with broader web needs.
Customization through content types so that those of the same type (articles, interviews, news, etc.) are grouped for convenience and easier content production
Media assets supported
It provides a one content infrastructure to all. You can manage your content anytime through a smart device.

Cons:

The necessity for developers to get comfortable with concepts like content-modeling and search-based management
Developers are fully responsible for the functionality

Magnolia

SaaS or on-premise? Either.

Magnolia is an open-source headless CMS providing content admins the possibility for in-context editing, full preview, and personalization. For developers, it offers built-in CI/CD, hot deployment, and slim YAML configuration files. Magnolia easily integrates with front-end frameworks like React, Angular and Vue, and any emerging technologies through Magnolia’s leading REST APIs.

Features:

The Visual SPA Editor which provides content admins with the ability to edit Single Page Applications in context instead of being limited to form-based input.
Content and data from outside systems – such as site analytics – can be accessed natively to eliminate back-and-forth between systems.
Marketing automation, digital asset management, analytics, and other made of pre-build connectors.

Pros:

Content admins can work without the support of developers when editing content.
The ability to publish content to any channel without losing such features as preview, in-context editing, and personalization abilities
Use front-end languages only to complete entire projects to reduce costs and accelerate the release.

Cons:

The need for developers to implement the platform
The digital asset management feature has only basic capabilities.

Directus

SaaS or on-premise? Either.

Directus is an open-source CMS and API. Built using Vue.js., Directus manages custom-schema SQL databases directly, so it will be a good match for projects that require customized databases. Developers can build custom databases based on project needs and requirements without learning a proprietary framework or being forced to build using specific technologies.

Directus wraps your new or existing SQL database with a real-time GraphQL+REST API for developers and an intuitive admin app for non-technical users. Similar to other traditional CMS tools, it is powered by PHP; developers will thus feel comfortable with the scripting language if known.

Features:

It supports numerous solutions, from traditional websites to kiosks and other interactive digital builds.
It is possible to upload and manage files; databases do not typically handle files.
Directus provides a user-friendly interface that is extremely easy to use.

Pros:

All the main elements (API, SDK, and app) are free to use, giving developers a strong foundation for any type of set-up.
Processes are tracked in the platform, and rollbacks are possible; you never lose data.
It stays up-to-date by pulling whatever is required from the database due to the regular updates.

Cons:

Hosting is not included in free tiers.
Pre-uploading long videos fails.

Cockpit

SaaS or on-premise? On-premise.

Cockpit is a free, self-hosted, and API-driven headless CMS. It describes itself as a “content provider” and “not a website builder”. The main aim of it is to store and distribute content without content editing features to adjust the presentation of your content. So Cockpit is a pure headless CMS. It uses API, JSON, JavaScript, PHP, SQLite, and MongoDB to deliver and present content, and Cockpit is both language and database agnostic.

Features:

Clean and simple interface to get to work with
Supports cross-channel content distribution (Web, App, Smart Device, IoT)

Pros:

You can create a solution with custom code whenever you plan to extend, which ensures plenty of freedom.
API-first approach. It stores the content, acting as the CDN on your website, with options to use MongoDB and other database solutions that you prefer.

Cons:

As a purely headless CMS, Cockpit has no focus on visuals. There’s no visual editor or anything to help preview the pages.
There is often not enough support when you find a problem because of its open-source character.

Sanity.io

SaaS or on-premise? On-premise.

Sanity.io is an open source headless CMS built on JavaScript and React.js. It is the platform for structured content. Sanity comes with an open-source editing environment called Sanity Studio that you can customize with JavaScript, and a real-time hosted data store. Sanity has generous included quotas – so getting started is free. Sanity also provides real-time collaboration, live previewing, and content versioning.

Features:

A WYSIWYG rich text editor which allows you to embed editable data in running text and defer markup to render time.
It comes with a Sweet Query API that enables you to cache multiple queries on a single request.
Review changes feature with full document revision history right inside the Sanity Studio.
Structured content. Your rich text is stored as a clean data structure where you can design a content model with necessary metadata.

Pros:

Plenty of customization
Support of different plugins
Possibility to use you own front-end, or whatever else you might need: Vue, Svelte, Node, .NET, PHP, Golang, or whatever speaks HTTP
Helpful and friendly developer community
Responsive design, works on small screens

Cons:

Problems with webhooks which require developers support
It can be time-consuming when it comes to implementation.

Prismic

SaaS or on-premise? SaaS.

Prismic is a SaaS headless CMS with an API. The platform allows users to model their content schema, fill in content, choose frameworks such as Node, React, Next, Gatsby, Vue, Nuxt, etc., query content with either their RESTful API or GraphQL, and deploy with a hosting platform such as Zeit, Netlify, Heroku, etc.

Prismic gives a scheduling possibility and project management tool enabling collaboration and workflow management.

Features:

Multi-language support for wider reach
Capable of Integrating with other resources
Possibility to schedule and preview content

Pros:

Native integrations with Shopify and Magento, so it can prove valuable for e-commerce setups
User-friendly experience.
Drag and drop, rich text editors make the SEO customization easier
Easy to set up and configure

Cons:

Lack of expansion and adaptability
A rich text editor is relatively basic

Strapi

SaaS or on-premise? On-premise.

Strapi is an advanced open source CMS built on Node.js. It means that the entire codebase is available on GitHub and thrives on contributors. Strapi enables you to build and manage multiple APIs. It focuses on transparency and aspiration to be a perfect balance between a content management system, framework, and an automation tool to increase the speed of back-end development and platform management. With the help of Strapi, it is possible to build a robust API and to provide an advanced CMS.

Features:

Clean and fully customizable admin panel
There are plugins that allow the platform to be extended
It’s compatible with a wide range of database and SQL solutions
Strapi Cloud is in the works

Pros:

It has a blueprint letting you create, read, update, and delete your data.
Convenient management of user session
Easier support of your applications

Cons:

Documentation can vary in quality due to the open-source nature

Headless CMS List: Summary

We have described each platform in sufficient detail, paying special attention to its functions, pros, and cons. Meanwhile, we made a quick headless CMS comparison table to let you quickly filter the platforms and choose the more suitable one for your business requirements.

This list of platforms that we provide is not complete and comprehensive. We have compiled the most widely spread and popular headless CMS on the market. Meanwhile, the CMS ecosystem offers a wide range of choices letting anyone find their matching solution. Among existing headless CMS are Ghost, Tina, Ponzu, Webiny, Prose, ApostropheCMS, Publii, Craft CMS, etc.

Conclusion

The goal of every business is to be efficient and profitable, and the right decision of a robust headless CMS can help you with that. However, the process of choosing one platform from many can be quite intimidating. Luckily, we got your back; we provided you with valuable insights about different headless CMS by comparing their features and identifying the pros and cons of each one.

Going headless isn't the easiest transition your company will make. A vendor with a history of giving hands-on assistance and supportive expertise can smooth things down for you. At UpsilonIT, we constantly broaden our knowledge and skills in building websites and mobile apps with leading headless CMS. We are ready to answer your questions and bring you through the challenges of implementing the best-fit Headless CMS into your business.

Liked the article? Follow UpsilonIT on dev.to for the latest tech know-hows, best software development practices, and insightful case studies from industry experts! Remember: your likes and comments are fuel for our future posts!

How to Build Chat Functionality into Your App with React Native [Part 2]

Upsilon — Fri, 11 Jun 2021 08:48:51 +0000

In the second part of our article ‘How to Build Chat Functionality into Your App with React Native,’ we will cover key steps of developing a chat application that is based on Sendbird Chat API and SDK.

Before building a simple React Native chat app with Sendbird Chat SDK, let’s outline its functionality. For our piece of software, we will develop the following features and functions:

‘Signup/Login’ feature — allows a user to access the application.
‘Enter the channel’ and ‘Channels List’ feature — allows a user to enter a channel to send and receive messages and handle the list of messaging channels.
‘Chat’ feature — allows a user to input characters, send and receive messages in real-time.

Now, let’s dive deeper into Sendbird’s Chat SDK - a solution through which you can efficiently integrate real-time chat into your client app.

With the help of Sendbird, you can initialize, configure and build a chat with minimal effort. On the server side, Sendbird ensures reliable infra-management services for your chat within the app.

Sendbird features two fundamental APIs: Client APIs (including the React Native one) and a Platform API. The Platform API, which will not be covered in this article, allows you to communicate with the Sendbird back-end from your back-end or server application (server-to-server communication), which is extremely handy if you want to trigger actions from your Rails, Meteor, or Node app based on an event (for example, push notifications is a typical scenario). In this study, we will focus on building a simple chat app with Sendbird JavaScript SDK.

Sendbird Chat SDK Installation and Configuration

Step 1: Creating a new Sendbird Application

The creation of a new application in the Sendbird console is straightforward. First, we login into our Sendbird account, then go to the dashboard and click Create + at the top-right corner. After that, unique app credentials are generated:

Using these credentials, we can go further to the Chat SDK installation.

Step 2: Installing the Sendbird Chat SDK

If you’re familiar with using external libraries or SDKs, installing the Chat SDK is simple. You can install the Chat SDK with package manager npm or yarn by entering the command below on the command line.

For NPM (Note: to use npm to install the Chat SDK, Node.js must be first installed on your system): $ npm install sendbird (request to npm server)

For Yarn: $ yarn add sendbird

Step 3: Initializing the Sendbird Chat SDK

For using the features of the Chat SDK, a Sendbird instance must be initiated in our app before user authentication with the Sendbird server.

To initialize a Sendbird instance, pass the App_ID of your Sendbird application in the dashboard as an argument to a parameter in the new Sendbird() method. The new SendBird() must be called once across your client app. Typically, initialization is implemented in the user login view.

var sb = new SendBird({appId: APP_ID});

Step 4: Connecting to the Sendbird Server

After initialization using a new SendBird(), our app must always be connected to the Sendbird server before calling any methods. There are two methods of connecting a user to the Sendbird server: through a unique user ID or in combination with an access token.

Connecting a user to Sendbird server using their unique user ID:

sb.connect(USER_ID, function(user, error) { if (error) { // Handle error. }

Using Chat Platform API, you can create a user along with their own access token or issue an access token for an existing user. Once an access token is issued, a user must provide the access token in the sb.connect() method used for logging in.

Connecting a user to Sendbird server using a combination of a user ID and access token ID:

sb.connect(USER_ID, ACCESS_TOKEN, function(user, error) { if (error) { // Handle error. }

After installing and configuring the Sendbird Chat SDK and connecting our app to the Sendbird server, we can start working with basic chat functionality.

Building Chat App Functionality with Sendbird

‘Signup/Login’ feature development

Let’s discover the signup/login feature that will allow a user to access the application. In our project, we used authentication through a unique user ID.

For authentication, we send a request for connection with a user’s data to the server. Then the server queries the database to check for a match upon the connection request. If no matching user ID is found, the server creates a new user account with the user ID. If an existing user ID is found, it is allowed to log in directly. So, the Sendbird SDK ‘remembers’ the user ID, and for further requests, there is no need to log in until the user logs out from his account. Have a look at how it’s implemented in our sample chat app:

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Input, Button } from 'react-native-elements';
import SendBird from 'sendbird';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { LoginSendBirdProps } from '../../navigation/types';
import { SENDBIRD_API, USER_DATA } from '../consts';
import { useDispatch } from 'react-redux';
import { userLogin } from '../../store/actions';

const LoginSendBird = ({ navigation }: LoginSendBirdProps) => {
  const [userId, setUserId] = useState('');
  const [nickname, setNickname] = useState('');
  const [error, setError] = useState({
    code: 0,
    message: '',
  });
  const dispatch = useDispatch();

  const onButtonPress = () => {
    const sb = new SendBird({ appId: SENDBIRD_API });
    sb.connect(userId, (user, err) => {
      if (err) {
        setError(err);
      } else {
        sb.updateCurrentUserInfo(nickname, '', async (user, err) => {
          if (err) {
            setError(err);
          } else {
            dispatch(userLogin({ nickname, userId }));
            await AsyncStorage.setItem(
              USER_DATA,
              JSON.stringify({ userId, nickname })
            );
            setUserId('');
            setNickname('');
            setError({ code: 0, message: '' });
          }
        });
      }
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Input
          label="User ID"
          value={userId}
          labelStyle={{ color: '#000' }}
          onChangeText={setUserId}
          errorMessage={error.message}
          autoCapitalize="none"
        />
      </View>
      <View style={styles.box}>
        <Input
          label="Nickname"
          value={nickname}
          labelStyle={styles.input}
          onChangeText={setNickname}
          errorMessage={error.message}
          autoCapitalize="none"
        />
      </View>
      <View style={styles.box}>
        <Button
          buttonStyle={styles.button}
          title="Connect"
          onPress={onButtonPress}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  box: {
    marginTop: 10,
  },
  button: { backgroundColor: '#2096f3' },
  input: { color: '#000' },
});

export default LoginSendBird;

Note that the ID should be unique within a Sendbird application to be distinguished from others, such as a hashed email address or phone number in your service.

‘Enter the channel’ and ‘Channels List’ feature development

Sendbird's SDKs and API provide two basic types of channels:

Open channels — a Twitch-style public chat. Anyone may join and participate in the conversation without permission.
Group channels — a chat that allows close interactions among a limited number of users. A public group channel can be joined by any user without an invitation. Users can freely enter the channel if they want to. On the other hand, a private group channel can let a user join the chat through an invitation by another user who is already a member of the chat room.

To start receiving and sending messages, a user must enter an open channel. The user can enter up to 10 open channels at once, which are valid only within a current connection.

A group channel can consist of 1 to 100 members by default setting. This default number of members can increase per request. A user can view and handle a list of channels that they are a member of.

Here is how this feature works in our sample chat app:

import React, { useState, useCallback, useEffect } from 'react';
import { FlatList, View, RefreshControl, StyleSheet } from 'react-native';
import { ListItem, Avatar, Button } from 'react-native-elements';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useDispatch } from 'react-redux';
import axios from 'axios';
import SendBird from 'sendbird';
import { MASTER_API_TOKEN, SENDBIRD_API, USER_DATA } from '../consts';
import { MenuSendBirdProps } from '../../navigation/types';
import { userLogout } from '../../store/actions';

type SendBirdUser = {
  created_at: number;
  discovery_keys: [];
  has_ever_logged_in: boolean;
  is_active: boolean;
  is_hide_me_from_friends: boolean;
  is_online: boolean;
  last_seen_at: number;
  metadata: Object;
  nickname: string;
  phone_number: string;
  preferred_languages: [];
  profile_url: string;
  require_auth_for_profile_image: boolean;
  user_id: string;
};

const MenuScene = (props: MenuSendBirdProps) => {
  const [users, setUsers] = useState([]);
  const [isRefreshing, setRefreshing] = useState(false);
  const dispatch = useDispatch();

  const getData = useCallback(async () => {
    try {
      setRefreshing(true);
      const response = await axios.get(
        `https://api-${SENDBIRD_API}.sendbird.com/v3/users`,
        {
          headers: {
            'Content-Type': 'application/json; charset=utf8',
            'Api-Token': MASTER_API_TOKEN,
          },
        }
      );
      setUsers(response.data.users);
      setRefreshing(false);
    } catch (error) {
      setRefreshing(false);
      console.error(error);
    }
  }, [users]);

  useEffect(() => {
    props.navigation.setOptions({
      title: 'Chat List',
      headerStyle: {
        backgroundColor: '#a5a8b3',
      },
      headerTintColor: '#454851',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    });
    getData();
  }, []);

  const logout = async () => {
    await AsyncStorage.removeItem(USER_DATA);
    dispatch(userLogout());
    // console.log(await AsyncStorage.getItem(USER_DATA));
    // console.log(store.getState());
  };

  const startChat = (receiverId: string) => {
    const sb = SendBird.getInstance();

    sb.GroupChannel.createChannelWithUserIds(
      [receiverId],
      true,
      (createdChannel, error) => {
        if (error) {
          console.error(error);
        } else {
          props.navigation.navigate('ChatSendBird', {
            channel: createdChannel,
          });
        }
      }
    );
  };

  const renderItem = ({ item }: { item: SendBirdUser }) => (
    <ListItem
      key={item.user_id}
      bottomDivider
      onPress={() => startChat(item.user_id)}
    >
      <Avatar rounded source={require('../images/user.png')} />
      <ListItem.Content>
        <ListItem.Title>
          {item.nickname}
          <ListItem.Title style={styles.listItemTitle}>
            #{item.user_id}
          </ListItem.Title>
        </ListItem.Title>
        <ListItem.Subtitle>
          {item.is_online ? (
            <ListItem.Title style={styles.listItemTitleOnline}>
              Online
            </ListItem.Title>
          ) : (
            <ListItem.Title style={styles.listItemTitleOffline}>
              Offline
            </ListItem.Title>
          )}
        </ListItem.Subtitle>
      </ListItem.Content>
    </ListItem>
  );

  return (
    <View style={styles.container}>
      <FlatList
        style={styles.flatListStyle}
        contentContainerStyle={styles.flatListContentStyle}
        data={users}
        renderItem={renderItem}
        refreshControl={
          <RefreshControl
            refreshing={isRefreshing}
            onRefresh={() => getData()}
          />
        }
        keyExtractor={(item, index) => `${item.created_at} ${item.nickname}`}
      />
      <Button
        buttonStyle={styles.button}
        title="Logout from SendBird"
        onPress={logout}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff', paddingHorizontal: 20 },
  flatListStyle: { flex: 1 },
  flatListContentStyle: { flexGrow: 1 },
  listItemContent: { flexDirection: 'row', justifyContent: 'space-between' },
  listItemTitle: { color: '#0000f0', fontSize: 14 },
  listItemTitleOnline: { color: 'green', fontSize: 14 },
  listItemTitleOffline: { color: 'red', fontSize: 14 },
  button: {
    marginBottom: 40,
  },
});

export default MenuScene;

‘Chat’ feature

Finally, let’s send our first message. The ‘Chat’ feature allows users to send and receive messages in real-time in entered chat rooms. There are three types: a user message, which is a plain text; a file message, which is a binary file (for example, an image or PDF); and an admin message, which is a plain text sent through the dashboard or Chat Platform API.

As a first step, we need to create a chat UI component. For this purpose, we used react-native-gifted-chat, an extensible open-source library with plenty of customizable components that saves tons of time and development effort when building chat UIs.

Then, we can start messaging in real-time in entered chat rooms. Have a look at how it’s done in our sample chat app:

import React, { useState, useEffect, useReducer } from 'react';
import { useSelector } from 'react-redux';
import { GiftedChat } from 'react-native-gifted-chat';
import SendBird from 'sendbird';
import { ChatSendBirdProps } from '../../navigation/types';
import { chatReducer } from '../../store/chatReducer';
import { withAppContext } from '../../store/context';
import { AppState } from 'react-native';

const ChatScene = (props: ChatSendBirdProps) => {
  const { navigation, route } = props;
  const { channel } = route.params;

  const sendbird = SendBird.getInstance();

  const user = useSelector((state: any) => state.user);

  const [query, setQuery] = useState(null);

  const [state, dispatch] = useReducer(chatReducer, {
    channel,
    messages: [],
    messageMap: {}, // redId => boolean
    loading: false,
    input: '',
    empty: '',
    error: '',
  });

  // on state change
  useEffect(() => {
    props.navigation.setOptions({
      // @ts-ignore
      title: channel.members[0].nickname,
      headerStyle: {
        backgroundColor: '#a5a8b3',
      },
      headerTintColor: '#454851',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    });
    sendbird.addConnectionHandler('chat', connectionHandler);
    sendbird.addChannelHandler('chat', channelHandler);
    AppState.addEventListener('change', handleStateChange);
    if (!sendbird.currentUser) {
      sendbird.connect(user.userId, (err, _) => {
        if (!err) {
          refresh();
          console.log('refreshed');
        } else {
          console.log('refresh error ', err);
          dispatch({
            type: 'error',
            payload: {
              error: 'Connection failed. Please check the network status.',
            },
          });
        }
      });
    } else {
      refresh();
    }

    return () => {
      sendbird.removeConnectionHandler('chat');
      sendbird.removeChannelHandler('chat');
      AppState.removeEventListener('change', handleStateChange);
    };
  }, []);

  /// on query refresh
  useEffect(() => {
    if (query) next();
  }, [query]);

  /// on connection event
  const connectionHandler = new sendbird.ConnectionHandler();
  connectionHandler.onReconnectStarted = () => {
    dispatch({
      type: 'error',
      payload: {
        error: 'Connecting..',
      },
    });
  };
  connectionHandler.onReconnectSucceeded = () => {
    dispatch({
      type: 'error',
      payload: {
        error: '',
      },
    });
    refresh();
  };
  connectionHandler.onReconnectFailed = () => {
    dispatch({
      type: 'error',
      payload: {
        error: 'Connection failed. Please check the network status.',
      },
    });
  };

  /// on channel event
  const channelHandler = new sendbird.ChannelHandler();
  channelHandler.onMessageReceived = (targetChannel, message) => {
    if (targetChannel.url === channel.url) {
      dispatch({ type: 'receive-message', payload: { message: message } });
    }
  };
  channelHandler.onMessageUpdated = (targetChannel, message) => {
    if (targetChannel.url === channel.url) {
      dispatch({ type: 'update-message', payload: { message } });
    }
  };
  channelHandler.onMessageDeleted = (targetChannel, messageId) => {
    if (targetChannel.url === channel.url) {
      dispatch({ type: 'delete-message', payload: { messageId } });
    }
  };

  const handleStateChange = (newState) => {
    if (newState === 'active') {
      sendbird.setForegroundState();
    } else {
      sendbird.setBackgroundState();
    }
  };

  const refresh = () => {
    channel.markAsRead();
    setQuery(channel.createPreviousMessageListQuery());
    dispatch({ type: 'refresh' });
    console.log('refreshed');
  };

  const next = () => {
    if (query.hasMore) {
      dispatch({ type: 'error', payload: { error: '' } });
      query.limit = 50;
      query.reverse = true;
      query.load((fetchedMessages, err) => {
        if (!err) {
          console.log('loadmore');
          dispatch({
            type: 'fetch-messages',
            payload: { messages: fetchedMessages },
          });
        } else {
          console.log('fetch error', err);
          dispatch({
            type: 'error',
            payload: { error: 'Failed to get the messages.' },
          });
        }
      });
    }
  };

  const sendUserMessage = () => {
    if (state.input.length > 0) {
      const params = new sendbird.UserMessageParams();
      params.message = state.input;

      const pendingMessage = channel.sendUserMessage(params, (message, err) => {
        if (!err) {
          dispatch({ type: 'send-message', payload: { message } });
        } else {
          setTimeout(() => {
            dispatch({
              type: 'error',
              payload: { error: 'Failed to send a message.' },
            });
            dispatch({
              type: 'delete-message',
              payload: { reqId: pendingMessage.reqId },
            });
          }, 500);
        }
      });
      dispatch({
        type: 'send-message',
        payload: { message: pendingMessage, clearInput: true },
      });
    }
  };

  return (
    <GiftedChat
      messages={state.messages}
      onSend={sendUserMessage}
      text={state.input}
      renderUsernameOnMessage
      onInputTextChanged={(content) => {
        if (content.length > 0) {
          channel.startTyping();
        } else {
          channel.endTyping();
        }
        dispatch({ type: 'typing', payload: { input: content } });
      }}
      user={{ _id: user.userId, name: user.nickname }}
    />
  );
};

export default withAppContext(ChatScene);

For storing and processing messages and managing shared data across many screens, we used the Redux library. Here are several lines of code of our reducer (Redux state holder):

const initialState = {
}

export const chatReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'refresh': {
            return {
                ...state,
                messageMap: {},
                messages: [],
                loading: false,
                error: null
            };
        }
        case 'fetch-messages': {
            const { messages } = action.payload || {};

            const distinctMessages1 = messages.filter(message => !state.messageMap[message.reqId]);
            const distinctMessages = distinctMessages1.map((chatMessage) => {
                let gcm = {
                    _id: chatMessage.messageId,
                    text: chatMessage.message,
                    createdAt: chatMessage.createdAt,
                    user: {
                        _id: chatMessage?._sender?.userId,
                        name: `${chatMessage._sender?.nickname}#${chatMessage._sender?.userId}`,
                    }
                };
                return gcm;
            });
            const mergedMessages = [...state.messages, ...distinctMessages];
            for (let i = 0; i < mergedMessages.length - 1; i++) {
                mergedMessages[i].hasSameSenderAbove =
                    mergedMessages[i]._sender &&
                    mergedMessages[i + 1]._sender &&
                    mergedMessages[i]._sender.userId === mergedMessages[i + 1]._sender.userId;
            }

            const messageMap = {};
            for (let i in distinctMessages) {
                const message = distinctMessages[i];
                messageMap[message.reqId] = true;
            }
            return {
                ...state,
                messages: mergedMessages,
                messageMap,
                empty: mergedMessages.length === 0 ? 'Start conversation.' : ''
            };
        }
        case 'send-message':
        case 'receive-message':
        case 'update-message': {
            const { message, clearInput } = action.payload || {};
            if (!state.messageMap[message.reqId]) {
                if (state.messages.length > 0) {
                    message.hasSameSenderAbove =
                        message._sender && state.messages[0]._sender && message._sender.userId === state.messages[0]._sender.userId;
                }
                return {
                    ...state,
                    messages: [message, ...state.messages],
                    messageMap: { ...state.messageMap, [message.reqId]: true },
                    input: clearInput ? '' : state.input,
                    empty: ''
                };
            } else {
                for (let i in state.messages) {
                    if (state.messages[i].reqId === message.reqId) {
                        const updatedMessages = [...state.messages];
                        message.hasSameSenderAbove = updatedMessages[i].hasSameSenderAbove;
                        const messageCopy = {
                            _id: message.messageId,
                            text: message.message,
                            createdAt: message.createdAt,
                            user: {
                                _id: message?._sender?.userId,
                                name: `${message._sender?.nickname}#${message._sender?.userId}`,
                            }
                        };
                        updatedMessages[i] = messageCopy;
                        return {
                            ...state,
                            input: clearInput ? '' : state.input,
                            messages: updatedMessages
                        };
                    }
                }
            }
            break;
        }
        case 'delete-message': {
            const { messageId, reqId } = action.payload || {};
            for (let i in state.messages) {
                if (state.messages[i].messageId === messageId || state.messages[i].reqId === reqId) {
                    const updatedMessages = state.messages.filter(m => m.reqId !== reqId && m.messageId !== messageId);
                    for (let i = 0; i < updatedMessages.length - 1; i++) {
                        updatedMessages[i].hasSameSenderAbove =
                            updatedMessages[i]._sender &&
                            updatedMessages[i + 1]._sender &&
                            updatedMessages[i]._sender.userId === updatedMessages[i + 1]._sender.userId;
                    }
                    return {
                        ...state,
                        messages: updatedMessages
                    };
                }
            }
            break;
        }
        case 'typing': {
            const { input } = action.payload || {};
            return { ...state, input };
        }
        case 'start-loading': {
            return { ...state, loading: true, error: '' };
        }
        case 'end-loading': {
            const { error } = action.payload || {};
            return { ...state, loading: false, error };
        }
        case 'error': {
            const { error } = action.payload || {};
            return { ...state, error };
        }
    }
    return state;
};

Twilio vs. Sendbird: Key Features Comparison

Till now, we have gone through all the main steps of building a sample React Native chat app using two real-time chat and messaging platforms - Twilio and Sendbird. Both of them allow configuring, building, and then integrating chat functionality into any client web or mobile app with minimum effort. But to clarify what solution can suit your business needs better, let’s compare Twilio and Sendbird by key features - for better exposure.

So what's the best alternative for building and implementing chat functionality?

Twilio is the leading cloud communication platform working on Platform-as-a-service (PaaS) model principles. Twilio provides a software-based platform, and still, it's not into in-app chat applications as others. It is also considered a developers' platform; therefore, it cannot be used by marketers or non-developers. The provider mainly targets programmable chat API, allowing users to make and receive phone calls and send and receive text messages instantly.

Sendbird is a chat API and messaging SDK platform with SaaS (Software-as-a-service) model. Since it is a SaaS model, its customers can simply use the application with the available features without making any changes. They don't have to buy, install, maintain, or update any software to use Sendbird.

What's the verdict? The answer may seem trivial, but the dilemma of choosing between Twilio and Sendbird lies in your business goals, the tech skills available, and the chat features your client application demands.

Concluding Thoughts

If you have finally decided to build chat functionality into your client app, then undoubtedly, React Native is one of the most popular frameworks. The reason here is its effectiveness in presenting the combined benefits of hybrid and native apps together under one roof. We talked about React Native benefits in a more detailed way in the first part of the article.

As a back-end for a chat app, we decided to opt for Twilio and Sendbird, which we believe are among the best messaging SDKs for React Native applications. They both allow you to configure, build, and integrate chat functionality into any web or mobile app, but still they have different capabilities. We compared the key features that Twilio and Sendbird offer, and the main objective here while deciding which one to choose is your business goals and the chat app functionality you are looking for.

We have tried to keep each and every step of development very simple and sorted while explaining the customization, navigation, and configuration of the chat app with pieces of code. So, hopefully, these two parts of the article will help you build chat functionality into your app using React Native.

How to Build Chat Functionality into Your App with React Native [Part 1]

Upsilon — Mon, 07 Jun 2021 19:59:44 +0000

In this article, we will walk you through how to quickly build a React Native chat app using Twilio-based back-end along with Gifted Chat for styling.

Why Businesses Must Have Chat Functionality in Their Applications

Nowadays, when the competition for customer’s attention is higher than ever, speed can become a determinative factor while choosing a company. Whether it comes to overnight shipping or anytime 24/7 access to the interested service or product, your customers, in most cases, don’t want to wait for long — and they usually get things as quickly as possible. It follows that the customer service speed has a big impact on their potential to convert.

Research shows that the average response time for a customer service request on social media is about 10 hours and up to 12 hours on email responses. As a consequence, such long delays can cost your customers. The solution is live chat apps.

Live chat is software that enables you to have a real-time conversation with potential customers within one platform. There are many options out there for live chat software, each with different functions and features, which you can integrate into your website and in web and mobile applications. Among the commonly used features are authorization, messaging, group chatting, notifications, and file sharing. Businesses can also add some extra features like video calls or voice messages in order to provide clients with extensive functionality.

Live chat software is convenient because users don’t need to switch from platform to platform, and it is quick due to the real-time response. Therefore, businesses, both small and large, use live chat software to serve their customers better and improve response time.

Along with providing quick customer support, the usage of chat software can positively impact your business in some other ways. So what are the additional benefits of implementing live chat functionality for businesses? Let’s have a look.

Building Trust with Customers

Live chat software allows you to have direct interaction with your customers. That enables your business to build trust and increase customer loyalty by answering questions and providing online support with any difficulties during the interaction with the website and your company.

A study done on global consumer trends by Oracle shows that a live chat button gives 90% of consumers confidence that they will get help when and if needed. Without a live chat option, you will need to work much harder on building trust with consumers that visit your website.

Understanding Customer Needs Better

Live chat software lets you see your product from a customer’s perspective. It can be helpful for product enhancements, marketing and sales purposes, or the way you grow your business.
You can collect data through live chat about your customers’ behavior, their questions, and issues they have with your website and work on them to eliminate fears and doubts concerning your products and services.

According to the Aberdeen Group report, companies that systematically listen to their customers and use this information to take action enjoy 55% greater customer retention rates and an almost 10-fold increase in the company’s annual revenue from the previous year than all other companies.

Satisfying Customers More Fully

Implementation of live chat on your website or app gives you an excellent opportunity to improve your customer service and provide a memorable customer experience while interacting with your brand. That is why customers generally prefer using live chat instead of email or phone support.

Live chat has the highest satisfaction levels for any customer service channel, with 73%, compared with 61% for email and 44% for phone. The reason for such high customer satisfaction is the efficiency and immediacy of the experience.

Communicating with customers via a channel they prefer the most will help you to improve their experience, and in return, retain more consumers.

Improving Website Experience

Live chat creates a comfortable environment for customers when they don’t need to call you or email you when a question comes up. Instead, with live chat, they can have their questions answered immediately by a human. It can be especially important when a customer needs an initial consultation before purchasing or subscribing to a product or service online.

Along with helping clients by improving the website experience, businesses get more purchases. Research shows that customers who use live chat on a website are three times more likely to make a purchase, which will positively impact your bottom line.

All types of businesses benefit from using live chat software. For marketplaces, live chats will have the biggest impact. Such real-time interactions through live chat connect your marketplace’s buyers and sellers and help in driving engagement and sales.

Live chat can not only conveniently connect your buyers and sellers and build trust across your marketplace but help drive more opportunities to convert by successfully closing the loop. For example, you may use notifications to keep the conversation moving so users stay connected and never miss a chance to transact.

Live chat gives you a chance to go through the purchase funnel together with a prospect customer, help them overcome objections, and reach a buying decision. It’s like having a sales assistant on standby, live on your website, and it can be crucial for your marketplace.

Why to Choose React Native For Chat App Development

Despite being a new and young framework, React Native already holds the trust of leading titans of the industry, including Facebook, Instagram, Walmart, Bloomberg, Tesla, Vogue, UberEats, Skype, and more. Among all these, Facebook Messenger is globally recognized as the top rank messaging app that React Native supports. The reason being, this framework makes your app effective in presenting the combined benefits of hybrid and native apps together under one roof.

Here are the top reasons why they have considered React Native for their company and why it is becoming a soaring framework for char software projects.

Easy Availability of Talent

According to Stack Overflow’s Developer Survey, about 58% of respondents are already familiar with React Native and express the interest in continuing to develop with it. Secondly, being at the top position and used by 42% of global developers, React Native is already becoming popular among tech companies, therefore, finding the best RN developer in the market is not an exigent job.

Lower Development Cost

Because you can write codes that run on both platforms, the development cost to hire app developers is dramatically reduced if compared to developing native solutions. Even if you don’t require a team of engineers to develop a solution, a single React Native app developer can help you create the app for both platforms.

Reusable UI Components

When building a React Native app, the first thing that developers consider is to start defining the components that appear in many places within the app. These components are like reusable blocks, so written once and can be used in many places without spending more and more time on development and hence, save cost and time on an app development project.

Compatibility to Cross-Platform

For cross-platform support, we are talking about iOS and Android. Initially, when created by a team of Facebook, it came only with iOS support in 2015, and started to support Android later in the same year. Since then, the popularity of this framework has taken the world by storm and is constantly growing. With this framework at your service, all you need is to hire an app developer with expertise in UI elements and APIs. A developer can create an application that will seamlessly run on iOS, Android and the web by simply using a single codebase.

That is why if you want to build basic chat functionality into your application — whether it is a marketplace, e-learning platform, or telemedicine portal — you must bet on React Native first and foremost.

Building Chat Functionality into Your App with React Native

In this study, we will walk you through the process of building a simple chat app with React Native and Expo using Twilio and Sendbird as the backend services. Our piece of software will contain the following features and functions:

‘Signup/Login’ feature — allows a user to access the application.
‘Channels List’ feature — allows a user to handle the list of messaging channels to chat in.
‘New Chat’ feature — allows a user to create a new chat or join an existing one.
‘Chat’ feature — allows a user to input characters, send and receive messages in real-time.

Here’s what we will cover in this article:

How to start a new chat app project with Expo;
How to set up a backend for a chat app;
How to build a few chat features with React Native.

Step 1: Starting a New Project with Expo

Expo is a framework that is used for building React Native apps. It is basically a bundle with tools and services developed for React Native, which will help you make React Native apps with ease.

To start a new project, you must use an Expo CLI, a command-line app that is the main interface between a developer and Expo tools. To begin with the app, you must have to install Expo CLI on your local machine. For a hassle-free installation, a mobile app developer can run the below command in the terminal in order to install the CLI and generate a new project using it.

Installing Expo CLI: npm install — global expo-cli

Creating a project ChatApp: expo init ChatApp

Navigating to the project directory: cd ChatApp

Starting a development server: expo start

After generating a project, it’s time to run it on our development machine to ensure that everything works smoothly. Expo allows developers to open the project on multiple devices simultaneously or use an iOS simulator or Android emulator.

The next step is to install a dependency called react-native-gifted-chat that offers us a customizable UI for a chat application and ensures seamless Navigation between screens. For navigation between multiple screens, we use React-Navigation, and at last, we can connect with the back-end chat API service (for our project, we used Twilio and Sendbird). Here is the example of a quick short command:

npm install express dotenv twilio axios twilio-chat sendbird redux react-redux @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack react-native-gifted-chat

Step 2: Choosing a Back-end for a Chat App

When you create a chat app, you need to understand that the application will need to process and store a lot of data, including text messages, videos, images, and files of different types. Perhaps, the most important consideration when creating a chat app is to choose the right platform for server-side implementation. Your back end must be reliable, scalable, and support millions of connections per node.

There are plenty of such platforms available in the market. We prefer using off-the-shelf messaging SDK solutions because it’s the best way to reduce time-consuming efforts, increase performance and focus on the core content. For our project, we decided to opt for Twilio and Sendbird, which we believe are among the best messaging SDKs for React Native applications. In this chapter, we will focus on adding chat features into your app using Twilio Programmable Chat. The creation of chat app functionality via Sendbird SDK will be considered in detail in the second part of the article.

Twilio Programmable Chat makes it easy for you to add chat features into your web and mobile apps without building or scaling a real-time chat backend. Chat has all of the necessary APIs and features to integrate with your business logic to ensure you’re in control.

Step 3: Setting up a Twilio-Powered Server

Before getting started, we need to generate an access token to authorize the React Native app to communicate with the Programmable Twilio Chat.

To set up our backend for Chat, we need four values from our Twilio account. They will be stored in our .env file:

Service instance SID — a service instance where all the data for our application is stored and scoped;
Account SID — a primary Twilio account identifier;
API key — used to authenticate;
API secret — used to authenticate.

To take your Twilio account SID go to the Twilio Console and then copy and paste it as the value TWILIO_ACCOUNT_SID to the .env file.

Next, we need to generate an API key and API secret. After creating them, copy and paste the SID and the secret as the values TWILIO_API_KEY and TWILIO_API_SECRET.

Furtherly, we need to create a new Chat Service by navigating to All Products & Services > Programmable Chat > Services > Chat Services.

Let’s copy and paste the service SID as the value TWILIO_CHAT_SERVICE_SID.

Finally, our .env file should look like this:

TWILIO_ACCOUNT_SID=your_account_sid TWILIO_API_KEY=your_api_key TWILIO_API_SECRET=your_api_secret TWILIO_CHAT_SERVICE_SID=your_chat_service_sid

When our .env is ready, we can create a simple server with a single GET request from — /token/:identity. This route will request and return a token from TWILIO. Let’s install dependencies for our server: yarn add express dotenv twilio

Then we can begin configuring our Twilio server and service. Here is the configuration of our Twilio-based server that will receive and process the requests:

require('dotenv').config();

const Twilio = require('twilio');
const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(bodyParser.raw());

const AccessToken = Twilio.jwt.AccessToken;
const ChatGrant = AccessToken.ChatGrant;

// async..await is not allowed in global scope, must use a wrapper
async function sendMail(userEmail) {
  // Generate test SMTP service account from ethereal.email
  // Only needed if you don't have a real mail account for testing
  // let testAccount = await nodemailer.createTestAccount();

  // TO SEND EMAILS FROM GMAIL ACCOUNT ENABLE LESS SECURE APPS
  // https://www.google.com/settings/security/lesssecureapps
  const email = '***********@upsilonit.com';
  const password = '***********';
  const receiver = ''***********@upsilonit.com';

  // create reusable transporter object using the default SMTP transport
  let transporter = nodemailer.createTransport({
    name: 'gmail.com',
    host: 'gmail.com',
    port: 587,
    // secure: false, // true for 465, false for other ports
    // auth: {
    //   user: testAccount.user, // generated ethereal user
    //   pass: testAccount.pass, // generated ethereal password
    // },
    service: 'Gmail',
    auth: {
      user: email,
      pass: password,
    },
    tls: {
      rejectUnauthorized: false,
    },
  });

  // send mail with defined transport object
  let info = await transporter.sendMail({
    from: `"Chat App" <${email}>`, // sender address
    to: receiver, // list of receivers
    subject: `Someone with email ${userEmail} logged in your ChatApp`, // Subject line
    text: `Someone with email ${userEmail} logged in your ChatApp`, // plain text body
    html: `<b>Someone with email ${userEmail} logged in your ChatApp</b>`, // html body
  });

  console.log('Message sent: %s', info);
  // Message sent: <b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com>

  // Preview only available when sending through an Ethereal account
  console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));
  // Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
}

app.get('/token/:identity', (req, res) => {
  const identity = req.params.identity;
  const token = new AccessToken(
    process.env.TWILIO_ACCOUNT_SID,
    process.env.TWILIO_API_KEY,
    process.env.TWILIO_API_SECRET
  );

  token.identity = identity;
  token.addGrant(
    new ChatGrant({
      serviceSid: process.env.TWILIO_CHAT_SERVICE_SID,
    })
  );

  res.send({
    identity: token.identity,
    jwt: token.toJwt(),
  });
});

app.post('/sendMail', function (req, res) {
  console.log(req.body);
  sendMail(req.body.userEmail);
  res.send('POST request to the sendMail page');
});

app.listen(3001, function () {
  console.log('Programmable Chat server running on port 3001!');
});

And here is the configuration of service that will be used for getting users’ data, their tokens, channels, chats list, and their messages:

import { Client } from 'twilio-chat';

import axios from 'axios';

export const getToken = (username) =>
  axios
    .get(`http://localhost:3001/token/${username}`)
    .then((twilioUser) => twilioUser.data.jwt);

export class TwilioService {
  static serviceInstance;
  static chatClient;

  constructor() {}

  static getInstance() {
    if (!TwilioService.serviceInstance) {
      TwilioService.serviceInstance = new TwilioService();
    }
    return TwilioService.serviceInstance;
  }

  async getChatClient(twilioToken) {
    if (!TwilioService.chatClient && !twilioToken) {
      throw new Error('Twilio token is null or undefined');
    }
    if (!TwilioService.chatClient && twilioToken) {
      return Client.create(twilioToken).then((client) => {
        TwilioService.chatClient = client;
        return TwilioService.chatClient;
      });
    }
    return Promise.resolve().then(() => TwilioService.chatClient);
  }

  clientShutdown() {
    TwilioService.chatClient?.shutdown();
    TwilioService.chatClient = null;
  }

  addTokenListener(getToken) {
    if (!TwilioService.chatClient) {
      throw new Error('Twilio client is null or undefined');
    }
    TwilioService.chatClient.on('tokenAboutToExpire', () => {
      getToken().then(TwilioService.chatClient.updateToken);
    });

    TwilioService.chatClient.on('tokenExpired', () => {
      getToken().then(TwilioService.chatClient.updateToken);
    });
    return TwilioService.chatClient;
  }

  parseChannels(channels) {
    return channels.map(this.parseChannel);
  }

  parseChannel(channel) {
    return {
      id: channel.sid,
      name: channel.friendlyName,
      createdAt: channel.dateCreated,
      updatedAt: channel.dateUpdated,
      lastMessageTime:
        channel.lastMessage?.dateCreated ??
        channel.dateUpdated ??
        channel.dateCreated,
    };
  }

  parseMessages(messages) {
    return messages.map(this.parseMessage).reverse();
  }

  parseMessage(message) {
    return {
      _id: message.sid,
      text: message.body,
      createdAt: message.dateCreated,
      user: {
        _id: message.author,
        name: message.author,
      },
      received: true,
    };
  }
}

At last, we can run the server with the following command:
node server.js

Step 4: Developing Chat App Functionality with Twilio

When our Twilio-powered server is set up, we can start building a sample chat with basic functionality.

‘Signup/Login’ feature development

Let’s start with the signup/login feature that will allow a user to access the application.

Like any other messenger, our chat needs to authenticate a user firstly. In Twilio, all chat SDK clients need a valid Access Token to be able to authenticate and interact with the chat service. As we authenticate a user, the Token is generated on the server and then is utilized by the Chat SDK client to authorize with the Chat Service. Have a look at how it’s done in our sample chat app:

import axios from 'axios';
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Input, Button } from 'react-native-elements';
import { LoginTwilioProps } from '../../navigation/types';

const LoginTwilio = ({ navigation }: LoginTwilioProps) => {
  const [username, setUsername] = useState('');
  const [error, setError] = useState('');
  const [emailOK, setEmailOK] = useState(true);

  const sendEmail = async () => {
    const response = await axios({
      method: 'post',
      url: 'http://localhost:3001/sendMail/',
      data: {
        userEmail: username,
      },
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  const onButtonPress = () => {
    if (validateEmail(username)) {
      setEmailOK(true);
      setError('');
      sendEmail();
      navigation.navigate('ChatLists', { username });
    } else {
      setEmailOK(false);
      setError('Enter correct email');
    }
  };

  const validateEmail = (email: string) => {
    const regex =
      /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    return regex.test(String(email).toLowerCase());
  };

  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Input
          label="Email"
          value={username}
          style={emailOK ? {} : styles.error}
          labelStyle={styles.input}
          errorMessage={error}
          onChangeText={setUsername}
          autoCapitalize="none"
        />
      </View>

      <View style={styles.box}>
        <Button
          buttonStyle={styles.button}
          title="Connect"
          onPress={onButtonPress}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  box: {
    marginTop: 10,
  },
  error: { borderBottomColor: 'red', borderBottomWidth: 3 },
  input: { color: '#000' },
  button: { backgroundColor: '#2096f3' },
});

export default LoginTwilio;

Channels List’ feature development

This feature allows a user to handle the list of messaging channels to chat in. On the ‘Channels List’ screen, we output a list of channels joined by a user and the time of the last message received. While this screen loads up, we are loading all existing channel data using the Token we generated during the user authentication. The channels are sorted by the time the last message was added. Also, Twilio allows implementing many options of sorting the channels: for example, display one-to-one chats at the top and group channels after them. For more information, read the documentation.

So, we made the ‘Channel List’ feature with the following code:

import React, { useState } from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import { Button, Input } from 'react-native-elements';
import { TwilioService } from '../twilio-service';

export function CreateChatScreen() {
  const [channelName, setChannelName] = useState('');
  const [loading, setLoading] = useState(false);

  const onCreateOrJoin = async () => {
    setLoading(true);
    try {
      const client = await TwilioService.getInstance().getChatClient();
      try {
        const channel = await client.getChannelByUniqueName(channelName);
        if (channel.channelState.status !== 'joined') {
          await channel.join().then(() => alert('You have joined.'));
        } else {
          alert('You have already joined the channel.');
        }
      } catch (error) {
        const newChannel = await client.createChannel({
          uniqueName: channelName,
          friendlyName: channelName,
        });
        await newChannel.join().then(() => alert('You have joined.'));
      } finally {
        setLoading(false);
      }
    } catch (error) {
      alert(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      <Input
        label="Channel Name"
        value={channelName}
        labelStyle={styles.inputStyle}
        onChangeText={setChannelName}
      />

      <Button title="Create Or Join" onPress={onCreateOrJoin} />
      {loading && (
        <ActivityIndicator style={styles.loader} color="#000" size="large" />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    paddingHorizontal: 20,
  },
  inputStyle: { color: '#000' },
  loader: { marginTop: 20 },
});

‘New Chat’ feature development

This feature allows a user to create a new chat or join an existing one. On this screen, the user must enter the name of a new chat in the special field and then click on the ‘Create or Join’ button. On the server, we must decide, based on the token request sent to us, who the user is and if he has access to this chat. Depending on this, the user is either added to the existing chat or creates a new one and is automatically added there. If the user has joined the chat before, the app informs the user about that via a service message. That’s how it works in our sample chat app:

import React, { useState } from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import { Button, Input } from 'react-native-elements';
import { TwilioService } from '../twilio-service';

export function CreateChatScreen() {
  const [channelName, setChannelName] = useState('');
  const [loading, setLoading] = useState(false);

  const onCreateOrJoin = async () => {
    setLoading(true);
    try {
      const client = await TwilioService.getInstance().getChatClient();
      try {
        const channel = await client.getChannelByUniqueName(channelName);
        if (channel.channelState.status !== 'joined') {
          await channel.join().then(() => alert('You have joined.'));
        } else {
          alert('You have already joined the channel.');
        }
      } catch (error) {
        const newChannel = await client.createChannel({
          uniqueName: channelName,
          friendlyName: channelName,
        });
        await newChannel.join().then(() => alert('You have joined.'));
      } finally {
        setLoading(false);
      }
    } catch (error) {
      alert(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      <Input
        label="Channel Name"
        value={channelName}
        labelStyle={styles.inputStyle}
        onChangeText={setChannelName}
      />

      <Button title="Create Or Join" onPress={onCreateOrJoin} />
      {loading && (
        <ActivityIndicator style={styles.loader} color="#000" size="large" />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    paddingHorizontal: 20,
  },
  inputStyle: { color: '#000' },
  loader: { marginTop: 20 },
});

‘Chat’ feature development

This feature allows a user to send and receive messages in real-time and displays those messages inside a chat room. For this feature development, we used an open-source library called react-native-gifted-chat.

Upon the ‘Chat’ screen initialization, we subscribe to the ‘events.’ They are functions working during the period the screen is displayed and track the changes in the channel (for example, when a new message is sent. By subscribing to the ‘events,’ we can fetch the messages sent in that channel and listen for updates for when a new message is sent. Also, at this step, we get the channel ID, load up all its messages and send them to the react-native-gifted-chat for displaying. That’s how it works in our sample chat app:

import React, { useState, useCallback, useEffect, useRef } from 'react';
import { ActivityIndicator, StyleSheet, View } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import { TwilioChatScreenRouteProp } from '../../navigation/types';
import { TwilioService } from '../twilio-service';

const ChatRoomScreen = ({ route }: TwilioChatScreenRouteProp) => {
  const { channelId, identity } = route.params;
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);
  const chatClientChannel = useRef();
  const chatMessagesPaginator = useRef();

  const setChannelEvents = useCallback((channel) => {
    chatClientChannel.current = channel;
    chatClientChannel.current.on('messageAdded', (message) => {
      const newMessage = TwilioService.getInstance().parseMessage(message);
      const { giftedId } = message.attributes;
      if (giftedId) {
        setMessages((prevMessages) => {
          if (prevMessages.some(({ _id }) => _id === giftedId)) {
            return prevMessages.map((m) =>
              m._id === giftedId ? newMessage : m
            );
          }
          return [newMessage, ...prevMessages];
        });
      }
    });
    return chatClientChannel.current;
  }, []);

  const initTwilioChannel = useCallback(async () => {
    setLoading(true);
    try {
      const client = await TwilioService.getInstance().getChatClient();
      const channel = await client.getChannelBySid(channelId);
      const currentChannel = await setChannelEvents(channel);
      const paginator = await currentChannel.getMessages();
      chatMessagesPaginator.current = paginator;
      const newMessages = await TwilioService.getInstance().parseMessages(
        paginator.items
      );
      setMessages(newMessages);
    } catch (error) {
      alert(error.message);
    } finally {
      setLoading(false);
    }
  }, [channelId, setChannelEvents]);

  useEffect(() => {
    initTwilioChannel();
  }, []);

  const onSend = useCallback((newMessages = []) => {
    const attributes = { giftedId: newMessages[0]._id };
    setMessages((prevMessages) => GiftedChat.append(prevMessages, newMessages));
    chatClientChannel.current?.sendMessage(newMessages[0].text, attributes);
  }, []);

  return (
    <View style={styles.screen}>
      {loading ? (
        <ActivityIndicator style={styles.loader} color="#000" size="large" />
      ) : (
        <GiftedChat
          messagesContainerStyle={styles.messageContainer}
          messages={messages}
          renderAvatarOnTop
          renderUsernameOnMessage
          onSend={(messages) => onSend(messages)}
          user={{ _id: identity }}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flexGrow: 1,
    backgroundColor: '#FFF',
  },
  messageContainer: {
    backgroundColor: '#f3f3f3',
  },
  loader: { marginTop: 20 },
});

export default ChatRoomScreen;

Here is the first part of the article 'How to Build Chat Functionality into Your App with React Native'. In it, we talked about the main benefits chat apps can give your business, why React Native is the best choice for chat app development, what Expo is, and showed our experience in building chat apps with Twilio SDK. In the second part, we will look at the development process using Sendbird SDK and make a comparison of these two platforms.

The second part is about to come. Subscribe to our newsletter in order not to miss the second part and other helpful content!

How We Developed an Online Music Player with TypeScript

Upsilon — Mon, 01 Feb 2021 12:41:30 +0000

In this article, we share our experience of creating a custom music player for a Social Music Web Platform with TypeScript illustrating each step with a programming code.

One of our clients, a Music Tech Company, came with a request to develop a web version of their social music platform. They wanted to have an online music player that would provide advanced functionality and responsive design. After interviewing the client and analyzing the requirements and documentation attached, we started to look for the solutions. We saw that most of them are over-complicated; therefore, we decided to develop a custom music player.

To deliver all player's features according to the requirements, we built the music player's core functionality on TypeScript. For UI development, we used React, Next.js, Redux-Toolkit, Material-UI. For custom styling of Material-UI components, we used the CSS-in-JS approach.

Disclaimer: in this article, we present code examples - not currently executing one! Here, we would like to share our experience of creating a custom music player with TypeScript illustrating each step with a programming code that could be written for a similar project.

Firstly, we split the project into modules. One of the modules works with the logic of track playback: play/pause, track length displaying, next/previous, volume control, etc. Also, please note that we used the publish-subscribe pattern and wrote a small implementation - pubsub.ts

import { createPubSub } from './pubsub';

type AudioState = {
  duration: number;
  playing: boolean;
  volume: number;
};

export const createAudio = () => {
  const pubsub = createPubSub();
  const element = document.createElement('video');
  let currentTime = 0;

  let state: AudioState = {
    duration: 0,
    playing: false,
    volume: 0,
  };

  const setState = (value: Partial<AudioState>) => {
    state = { ...state, ...value };

    pubsub.publish('change', state);
  };

  const setup = () => {
    element.addEventListener('durationchange', () =>
      setState({ duration: element.duration }),
    );

    element.addEventListener('playing', () => setState({ playing: true }));

    element.addEventListener('pause', () => setState({ playing: false }));

    element.addEventListener('timeupdate', () => {
      const newCurrentTime = Math.round(element.currentTime);

      if (currentTime !== newCurrentTime) {
        currentTime = newCurrentTime;

        pubsub.publish('change-current-time', currentTime);
      }
    });

    element.addEventListener('volumechange', () =>
      setState({ volume: element.volume }),
    );

    setState({ volume: element.volume });
  };

  setup();

  return {
    seek(seconds: number) {
      element.currentTime = seconds;
      currentTime = seconds;

      pubsub.publish('change-current-time', currentTime);
    },

    getElement() {
      return element;
    },

    getState() {
      return state;
    },

    getCurrentTime() {
      return currentTime;
    },

    play() {
      element.play();
    },

    pause() {
      element.pause();
    },

    volume(value: number) {
      element.volume = value;
    },

    setUrl(url: string) {
      element.setAttribute('src', url);
      setState({ playing: false });
    },

    subscribe(listener: (newState: AudioState) => void) {
      return pubsub.subscribe('change', listener);
    },

    onChangeCurrentTime(listener: (newCurrentTime: number) => void) {
      return pubsub.subscribe('change-current-time', listener);
    },

    onEnded(listener: () => void) {
      element.addEventListener('ended', listener);

      return () => element.removeEventListener('ended', listener);
    },
  };
};

Another module includes the functionality of the track playback and playlists management. See the code example below:

import { createPubSub } from './pubsub';
import { createAudio } from './audio';

type Track = {
  url: string;
  title: string;
};

type State = AudioState & {
  tracks: Track[];
  currentTrack: Track | null;
  currentTrackIndex: number | null;
};

const createPlayer = () => {
  const pubsub = createPubSub();
  const audio = createAudio();

  let state: State = {
    ...audio.getState(),
    tracks: [],
    currentTrackIndex: null,
    currentTrack: null,
  };

  const setState = (value: Partial<State>) => {
    state = { ...state, ...value };

    pubsub.publish('change', state);
  };

  audio.subscribe(setState);

  const changeTrack = () => {
    const track = state.currentTrack;

    if (track) {
      audio.setUrl(track.url);
      audio.play();
    }
  };

  const next = () => {
    if (state.currentTrackIndex === null) {
      return;
    }

    const lastIndex = state.tracks.length - 1;
    const newIndex = state.currentTrackIndex + 1;

    if (newIndex <= lastIndex) {
      setState({
        currentTrackIndex: newIndex,
        currentTrack: state.tracks[newIndex],
      });

      changeTrack();
    }
  };

  audio.onEnded(next);

  return {
    play: audio.play,
    pause: audio.pause,
    seek: audio.seek,
    volume: audio.volume,
    getCurrentTime: audio.getCurrentTime,
    getElement: audio.getElement,
    onChangeCurrentTime: audio.onChangeCurrentTime,

    getState() {
      return state;
    },

    setQueue(tracks: Track[]) {
      setState({ tracks });
    },

    playTrack(trackIndex: number) {
      setState({
        currentTrackIndex: trackIndex,
        currentTrack: state.tracks[trackIndex],
      });

      changeTrack();
    },

    next,

    prev() {
      if (state.currentTrackIndex === null) {
        return;
      }

      const newIndex = state.currentTrackIndex - 1;

      if (newIndex >= 0) {
        setState({
          currentTrack: state.tracks[newIndex],
          currentTrackIndex: newIndex,
        });

        changeTrack();
      }
    },

    subscribe(listener: (newState: State) => void) {
      return pubsub.subscribe('change', listener);
    },
  };
};

const player = createPlayer();

export default player;

Here are several lines of code illustrating the React component that uses the player functionality shown above:

import React, { useState, useEffect, FC } from 'react';

import player from './player';

const usePlayerState = () => {
  const [state, setState] = useState(player.getState());

  useEffect(() => {
    const unsubscribe = player.subscribe(setState);

    return unsubscribe;
  }, []);

  return state;
};

const Player: FC = () => {
  const { currentTrack, playing } = usePlayerState();

  useEffect(() => {
    player.setQueue([
      {
        title: 'Tech House Vibes',
        url: '/music/mixkit-a-very-happy-christmas-897.mp3',
      },
      {
        title: 'Sample Video',
        url: '/videos/sample-video.mp4',
      },
    ]);
  }, []);

  const handlePlay = () => {
    if (playing) {
      player.pause();
    } else {
      player.play();
    }
  };

  return (
    <div>
      <button onClick={player.prev} disabled={!currentTrack}>
        Prev
      </button>

      {currentTrack ? (
        <button onClick={handlePlay}>{playing ? 'Pause' : 'Play'}</button>
      ) : (
        <button onClick={() => player.playTrack(0)}>Play All</button>
      )}

      <button onClick={player.next} disabled={!currentTrack}>
        Next
      </button>
    </div>
  );
};

And here is an example of how a special player’s background mode for video files can be written. In that mode, we can move from one screen (or page) to another, and the video continues to play without any interference.

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1;
  width: 1;
  margin: -1;
  padding: 0;
  border: 0;
}

import React, { useRef, useEffect, FC } from 'react';

import player from './player';

const Video: FC = () => {
  const videoWrapperRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const videoWrapperElement = videoWrapperRef.current!;
    const video = player.getElement();

    video.remove();
    video.classList.remove('visuallyhidden');
    videoWrapperElement.append(video);

    return () => {
      videoWrapperElement.removeChild(video);
      video.classList.add('visuallyhidden');
      document.body.append(video);
    };
  }, []);

  return <div ref={videoWrapperRef} />;
};

In this example, you can see: when a user switches the player from background to foreground mode, the video expands back, and the audio track continues to play ‘seamlessly’ with no pauses.

On the CodeSandbox ou can explore code examples in more detail.

After performing the steps above, we created a music player that further became the essential component of the client’s Social Music Web Platform.

Have questions? We welcome any feedback and will be glad to start a discussion in the comments section.

How to Make Accurate Project Estimations

Upsilon — Thu, 29 Oct 2020 11:33:23 +0000

Can software project estimation be as realistic as possible? This article will walk you through how we, at UpsilonIT, approach the estimating process. We will also share some hands-on techniques and useful tips on making it more accurate and robust.

Introduction

Why Estimation Is an Essential Stage of Any Software Project?

Many outsourcing software projects fail because their estimate is not reliable. Failure means the developer did not meet the deadline, overran the budget, or did not deliver what was expected. A study conducted by McKinsey found that 66% of software projects have cost overruns. A third of them go beyond the estimated schedule, and almost 20% of them fall short of promised benefits.

Sometimes it seems that the process of estimation can significantly increase the cost of the pre-development phase. But it is crucial to realize: the resources spent at the initial stage of the project are a good investment in the outcome. The more accurate the estimation, the more customer-satisfying the result will be. That is why a correct estimate is a crucial part of project management procedures, and it is really worth it.

What Is Project Estimation?

Project estimation is a process of calculating and predicting the costs necessary for its successful realization. In software development, estimations imply making predictions regarding the most realistic scale of efforts that should be put into developing a software product. This information allows suggesting the amount of money that needs to be invested in the project, the number of specialists who would work on the latter, and, finally, the time required for all that.

Accurate Estimating: Complicated but Crucial Task

As estimates are based upon incomplete, imperfect knowledge and assumptions about the future, they all have uncertainty. There is no such thing as a precise, single-value estimate.

A more traditional ‘waterfall’ approach implies that all the software project specifications must be provided upfront before the estimation process starts. But now, everyone is going agile. Stakeholders want to begin immediately after preparing brief requirements and then add new features literally on-the-go. MVPs (Minimum Viable Products) are released quickly, feedback is obtained, and improvements are made iteratively. In those conditions, planning and estimating can be rather challenging. So the question we want to answer is, 'How can we cover all those uncertainties and make the estimation as realistic as possible?' This article will walk you through how we approach the software project estimation process at UpsilonIT and share some tips that help us make it more accurate and robust.

Estimation Process: How We Run It at UpsilonIT

1. Preparation

We always start by digging into the client’s main challenges to paint a clear picture of their business and development goals. It’s important to gather as much information on the future project as possible. There are two main sources where we get it:

Online video calls via Skype, Zoom, or Hangouts: we discuss the project in general by asking questions and getting answers
Documents and data provided by the client: software specifications, mockups, wireframes, use cases, user stories, etc.

All of this helps us estimate the cost of building the client’s product more precisely. The more information we get our hands on at this stage, the more accurate our estimation will be. Here is a list of things we usually try to clarify at the very beginning:

What is the pain that you are solving for your customers?
What are the main features of the product?
What platforms will the product be based on (web or mobile, native or hybrid)?
What existing components or parts of the system do you already have?
Can you describe the main use cases of the new application?
Can you prioritize the functions of the future product?
Do you have a specific technical stack that needs to be used for this project?
What is your expected timeframe for the project?
What is your expected budget for this project?

Once we are sure that nothing is missing and that we’re in line with the client’s expectations, we go to the next phase: assembling the team.

2. Assembling the Right Time

After collecting all the information, we gather professionals who have the most extensive competence in the respective domain. The team responsible for the project estimation is usually composed of senior-level specialists and includes:

CTO
Senior back-end developer
Senior front-end developer
Other specialists upon request: a project manager, UX/UI designer, QA specialist, technical writer, and others.

In the vast majority of cases, specialists who make the estimation subsequently become a part of a project development team. The key criteria for selecting that team’s members are:

Professional expertise: the relevant experience of working with specific technologies and similar projects.
Ability to start the project as soon as possible. Other factors: presence in the client’s timezone, full- or part-time employment, language proficiency, etc.

Pro Tip: Assembling the right team is one of the most sensitive questions in software outsourcing. A customer wants to be ensured that the most skilled specialists with relevant expertise will be assigned to the project. That will guarantee the expected quality and hassle-free delivery of the final product. Also, customers want to see ‘real faces’ not just abstract ‘senior front-end developers’ in the estimations, including in order to understand further whom they are speaking to on the conference call. That is why every estimate made by UpsilonIT is accompanied by a document of the CV format with key information about each team member, including his or her:

Expertise
Skill matrix
Project history
Personal info

3. Research & Analysis

During this phase, the team members set up a number of meetings to discuss project requirements, exchange their opinions, and brainstorm ideas. If some details need more clarification, the discussions may alternate with the research sessions. At the end of the Research & Analysis phase, our team provides potential clients with the following deliverables:

High-level architecture & infrastructure design
Recommended tech stack
Mockups and wireframes (if not provided by a client)
Desired breakdown of the team
Rough timelines

4. Defining Scope & Size of the Project

The next step of our estimation process is building the scope of work that covers software requirements. At UpsilonIT, we use the Work Breakdown Structure (WBS), which visualizes each software development stage with related tasks.

To achieve the project's goal, we split it into milestones, which are broken down into tasks, subtasks, etc. At UpsilonIT, we define a milestone as a marker that indicates an achievement or a deliverable, for example, the completion of a large task or reaching a phase in a project. For most of the projects, we figure out the following milestones:

Discovery phase: documentation analysis, choice of 3rd party software tools, decisions on possible integrations, preparation of wireframes (if not provided by a client), etc.
Design phase: collaborative work with a product owner that can include design theme workshops, brand identity design, UX and UI design, prototyping, etc.
Project setup phase: setting up of infrastructure, deployment of environments, configuring of security, etc.
Development phase: development of functionality based on user stories (and also tasks grouped into milestones). It can include user authentication, messaging, payment integration, mapping, video streaming, reporting, etc.
Testing phase: functional testing, usability testing, user acceptance testing (UAT).
Delivery phase: transfer of documentation and intellectual property, deployment, and implementation of the solution, including publishing on marketplaces, training, presentation of the product, if necessary, and more.

How does it work in practice? Here you can see an example of how we broke down into milestones and user stories the structure of a health & wellness digital platform.

Another significant question is to decide whether to build a turnkey solution or start from the Minimum Viable Product (MVP). About 80% of startups and SMEs we worked with had an MVP first. From our experience, we recommend to ignore non-primary functions by creating an MVP before the finished product, especially if:

Project requirements are unspecified
Product market fit is not validated yet
Features must be added and tested quickly
Budget is limited

Pro Tip: When defining the scope of the project, it can be very helpful to visualize everything needed to be accomplished, organize tasks into multiple levels, and display these elements graphically. For that purpose, we use the Miro platform. With Miro's help, we develop the project's hierarchical structure that makes it easier to oversee a complex project and make sure every task gets done.

When creating a WBS for a future project, we follow four fundamental principles:

Hierarchy: every ‘child’ on the graph has a hierarchical relationship with its parent task.
100% rule: every level of the graph must make up 100% of the ‘parent’ level, and it must have at least two ‘child’ elements.
Mutually exclusive elements: every element at each level has to be mutually exclusive - there can’t be any overlap between deliverables or work.
Outcome-oriented: graphic depiction must focus on the outcomes rather than the activities required to produce them.

5. Project Estimate by PERT Method

After conducting a detailed scope breakdown, we start to create a more accurate estimate using a PERT (Program Evaluation and Review Technique) method. We calculate a realistic cost estimation using an optimistic case estimate, a pessimistic case estimate, and a most likely case estimate within this approach. There are different ways of interpreting the numbers depending on how we want to weight potential risks, but in most cases, we use the formula:

(optimistic + pessimistic + (4 x most likely))/6 = expected estimate

Let us consider an example to see how these formulas work. Let us assume we have to calculate the expected travel time it takes to deliver a shipment from point ‘A’ to point ‘B’. There could be 3 different scenarios:

Optimistic scenario: roads would be free of traffic congestion, and there will be no stopping at traffic signals.

Pessimistic scenario: there would be severe traffic bottlenecks (may be due to a major accident), or there will be some unscheduled stops (may be due to vehicle breakdown).

Most likely scenario: there would be normal traffic conditions.

Let us assume that our 3 estimates (optimistic, pessimistic & most likely) were 450 minutes, 2250 minutes, and 900 minutes respectively. Putting these values in the formulas, we get:

Expected travel time = (450 + 2250 + 4 x 900))/6 = 1050 minutes

It essentially means that, in most cases, the expected travel time will take 1050 minutes.

How can it look in a real project estimate? Let us explain how we estimated the task 'Credits (Bank) & Prize claim' by PERT method for a social sports application.

Optimistic scenario: 7 days (including 7 days for back-end and 6 days for front-end development. Both teams work simultaneously).

Pessimistic scenario: 14 days (including 14 days for back-end and 12 days for front-end development).

Most likely scenario: 11 days (including 11 days for back-end and 10 days for front-end development).

Expected estimate: (7 + 14 + (4 x 11))/6 = 10.83 days

At the output, we get an estimate which takes into account some uncertainty and risk in tasks. The PERT method can be quite time-consuming, but it can provide a high degree of accuracy.

6. Building a Timeline Chart

After determining the total time needed for each task and milestone, we build the project timeline. We line tasks end-to-end, adjust their lengths to reflect the amount of time allotted, and then add milestones. We turn that all into a solid timeline chart with expected delivery dates provided. It is especially helpful to have such visualization on projects where several teams work simultaneously on several milestones.

Such a timeline chart shapes the entire project, indicating which tasks are to be completed at which stage and which resources need to be involved along the way. It also allows us to quickly see the proportion of time allocated to each project task or milestone and provides a visual interpretation of how the project will run phase by phase.

7. Calculating Costs

After estimating the number of hours of work required to complete the defined scope, it's time to price the project. We calculate the total project cost by multiplying the number of man-hours (estimated using the PERT method) by the applicable rates. For ease of calculation, let's make the following assumptions:

One man-hour = work completed in an hour of uninterrupted effort by a specialist.
One day = a standard 8-hour working day.

In IT projects, hourly rates range depending on the specialist's professional category, which is defined by his or her job functionality, level of seniority, uniqueness of skills, etc. Of course, it will not cost the same for one hour of a junior programmer as a senior one. Therefore, when calculating the cost of the project, we take into account that the multiplication of the cost must be factorized by the hourly rate of each professional category:

Total cost = (RH1 x H1) + … + (RHn x Hn)

In this formula, RH1 is equal to the hourly rate of the professional category #1, and H1 is the total number of hours estimated by the professional category #1.

How does it work in practice? For example, we estimated a software project and got the following numbers:

The total cost of the project will be: 50x180 + 40x150 + 30x60 = $16800

8. What’s Next?

Having put all things together and made our calculations, we share it with the client in person, explaining our estimation instead of just sending over a number without context. We schedule a meeting and go over the document with them, row by row. It allows us to discuss any questions that may have come up along the way. If it becomes clear that the project isn’t doable within the client’s limitations, we can also help to prioritize the functionality and start by developing a minimum viable product (MVP) or even a proof-of-concept (PoC). We try to include this kind of out-of-the-box thinking in our estimates whenever possible, to add value at every step of our collaboration.

Conclusion

Estimating is prone to error. The overall complexity becomes fully visible only at the point of execution. In the conditions of uncertainty and lack of information, there is a temptation to provide lower numbers to outbid the competition. But that doesn’t mean that the final price for your product will be lower. It may just mean more stress, more unforeseen costs along the way, and as a result, your dissatisfaction. And this is definitely not how great products are built.

Our goal is to predict as closely as possible. Of course, some things can change, especially if a project evolves unexpectedly or if a client comes up with new ideas during development. But in most cases, when we give an estimate, we stick to it.

The best way to find this out is to partner with us. You can follow our processes, share your thoughts with our developers, and enjoy our transparent communication and quality approach firsthand. We will be happy to do our best to make your ideas happen.

How to Extract Tabular Data from PDF [part 2]

Upsilon — Wed, 16 Sep 2020 12:55:58 +0000

Here is the second part of the article ‘How to Extract Tabular Data from PDF.’ In the first part , we covered key challenges and explained the core principles of getting data out of PDF tables. Today, we finish our analysis of six software tools that are most often used for that purpose and provide a big comparative table where each tool is rated according to its ability to parse PDF tables and correctly extract data from them.

Excalibur

Excalibur is a web interface to extract tabular data from PDFs. Tool overview:

Type of software available: web application, needs local setup
Platforms: any modern web browser; local setup runs on Linux, MacOS, and Windows
Terms of use: free, open-source
Supported output formats: CSV, Excel, JSON, HTML
Notes: works only with text-based PDFs and not scanned documents

After uploading our sample file and parsing data from it via Excalibur, we got the following output:

Highlighted zones are parts of the original file detected by Excalibur as tables. At this step, data is captured correctly; extraneous elements as headers are not selected.

After the extraction procedure, we can find the only error in the tabular data preview: in the first row of the first table, two adjacent cells were mistakenly merged. But in comparison with the previous tools, we get the output closest to the original file.

Summary: Excalibur demonstrates the best result at this point. Accurate detection of tables, all non-tabular data is skipped, no problems with multiline text in cells. The only mistake refers to the recognition of merged cells: unfortunately, their content is messed up.

OCR.space

OCR.space is a service converting scans or (smartphone) images of text documents into editable files by using Optical Character Recognition (OCR) technology. Tool overview:

Type of software available: online web application
Platforms: any modern web browser - all processing goes ‘in the Cloud’
Terms of use: free (up to 250 000 conversions) and paid ($20 per each 100 000 conversions)
Supported output formats: TXT, JSON

For extracting data from tables, it is recommended to enable the ‘Table recognition’ option. After uploading our sample file and parsing data from it via OCR.space, we got the following output:

The result of the extraction is OCR'ed text sorted line by line - but we can not see a typical table structure with rows and columns. Data inside the cells are messed up with non-tabular data like headers and page numbers. The output format looks similar to TSV (tab-separated values). Also, the multiline text inside cells is split into rows.

Summary: The output document does not have a typical table structure: the data is presented as a sequence of text lines. All data from tables is extracted but not cleaned from the 'extraneous content' like headers and page numbers. Also, OCR.space failed to extract multiline text in cells correctly.

PDFTables

PDFTables is a cloud platform that allows users to convert PDF tables to Excel accurately, CSV, XML, or HTML without downloading any software. Tool overview:

Type of software available: online web application
Platforms: any modern web browser - all processing goes ‘in the Cloud’
Terms of use: free/paid (starting from $40 for 1000 pages) subscription plans
Supported output formats: Excel, CSV, XML or HTML
Notes: allows to convert multiple PDFs at once

After parsing the sample PDF file and extracting tabular data from it via PDFTables, we get the following result:

Four separate tables of the original PDF are detected as a big, single table. We can also see that all headers are captured as the table element and included as additional, ‘non-original’ cells inside the table. Moreover, cells with multiline text are split into multiple table rows. And finally, the cells of the first table of the sample file are mistakenly merged.

Summary: When it comes to getting tabular data out of PDF docs, PDFTables is the least effective tool. The only task it coped with is the correct detection of cells separated with small margins. But other challenges of ‘extra formatting’ can not be completed with the help of PDFTables.

A comparative pivot table of software tools

In this study, we compared siх software tools — Tabula, PDFTron, Amazon Textract, Excalibur, OCR.space, and PDFTables — by performing their core functions of parsing PDF tables and extracting data from them. We estimated each tool by their ability to complete the following five tasks:

If there are multiple tables on a page — detect them all separately
If non-tabular data is on a page — skip it and do not include it in the extraction result
If any cell contains multiline text — it should not be split into multiple table rows
If there are cells spanned on more than one row/column — they should be recognized correctly, at least separately from other cells
If there are small margins between non-tabular data and a table or between different cells and their content inside the table — they should be recognized separately

If we see from the extraction result that the task is completed successfully, a tool gets 1 point. If we see any mistakes and inconsistencies compared to the original PDF file's tabular data, it receives 0 points.

Here is a comparative pivot table with all the results:

Conclusions:

1. Excalibur is the 'winner' of the study. It successfully coped with most of the challenges of 'extra formatting' except incorrect column & row spanning. Thus it can be recommended as the #1 choice for extracting tabular data from PDFs.

2. Tabula and PDFTron demonstrated quite satisfying results. While Tabula better identifies and excludes non-tabular data (headers and a page number), PDFTron better deliminates cells with multiline text inside.

3. Amazon Textract and OCR.space got only 2 points of 5. In the extraction result provided by Amazon Textract, we see a large amount of data loss and messed the tables' order. The OCR.space's result contains non-tabular data mistakenly included, and multiline content split into multiple table rows.

4. PDFTables failed to complete most of the tasks. It was the only tool that did not recognize four tables of the sample PDF file as four separate ones. Moreover, we can find non-tabular content, split multiline text, and mistakenly merged cells in the extraction result.

5. The most challenging task was to detect column & row spanning correctly: none of the tools fully coped with that task. If you have a complicated table with many cells spanned on more than one row/column, you should look for another software for PDF data extraction.

Follow UpsilonIT on dev.to for the latest tech know-hows, best software development practices, and insightful case studies from industry experts! Remember: your likes and comments are fuel for our future posts!

How to Extract Tabular Data from PDF [part 1]

Upsilon — Tue, 08 Sep 2020 10:42:27 +0000

Today, we would like to talk about the challenges and principles of getting tabular data out of PDF files. UpsilonIT's developer team conducted a study to find out what's the best software for parsing PDF tables and extracting data from them.

Why It’s a Challenge to Extract Tabular Data from PDF

Today PDF is used as the basis of communication between companies, systems, and individuals. It is regarded as the standard for finalized versions of documents as it is not easily editable except in fillable PDF forms. Most popular use cases for PDF documents in the business environment are:

Invoices
Purchase Orders
Shipping Notes
Reports
Presentations
Price & Product Lists
HR Forms

The sheer volume of information exchanged in PDF files means that the ability to extract data from PDF files quickly and automatically is essential. Spending time extracting data from PDFs to input into third party systems can be very costly for a company.

The main problem is that PDF was never really designed as a data input format, but rather, it was designed as an output format ensuring that data will look the same at any device and be printed correctly. A PDF file defines instructions to place characters (and other components) at precise x,y coordinates. Words are simulated by placing some characters closer than others. Spaces are simulated by placing words relatively far apart. As for tables — you are right — they are simulated by placing words as they would appear in a spreadsheet.

We see that the PDF format has no internal representation of a table structure, which makes it difficult to extract tables for analysis. Unfortunately, a lot of open data is stored in PDFs, which was not designed for tabular data in the first place. Luckily, different tools for extracting data from PDF tables are available in the market. Being somewhat similar to each other, they have their own advantages and disadvantages. In this article, we compare the most popular software that can help get tabular data out of PDFs and present it in an easy-to-read, editable, and searchable format.

OCR: When and Why to Use It

Before choosing a tool, the first point is to understand what type of PDF files — text- or image-based — you will work with. It will impact on whether to use Optical Character Recognition (OCR) or not.

For example, we have a report generated as an output by a piece of software and imported in PDF format. Commonly, it is a text-based PDF.

If you work with image-based PDFs like scanned paper docs, or, for example, files captured by a digital camera — this is where OCR comes in. OCR enables machines to recognize written text or printed letters inside images. In other words, the technology helps to convert ‘text-as-an-image’ into an editable and searchable format.

So if your PDF is image-based, then the process of data extraction consists of two tasks: to recognize text and then recognize the table structure (i.e., how the text is placed in rows and columns). Some tools, like Amazon Textract, can complete both of them. But since text recognition is a separate task, it can be performed independently, with the help of pure OCR tools. There are dozens of them, but in this article, we will focus on the table structure recognition.

Nuances of Detecting and Extracting Data from Tables

Let's assume that we have a text-based PDF document generated as an output by a piece of software. It contains tabular data, and we want to extract it and present in a digital format. There are two main ways to detect tables:

Manually, when you detect column borders by eye and mark table columns by hands
Automatically, when you rely on program algorithms

Some tools offer either manual or automatic detection, while others combine both variants. From our experience, we can say that most of our clients' cases require automatic recognition because they handle hundreds of documents with a slightly variable table structure. For example, columns' width can differ not only between two documents but also on different pages inside one document. Therefore, if we mark each column in each table on each page by hand, it would take a lot of time and effort.

For our study, we created a sample one-page document covering all typical difficulties of data extraction caused by an 'inconsistent' table structure. Here is it:

As you can see, in our sample document, we have multiple tables, and all of them have different widths of columns and inconsistent alignments. In such cases, manual detection can be tedious. For this reason, we are not going to use software that offers only manual table data detection. We choose an automatic way, and let’s see how good are algorithms for each of the tools.

In addition to the table structure's basic elements, we also deliberately included some ‘extra formatting’ that can potentially complicate the process of recognition:

Multiple tables on a page — all of them should be detected
Non-tabular data: headers and page number
The multiline text inside cells
Table column & row spanning — merged cells
Small table cell margins inside the table and between the table and the header

Comparison of PDF Table Extraction Libraries and Tools

From this study, you will learn about how six software tools perform their respective tasks of parsing PDF tables and how they stack up against each other. In the first part, we compare Tabula, PDFTron, and Amazon Textract.

Let’s see how libraries and tools mentioned above coped with this task of data recognition and extraction based on our sample document.

Tabula

Tabula is a tool for liberating data tables locked inside PDF files. Tool overview:

Type of software available: web application, requires simple local server setup
Platforms: Windows, MacOS, open source (GitHub, MIT Licence)
Terms of use: free, open-source
Supported output formats: CSV, TSV, JSON
Notes: Tabula only works on text-based PDFs, not scanned documents

After uploading our sample file and parsing data from it via Tabula, we got the following output:

Zones marked in red are parts of the original file where Tabula detected tables. At this step, data recognition is captured correctly; all tables are detected, extraneous elements do not distort the result.

But if we go further, we will see that the first row of the first and last rows of the last two tables is missing:

Tabula offers two options: two data extraction methods. The automatic detection method is Lattice. The result of its usage you can see above. If we try Stream, results become better; all data is extracted correctly without missing rows:

But using the Stream method, we face another problem: cells with multiline text are split into multiple table rows. It seems this variant is the best that we can get from Tabula.

Summary: Tabula's automatic detection method is not the best choice, so I don't recommend relying on it. Both recognition methods provided by this tool have their own disadvantages. While data loss looks unacceptable in any case, split rows can be returned to their original state with additional processing — manually or with the script's help.

PDFTron

PDFTron is software with multiple basic and advanced features that facilitate the manipulation of PDFs. Tool overview:

Type of software available: desktop app, web browser app, mobile app
Platforms: Android, iOS, Windows, Linux, MacOS
Terms of use: free trial period, pricing for licensing starts at $4000 annually
Supported output formats: MS Word, SVG, HTML

After uploading our sample file and parsing data from it via PDFTron, we got the following output:

Red rectangles show the borders of detected tables. The number of tables and tabular data is recognized correctly, but headers of the third and fourth tables are captured as the table elements.

If we convert the original PDF into HTML format using PDFTron, we’ll see that the headers named ‘CATEGORY 2’ and ‘CATEGORY 3’ are included as separate cells inside the table. Also, there are bugs with merged cells of the first table: the last two columns are merged as a larger one, and the second line of text is separated into a separate cell.

Summary: In the output document we can see a piece of non-tabular data incorrectly included in the extraction result. It's not a big problem since it can be purged after processing, manually, or with the script's help. Also, I will not recommend this tool in cases when you have a lot of merged cells — they might be messed up.

Amazon Textract

Amazon Textract is a service that automatically extracts text and data from scanned documents that go beyond simple optical character recognition (OCR) to identify, understand, and extract data from forms and tables. Tool overview:

Type of software available: web application
Platforms: any modern web browser, all processing goes ‘in the Cloud’
Terms of use: several models (free, monthly subscriptions, cost-per-page model)
Supported output formats: raw JSON, JSON for each page in the document, text, key/values exported as CSV, tables exported as CSV.

After uploading our sample file and parsing data from it via Amazon Textract, we got the following result:

Zones painted in gray are parts of the original file where Amazon Textract detected tables. As you can see, it didn’t recognize the first table on the page, detected two separate tables — the second and the third — as a single one, and also messed up the order of tables on the page.

Regarding the data inside the cells, the extraction result is quite satisfying with some exceptions:

Missing the data of the first table in the extraction result
Header string ‘CATEGORY 3 is included as a part of table in the extraction result

Summary: Amazon Textract looks to be the less suitable tool for data extraction applied to this particular case. A large amount of data loss, messed order of tables, and non-tabular data in the output document. The main advantage of Amazon Textract compared to all other tools is OCR, so that you can extract tabular data from images or image-based PDFs. In the case of text-based PDF, I would recommend choosing another tool.

Here is the first part of the article ‘How to Extract Tabular Data from PDF. In the second part, which is coming soon, we will analyze three more popular solutions for extracting and converting data from PDF and prepare a big сomparison table where each tool is rated according to the specific criteria.

Follow UpsilonIT on dev.to not to miss the great content! Your likes and comments are fuel for our future posts!