음식점 추천 챗봇만들기0

Notion 으로 이동했습니다

https://hill-bovid-56d.notion.site/6f84f2d1d53342f5b425351f710a754b?v=f290bbaba9ed460ab7bfbeaac0bf9eb4

졸업작품 - 음식점추천 챗봇앱

---

개요

졸업작품의 주제는 '위치기반 식당추천서비스 챗봇' 이다.

2021년 9월 발표예정이라 일정이 빡빡해서 첫 회의를 시작하기전에 미리 앱을 만들어 놓으려고한다.

React Native (Expo), gifted chat 사용

아래 글을 참고하였다.

심리상담 챗봇 만들기 - React Native를 이용한 챗봇 앱 만들기

 

0.  미리 보는 오늘의 결과

 

1. 사용할 폴더에서 expo 초기화

expo init

app name: food-selector

template: blank

 

2. React Navigation 설치 (공식 문서)

yarn add @react-navigation/native
yarn add @react-navigation/stack
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

3. gifted chat 설치 (공식 문서)

npm install react-native-gifted-chat --save

4. 화면구조

MainScreen

└ ChatScreen

└ HelpScreen (예정)

 

5. 코드

App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import MainScreen from "./src/MainScreen";
import ChatScreen from "./src/ChatScreen";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={MainScreen}
          options={{
            headerShown: false,
          }}
        />
        <Stack.Screen
          name="Chat"
          component={ChatScreen}
          options={{
            headerShown: false,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

MainScreen.js

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";

const MainScreen = ({ navigation }) => {
  function onStart() {
    navigation.navigate("Chat");
  }
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.titleWrapper}>
        <Text style={styles.title1}>Food</Text>
        <Text style={styles.title2}>Selector</Text>
      </View>
      <View style={styles.buttonWrapper}>
        <TouchableOpacity style={styles.button} onPress={onStart}>
          <Text style={styles.buttonText}>START</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

export default MainScreen;

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
  },
  titleWrapper: {
    width: "100%",
    height: "55%",
    alignItems: "center",
    justifyContent: "center",
  },
  buttonWrapper: {
    width: "100%",
    height: "45%",
    alignItems: "center",
    paddingTop: 90,
  },
  title1: {
    fontSize: 65,
  },
  title2: {
    fontSize: 40,
  },
  button: {
    width: "40%",
    alignItems: "center",
    borderRadius: 15,
    borderWidth: 1,
    padding: 10,
  },
  buttonText: {
    fontSize: 25,
  },
});

 

ChatScreen.js

import React, { useState, useCallback, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
import { GiftedChat } from "react-native-gifted-chat";

const ChatScreen = ({ navigation }) => {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: "어떤 음식을 먹어볼까요?",
        createdAt: new Date(),
        user: {
          _id: 2,
          name: "React Native",
          avatar: "https://placeimg.com/140/140/any",
        },
      },
    ]);
  }, []);

  const onSend = useCallback((messages = []) => {
    setMessages((previousMessages) =>
      GiftedChat.append(previousMessages, messages)
    );
  }, []);

  function onBack() {
    navigation.navigate("Main");
  }
  function onReload() {
    navigation.navigate("Chat");
  }
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity onPress={onBack}>
          <Text>뒤로</Text>
        </TouchableOpacity>
        <Text style={styles.title}>Food Selector</Text>
        <TouchableOpacity onPress={onReload}>
          <Text>다시</Text>
        </TouchableOpacity>
      </View>
      <GiftedChat
        placeholder={"메세지를 입력하세요"}
        alwaysShowSend={true}
        messages={messages}
        textInputProps={{ keyboardAppearance: "default", autoCorrect: false }}
        onSend={(messages) => onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    </SafeAreaView>
  );
};

export default ChatScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    width: "100%",
    height: "6%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 20,
    paddingRight: 20,
    marginBottom: 5,
  },
  title: {
    fontSize: 30,
    fontWeight: "400",
  },
});