Опросы внутри приложений для React Native Apps

TypeForm или SurveyMonkey с использованием веб-просмотров

Давайте сначала поговорим о двух больших: Typeform и SurveyMonkey.

Если вы уже используете одного из этих двух крупных игроков, вы можете рассмотреть возможность использования его в своем приложении. Но оба не имеют встроенной поддержки React, поэтому единственный способ сделать это — использовать Webviews.

Зачем рассматривать WebViews?

• Простота: использование WebView для внедрения внешних опросов позволяет избежать необходимости в сложной встроенной интеграции или интерфейсе API, что делает его простым подходом.
• Платформы с богатым набором функций. И Typeform, и SurveyMonkey известны своими удобными дизайнерскими интерфейсами и мощной аналитикой, позволяющей разработчикам создавать привлекательные опросы, не изобретая заново велосипед.
  
• Согласованность между платформами. Использование WebView гарантирует, что ваши опросы будут отображаться и работать одинаково на разных устройствах, сохраняя желаемый пользовательский опыт.
  

Как реализовать

Встраивание опросов Typeform или SurveyMonkey в ваше приложение React Native предполагает инкапсуляцию URL-адреса опроса в компоненте WebView. Вот базовый пример того, как это можно сделать:

import React from "react";
import { WebView } from "react-native-webview";

const SurveyView = () => {
  return (
    <WebView
      source={{ uri: "https://your.typeform.com/to/example" }}
      style={{ marginTop: 20 }}
    />
  );
};

export default SurveyView;

Замените «https://your.typeform.com/to/example» фактическим URL-адресом вашего опроса Typeform или SurveyMonkey. Эта простая интеграция позволяет вам использовать надежные возможности создания опросов и управления ими на этих платформах непосредственно в вашем приложении.

Недостатки

• Он не интегрируется плавно в пользовательский опыт. Это всегда будет выглядеть как веб-просмотр.
• Сильно зависит от вас, разработчик. Новый опрос необходимо закодировать вручную.
  

Создайте его самостоятельно

Возможно, вы хотите создать свои собственные опросы для обеспечения максимальной гибкости.

Существует 2 основных подхода к этому:

• Использование компонентов React Native
• Использование библиотек
  

Использование компонентов React Native

1. Разработка пользовательского интерфейса: Используйте богатый набор компонентов React Native для разработки ваших опросов. Для текстовой обратной связи ввод текста неоценим, в то время как запросы с множественным выбором могут использовать специально разработанные значки или кнопки переключения для более интерактивного взаимодействия.
2. Обработка состояния и логики: Управление пользовательскими ответами требует тщательного управления состоянием в вашем компоненте. Включите перехватчики состояния, такие как use State, для отслеживания пользовательского ввода и использования эффекта для действий при отправке формы.
   
3. Хранение и извлечение данных: Решите, как и где хранить собранные данные. Firebase, MongoDB или ваш собственный серверный сервер могут служить надежными хранилищами данных. Убедитесь, что вы установили безопасную и эффективную связь между вашим приложением и базой данных.
   

Хотя создание с нуля обеспечивает максимальный контроль, оно требует значительного времени и технических знаний. Для разработчиков, стремящихся к скорости без ущерба для персонализации, внедрение библиотек форм в вашу архитектуру может стать выгодным компромиссом.

Использование библиотек

Несколько библиотек, совместимых с React Native, обеспечивают богатую основу для быстрого создания гибких и функциональных форм, не начиная с нуля. Два примечательных примера включают:

1. Formik:: Formik, получивший высокую оценку за свою простоту и полноту, упрощает создание форм с минимальным использованием шаблонов. Он построен на предпосылке создания первоклассных граждан в React Native, беспрепятственной обработки состояния формы, ее проверки и отправки.
2. React Hook Form: эта библиотека уделяет особое внимание производительности и минимальному повторному рендерингу. Используя перехватчики React, он упрощает управление формами, предлагая эффективный способ создания масштабируемых форм со встроенной проверкой на основе схемы Yup.
   

import { useFormik } from 'formik';

function CustomSurvey() {
  const formik = useFormik({
    initialValues: { feedback: '' },
    onSubmit: values => {
      console.log(values);
    },
  });

  return (
    <View>
      <TextInput
        onChangeText={formik.handleChange('feedback')}
        value={formik.values.feedback}
      />
      <Button onPress={formik.handleSubmit} title="Submit" />
    </View>
  );
}

Использование такого сервиса, как Qualli

Это пропагандируется, но мы полностью поддерживаем эту компанию ⭐️

Если вы ищете простую в реализации и экономящую время стороннюю библиотеку: Qualli может вам подойти.

Qualli способен проводить опросы внутри приложения прямо в вашем пользовательском интерфейсе.

Преимущества:

• React Native SDK (создан разработчиками RN и для них)
• Типовая форма, похожая на конструктор опросов
  
• После внедрения практически не требуется времени на разработку
  
• Нетехническое удобство для пользователя: поручите это команде по маркетингу или UX
  
• Отправьте свои данные в Zapier
  
• Кроссплатформенность (работает и в Интернете!)

Ниже вы можете увидеть пример кода Qualli RN SDK.

import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { QualliProvider, useQualli } from '@qualli/qualli-rn-sdk';

const Home = () => {
    const qualli = useQualli();

    return (
        <View>
            <TouchableOpacity
                onPress={() => {
                    // Give your users unique attributes to later be used in your audience filter
                    qualli.setAttributes({
                        plan: 'trial',
                        email: 'john@doe.com',
                        first_name: 'John',
                        last_name: 'Doe',
                    });
                }}
            >
                <Text>{'Update User Attributes'}</Text>
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => qualli.performTrigger('cart_abandoned')}
                style={{ marginTop: 20 }}
            >
                <Text>{'Trigger cart abandoned'}</Text>
            </TouchableOpacity>
        </View>
    );
};

export default function App() {
    return (
        <QualliProvider apiKey="YOUR_API_KEY_HERE">
            <Home />
        </QualliProvider>
    );
}