Demo Mode

Activity: Expo and Instant Deployment

🎯 Activity Objectives

Master instant deployment by:

Setting up Expo development and production workflows
Building and deploying apps in minutes
Implementing Over-The-Air (OTA) updates
Managing app versions and releases

⚡ Lightning Setup Challenge (10 minutes)

Challenge One: Expo Speed Setup

Time Limit: 5 minutes

Power User Setup:

bash

# Global Expo CLI (if not already installed)
npm install -g @expo/cli

# Login to Expo
expo login

# Verify setup
expo whoami
expo doctor

Account Setup Checklist:

Expo account created
Expo Go app installed on phone
EAS CLI installed: npm install -g @expo/eas-cli
EAS account linked: eas login

Challenge 2: Project Quick Start

Time Limit: 5 minutes

bash

# Create new project
npx create-expo-app InstantDeploy --template blank
cd InstantDeploy

# Start development
npx expo start

# Test on device
# Scan QR code with Expo Go app

✅ Checkpoint: App running on your phone via Expo Go!

📱 Build Your Deployment-Ready App (20 minutes)

Part One: Feature-Rich App Foundation (10 minutes)

Create an app worth deploying! Replace App.js:

javascript

import React, { useState, useEffect } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  TextInput,
  Alert,
  StatusBar,
  Platform,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { LinearGradient } from 'expo-linear-gradient';
import * as Haptics from 'expo-haptics';
import * as Updates from 'expo-updates';

export default function App() {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState('');
  const [appVersion, setAppVersion] = useState('1.0.0');
  const [updateAvailable, setUpdateAvailable] = useState(false);

  useEffect(() => {
    loadNotes();
    checkForUpdates();
  }, []);

  const loadNotes = async () => {
    try {
      const savedNotes = await AsyncStorage.getItem('notes');
      if (savedNotes) {
        setNotes(JSON.parse(savedNotes));
      }
    } catch (error) {
      console.error('Error loading notes:', error);
    }
  };

  const saveNotes = async (newNotes) => {
    try {
      await AsyncStorage.setItem('notes', JSON.stringify(newNotes));
    } catch (error) {
      console.error('Error saving notes:', error);
    }
  };

  const addNote = () => {
    if (newNote.trim()) {
      const updatedNotes = [...notes, {
        id: Date.now(),
        text: newNote.trim(),
        createdAt: new Date().toLocaleDateString(),
      }];
      setNotes(updatedNotes);
      saveNotes(updatedNotes);
      setNewNote('');
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    }
  };

  const deleteNote = (id) => {
    const updatedNotes = notes.filter(note => note.id !== id);
    setNotes(updatedNotes);
    saveNotes(updatedNotes);
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  };

  const checkForUpdates = async () => {
    try {
      const update = await Updates.checkForUpdateAsync();
      if (update.isAvailable) {
        setUpdateAvailable(true);
      }
    } catch (error) {
      console.error('Error checking for updates:', error);
    }
  };

  const handleUpdate = async () => {
    try {
      await Updates.fetchUpdateAsync();
      await Updates.reloadAsync();
    } catch (error) {
      Alert.alert('Update Error', 'Failed to update the app');
    }
  };

  return (
    <LinearGradient
      colors={['#667eea', '#764ba2']}
      style={styles.container}
    >
      <StatusBar barStyle="light-content" />
      
      <View style={styles.header}>
        <Text style={styles.title}>Quick Notes</Text>
        <Text style={styles.version}>v{appVersion}</Text>
        {updateAvailable && (
          <TouchableOpacity
            style={styles.updateButton}
            onPress={handleUpdate}
          >
            <Text style={styles.updateText}>Update Available</Text>
          </TouchableOpacity>
        )}
      </View>

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Add a new note..."
          placeholderTextColor="#999"
          value={newNote}
          onChangeText={setNewNote}
          onSubmitEditing={addNote}
        />
        <TouchableOpacity style={styles.addButton} onPress={addNote}>
          <Text style={styles.addButtonText}>+</Text>
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.notesContainer}>
        {notes.map((note) => (
          <View key={note.id} style={styles.noteCard}>
            <Text style={styles.noteText}>{note.text}</Text>
            <View style={styles.noteFooter}>
              <Text style={styles.noteDate}>{note.createdAt}</Text>
              <TouchableOpacity
                onPress={() => deleteNote(note.id)}
                style={styles.deleteButton}
              >
                <Text style={styles.deleteButtonText}>×</Text>
              </TouchableOpacity>
            </View>
          </View>
        ))}
      </ScrollView>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? 50 : 30,
  },
  header: {
    alignItems: 'center',
    marginBottom: 20,
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: 'white',
    marginBottom: 5,
  },
  version: {
    fontSize: 16,
    color: 'rgba(255,255,255,0.8)',
  },
  updateButton: {
    marginTop: 10,
    backgroundColor: 'rgba(255,255,255,0.2)',
    paddingHorizontal: 15,
    paddingVertical: 5,
    borderRadius: 15,
  },
  updateText: {
    color: 'white',
    fontSize: 12,
  },
  inputContainer: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    marginBottom: 20,
  },
  input: {
    flex: 1,
    backgroundColor: 'white',
    borderRadius: 25,
    paddingHorizontal: 20,
    paddingVertical: 15,
    fontSize: 16,
    marginRight: 10,
  },
  addButton: {
    backgroundColor: 'rgba(255,255,255,0.2)',
    width: 50,
    height: 50,
    borderRadius: 25,
    alignItems: 'center',
    justifyContent: 'center',
  },
  addButtonText: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
  notesContainer: {
    flex: 1,
    paddingHorizontal: 20,
  },
  noteCard: {
    backgroundColor: 'rgba(255,255,255,0.9)',
    borderRadius: 12,
    padding: 15,
    marginBottom: 10,
  },
  noteText: {
    fontSize: 16,
    color: '#333',
    marginBottom: 10,
  },
  noteFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  noteDate: {
    fontSize: 12,
    color: '#666',
  },
  deleteButton: {
    backgroundColor: '#ff6b6b',
    width: 25,
    height: 25,
    borderRadius: 12.5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  deleteButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Part 2: Install Required Dependencies (5 minutes)

bash

# Install all dependencies
npx expo install @react-native-async-storage/async-storage
npx expo install expo-linear-gradient
npx expo install expo-haptics
npx expo install expo-updates

Part 3: Configure App Metadata (5 minutes)

Update your app.json for deployment:

json

{
  "expo": {
    "name": "Quick Notes",
    "slug": "quick-notes-deploy",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#667eea"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourname.quicknotes"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#667eea"
      },
      "package": "com.yourname.quicknotes"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "your-project-id-here"
      }
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    }
  }
}

🚀 EAS Build Challenge (15 minutes)

Challenge One: Configure EAS Build

Time Limit: 5 minutes

bash

# Initialize EAS in your project
eas build:configure

# This creates eas.json with build profiles

Verify your eas.json:

json

{
  "cli": {
    "version": ">= 3.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {
      "distribution": "store"
    }
  },
  "submit": {
    "production": {}
  }
}

Challenge 2: Build for Different Platforms

Time Limit: 10 minutes to start builds

Android APK (Internal Distribution):

bash

# Build APK for testing
eas build -p android --profile preview

iOS Simulator Build:

bash

# Build for iOS simulator (if on macOS)
eas build -p ios --profile development

Production Builds:

bash

# Android Play Store
eas build -p android --profile production

# iOS App Store (requires Apple Developer account)
eas build -p ios --profile production

✅ Checkpoint: At least one build started successfully!

🔄 Over-The-Air Updates Challenge (10 minutes)

Challenge One: Publish Your First Update

Time Limit: 5 minutes

Make a simple change to your app:

javascript

// In App.js, change the title
const [appVersion, setAppVersion] = useState('1.0.1'); // Changed from 1.0.0

// Add a new feature or change colors
const styles = StyleSheet.create({
  // ... existing styles
  title: {
    fontSize: 34, // Increased from 32
    fontWeight: 'bold',
    color: 'white',
    marginBottom: 5,
  },
});

Publish the update:

bash

# Publish update to all builds
eas update --auto

# Or specify a branch/channel
eas update --branch production --message "Updated title size and version"

Challenge 2: Test OTA Updates

Time Limit: 5 minutes

Close your app completely on your phone
Reopen the app - it should automatically download the update
Force refresh if needed (pull down on the app)
Verify changes - version number and title size should be updated

Advanced OTA Testing:

javascript

// Add this button to your app to manually check for updates
const checkManualUpdate = async () => {
  try {
    const update = await Updates.checkForUpdateAsync();
    if (update.isAvailable) {
      Alert.alert(
        'Update Available',
        'A new version is available. Download now?',
        [
          { text: 'Later', style: 'cancel' },
          { text: 'Update', onPress: handleUpdate }
        ]
      );
    } else {
      Alert.alert('No Updates', 'You have the latest version!');
    }
  } catch (error) {
    Alert.alert('Update Error', 'Could not check for updates');
  }
};

📊 Deployment Workflow Mastery (5 minutes)

Development Workflow Setup

One. Development Phase:

bash

# Local development
npx expo start

# Test on device via Expo Go
# Make changes, see them instantly

2. Testing Phase:

bash

# Create preview build
eas build -p android --profile preview

# Share APK with testers
# Install and test on real devices

3. Updates Phase:

bash

# Push OTA updates
eas update --branch preview --message "Bug fixes"

# Test updates work correctly

4. Production Phase:

bash

# Production build
eas build -p android --profile production
eas build -p ios --profile production

# Submit to stores
eas submit -p android
eas submit -p ios

Branch Strategy Challenge

Set up multiple deployment channels:

bash

# Development updates
eas update --branch development

# Staging updates
eas update --branch staging

# Production updates
eas update --branch production

Configure different build profiles for each:

json

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "channel": "development"
    },
    "staging": {
      "distribution": "internal",
      "channel": "staging"
    },
    "production": {
      "distribution": "store",
      "channel": "production"
    }
  }
}

🔧 Advanced Deployment Features

Challenge One: Environment Variables

Set up environment-specific configs:

javascript

// Create config.js
const config = {
  development: {
    apiUrl: 'https://dev-api.example.com',
    analytics: false,
    debugMode: true,
  },
  staging: {
    apiUrl: 'https://staging-api.example.com',
    analytics: true,
    debugMode: false,
  },
  production: {
    apiUrl: 'https://api.example.com',
    analytics: true,
    debugMode: false,
  }
};

const getConfig = () => {
  if (__DEV__) return config.development;
  
  // Use EAS environment variables
  const releaseChannel = Updates.releaseChannel;
  return config[releaseChannel] || config.production;
};

export default getConfig();

Challenge 2: App Store Preparation

Generate required assets:

bash

# Generate app icons for all sizes
# Use online tools or design software

# Create screenshots for stores
# Use device simulators/emulators

# Prepare store descriptions
# Write compelling app descriptions

Store Metadata Checklist:

App name and description
Keywords for ASO (App Store Optimization)
Screenshots (multiple device sizes)
App icons (all required sizes)
Privacy policy (if collecting data)
Age rating information
Contact information

💡 Deployment Best Practices

Version Management

Semantic Versioning:

Major: 1.0.0 -> 2.0.0 (breaking changes)
Minor: 1.0.0 -> 1.1.0 (new features)
Patch: 1.0.0 -> 1.0.1 (bug fixes)

Update Strategy:

Use OTA for bug fixes and minor features
Use store updates for major features or native changes
Test all updates thoroughly before release

Monitoring and Analytics

Add deployment tracking:

javascript

import * as Updates from 'expo-updates';

// Track update events
const trackUpdateEvent = (eventName, properties = {}) => {
  // Your analytics service (Firebase, Amplitude, etc.)
  console.log(`Update Event: ${eventName}`, properties);
};

useEffect(() => {
  const checkAndApplyUpdate = async () => {
    try {
      const update = await Updates.checkForUpdateAsync();
      if (update.isAvailable) {
        trackUpdateEvent('update_available', {
          currentVersion: Updates.manifest?.version,
          newVersion: update.manifest?.version,
        });
        
        await Updates.fetchUpdateAsync();
        trackUpdateEvent('update_downloaded');
        
        // Optionally auto-reload or prompt user
        await Updates.reloadAsync();
      }
    } catch (error) {
      trackUpdateEvent('update_error', { error: error.message });
    }
  };

  checkAndApplyUpdate();
}, []);

🏆 Deployment Mastery Checklist

Successfully Deployed If:

✅ App builds successfully for target platforms
✅ OTA updates work seamlessly
✅ Different environments are properly configured
✅ App store assets are prepared and complete
✅ Update strategy is documented and tested
✅ Analytics/monitoring is implemented

🔗 Advanced Challenges

Challenge One: Custom Build Scripts

bash

# Create custom build commands
# package.json scripts:
"scripts": {
  "build:dev": "eas build -p android --profile development",
  "build:staging": "eas build -p android --profile preview",
  "build:prod": "eas build --platform all --profile production",
  "update:dev": "eas update --branch development",
  "update:prod": "eas update --branch production --message"
}

Challenge 2: Automated Testing

bash

# Add testing before deployment
npm run test
npm run lint
npm run type-check
eas build --profile production

Challenge 3: Rollback Strategy

javascript

// Implement update rollback
const rollbackUpdate = async () => {
  try {
    await Updates.reloadAsync();
  } catch (error) {
    // Handle rollback failure
    Alert.alert('Rollback Failed', 'Please restart the app');
  }
};

📝 Success Documentation

Document your deployment process:

Build Commands Used:
- Development:
- Staging:
- Production:
Update Strategy:
- OTA frequency:
- Store update triggers:
- Testing process:
Lessons Learned:
- What worked well:
- What was challenging:
- Improvements for next time:

Time Investment: 60 minutes total Difficulty Level: Intermediate Prerequisites: React Native basics, Expo account Tools Needed: Expo CLI, EAS CLI, smartphone for testing

Activity 4: Expo and Instant Deployment

Activity 4: Expo and Instant Deployment