npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-sdk-react-native

v1.1.0

Published

VueSDK is a library/SDK providing all the functions and utilities required to help you build and integrate all the recommendations and search offered by Vue.AI.

Downloads

233

Readme

Table of Contents

Overview

VueSDK is a library/SDK providing all the functions and utilities required to help you build and integrate all the recommendations and search offered by Vue.AI. To know about the detailed set of use cases available - please visit this link.

Quick Start Guide

1. Install Vue SDK

You will need your project token for initializing your library. You can get your project token from project settings.

Prerequisites

  • React Native v0.6+

Steps

  1. Under your app's root directory, install vue-sdk-react-native.
npm install vue-sdk-react-native
  1. Under your application's ios folder, run
pod install

2. Initialize Vue SDK

You must first initialize with your project token and Vue SDK base url. You can get your project token from project settings.

import { initialize } from 'vue-sdk-react-native';

const token = 'YOUR_TOKEN';
const baseUrl = 'GIVEN_VUE_SDK_BASE_URL';
const loggingEnabled = true; // set it as true if developer wants to see sdk logs

initialize({ token, baseUrl, loggingEnabled });

Once you've called this method once, you can access all Vue SDK functions throughout the rest of your application.

3. Discover Events

To ensure accurate and comprehensive event tracking, it is recommended to call the discoverEvents function before invoking the track function in your SDK integration. The discoverEvents function retrieves the essential information related to track events, such as event names, properties, and default properties. This step allows you to populate the necessary data and configure the event tracking accordingly.


import { useDiscoverEvents } from 'vue-sdk-react-native';

const {
  discoverEvents,
  discoverEventsResponse: { data, isLoading, error }
} = useDiscoverEvents();

// Discover events method
discoverEvents();

The discoverEventsResponse field returned by the useDiscoverEvents hook is an object containing the following properties:

data: The discover events data returned by the API. This property will be null initially and will be updated once the API call is completed successfully.

isLoading: A boolean value indicating whether the discover events data is currently being loaded from the API. It will be true while the API call is in progress, and false once the data is fetched or an error occurs.

error: An error object, if any, that occurred during the API call. This property will be null if there are no errors.

You can see the events list in console if you set loggingEnabled as true in initialize call.

4. Track Event

To track custom events using our SDK, you can utilize the track function. This function allows you to capture specific actions or interactions within your application and gather valuable data for analysis.

Here's an example of how to use the track function: You can send an event from anywhere in your application. useEvents hook contain track method.


import { useEvents } from 'vue-sdk-react-native';

// Track event method 
const { track } = useEvents();
const eventName = 'YOUR_CUSTOM_EVENT_NAME';
const requestParams = {
// Your request params
  YOUR_KEY: 'YOUR_VALUE'
};
const sdkConfig = {
  platform: 'PLATFORM_VALUE',
  referrer: 'REFERRER_VALUE',
  url: 'URL_VALUE',
  medium: 'MEDIUM_VALUE'
};
const correlationId = 'YOUR_CORRELATION_ID';
track(eventName, requestParams, correlationId, sdkConfig);

The SDK automatically includes several properties when tracking events. These properties are essential for comprehensive event tracking and provide valuable insights into user interactions. Here are some of the properties that are automatically added by the SDK. By explicitly providing the SDK config parameter for the track function, the user can override the following values:

| key | Description | Example Value | ------------- | ------------------------------------- | ---------------------------- | | platform | Platform of the user | android or ios | medium | Medium from where requests are sent | application | referrer | same values as platform for mobile app | android or ios | url | Bundle id of the application | com.example.myapp

5. Get Recommendations

The getRecommendations function in the SDK allows you to retrieve recommendations based on specific search criteria and properties. This function provides a convenient way to fetch recommendations and receive the results asynchronously.

Let's get started by Recommendation methods. We have a useRecommendations hook and it contain three methods for getting Vue SDK recommendations and one object for getting results. They are getRecommendationsByStrategy, getRecommendationsByModule and getRecommendationsByPage. Results of these async methods are getting in the recommendations object.


import { useRecommendations } from 'vue-sdk-react-native';

const {
    getRecommendationsByStrategy,
    getRecommendationsByModule,
    getRecommendationsByPage,
    recommendations: { data, isLoading, error }
  } = useRecommendations();

1. Get Recommendations by Page

const requestParamsForPage = {
  param1: 'VALUE_1',
  param2: 'VALUE_2'
};
const pageReference = 'YOUR_PAGE_NAME';
const correlationId = 'YOUR_CORRELATION_ID';
const sdkConfig = {
  platform: 'PLATFORM_VALUE',
  referrer: 'REFERRER_VALUE',
  url: 'URL_VALUE',
  medium: 'MEDIUM_VALUE'
};
getRecommendationsByModule(
  pageReference,
  requestParamsForPage,
  correlationId,
  sdkConfig
);

2. Get Recommendations by Module

const requestParamsForModule = {
  param1: 'VALUE_1',
  param2: 'VALUE_2'
};
const moduleReference = 'YOUR_MODULE_NAME';
const correlationId = 'YOUR_CORRELATION_ID';
const sdkConfig = {
  platform: 'PLATFORM_VALUE',
  referrer: 'REFERRER_VALUE',
  url: 'URL_VALUE',
  medium: 'MEDIUM_VALUE'
};
getRecommendationsByModule(
  moduleReference,
  requestParamsForModule,
  correlationId,
  sdkConfig
);

3. Get Recommendations by Strategy

const requestParamsForStrategy = {
  param1: 'VALUE_1',
  param2: 'VALUE_2'
};
const strategyReference = 'YOUR_STRATEGY_NAME';
const correlationId = 'YOUR_CORRELATION_ID';
const sdkConfig = {
  platform: 'PLATFORM_VALUE',
  referrer: 'REFERRER_VALUE',
  url: 'URL_VALUE',
  medium: 'MEDIUM_VALUE'
};
getRecommendationsByStrategy(
  strategyReference,
  requestParamsForStrategy,
  correlationId,
  sdkConfig
);

The recommendations field returned by the useRecommendations hook is an object containing the following properties:

data: An object that holds the recommendations data returned by the API. It includes the following properties:

  • recommendationsByModule: An array of recommendations specific to modules.
  • recommendationsByPage: An array of recommendations specific to pages.
  • recommendationsByStrategy: An array of recommendations specific to strategies.

isLoading: An object representing the loading states for different recommendations. It includes the following properties:

  • isRecommendationsByModuleLoading: A boolean value indicating whether the recommendations by module are currently being loaded.
  • isRecommendationsByPageLoading: A boolean value indicating whether the recommendations by page are currently being loaded.
  • isRecommendationsByStrategyLoading: A boolean value indicating whether the recommendations by strategy are currently being loaded.

error: An object representing the errors that occurred during the API calls for different recommendations. It includes the following properties:

  • recommendationsByModuleError: An error object, if any, that occurred while fetching recommendations by module.
  • recommendationsByPageError: An error object, if any, that occurred while fetching recommendations by page.
  • recommendationsByStrategyError: An error object, if any, that occurred while fetching recommendations by strategy.

Here are some of the properties that are automatically added by the SDK. By explicitly providing the SDK config parameter for the getRecommendations function, the user can override the following values:

| key | Description | Example Value | ------------- | ------------------------------------- | ---------------------------- | | platform | Platform of the user | ios | medium | Medium from where requests are sent | application | referrer | same values as platform for mobile app | android or ios | url | Bundle id of the application | com.example.myapp

6. Set User

The setUser function in the SDK allows you to associate a user ID with subsequent API calls after the user has logged in. This user ID is used to track user-specific events and behaviors, providing personalized experiences and accurate analytics.

import { setUser } from 'vue-sdk-react-native';

const userId = 'YOUR_USER_ID';
setUser({ userId });

7. Reset User Profile

The resetUser function in the SDK allows you to clear the user information and reset the SDK state when the user logs out of your application. This ensures that any user-specific data and tracking are cleared and no longer associated with the user.

import { resetUser } from 'vue-sdk-react-native';

resetUser();

8. Set BloxUUID

The setBloxUUID function in the SDK allows you to set the blox UUID which is passed as argument for the getRecommendations and track functions. In the case where you do not set bloxUUID, the SDK internally generates a random UUID upon an SDK function call and will maintain the same value till setBloxUUID is called.

import { setBloxUUID } from 'vue-sdk-react-native';

const BLOX_UUID = 'SAMPLE_BLOX_UUID';

await setBloxUUID(BLOX_UUID);

9. Get BloxUUID

The getBloxUUID function in the SDK returns the blox UUID configured in the SDK.

import { getBloxUUID } from 'vue-sdk-react-native';

const bloxUuid = await getBloxUUID();
console.log('Blox UUID:', bloxUuid);

Complete Code Example

Here's a runnable code example that covers everything in this quickstart guide.




import React, { useEffect } from 'react';
import {
  Button,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  SafeAreaView,
  ActivityIndicator,
} from 'react-native';
import {
  initialize,
  setUser,
  useEvents,
  useRecommendations,
  getBloxUUID,
  setBloxUUID
} from 'vue-sdk-react-native';

function App(): JSX.Element {
  useEffect(() => {
    const token = 'YOUR_TOKEN';
    const baseUrl = 'GIVEN_VUE_SDK_BASE_URL';
    initialize({token, baseUrl, loggingEnabled: true});
    setUser({userId: 'YOUR_USER_ID'});
  }, []);

  const {
    recommendations: {
      data: {
        recommendationsByModule,
        recommendationsByPage,
        recommendationsByStrategy
      },
      isLoading: {
        isRecommendationsByModuleLoading,
        isRecommendationsByPageLoading,
        isRecommendationsByStrategyLoading
      }
    },
    getRecommendationsByStrategy,
    getRecommendationsByModule,
    getRecommendationsByPage,
  } = useRecommendations();

  const getRecommendations = () => {
    const strategyName = 'YOUR_STRATEGY_NAME';
    const requestParams = {
      // Your request params
      YOUR_KEY: 'YOUR_VALUE'
    };
    const correlationId = 'YOUR_CORRELATION_ID';
    const sdkConfig = {
      platform: 'PLATFORM_VALUE',
      referrer: 'REFERRER_VALUE',
      url: 'URL_VALUE',
      medium: 'MEDIUM_VALUE'
    };
    getRecommendationsByStrategy(
      strategyName,
      requestParams,
      correlationId,
      sdkConfig
    );
  };

  const { track } = useEvents();

  const trackEvent = () => {
    const eventName = 'YOUR_CUSTOM_EVENT_NAME';
    const requestParams = {
      // Your request params
      YOUR_KEY: 'YOUR_VALUE',
    };
    const correlationId = 'YOUR_CORRELATION_ID';
    const sdkConfig = {
      platform: 'PLATFORM_VALUE',
      referrer: 'REFERRER_VALUE',
      url: 'URL_VALUE',
      medium: 'MEDIUM_VALUE'
    };
    track(eventName, requestParams, correlationId, sdkConfig);
  };

  const getBloxUuid = async () => {
    const bloxUuid = await getBloxUUID();
    console.log('Blox UUID:', bloxUuid);
  };

  const setBloxUuid = async () => {
    const sampleBloxUuid = 'SAMPLE_BLOX_UUID';
    await setBloxUUID(sampleBloxUuid);
  };

  const renderRecommendationsByStrategy = () => {
    return (
      <ScrollView horizontal>
        {recommendationsByStrategy?.[0]?.data?.map((item: any) => (
          <View key={item?.Title} style={styles.productCard}>
            <View>
              <Image
                style={styles.productImage}
                source={{uri: item['Image Src']}}
              />
            </View>
            <View>
              <Text numberOfLines={2} style={styles.productCardTitle}>
                {item?.Title}
              </Text>
              <Text style={styles.productPrice}>{`${item['Variant Price']}$`}</Text>
            </View>
          </View>
        ))}
      </ScrollView>
    );
  };

  const renderLoader = () => {
    return (
      <View style={styles.loaderContainer}>
        <ActivityIndicator size={'large'} />
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.backgroundStyle}>
      {isRecommendationsByModuleLoading && renderLoader()}
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={styles.backgroundStyle}>
        <View>
          <Button
            color="blue"
            onPress={getRecommendations}
            title="Get Recommendations By Strategy"
          />
          <Button color="blue" onPress={trackEvent} title="Log Event" />
          <Button color="blue" onPress={getBloxUuid} title="Get blox uuid" />
          <Button color="blue" onPress={setBloxUuid} title="Set blox uuid" />
          {renderRecommendationsByStrategy()}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  backgroundStyle: {
    flex: 1,
  },
  productCard: {
    padding: 10,
    margin: 5,
    backgroundColor: '#D2E9E9',
    borderRadius: 5,
    width: 170,
  },
  productCardTitle: {
    color: '#545B77',
    fontWeight: '700',
    paddingTop: 8,
  },
  productPrice: {
    color: '#545B77',
    fontWeight: '400',
    paddingTop: 4,
  },
  productImage: {
    width: 150,
    height: 200,
    borderRadius: 3,
  },
  loaderContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 2,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
});

export default App;

I want to know more!

No worries, here are some links that you will find useful:

Have any questions? Reach out to SDK Support to speak to someone smart, quickly.