Appsmith를 사용하여 Meme 생성기 만들기

이 기사에서는 appsmith와 Humor Api 이라는 타사 API를 사용하여 간단한 밈 생성기 플랫폼을 구축하는 방법을 보여드리겠습니다.

전제 조건

이 자습서를 따르려면 다음이 필요합니다.

Appsmith 계정: 아직 계정이 없는 경우 다음을 통해 만들 수 있습니다link.

Appsmith에서 인터페이스 구축

먼저 appsmith에서 meme 생성기 플랫폼에 대한 인터페이스를 구축하므로 appsmith 대시보드에 로그인하고 버튼을 클릭하여 새 애플리케이션을 생성합니다.

디자인 영역에서 밈을 표시할 화면 중앙으로 image widget를 드래그하고 클릭할 때마다 밈을 무작위로 지정하고 기본 텍스트를 변경하는 button 위젯도 필요합니다. 버튼을 generate meme .

디자인은 아래와 같이 보여야 합니다.

HumorApi와 통합

먼저 HumorApi 플랫폼에서 무료 계정에 가입한 다음 api-key 서버와 통신하는 데 사용할 Humor APi를 가져와야 합니다. 무료 계정으로 가입하실 수 있습니다 . Once you're signed up head over to the Profile section on your dashboard and copy your api-key as shown below:

이제 API와 인터페이스를 연결할 것입니다. 이를 위해 새 데이터 소스를 생성해야 합니다. 대시보드의 Datasources 섹션으로 이동한 다음 옵션을 클릭하여 새 API를 생성하고 이 API에 randomMemes와 같은 이름을 지정합니다. GET의 Humor Api 끝점에 https://api.humorapi.com/memes/random?api-key=YOUR-API-KEY&keywords=random 요청을 보냅니다.



이 API는 공개 API에서 임의의 밈을 가져오는 역할을 합니다. 이 API를 저장하고 위젯 섹션으로 돌아갑니다. 제출 위젯으로 이동하여 설정 창을 열고 Actions 섹션에서 Execute a query 옵션을 선택한 다음 표시된 옵션 목록에서 randomMemes api를 선택합니다.



이미지 위젯에서 설정 창도 불러오고 image 옵션에 다음을 추가하여 이미지가 임의의 meme api의 응답에서 URL을 로드하도록 합니다.

{{randomMemes.data.url}}

이제 generate meme 버튼을 클릭하면 이미지를 클릭할 때마다 이미지에 나타나는 밈이 변경되는 것을 볼 수 있습니다.



이 애플리케이션을 배포하고 원하는 방식으로 대중과 공유하도록 선택할 수 있습니다. 그게 다야, 몇 가지 쉬운 단계로 임의의 밈 생성기를 성공적으로 만들었습니다. 나와 함께 있어 주셔서 감사합니다. 즐거운 코딩 되세요!.