SDK Overview

Complete software development kits for building logistics and delivery applications on the De. platform.

Choose Your SDK

de.sdk (Web) - For web applications
Browser-based SDK with full map integration, routing, and order management.

de.sdk-rn (React Native) - For mobile apps
Native iOS and Android SDK with cross-platform compatibility.

Both SDKs provide complete access to De. platform capabilities.

Platform Ecosystem

De. SDK Architecture

SDK Comparison

Web vs Mobile SDK

Feature

de.sdk (Web)

de.sdk-rn (Mobile)

Platform

Web browsers

iOS & Android

Installation

npm/yarn

npm/yarn + native linking

Map Interface

iframe-based (de.eui)

WebView-based

Location Services

Browser geolocation API

Native GPS access

Offline Support

Limited

Full native support

Background Tracking

No

Yes

Push Notifications

Web push (limited)

Native push

TypeScript

Full support

Full support

Web SDK (de.sdk)

Complete JavaScript/TypeScript SDK for web applications.

Core Modules

MSI - Map Service Interface

Interactive maps with routing, navigation, and real-time tracking

Learn more →

DClient - Order Management

Create and manage orders, packages, and deliveries

Learn more →

Access - Authentication

Workspace authentication and API request management

Learn more →

Utils - Helpers

Distance calculations, formatting, and utilities

Learn more →

Quick Start

1

Install

Add to your project

npm install @de./sdk

2

Initialize

Set up the SDK

import De from '@de./sdk'

const msi = new De.MSI({
  element: 'map',
  accessToken: 'your-token'
})

const { controls, handles } = await msi.load()

3

Build

Create your app

// Show delivery route
await handles.pickupPoint(warehouse, { label: 'Warehouse' })
await handles.dropoffPoint(customer, { label: 'Customer' })

// Track in real-time
socket.on('driver:location', (update) => {
  driverStream.live(async (controls) => {
    await controls.move({ position: update.location })
  })
})

View Web SDK Documentation →

Key Features

MSI (Map Service Interface)

• 📍 Location services and GPS tracking
• 🗺️ Interactive maps with multiple providers (Mapbox, Google)
• 🛣️ Traffic-aware routing and navigation
• 🚗 Real-time fleet tracking
• 🎯 Geofencing and proximity alerts
• 🔌 Plugin system for extensibility

DClient (Delivery Client)

• 📦 Order creation and management
• 🚚 Package tracking
• 📍 Waypoint operations
• 🔔 Real-time event subscriptions
• 👥 Customer management

Access & Utils

• 🔐 Workspace authentication
• 🌐 HTTP request handling
• 📏 Distance calculations
• 🕐 Time formatting
• 🗺️ Coordinate utilities

Use Cases

Food Delivery

Real-time order tracking with driver location updates

E-commerce

Last-mile delivery integration for online stores

Ride Sharing

Driver dispatch and customer matching

Fleet Management

Vehicle tracking and route optimization

Field Service

Technician dispatch and job tracking

Logistics

Multi-stop routes and warehouse management

React Native SDK (de.sdk-rn)

Native mobile SDK for iOS and Android applications.

Coming Soon

React Native SDK documentation is currently being developed.

What it provides:

• Native map components
• Background location tracking
• Offline data sync
• Push notifications
• Camera integration
• Native performance

Join waitlist for early access →

Planned Features

Native Integration

• 📱 iOS and Android support
• 🗺️ Native map rendering
• 📍 Background GPS tracking
• 🔔 Native push notifications
• 📷 Camera for proof of delivery
• 💾 Offline data synchronization

React Native Components

• Map view component
• Route display
• Location picker
• Order list
• Driver status

Mobile-Optimized

• Battery-efficient tracking
• Reduced data usage
• Offline-first architecture
• Native performance

Installation

Web SDK

NPM

npm install @de./sdk

Yarn

yarn add @de./sdk

PNPM

pnpm add @de./sdk

CDN

<script src="https://cdn.dedot.io/sdk/latest/de.sdk.js"></script>

React Native SDK

# Install package
npm install @de./sdk-rn

# iOS
cd ios && pod install

# Android
# Auto-linked with React Native 0.60+

Framework Integration

React

import { useEffect, useRef } from 'react'
import De from '@de./sdk'

function MapComponent() {
  const mapRef = useRef<HTMLDivElement>(null)
  
  useEffect(() => {
    const msi = new De.MSI({
      element: mapRef.current!,
      accessToken: process.env.REACT_APP_DE_TOKEN
    })
    
    msi.load().then(({ controls }) => {
      // Use SDK
    })
    
    return () => msi.destroy()
  }, [])
  
  return <div ref={mapRef} style={{ width: '100%', height: '600px' }} />
}

Vue 3

<template>
  <div ref="mapContainer" style="width: 100%; height: 600px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import De from '@de./sdk'

const mapContainer = ref<HTMLDivElement | null>(null)
let msi: any = null

onMounted(async () => {
  msi = new De.MSI({
    element: mapContainer.value!,
    accessToken: import.meta.env.VITE_DE_TOKEN
  })
  
  await msi.load()
})

onUnmounted(() => {
  msi?.destroy()
})
</script>

Next.js

'use client'

import dynamic from 'next/dynamic'

const Map = dynamic(() => import('./Map'), { ssr: false })

export default function Page() {
  return <Map />
}

Angular

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core'
import De from '@de./sdk'

@Component({
  selector: 'app-map',
  template: '<div #mapContainer style="width: 100%; height: 600px"></div>'
})
export class MapComponent implements OnInit, OnDestroy {
  @ViewChild('mapContainer') mapContainer!: ElementRef
  private msi: any
  
  async ngOnInit() {
    this.msi = new De.MSI({
      element: this.mapContainer.nativeElement,
      accessToken: environment.deToken
    })
    
    await this.msi.load()
  }
  
  ngOnDestroy() {
    this.msi?.destroy()
  }
}

Configuration

Environment Variables

# .env
DE_WORKSPACE_ID=your-workspace-id
DE_ACCESS_TOKEN=your-access-token
DE_ENVIRONMENT=prod  # dev, staging, prod
DE_MAP_ENGINE=mapbox  # mapbox or google

TypeScript Configuration

{
  "compilerOptions": {
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "types": ["@de./sdk"]
  }
}

API Endpoints

The SDKs connect to De. platform APIs:

Authentication Service

• https://auth.dedot.io - User authentication

Core API Service

• https://api.dedot.io - Orders, routing, tracking

IoT Service

• https://iot.dedot.io - Device connectivity

Map Service

• https://map.dedot.io - Embeddable maps (de.eui)

Authentication

All SDK operations require workspace authentication:

const access = new De.Access({
  workspace: 'your-workspace-id',
  accessToken: 'your-access-token',
  env: 'prod'
})

Getting Credentials:

1. Sign up at dedot.io
2. Create a workspace
3. Generate API keys in workspace settings
4. Store securely (environment variables)

Support & Resources

Documentation

• Web SDK Guide
• API Reference
• Examples
• Best Practices

Community

• GitHub
• Discord
• Stack Overflow
• Twitter

Support

• Support Portal
• Status Page
• Email: [email protected]
• Enterprise: [email protected]

Resources

• Changelog
• Roadmap
• Blog
• Video Tutorials

Version Compatibility

SDK Version	Platform	Status	Support
de.sdk 1.x	Web	✅ Stable	Active
de.sdk-rn 1.x	Mobile	🚧 Beta	Coming Soon

Minimum Requirements:

• Web: Modern browsers (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
• Mobile: iOS 13+, Android 6.0+ (API 23+)
• Node.js: 16+ (for development)

Migration Guides

Upgrading from older versions or other platforms:

• Migration from Google Maps SDK
• Migration from Mapbox SDK
• Upgrading from 0.x to 1.x

License

De. SDK is released under the MIT License.

MIT License

Copyright (c) 2024 De. Platform

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files...

Next Steps

Start with Web SDKBuild Your First AppView Examples