ChatGPT 활용해 Raycast 익스텐션 만들기

[Open][Close]

ChatGPT 가입
Raycast 익스텐션 생성
ChatGPT 예제 명령어 입력과 생성
TMDB 검색 표시 한글로 변경 시도
해당 동영상
다른 글들….

요즘 핫한 ChatGPT 입니다.

#auto

이걸 이용해서 raycast Extension을 만들어 보았습니다.

진짜 대애박이네요

아래와 같이 alfred 워크플로우 중에 제가 자주 쓰는 워크플로우가 있습니다.

alfred 4 설정과 워크플로우들 – 맥 필수 앱(M1 ventura 작동 확인중!)

설치된 프로그램 목록 검색 후 삭제 해주는 워크플로우입니다.

이건 알프레드에서 간단하게 구현이 가능한데

raycast로는 명령어를 알아야 하기때문에 만들지 못했던 익스텐션입니다.

#display

명령어를 배워서 만드는 것보다는

많은 질문을 통해 익스텐션을 만들 수도 있으니 여러분도 도전 바랍니다.

ChatGPT 가입

먼저 ChatGPT 가입을 해줍니다.

https://chat.openai.com/

전 가입 필요 없이 구글아이디로 로그인했습니다.

그리고 사이트를 통해서 들어가셔도 되지만 프로그램을 통해서 진행하시는게 편하니

아래와 사이트 들어가셔서 해당하는 OS 맞게 프로그램을 다운 받고 실행해주셔도 됩니다.

https://github.com/lencx/ChatGPT

Raycast 익스텐션 생성

raycast를 실행 후 익스텐션을 생성합니다.

빈란을 원하는대로 실행 해줍니다.

location 부분은 편한대로 지정해주셔도 됩니다.

다 작성 후 아래 Add New Command 를 눌러 익스텐션을 생성합니다.

생성된 익스텐션으로 선택 후 액션에서 show in Finder를 선택 하여 해당하는 폴더로 이동합니다.

해당하는 폴더로 이동 후 아래와 같이 폴더에서 새로운 터미널 열기 or iTerm2로 열기를 선택 합니다.

아래 명령어를 입력해줍니다.

npm install && npm run dev

아래 폴더처럼 지정한 폴더의 /src 폴더 내에 *.tsx 파일을 텍스트에디터로 열어줍니다.

ChatGPT 예제 명령어 입력과 생성

예제 명령어를 ChatGPT 채팅창에 입력해줍니다.

https://github.com/raycast/extensions/blob/17f78cede403f7a5e65a34105a97d30e17a1008d/extensions/open-with-app/src/index.tsx

그리고 원하는 결과물이 나올때까지 질문과 답을 복사해 텍스트 에디터에 붙여넣기 후 테스트 하기를 반복합니다.

한 30분정도 문답을 나누고 검색을 통해 수정하면

아래와 같이 훌륭한 결과물이 나오게 됩니다.

진짜 소름 돋았습니다.

아래는 ChatGPT 생성해준 명령어 입니다.

봐도 뭐가 뭔지 모르겠습니다만 어떻게든 실행이 됩니다. ㅋㅋㅋ

import {
    List,
    ActionPanel,
    ActionPanelItem,
    Application,
    getApplications,
    closeMainWindow,
    popToRoot,
    showHUD,
  } from "@raycast/api";
  import { useState, useEffect } from "react";
  import { runAppleScript } from "run-applescript";
  import { execSync } from "child_process";
  
  export default function ApplicationsList() {
    const [applications, setApplications] = useState<Application[]>([]);
  
    useEffect(() => {
      async function fetchApplications() {
        setApplications(await getApplications());
      }
  
      fetchApplications();
    }, []);
  
    return (
      <List isLoading={applications.length === 0} searchBarPlaceholder="Filter applications by name...">
        {applications.map((application) => (
          <ApplicationsListItem key={application.bundleId} application={application} />
        ))}
      </List>
    );
  }
  
  function ApplicationsListItem(props: { application: Application }) {
    const application = props.application;
  
      
    return (
    <List.Item
    key={application.bundleId}
    title={application.name}
    icon={{ fileIcon: application.path }}
    actions={
    <ActionPanel>
    <ActionPanelItem
    title="Uninstaller"
    onAction={async () => {
      execSync(`open -b "com.nektony.App-Cleaner-SIII" "${application.path.replace(/"/g, '\\"')}"`);
      closeMainWindow();
      popToRoot({ clearSearchBar: true });
    }}
    />
    </ActionPanel>
    }
    />
    );
    }

이걸 수정해서 appdelete 으로 사용하실 분은

com.nektony.App-Cleaner-SIII 부분을

아래와 같이 변경하시면 됩니다.

com.apps4macs.AppDelete

참고로 appcleaner는 아래와 같습니다.

net.freemacsoft.AppCleaner