Лаб6
.docxМинистерство цифрового развития, связи и массовых коммуникаций РФ
ордена Трудового Красного Знамени федеральное государственное
бюджетное образовательное учреждение высшего образования
«МОСКОВСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ СВЯЗИ И
ИНФОРМАТИКИ»
Кафедра «МКиИТ»
Лабораторная № 6
по дисциплине «Разработка кроссплатформенного программного обеспечения»
Реализация корзины товаров с сохранением данных в AsyncStorage
Выполнил:
студент группы БФИ2203
Мячина Л. А.
Проверил:
Потапченко Т. Д.
Москва, 2024 г.
Цель работы:
В данной лабораторной работе студенты разработают функционал корзины для мобильного приложения на базе React Native. В рамках этой работы необходимо создать корзину товаров, позволяющую пользователю добавлять и управлять товарами, сохранять состояние корзины между сессиями, а также улучшить визуальный интерфейс для комфортного взаимодействия.
Требования к работе:
1. Отображение товаров в корзине с детализированными карточками.
2. Управление количеством товаров с автоматическим пересчетом стоимости.
3. Применение промокодов для предоставления скидок.
4. Перемещение товаров в "отложенные" и их сохранение в AsyncStorage
Выполнение работы:
Листинг кода
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import BinScreen from './screens/BinScreen';
import SavedItemsScreen from './screens/SavedItemsScreen';
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Cart">
<Stack.Screen name="Cart" component={BinScreen} options={{ title: 'Корзина' }} />
<Stack.Screen name="SavedItems" component={SavedItemsScreen} options={{ title: 'Отложенные' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
import React, { useState, useEffect } from 'react';
import { View, FlatList, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useFocusEffect } from '@react-navigation/native'; // Новое
import SavedItemCard from '../components/SavedItemCard';
export default function SavedItemsScreen() {
const [savedItems, setSavedItems] = useState([]);
const loadSavedItems = async () => {
const storedSavedItems = await AsyncStorage.getItem('savedItems');
setSavedItems(JSON.parse(storedSavedItems) || []);
};
useFocusEffect(
React.useCallback(() => {
loadSavedItems();
}, [])
);
const moveToCart = async (id) => {
const itemToMove = savedItems.find(item => item.id === id);
if (itemToMove) {
// Удалить товар из "отложенных"
const updatedSavedItems = savedItems.filter(item => item.id !== id);
setSavedItems(updatedSavedItems);
await AsyncStorage.setItem('savedItems', JSON.stringify(updatedSavedItems));
// Добавить товар в корзину
const storedCart = JSON.parse(await AsyncStorage.getItem('cart')) || [];
const updatedCart = [...storedCart, itemToMove];
await AsyncStorage.setItem('cart', JSON.stringify(updatedCart));
}
};
return (
<View style={styles.container}>
<FlatList
data={savedItems}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<SavedItemCard item={item} onMoveToCart={moveToCart} />
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 20 },
});
import React, { useState, useEffect } from 'react';
import { View, FlatList, Button, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useFocusEffect } from '@react-navigation/native';
import ItemCard from '../components/ItemCard';
import PromoInput from '../components/PromoInput';
import BinSummary from '../components/BinSummary';
export default function CartScreen({ navigation }) {
const [cart, setCart] = useState([]);
const [promoCode, setPromoCode] = useState('');
const [discount, setDiscount] = useState(0);
const discounts = new Map([
['SALE10', 0.1],
['SALE20', 0.2],
['SALE50', 0.5],
])
useFocusEffect(
React.useCallback(() => {
const loadCart = async () => {
const storedCart = await AsyncStorage.getItem('cart');
setCart(JSON.parse(storedCart) || []);
};
loadCart();
}, [])
);
useEffect(() => {
AsyncStorage.setItem('cart', JSON.stringify(cart));
}, [cart]);
const addItem = () => {
const newItem = {
id: Date.now().toString(),
name: `Товар ${cart.length + 1}`,
description: 'Описание товара',
price: Math.floor(Math.random() * 1000) + 1,
quantity: 1,
};
setCart([...cart, newItem]);
};
const updateQuantity = (id, delta) => {
setCart(cart.map(item => item.id === id ? { ...item, quantity: Math.max(1, item.quantity + delta) } : item));
};
const removeItem = (id) => {
setCart(cart.filter(item => item.id !== id));
};
const moveToSaved = async (id) => {
const itemToMove = cart.find(item => item.id === id);
if (itemToMove) {
const storedSavedItems = JSON.parse(await AsyncStorage.getItem('savedItems')) || [];
const updatedSavedItems = [...storedSavedItems, itemToMove];
await AsyncStorage.setItem('savedItems', JSON.stringify(updatedSavedItems));
setCart(cart.filter(item => item.id !== id));
}
};
const applyPromoCode = () => {
if (discounts.has(promoCode)) {
setDiscount(discounts.get(promoCode));
} else {
alert('Промокод недействителен');
}
};
const totalCost = cart.reduce((sum, item) => sum + item.price * item.quantity, 0) * (1 - discount);
return (
<View style={styles.container}>
<Button title="Добавить товар" onPress={addItem} />
<FlatList
data={cart}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<ItemCard
item={item}
onIncrease={(id) => updateQuantity(id, 1)}
onDecrease={(id) => updateQuantity(id, -1)}
onRemove={(id) => removeItem(id)}
onSave={(id) => moveToSaved(id)}
/>
)}
/>
<PromoInput promoCode={promoCode} setPromoCode={setPromoCode} onApply={applyPromoCode} />
<BinSummary totalCost={totalCost} />
<Button title="Перейти к отложенным" onPress={() => navigation.navigate('SavedItems')} />
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 20, backgroundColor: "grey"},
});
Результат работы
Рисунок 1 – Результат работы
Вывод
С помощью полученных знаний, мы разработали функционал корзины для мобильного приложения на базе React Native.