Hướng Dẫn Xây Dựng Ứng Dụng Đặt Đồ Ăn Full Stack với React Native

    # Tạo project mới
    npx create-expo-app@latest food-ordering -t typescript-navigation
    
    # Di chuyển vào thư mục dự án
    cd food-ordering
    
    # Chạy server phát triển
    npm start
    

    // Tạo component hiển thị thông tin pizza
    
      
      {product.name}
      ${product.price}
    
    
    // Styling với StyleSheet
    const styles = StyleSheet.create({
      container: {
        backgroundColor: 'white',
        padding: 10,
        borderRadius: 10,
        flex: 1,
      },
      image: {
        width: '100%',
        aspectRatio: 1,
      },
      title: {
        fontSize: 18,
        fontWeight: '600',
        marginVertical: 10,
      },
      price: {
        color: Colors.light.tint,
        fontWeight: 'bold',
      },
    });
    

    // components/ProductListItem.tsx
    export default function ProductListItem({ product }) {
      return (
        
          
          {product.name}
          ${product.price}
        
      );
    }
    
    // Sử dụng trong component khác
    import ProductListItem from '@components/ProductListItem';
    
    // Trong component cha
    
    
    

    // Định nghĩa type cho props
    type ProductListItemProps = {
      product: Product;
    };
    
    // Sử dụng type trong component
    const ProductListItem = ({ product }: ProductListItemProps) => {
      return (
        
          
          {product.name}
          ${product.price}
        
      );
    };
    
    // Cấu hình path aliases trong tsconfig.json
    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@components/*": ["src/components/*"],
          "@assets/*": ["assets/*"],
          "@/*": ["src/*"]
        }
      }
    }
    

     }
      numColumns={2}
      contentContainerStyle={{ padding: 10, gap: 10 }}
      columnWrapperStyle={{ gap: 10 }}
    />
    

    // src/app/[id].tsx - Dynamic route cho chi tiết sản phẩm
    import { useLocalSearchParams } from 'expo-router';
    
    export default function ProductDetails() {
      // Lấy ID từ URL parameters
      const { id } = useLocalSearchParams();
      
      // Lấy thông tin sản phẩm dựa trên ID
      const product = products.find(p => p.id.toString() === id);
      
      return (
        
          Product Details for ID {id}
          {product && (
            <>
              
              {product.name}
              ${product.price}
            </>
          )}
        
      );
    }
    
    // Sử dụng Link để điều hướng
    import { Link } from 'expo-router';
    
    // Trong ProductListItem
    
      
        {/* Component content */}
      
    
    

    // State cho kích cỡ đã chọn
    const [selectedSize, setSelectedSize] = useState('M');
    
    // Render selector
    
      {sizes.map((size) => (
         setSelectedSize(size)}
        >
          
            {size}
          
        
      ))}
    
    
    // Button thêm vào giỏ hàng
     addToCart()} 
    />
    

    // Tạo Context và Provider
    const CartContext = createContext({
      items: [],
      addItem: () => {},
      updateQuantity: () => {},
      total: 0,
    });
    
    export const CartProvider = ({ children }: { children: React.ReactNode }) => {
      const [items, setItems] = useState<CartItem[]>([]);
      
      // Thêm sản phẩm vào giỏ hàng
      const addItem = (product: Product, size: PizzaSize) => {
        // Kiểm tra sản phẩm đã tồn tại trong giỏ
        const existingItem = items.find(
          item => item.product.id === product.id && item.size === size
        );
        
        if (existingItem) {
          // Nếu đã tồn tại, tăng số lượng
          updateQuantity(existingItem.id, 1);
          return;
        }
        
        // Thêm sản phẩm mới
        setItems([
          {
            id: randomUUID(),
            product,
            size,
            quantity: 1,
          },
          ...items,
        ]);
      };
      
      // Cập nhật số lượng
      const updateQuantity = (itemId: string, amount: -1 | 1) => {
        setItems(
          items.map(item => {
            if (item.id !== itemId) return item;
            
            return {
              ...item,
              quantity: item.quantity + amount,
            };
          }).filter(item => item.quantity > 0)
        );
      };
      
      // Tính tổng tiền
      const total = items.reduce(
        (sum, item) => sum + item.product.price * item.quantity,
        0
      );
      
      return (
        
          {children}
        
      );
    };
    
    // Custom hook
    export const useCart = () => useContext(CartContext);
    

    // Phân biệt admin và user bằng style
    // app/admin/_layout.tsx
    
       ,
        }}
      />
       ,
        }}
      />
    
    
    // Component để điều hướng
    // app/index.tsx
    export default function HomeScreen() {
      return (
        
          Food Ordering App
          
            
              
                User
              
            
            
              
                Admin
              
            
          
        
      );
    }
    

    // State quản lý form
    const [name, setName] = useState('');
    const [price, setPrice] = useState('');
    const [image, setImage] = useState(null);
    const [errors, setErrors] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    
    // Validation
    const validateInput = () => {
      setErrors('');
      if (!name) {
        setErrors('Name is required');
        return false;
      }
      if (!price) {
        setErrors('Price is required');
        return false;
      }
      if (isNaN(parseFloat(price))) {
        setErrors('Price is not a number');
        return false;
      }
      return true;
    };
    
    // Chọn hình ảnh
    const pickImage = async () => {
      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });
    
      if (!result.canceled) {
        setImage(result.assets[0].uri);
      }
    };
    
    // Xử lý form submit
    const onSubmit = () => {
      if (isUpdating) {
        onUpdate();
      } else {
        onCreate();
      }
    };
    

    // src/lib/supabase.ts
    import 'react-native-url-polyfill/auto';
    import { createClient } from '@supabase/supabase-js';
    import { Database } from '../database.types';
    
    const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL || '';
    const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY || '';
    
    export const supabase = createClient(supabaseUrl, supabaseKey);
    

    // Đăng ký người dùng
    const signUpWithEmail = async () => {
      setIsLoading(true);
      const { error } = await supabase.auth.signUp({
        email,
        password,
      });
      
      if (error) {
        Alert.alert('Error', error.message);
      }
      setIsLoading(false);
    };
    
    // Đăng nhập người dùng
    const signInWithEmail = async () => {
      setIsLoading(true);
      const { error } = await supabase.auth.signInWithPassword({
        email,
        password,
      });
      
      if (error) {
        Alert.alert('Error', error.message);
      }
      setIsLoading(false);
    };
    
    // AuthProvider
    const AuthProvider = ({ children }) => {
      const [session, setSession] = useState(null);
      const [profile, setProfile] = useState(null);
      const [isLoading, setIsLoading] = useState(true);
      
      useEffect(() => {
        // Fetch current session
        const fetchSession = async () => {
          const { data, error } = await supabase.auth.getSession();
          if (data?.session) {
            setSession(data.session);
            fetchProfile(data.session);
          }
          setIsLoading(false);
        };
        
        fetchSession();
        
        // Subscribe to auth changes
        const { data } = supabase.auth.onAuthStateChange((_event, session) => {
          setSession(session);
          if (session) {
            fetchProfile(session);
          }
        });
        
        return () => {
          data?.subscription.unsubscribe();
        };
      }, []);
      
      return (
        
          {children}
        
      );
    };
    

    // Custom hook đọc danh sách sản phẩm
    export const useProductList = () => {
      return useQuery({
        queryKey: ['products'],
        queryFn: async () => {
          const { data, error } = await supabase
            .from('products')
            .select('*');
          
          if (error) {
            throw new Error(error.message);
          }
          
          return data;
        },
      });
    };
    
    // Custom hook tạo sản phẩm mới
    export const useInsertProduct = () => {
      const queryClient = useQueryClient();
      
      return useMutation({
        mutationFn: async (data: InsertTables<'products'>) => {
          const { data: newProduct, error } = await supabase
            .from('products')
            .insert(data)
            .select('*')
            .single();
          
          if (error) {
            throw new Error(error.message);
          }
          
          return newProduct;
        },
        onSuccess: () => {
          queryClient.invalidateQueries({ queryKey: ['products'] });
        },
      });
    };
    
    // Sử dụng hooks trong component
    const ProductsList = () => {
      const { data: products, error, isLoading } = useProductList();
      
      if (isLoading) {
        return ;
      }
      
      if (error) {
        return Failed to fetch products;
      }
      
      return (
         }
          numColumns={2}
          contentContainerStyle={{ padding: 10, gap: 10 }}
          columnWrapperStyle={{ gap: 10 }}
        />
      );
    };
    

    // Upload hình ảnh lên Supabase Storage
    const uploadImage = async (uri: string) => {
      try {
        const fileExtension = uri.split('.').pop();
        const fileName = `${randomUUID()}.${fileExtension}`;
        
        const fileB64 = await FileSystem.readAsStringAsync(uri, {
          encoding: FileSystem.EncodingType.Base64,
        });
        
        const { data, error } = await supabase.storage
          .from('product-images')
          .upload(fileName, decode(fileB64), {
            contentType: 'image/png',
          });
          
        if (error) {
          throw new Error(error.message);
        }
        
        return data.path;
      } catch (e) {
        console.log(e);
        return null;
      }
    };
    
    // Component hiển thị ảnh từ Supabase Storage
    const RemoteImage = ({ path, fallback }: { path: string | null; fallback: string }) => {
      const [image, setImage] = useState(null);
      
      useEffect(() => {
        if (!path) return;
        
        const downloadImage = async () => {
          try {
            const { data, error } = await supabase.storage
              .from('product-images')
              .download(path);
              
            if (error) {
              throw error;
            }
            
            const fr = new FileReader();
            fr.readAsDataURL(data);
            fr.onload = () => {
              setImage(fr.result as string);
            };
          } catch (e) {
            console.log(e);
          }
        };
        
        downloadImage();
      }, [path]);
      
      if (!image) {
        return ;
      }
      
      return ;
    };
    

    // Custom hook để lắng nghe khi có đơn hàng mới
    export const useInsertOrderSubscription = () => {
      const queryClient = useQueryClient();
      
      useEffect(() => {
        const subscription = supabase
          .channel('schema-db-changes')
          .on(
            'postgres_changes',
            {
              event: 'INSERT',
              schema: 'public',
              table: 'orders',
            },
            (payload) => {
              // Invalidate and refetch orders query
              queryClient.invalidateQueries({ queryKey: ['orders'] });
            }
          )
          .subscribe();
          
        return () => {
          subscription.unsubscribe();
        };
      }, []);
    };
    
    // Custom hook để lắng nghe khi đơn hàng cập nhật trạng thái
    export const useUpdateOrderSubscription = (id: number) => {
      const queryClient = useQueryClient();
      
      useEffect(() => {
        const subscription = supabase
          .channel(`order-${id}-changes`)
          .on(
            'postgres_changes',
            {
              event: 'UPDATE',
              schema: 'public',
              table: 'orders',
              filter: `id=eq.${id}`,
            },
            (payload) => {
              // Invalidate and refetch specific order query
              queryClient.invalidateQueries({ 
                queryKey: ['orders', id] 
              });
            }
          )
          .subscribe();
          
        return () => {
          subscription.unsubscribe();
        };
      }, [id]);
    };
    

    // Supabase Edge Function (payment-sheet/index.ts)
    import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
    import { stripe } from '../_utils/stripe.ts';
    
    serve(async (req) => {
      try {
        const { amount } = await req.json();
        
        // Tạo payment intent
        const paymentIntent = await stripe.paymentIntents.create({
          amount: amount,
          currency: 'usd',
        });
        
        // Trả về client secret cho React Native app
        const response = {
          paymentIntent: paymentIntent.client_secret,
          publishableKey: Deno.env.get('EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY'),
        };
        
        return new Response(JSON.stringify(response), {
          headers: { 'Content-Type': 'application/json' },
        });
      } catch (error) {
        return new Response(JSON.stringify({ error: error.message }), {
          headers: { 'Content-Type': 'application/json' },
          status: 400,
        });
      }
    });
    
    // Client-side (React Native)
    import { initPaymentSheet, presentPaymentSheet } from '@stripe/stripe-react-native';
    
    const initializePaymentSheet = async (amount: number) => {
      try {
        // Gọi Edge Function để lấy payment intent
        const { data, error } = await supabase.functions.invoke('payment-sheet', {
          body: { amount: Math.floor(amount * 100) },
        });
        
        if (error || !data.paymentIntent || !data.publishableKey) {
          console.error('Error fetching payment params:', error);
          return;
        }
        
        // Khởi tạo payment sheet
        const { error: initError } = await initPaymentSheet({
          merchantDisplayName: 'NotJust.Dev Food',
          paymentIntentClientSecret: data.paymentIntent,
        });
        
        if (initError) {
          console.error('Error initializing payment sheet:', initError);
        }
      } catch (e) {
        console.error('Payment sheet error:', e);
      }
    };
    
    const openPaymentSheet = async () => {
      try {
        const { error } = await presentPaymentSheet();
        
        if (error) {
          Alert.alert('Payment failed', error.message);
          return false;
        }
        
        Alert.alert('Payment successful', 'Your order has been placed!');
        return true;
      } catch (e) {
        console.error('Payment presentation error:', e);
        return false;
      }
    };
    

    // Đăng ký để nhận push notifications
    const registerForPushNotifications = async () => {
      // Kiểm tra nếu đang chạy trên thiết bị thật
      const { isDevice } = Device.getDeviceTypeAsync();
      if (!isDevice) {
        alert('Phải sử dụng thiết bị thật để nhận push notifications');
        return;
      }
    
      // Kiểm tra quyền hiện tại
      const { status: existingStatus } = await Notifications.getPermissionsAsync();
      let finalStatus = existingStatus;
    
      // Nếu chưa có quyền, yêu cầu quyền
      if (existingStatus !== 'granted') {
        const { status } = await Notifications.requestPermissionsAsync();
        finalStatus = status;
      }
    
      if (finalStatus !== 'granted') {
        alert('Không thể nhận push notifications nếu không cấp quyền!');
        return;
      }
    
      // Lấy Expo push token
      const token = await Notifications.getExpoPushTokenAsync({
        projectId: Constants.expoConfig?.extra?.eas?.projectId,
      });
    
      return token.data;
    };
    
    // Lưu push token vào database
    const savePushToken = async (token: string) => {
      await supabase
        .from('profiles')
        .update({ expo_push_token: token })
        .eq('id', profile.id);
    };
    
    // Gửi push notification
    const sendPushNotification = async (
      token: string,
      title: string,
      body: string
    ) => {
      await fetch('https://exp.host/--/api/v2/push/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          to: token,
          title,
          body,
          sound: 'default',
        }),
      });
    };
    
    // Thông báo cho người dùng khi trạng thái đơn hàng thay đổi
    const notifyUserAboutOrderUpdate = async (order: Tables<'orders'>) => {
      // Lấy token của người dùng từ profile
      const { data } = await supabase
        .from('profiles')
        .select('expo_push_token')
        .eq('id', order.user_id)
        .single();
    
      if (!data?.expo_push_token) return;
    
      // Gửi thông báo
      await sendPushNotification(
        data.expo_push_token,
        `Đơn hàng của bạn đang ${order.status}`,
        `Đơn hàng #${order.id} đã được cập nhật!`
      );
    };