DOCSEARCHbyAlgolia
Submit Docs

Appmaker Developer Documentation

website·Indexed 35 days ago

https://developer-docs.appmaker.xyz

Developer guides and API references for customizing Appmaker apps. Includes documentation on the theming system, UI components like AppModal and ThemeText, custom block registration, and React Native hooks for Shopify integrations such as useEmailOtpLogin and useForgotPassword.

Tokens
139.3K
Snippets
591
Records
871
Agent score
55%

What's inside Appmaker

  1. Overview of SplashScreen customization

    The SplashScreen component can be customized using three primary methods: timeout-based delays, wait handlers for asynchronous work (like API calls), and custom UI components.

    Critical Requirement: All splash screen filters must be registered outside the activate function of your theme to ensure they are applied before the splash screen is displayed. This functionality is only active when app-settings.enable_custom_splash is enabled.

    Resolution Order: When the splash screen mounts, it determines what to wait for in this priority:

    1. appmaker-splash-screen-wait-handler (Highest priority)
    2. appmaker-splash-screen-timeout (Overrides default)
    3. splash_screen_timeout from app settings (Default fallback)

  2. Overview of default WebEngage Analytics Events

    The Appmaker WebEngage plugin (@appmaker-packages/extension-webengage) fires a set of default events to track user behavior. These events are triggered by SDK/app code. Note that custom event overrides via the webengageEventData filter and external system events (such as Shopify webhooks for Order Created/Updated or WebEngage system events like Email Sent) are not handled by this plugin.

  4. Overview of the Appmaker mobile app platform

    Appmaker is a mobile app platform built on React Native designed for creating scalable, secure, and reliable business applications. It features an extensible architecture that allows developers to either use pre-existing platform components or build and integrate their own custom components.

  5. Track Product Viewed events in MoEngage

    The Product Viewed event tracks when a user views a specific product. It includes details about the product's availability, pricing, and inventory.

    Event Name: Product Viewed Parameters:

    • Product Title (String)
    • Product ID (String)
    • Available (Boolean)
    • Price (Number)
    • Currency (String)
    • productType (String)
    • Total Variants (Number)
    • totalInventory (Number)
    • URL (String)
    • Source (String)

  6. Retrieve and manage Shopify discounts using the useDiscount hook

    The useDiscount hook is used to access discount data and manage the application of coupons for a Shopify cart. It provides real-time information about applied discounts, the current cart subtotal, and utility functions to apply or remove coupons.
    const { 
  cartSubTotalAmount, 
  couponTitle, 
  onApplyCoupon, 
  onRemoveCoupon, 
  hasCouponApplied, 
  couponsList 
} = useDiscount();

  7. Reference AppsFlyer analytics events for AppMaker Shopify Mobile App

    The AppMaker Shopify Mobile App triggers the following AppsFlyer analytics events to track user behavior and commerce activity. Each event includes specific metadata in its payload to provide context about the action (e.g., product IDs, prices, and currency).
    // Example: af_content_view (Opened a product)
{
  "Product Title": "T shirt Yasi",
  "af_content_id": "6793295167650",
  "af_price": "32.0",
  "af_currency": "INR",
  "af_content_type": "T shirts",
  "Total Variants": 4,
  "totalInventory": 941,
  "URL": "https://cdn.shopify.com/s/files/1/0571/2193/1426/products/pexels-monstera-6311599%5F1%5F500x500.jpg?v=1655804220",
  "Source": "Shopify Mobile App"
}

// Example: af_purchase (Item purchased)
{
  "af_order_id": "5279547588770",
  "af_receipt_id": "5279547588770",
  "af_currency": "INR",
  "af_price": "236.0",
  "af_revenue": "236.0",
  "af_quantity": 1,
  "af_content": "trousers",
  "af_content_list": ["trousers"],
  "Source": "Shopify Mobile App"
}

  10. Configure Google Login in Appmaker and Firebase

    Follow these steps to enable Google Login for your application:

    1. Appmaker Dashboard: Activate the Google login extension.
    2. Firebase Project Settings:
      • Navigate to Project Overview > Project Settings.
      • Scroll to the Android apps section and click Add fingerprint.
      • Add the following SHA-1 key: ed:34:3a:18:65:11:42:b5:44:7f:0d:c3:41:67:08:68:ab:9a:05:dc.
    3. Firebase Authentication:
      • Go to the Authentication section and click Get Started.
      • Enable the Google provider.
      • Enter your app name (without spaces) in the 'Project public-facing name' field.
      • Enter your email in the 'Project support email' field and save.

    Once completed, download the latest APK from the Appmaker dashboard to test the functionality on Android and iOS.

    SHA-1 Fingerprint: ed:34:3a:18:65:11:42:b5:44:7f:0d:c3:41:67:08:68:ab:9a:05:dc

  11. Track cart views with the `view_cart` event

    The view_cart event is triggered when a user views their cart. It includes details about the cart's total value and quantity. The event is associated with a Shopify Cart (Checkout) object in its context.
    {
  "id": "gid://shopify/Checkout/883e81276c5bb5307814a58cea91eeef?key=aecd46933486b47241453786ccdef3e9",
  "currency": "INR",
  "total_price": 285.0,
  "total_quantity": 2
}