macos tip

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

[Open][Close]

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

요즘 핫한 ChatGPT 입니다.

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

진짜 대애박이네요

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

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

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

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

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

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

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