Digital Ocean Hackathon 응용 프로그램:첫 번째 단계

6465 단어 digitaloceandohackathonhackathon

첫걸음


첫 번째 단계는 디지털 오션(Digital Ocean, DO)에 계정을 만드는 것입니다.비록 나는 소위 무료 서비스에 신용카드 번호를 추가하는 것을 그다지 좋아하지 않지만, 이것은 매우 간단하다.
Drwindle은 정적 응용 프로그램이 될 것이기 때문에 저는 무료 입문 계획을 선택했습니다.

이 프로그램은 GitHub에서 배포할 수 있습니다. 좋습니다.그래서 다음 단계는 하나를 만드는 것이다. GitHub repo for the project (축소라고 잘못 부른다.)
환매협정을 디지털 해양과 연결하는 절차도 따르기 쉽다.나의 유일한 문제는 내가 처음에 자술한 파일과 허가증 파일만 있었을 뿐 제대로 연결되지 않았다는 것이다.나는 매우 기본적인 색인을 만들어야 한다.html 환매 협의와 DO를 연결합니다.
<!doctype html>
<html lang="en">
  <head>
    <title>Dwindle</title>
  </head>
  <body>
    <h1>Dwindle</h1>
  </body>
</html>
원본 색인.html
색인이 삭제되면html 온라인, Digital Ocean은 재구매 프로토콜을 성공적으로 감지하고 응용 프로그램의 초기 구축과 배치를 자동으로 실행합니다.
항목에 대한 URLdwindled-plzb3.ondigitalocean.app이 있습니다.

현재까지 100% 액세스가 가능합니다.😋
이 사이트는 자동 HTTPS를 포함하고 있기 때문에 SSL을 통해 이 페이지가 안전하다는 점을 지적해야 한다.DO는 페이지에 추가 코드를 추가하지 않습니다. (다른 무료 서비스도 이렇게 하는 것을 본 적이 있습니다.)

하카돈 노트


보고서에 따르면 다음과 같은 몇 가지 단계를 완료했습니다.
  • 하나의 종류를 선택했습니다(이 응용 프로그램은 세 가지 주요 종류 중 하나에 속하지 않기 때문에 랜덤 룰렛입니다).
  • 디지털 해양 계정을 만들었습니다.
  • 디지털 해양 플랫폼에 이 프로그램을 만들었다.
  • 유효한 라이센스(MIT) 사용
    • 나머지 절차는 프로그램이 끝날 때까지 기다려야 할 수도 있습니다.쿨!또한 다음과 같은 보상 포인트가 있습니다.
  • 이 과정을 적으세요. (제가 지금 뭘 하고 있는지, Yoohoo!)
  • 응용 프로그램의 Deploy to DO 버튼을 사용합니다.나는 그것이 무엇인지 모르겠다. 나는 곧 볼 것이다.
    • 좋아요.instructions on the documentation 이후에 Deploy to DO 버튼을 추가하는 것도 간단합니다.
    또한 Digital Ocean 의 설정 및 청구 옵션을 살펴보고 추가 요금이 부과되지 않도록 알림을 제공합니다.

    이론적으로 이것은 발생해서는 안 된다. 왜냐하면 내가 시작 계획에서 응용 프로그램은 너무 많은 구축/배치 시간을 소비해서는 안 되지만, 안전은 미안한 것보다 낫기 때문이다.비용이 들기 전에 경보를 추가하는 것은 좋지만, 아직 이런 옵션이 있는지 없는지는 알 수 없다.
    현재 디지털 해양 설치는 이미 충분하다.응용 프로그램에 주목합시다.

    축소 중!


    나는 페이지가 간단하거나 가능한 한 간단하도록 유지하고 싶다.다음과 같은 요소만 있습니다.
  • 표지
  • 설명
  • 텍스트 상자
  • 문자 카운터
  • 제출 버튼
  • 드롭다운 선택 언어(선택 사항, 현재 영어만 해당)

    • 메타데이터


    그러나 코드를 작성하기 전에 사이트의 숨겨진 부분을 처리하는 데 착수할 것입니다.내용이 존재하지만 사람들이 볼 수 없다. 이것은 정확한 시각화, 소셜 미디어와 SEO의 관건인 메타데이터이다.
    다음과 같이 덧붙일 예정입니다.
  • 문자 세트
  • 뷰포트
  • IE 지원 레이블
  • 원 정보(작자, 키워드, 설명)
  • OpenGraph 메타 정보
  • 트위터 메타 정보
  • 파비콘
    • 너무 많아!그러나 이것은 우리가 Lighthouse를 실행할 때 100%의 검색엔진 최적화 라벨을 얻을 수 있도록 보장할 것이다.
    <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Alvaro Montoro ([email protected])" />
<meta name="keywords" content="dwindle,twitter,text.shortener" />
<meta name="description" content="Dwindle sorts text to fit in Twitter's 280-characters limit." />
<meta property="og:title" content="Dwindle" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dwindled-plzb3.ondigitalocean.app/" />
<meta property="og:image" content="./images/thumb.png" />
<meta property="og:description" content="Dwindle sorts text to fit in Twitter's 280-characters limit." />
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="https://dwindled-plzb3.ondigitalocean.app/" />
<meta name="twitter:title" content="Dwindle" />
<meta name="twitter:description" content="Dwindle sorts text to fit in Twitter's 280-characters limit." />
<meta name="twitter:image" content="./images/thumb.png" />

<link rel="author" href="https://twitter.com/alvaro_montoro" />
<link rel="shortcut icon" href="./fav.ico" type="image/x-icon" />
<link rel="icon" href="./fav.ico" type="image/x-icon" />
    우리는 아직 보충할 것이 많지만, 지금은 계속합시다.아직 해야 할 일이 하나 더 있다.

    화폐화


    이외에 우리는 화폐화 원 라벨을 추가할 것이다.이러한 방법으로 우리는 우리의 프로그램을 사용할 때 사용자로부터 기부금을 받을 수 있다.
    <meta name="monetization" content="$ilp.uphold.com/WUdKN2pAgLAG" />
    이 코드를 복사하면 변경 내용을 기억하세요!
    혹은 더 좋은 것은 그들이 화폐화를 활성화한다면, 아마도 우리는 서로 다른 언어를 추가하여 확장할 수 있을 것이다.이렇게 하면 우리는 앞으로 코드를 연습할 수 있다.이 점을 '좋은 것' 목록에 추가합시다.

    스타일 및 코드


    이것들이 있으면 '숨기기' 부분을 완성하는 유일한 남은 일은 스타일과 코드를 추가하는 것이다.아직은 아니지만 빈 파일을 만들어 가리킬 수 있습니다.
    <script src="./js/code.js" defer></script>
<link rel="stylesheet" href="./css/styles.css" />
    그것들은 곧 사용될 거야..그러나 이제 우리는 기본적인 스타일만 추가하고 제목을 페이지의 중심에 놓을 뿐이다.
    또 다른 멋진 일은 GitHub과Digital Ocean 간의 상호작용이다. 내가 코드를 리포에 전송하면 DO는 변경 사항을 감지하고 자동 구축과 배치를 터치한다.

    하루의 총결산


    긍정적인 측면:
  • GitHub 저장소 설정
  • Digital Ocean 설정 및 우수한 기능(자동 HTTPS, GitHub에서 자동 배포, 무료...)

  • First iteration of the app is live(뼈대라도)
    • 그다지 낙관적이지 않다.
  • 디지털 오션의 충전을 막을 가능성은 아직 불분명하다.
  • 9일밖에 안 남았어요!
    • Unity를 통해 애니메이션 상태 확인
    UGUI의 Scroll View에서 Grid

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage