Computer >> 컴퓨터 >  >> 프로그램 작성 >> Redis

AWS Lambda 및 Serverless Redis로 지원되는 React 네이티브 앱 구축

이 게시물에서는 React Native, Serverless 프레임워크 및 Upstash를 사용하여 리더보드를 보고 업데이트하기 위한 모바일 애플리케이션을 개발합니다.

AWS Lambda에서 실행되는 Python 기능으로 구성된 Serverless 프레임워크가 지원하는 모바일 애플리케이션을 개발하기 위해 React Native를 사용할 것입니다.

1 - Upstash Redis 사용

일반적인 리더보드 앱에서는 사용자 정보와 사용자가 속한 점수를 저장해야 합니다. 이 모든 데이터는 점수별로 정렬되어야 하므로 Redis를 사용하는 것이 가장 좋은 솔루션 중 하나입니다.

Redis에서 지원하는 "Sorted Set"은 정렬된 데이터 유형으로 사용자가 범위 작업별로 매우 빠르게 저장, 추가, 제거 및 쿼리를 수행할 수 있습니다.

정렬된 집합은 정렬된 리더보드를 저장, 업데이트 및 표시하는 데 정확히 필요한 것입니다.

1.1 - Upstash 시작하기

Upstash는 Redis용 서버리스 데이터베이스를 제공합니다. Redis 작동 방식에 대한 자세한 내용은 Redis 설명서를 확인하세요.

다음은 이 예에서 Upstash Redis를 사용하게 된 몇 가지 이점입니다.

  • 종량제 가격 시스템, 가격

  • 저장 및 운영을 위한 프리 티어

  • 매우 쉬운 구현

  • 자세한 구성이 필요 없음

우리의 경우 첫 번째 단계는 Upstash 계정 콘솔을 만드는 것입니다. 둘째, 원하는 대로 Upstash 데이터베이스를 만듭니다. 그러면 준비가 완료됩니다!

<강한> AWS Lambda 및 Serverless Redis로 지원되는 React 네이티브 앱 구축

익숙해지기 위해 Upstash 콘솔에서 제공되는 CLI에서 몇 가지 작업을 수행할 수 있습니다.

먼저 정렬된 집합에 점수가 있는 새 사용자를 추가하여 데이터베이스를 시작할 수 있습니다. 이름을 Leaderboard로 설정합니다.

ZADD Leaderboard <Score> <User>

그런 다음 점수와 함께 모든 사용자 정보를 표시할 수 있습니다.

ZRANGE Leaderboard 0 -1 WITHSCORES

<강한> AWS Lambda 및 Serverless Redis로 지원되는 React 네이티브 앱 구축 Redis를 앱의 백엔드에 연결하기 위해 Serverless Framework를 사용하여 AWS Lambda 함수에서 이러한 작업을 수행할 수 있습니다.

2 - 서버리스 프레임워크로 함수 만들기

Serverless는 AWS, Azure, Google Cloud 등과 같은 클라우드 제공업체의 서버리스 기능을 사용할 수 있게 해주는 프레임워크입니다. 사용자 측에서 서버리스 기능을 구현하고 관리할 수 있는 매우 강력한 도구입니다.

AWS용 Serverless Framework 설치 및 구성부터 시작하겠습니다. Serverless 빠른 시작을 방문하여 단계를 따르세요.

설치 후에는 handler.py 및 serverless.yml이 있습니다.

  • serverless.yml

    이 파일에서 우리가 구현할 기능을 정의할 것입니다. 우리의 경우에는 새로운 사용자를 추가하고 리더보드를 표시하기만 하면 됩니다. 따라서 "addScore" 및 "getLeaderboard" 함수를 정의하는 것으로 충분해야 합니다.

	functions:
		addScore:
			handler: handler.addScore
			events:
				- httpApi: 'POST /add'
		getLeaderboard:
			handler: handler.getLeaderboard
			events:
				- httpApi: 'GET /getLeaderboard'

  • 핸들러.py

    이 파일에서는 serverless.yml 파일에 정의된 대로 모바일 앱에서 http 요청을 보낼 때 백엔드에서 실행될 코드인 함수를 구현합니다.

    먼저 유일한 종속성인 redis를 가져오고 구성해야 합니다. 서버리스 프레임워크에 redis 종속성을 추가하려면 "서버리스 Python 요구 사항" 플러그인을 추가해야 합니다. 명령을 실행하십시오.

    serverless plugin install -n serverless-python-requirements

    그런 다음 아래와 같이 serverless.yml에 플러그인이 추가되었는지 확인합니다.

    plugins:
- serverless-python-requirements

    자세한 내용은 serverless-python-requirements를 참조하세요.

    마지막 단계로 serverless.yml과 동일한 디렉토리에 requirements.txt 파일을 생성해야 합니다. 아래와 같이 requirements.txt 파일에 redis 종속성을 추가합니다.

    redis==4.0.2

    이제 handler.py에서 Upstash Redis를 구성할 수 있습니다.

    import json
import redis

r = redis.Redis(
host= 'YOUR_REDIS_ENDPOINT',
port= 'YOUR_REDIS_PORT',
password= 'YOUR_REDIS_PASSWORD',
charset="utf-8",
decode_responses=True)

    Redis 구성이 끝나면 사용자가 호출할 함수를 준비할 수 있습니다.

    두 가지 기능이 있습니다.

    첫 번째는 새로운 사용자와 점수를 리더보드에 추가하는 것입니다. 이것은 POST 요청입니다. 사용자는 HTTP 요청 본문 내에서 자신의 정보를 보냅니다.

    {"score": 15,"firstname": "Jack","lastname": "Thang"}

    이 기능은 아래와 같이 구현할 수 있습니다.

    def addScore(event, context):
info = json.loads(event["body"])
leaderboard = "Leaderboard"
score = info["score"]
player_name = info["firstname"] + "_" + info["lastname"]
r.zadd(leaderboard, {player_name: score})
body = {
"message": "Score added successfully!",
}
response = {"statusCode": 200, "body": json.dumps(body)}
return response

    AWS Lambda에서 제공하는 이벤트 파라미터에서 점수와 사용자 정보를 파싱할 수 있습니다.

    redis의 zadd 기능을 사용하여 정렬된 "Leaderboard" 집합에 사용자와 점수를 추가할 수 있습니다. 예:

    Request body: {"score": 15,"firstname": "Jack","lastname": "Thang"}

Response body: {"message": "Score added successfully!"}

    두 번째 함수는 getLeaderboard입니다. 이 함수는 사용자의 GET 요청을 수락하고 Redis에서 읽은 순위표를 내림차순으로 반환합니다.

    def getLeaderboard(event, context):
leaderboard = "Leaderboard"
score_list = r.zrange(leaderboard, 0, -1, withscores=True, desc=True)
body = {
"message": "Leaderboard returned successfully!",
"leaderboard": score_list
}
response = {"statusCode": 200, "body": json.dumps(body)}
return response

    예:

    Response body: {"message": "Leaderboard returned successfully!", "leaderboard": [["Jack_Thang", 15.0], ["Omer_Aytac", 12.0]]}

    마지막으로 다음을 실행하여 기능을 배포할 수 있습니다.

    serverless deploy -v

    배포하는 동안 서비스 정보가 표시됩니다. 나중에 다시 사용할 수 있도록 끝점을 어딘가에 저장합니다.

    끝점:

    POST - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add

GET - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard

    이제 서버리스 백엔드가 준비되었습니다.

3 - React Native로 모바일 앱 개발

React Native는 Javascript로 코드를 작성하여 여러 플랫폼용 모바일 애플리케이션을 개발할 수 있는 프레임워크입니다.

React Native로 모바일 애플리케이션을 개발하려면 환경을 설정하고 프로젝트를 생성해야 합니다. 첫 번째 모바일 애플리케이션 환경 설정을 만드는 단계를 따르세요.

모바일 애플리케이션에는 두 개의 화면이 있습니다. 첫 번째는 사용자가 사용자 정보와 함께 새로운 점수를 추가하는 화면입니다.

간단하게 하기 위해 사용자에게 이름, 성 및 점수만 요청합니다.

사용자가 점수를 제출하는 화면은 다음과 같습니다.

<강한> AWS Lambda 및 Serverless Redis로 지원되는 React 네이티브 앱 구축

이 화면에서 사용자가 점수를 입력하면 애플리케이션이 서버리스 엔드포인트로 HTTP 요청을 보냅니다.

https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add

서버리스 기능을 배포하는 동안 저장했습니다. 이 예에서 사용된 함수는

async addScore(){
	if(isNaN(this.state.score)){
		Alert.alert("Error", "Please enter a valid score.");
		return;
	}
	if(this.state.firstname == "" || this.state.lastname == "" || this.state.score == null){
		Alert.alert("Error", "Please fill in the blanks.");
		return;
	}
	await fetch('https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add', {
		method: 'POST',
		headers: {
			Accept: 'application/json',
			'Content-Type': 'application/json',
		},
		body: JSON.stringify({
			firstname: this.state.firstname,
			lastname: this.state.lastname,
			score: parseInt(this.state.score)
		}),
	})
	.then(response => response.json())
	.then(data => {
		if(data.message == "Score added successfully!"){
			Alert.alert("Done!", "Score added successfully!");
		}
		else{
			Alert.alert("Error", "Please try again later.");
		}
	})
	.catch(err => {
		console.error(err)
		Alert.alert("Error", "Please try again later.");
	});
}

보시다시피 POST 요청 본문에는 사용자로부터 받은 "이름", "성", "점수" 키 및 해당 값이 포함되어 있습니다.

백엔드에서 보낸 응답에 "Score added successfully!"가 포함되어 있으면 보낸 요청이 수신되고 점수가 성공적으로 추가되었음을 의미합니다.

<강한> AWS Lambda 및 Serverless Redis로 지원되는 React 네이티브 앱 구축

이제 아주 간단한 리더보드 화면을 디자인해 보겠습니다. 사용자는 "리더보드로 이동" 버튼을 클릭하여 리더보드 화면으로 이동할 수 있습니다.

리더보드 화면은 다음과 같습니다.

AWS Lambda 및 Serverless Redis로 지원되는 React 네이티브 앱 구축

이 화면에서 다음 엔드포인트로 HTTP POST 요청을 보내는 것이 가장 중요합니다.

https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard

처음에 화면이 열릴 때. 이를 위해 다음과 같이 컴포넌트가 마운트된 직후 호출되는 componentDidMount 함수에서 이 요청을 보낼 수 있습니다.

async componentDidMount() {
	await fetch('https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard',{
		method: 'GET',
		headers: {
			Accept: 'application/json',
			'Content-Type': 'application/json'
		}
	})
	.then(response => response.json())
	.then(data => {
		console.log(data);
		userlist = data.leaderboard;
		this.setState({reRender: !this.state.reRender});
	})
	.catch(err => console.error(err));
}

응용 프로그램의 전체 소스 코드는 upstash-react-native-project에서 사용할 수 있습니다.

결론

이 게시물에서는 Serverless Framework를 통해 AWS Lambda에서 실행되는 Python 함수로 지원되는 리더보드용 모바일 애플리케이션을 개발했습니다. 우리는 Upstash Redis에 리더보드를 저장했습니다.

Upstash로 할 수 있는 일이 너무 많습니다. Redis를 사용하여 리더보드 애플리케이션을 구축하는 것은 그 중 하나일 뿐입니다.

이 게시물이 여러분 모두에게 도움이 되기를 바랍니다!