다음을 위한 추가 기능과 앱을 개발할 수 있다는 것을 알고 계셨습니까? Google 작업 공간?
약간의 코딩 지식만 있으면 직장 생활을 더 쉽게 만드는 데 도움이 되는 도구를 만들 수 있습니다. 이 문서에서는 기본 추가 기능 또는 앱을 만드는 과정을 안내합니다.
시작하자!
Google Workspace 부가기능 및 앱 개발 단계
1. 작업에 적합한 도구 선택
첫 번째 단계는 추가 기능을 개발할 것인지 앱을 개발할 것인지 결정하는 것입니다. 어떤 것이 가장 적합한지 결정하는 가장 좋은 방법은 무엇을 하고 싶은지, 프로젝트를 완료하는 데 사용할 수 있는 시간과 코딩과 관련된 지식 수준에 대해 생각하는 것입니다.
이제 막 시작하는 경우 Google 부가 기능 도구를 사용하세요. 이전에 JavaScript로 작업한 적이 있다면 계속해서 Google Apps Script Add-on Builder를 확인하십시오.
2. 개발 환경 설정
사용할 도구를 결정했으므로 이제 개발 환경을 설정할 차례입니다. 여기에는 필요한 소프트웨어를 설치하고 몇 가지 기본 구성 파일을 설정하는 작업이 포함됩니다. 설정 프로세스는 사용 중인 도구에 따라 다릅니다.
앱을 개발하는 경우 다음이 필요합니다.
앱 스크립트 편집기
Google Apps 추가 기능용 스크립트를 개발하는 경우 Google App Scripts 편집기를 사용하십시오. G Suite에서 앱으로 작업하는 경우 Google 스프레드시트를 사용하세요.
Google 앱 스크립트 편집기에 액세스하려면 다음 위치에서 새 문서를 만드세요. Google 문서 도구 확장 탭에서 앱 스크립트를 엽니다. 다음과 같이 표시됩니다.
앱 스크립트 CLI
Chrome 개발자 도구에는 명령줄에서 직접 Google Apps 스크립트를 제어할 수 있는 명령줄 인터페이스(CLI)가 포함되어 있습니다.
Google 계정
Google Apps 및 모든 서비스에 액세스하려면 Google 계정이 필요합니다. 개발 컴퓨터에 Google Chrome을 설치하고 Google 계정으로 로그인할 때 이 계정을 사용하여 개발 컴퓨터가 Google 계정과 연결되도록 합니다.
추가 기능도 마찬가지입니다.
3. 코드를 작성하세요!
이제 코딩을 시작할 때입니다. 세부 사항은 사용 중인 도구에 따라 다르지만 일반적으로 일부 HTML, CSS 및 자바 스크립트. 모든 텍스트 편집기 또는 IDE(통합 개발 환경)에서 이를 수행하는 방법에 대해 읽을 수 있습니다.
코드를 작성한 후 브라우저나 Play 스토어를 실행하는 기기(휴대전화, 태블릿 또는 컴퓨터)에서 테스트할 수 있습니다.
HTML
HMTL(HyperText Markup Language)은 웹 페이지를 생성하는 데 사용됩니다. 페이지는 HTML 요소와 태그로 구성됩니다. HTML은 웹 페이지의 모양과 사람들이 페이지를 볼 때 표시될 콘텐츠를 정의하는 마크업 언어입니다.
다음과 같이 Google App Script에서 새 HTML 파일을 생성할 수 있습니다.
효과적인 앱을 만들기 위해 HTML을 사용하여 앱의 구조를 정의하고 버튼 및 기타 사용자 인터페이스 요소 및 데이터베이스의 데이터를 표시합니다.
앱용 HTML은 앱의 모든 콘텐츠를 둘러싸는 태그 안에 작성해야 합니다. 앱용 HTML이 어떻게 작동하는지 보려면 파일 > 새 프로젝트를 선택하여 새 프로젝트를 생성할 수 있습니다. 웹 앱 옵션을 선택합니다.
CSS
계단식 스타일 시트는 앱의 HTML 요소에 스타일을 적용하는 데 사용됩니다. CSS가 어떻게 생겼는지 확인하는 가장 좋은 방법은 Chrome 또는 Firefox에서 개발자 도구를 방문하는 것입니다. 개발자 도구를 연 후 장치 도구 모음 전환 버튼을 클릭하거나 control + I을 입력하여 모바일 모드와 데스크톱 모드 사이를 전환합니다. 그런 다음 디자인 보기를 선택합니다.
CSS 및 JavaScript 라이브러리는 Apps Script 덕분에 다른 라이브러리를 사용하여 사용할 수 있습니다. 헤더 섹션에서 JQuery 라이브러리에 연결하는 방법은 다음과 같습니다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<?!=content?>
...
</head>
<body>
앱에 적용된 스타일 속성과 함께 앱의 기본 HTML이 표시됩니다. 앱이 시작되면 스타일 속성도 적용됩니다. 하지만 잘못된 요소에 스타일링을 적용하면 결과가 좋지 않을 수 있습니다.
자바 스크립트
JavaScript는 앱에 보다 동적인 기능을 추가하는 프로그래밍 언어입니다. 예를 들어 JavaScript를 사용하면 웹 페이지에 상호 작용을 추가할 수 있습니다. JavaScript는 일반적으로 새 앱을 만들 때 프로젝트 파일에 포함됩니다. 앱에 JavaScript를 추가하려면 프로젝트에 파일을 더 추가하면 됩니다.
JavaScript를 사용하면 Google 문서 내에서 실행할 수 있는 정교한 사용자 정의 코드를 만들 수 있기 때문에 JavaScript가 작동하는 방식을 이해하기 위한 것입니다.
추가 기능을 만들려면 먼저 앱에서 대화형 기능을 만드는 데 필요한 JavaScript를 개발해야 합니다. 또한 Google 문서에서 서식 있는 텍스트 형식을 만드는 데 사용하는 JavaScript 라이브러리, 문서 목록을 검색하는 문서 목록 API, Google 서버에 저장된 파일에 액세스하기 위한 드라이브 서비스 및 드라이브와 같은 몇 가지 중요한 Google API에 대해 알아야 합니다. 파일 업로드 서비스입니다.
Google 문서도구용 부가기능을 만들 때 이러한 API 대부분에 액세스할 수 있습니다. 그러나 앱의 JavaScript 라이브러리 또는 기타 부분을 변경해야 할 수 있습니다. 예를 들어 JavaScript 라이브러리는 문서 목록 API를 노출하지 않으므로 문서 목록을 직접 쿼리하는 논리를 구현해야 합니다.
또한 JavaScript 라이브러리에는 함수의 작은 하위 집합만 포함되어 있으므로 더 풍부한 상호 작용을 만들기 위해 고유한 함수를 작성해야 할 수도 있습니다.
작성하는 모든 코드를 테스트하고 디버그하여 올바르게 실행되는지 확인하는 것이 중요합니다. 추가 기능이 앱에 포함되어 있기 때문에 웹사이트에 있는 일반 JavaScript 디버깅 도구를 사용할 수 있습니다.
4. 추가 기능 또는 앱 테스트 및 게시
코드를 작성했으면 테스트할 차례입니다. 이는 추가 기능 또는 앱이 의도한 대로 작동하는지 확인하는 데 중요합니다. 추가 기능 또는 앱을 테스트하면 코드가 견고하고 가능한 모든 시나리오를 다뤘는지 확인할 수 있습니다.
결국 사용자가 코드를 얻은 후 코드에 버그가 있다는 것을 깨닫기 위해 무언가를 개발하는 데 몇 시간을 소비하고 싶지 않습니다. 작업에 만족하면 Workspace Labs 사이트에 게시하십시오.
게시된 추가 기능 또는 앱을 직접 업로드하거나 Google 드라이브의 사본에 연결할 수 있습니다.
댓글을 남겨주세요.