Quick Construction of Public Apps

Learn how to quickly build and publish a public app to the Shoplazza App Store.

Prerequisites

Before you start building a public app, ensure you have:

• ✅ A Shoplazza Partner account
• ✅ Basic knowledge of web development (JavaScript, HTML, CSS)
• ✅ Familiarity with REST APIs or GraphQL
• ✅ A development environment set up
• ✅ HTTPS-enabled hosting for your app

Step 1: Create Your App

1. Log in to your Shoplazza Partner Dashboard
2. Navigate to Apps > Create App
3. Fill in your app details:
   • App name: Choose a clear, descriptive name
   • App description: Explain what your app does
   • App icon: Upload a 512x512px icon
   • Screenshots: Add 3-5 screenshots showing key features
   • Privacy policy URL: Link to your privacy policy
   • Support contact: Provide email or support URL

Step 2: Configure OAuth

Set up OAuth authentication for your app to access merchant data securely.

OAuth Configuration

const CLIENT_ID = 'your_client_id';
const CLIENT_SECRET = 'your_client_secret';
const REDIRECT_URI = 'https://yourapp.com/auth/callback';

const SCOPES = [
  'read_products',
  'write_products',
  'read_orders',
  'write_orders',
  'read_customers'
];

// Generate authorization URL
const authUrl = `https://oauth.shoplazza.com/authorize?` +
  `client_id=${CLIENT_ID}&` +
  `scope=${SCOPES.join(',')}&` +
  `redirect_uri=${encodeURIComponent(REDIRECT_URI)}&` +
  `state=${generateRandomState()}`;

Handle OAuth Callback

app.get('/auth/callback', async (req, res) => {
  const { code, shop } = req.query;
  
  // Exchange code for access token
  const response = await fetch('https://oauth.shoplazza.com/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      code: code,
      grant_type: 'authorization_code'
    })
  });
  
  const { access_token } = await response.json();
  
  // Store access_token securely
  await saveAccessToken(shop, access_token);
  
  res.redirect('/dashboard');
});

Step 3: Build Your App Features

Implement your app's core functionality using the Shoplazza API.

Example: Product Management Feature

class ProductManager {
  constructor(shopDomain, accessToken) {
    this.shopDomain = shopDomain;
    this.accessToken = accessToken;
    this.baseUrl = `https://${shopDomain}/admin/api/2024-01`;
  }

  async getProducts(limit = 50) {
    const response = await fetch(
      `${this.baseUrl}/products.json?limit=${limit}`,
      {
        headers: {
          'X-Shoplazza-Access-Token': this.accessToken,
          'Content-Type': 'application/json'
        }
      }
    );
    return response.json();
  }

  async createProduct(productData) {
    const response = await fetch(
      `${this.baseUrl}/products.json`,
      {
        method: 'POST',
        headers: {
          'X-Shoplazza-Access-Token': this.accessToken,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ product: productData })
      }
    );
    return response.json();
  }

  async updateProduct(productId, updates) {
    const response = await fetch(
      `${this.baseUrl}/products/${productId}.json`,
      {
        method: 'PUT',
        headers: {
          'X-Shoplazza-Access-Token': this.accessToken,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ product: updates })
      }
    );
    return response.json();
  }
}

Example: Order Processing Feature

async function processOrders(shopDomain, accessToken) {
  const response = await fetch(
    `https://${shopDomain}/admin/api/2024-01/orders.json?status=open`,
    {
      headers: {
        'X-Shoplazza-Access-Token': accessToken
      }
    }
  );
  
  const { orders } = await response.json();
  
  for (const order of orders) {
    // Process each order
    await fulfillOrder(order.id, shopDomain, accessToken);
  }
}

Step 4: Implement Webhooks

Set up webhooks to receive real-time notifications about store events.

app.post('/webhooks/orders/create', async (req, res) => {
  const hmac = req.headers['x-shoplazza-hmac-sha256'];
  const body = req.body;
  
  // Verify webhook authenticity
  if (verifyWebhook(body, hmac)) {
    const order = JSON.parse(body);
    
    // Process new order
    await handleNewOrder(order);
    
    res.status(200).send('OK');
  } else {
    res.status(401).send('Unauthorized');
  }
});

function verifyWebhook(data, hmac) {
  const hash = crypto
    .createHmac('sha256', CLIENT_SECRET)
    .update(data)
    .digest('base64');
  
  return hash === hmac;
}

Step 5: Test Your App

Thorough testing is crucial before submission.

Testing Checklist

• ✅ OAuth Flow: Test complete authorization flow
• ✅ API Calls: Verify all API integrations work
• ✅ Error Handling: Test error scenarios
• ✅ Performance: Check API rate limits
• ✅ Security: Validate webhook signatures
• ✅ UI/UX: Test on different devices and browsers
• ✅ Edge Cases: Test with various data scenarios

Create a Test Store

1. Create a development store in your partner dashboard
2. Install your app on the test store
3. Test all features thoroughly
4. Check logs for any errors

Step 6: Submit for Review

Once testing is complete, submit your app for review.

Submission Checklist

• ✅ App listing information is complete
• ✅ Privacy policy is published and accessible
• ✅ Support contact is provided
• ✅ App icon and screenshots are high quality
• ✅ Test credentials provided for reviewers
• ✅ All features work as described
• ✅ No critical bugs or security issues

Review Process

1. Initial Review (2-3 days): Basic checks
2. Technical Review (3-5 days): Security and functionality
3. Quality Review (2-3 days): UX and performance
4. Final Approval: App goes live

Step 7: Launch and Maintain

After approval, your app will be live in the Shoplazza App Store!

Post-Launch Tasks

• 📢 Marketing: Promote your app
• 📊 Analytics: Monitor usage and performance
• 🐛 Bug Fixes: Address issues quickly
• ✨ Updates: Add new features regularly
• 💬 Support: Respond to merchant inquiries
• 📝 Documentation: Keep docs up to date

Best Practices

Security

• Always validate webhooks with HMAC
• Store credentials in environment variables
• Use HTTPS for all communications
• Implement proper authentication
• Regular security audits

Performance

• Implement caching where appropriate
• Use bulk API operations when possible
• Respect API rate limits
• Optimize database queries
• Monitor response times

User Experience

• Provide clear onboarding
• Show helpful error messages
• Create intuitive UI
• Offer comprehensive documentation
• Provide responsive support

Code Quality

• Follow coding standards
• Write tests for critical paths
• Use version control (Git)
• Document your code
• Regular code reviews

Common Pitfalls to Avoid

❌ Not handling rate limits properly ✅ Implement exponential backoff and respect limits

❌ Storing access tokens insecurely ✅ Encrypt tokens and use secure storage

❌ Poor error handling ✅ Provide clear error messages and logging

❌ Ignoring webhook verification ✅ Always verify webhook signatures

❌ Incomplete testing ✅ Test all features thoroughly before submission

Next Steps

• API Overview
• Admin API Reference