Sự cố, một nền tảng tuyệt vời cho nhà phát triển

Glitch là một nền tảng khá tuyệt vời để học và thử nghiệm với mã. Bài đăng này giới thiệu cho bạn về Glitch và khiến bạn đi từ con số 0 trở thành anh hùng

Trục trặclà một nền tảng tuyệt vời để học cách viết mã.

Tôi sử dụng Glitch trên nhiều hướng dẫn của mình, tôi nghĩ đó là mộtcông cụ tuyệt vờiđếntrưng bàykhái niệm, và cảcho phép mọi người sử dụng các dự án của bạnvà xây dựng dựa trên chúng.

Đây là một dự án ví dụ mà tôi đã thực hiện trên Glitch vớiPhản ứngBộ định tuyến React:https://glitch.com/edit/#!/flaviocopes-react-router-v4-2

Với Glitch, bạn có thể dễ dàng tạotrình diễnnguyên mẫucủa các ứng dụng được viết bằng JavaScript, từ các trang web đơn giản đến các khuôn khổ nâng cao như React hoặcVuevà các ứng dụng Node.js phía máy chủ.

Nó được xây dựng trên đầu trang củaNútvà bạn có khả năng cài đặt bất kỳnpmgói bạn muốn, chạywebpackvà nhiều hơn nữa.

Nó được mang đến cho bạn bởi những người đã tạo ra một số sản phẩm cực kỳ thành công, bao gồm Trello và Stack Overflow, vì vậy nó có rất nhiều phần thưởng uy tín cho điều đó.

Tại sao tôi nghĩ Glitch là tuyệt vời?

Trục trặc được “nhấp” cho tôi về cách nó tự thể hiện trong mộtbuồn cườigiao diện, nhưngkhông chết lặng.

Bạn có quyền truy cập vàonhật ký, cácbàn điều khiểnvà rất nhiều nội dung bên trong.

Ngoài ra, khái niệm phối lại quá nổi bật trong giao diện khiến tôi có nhiều khả năng tạo ra rất nhiều dự án ở đó, vì tôi không bao giờ phải bắt đầu từ một phương tiện gọn gàng.

Bạn có thể bắt đầu đi sâu vào mãkhông mất thời gianthiết lập môi trường, kiểm soát phiên bản và tập trung vào ý tưởng, với mộtHTTPSURL và mộtCDNcho nội dung phương tiện.

Ngoài ra, không có khóa nào cả, nó chỉ là Node.js (hoặc nếu bạn không sử dụng JavaScript phía máy chủ, nó chỉ là HTML, JS và CSS)

Nó có miễn phí không?

Đúng, nó miễn phí và trong tương lai, họ có thể bổ sung thêm nhiều tính năng hơn nữa cho gói trả phí, nhưng họ tuyên bố rằng Glitch hiện tại sẽ luôn miễn phí như hiện tại.

Có những giới hạn hợp lý như

  • Bạn có 128 MB dung lượng, không bao gồm gói npm, cộng với 512 MB cho nội dung phương tiện
  • Bạn có thể phục vụ tới 4000 yêu cầu mỗi giờ
  • Các ứng dụng sẽ bị dừng nếu không được truy cập trong 5 phút và chúng không nhận được bất kỳ yêu cầu HTTP nào và các ứng dụng đang chạy lâu sẽ bị dừng sau 12 giờ. Ngay sau khi một yêu cầu HTTP đến, chúng bắt đầu lại

Tổng quan về Glitch

Đây là trang chủ của Glitch, nó hiển thị một số dự án mà họ quyết định giới thiệu vì chúng rất thú vị và một số dự án khởi đầu:

The homepage as guest

Tạo tài khoản miễn phí và dễ dàng, chỉ cần nhấn “Đăng nhập” và chọn giữa Facebook và GitHub làm “điểm vào” của bạn (Tôi khuyên bạn nên sử dụng GitHub):

Sign in to Glitch

Bạn được chuyển hướng đến GitHub để cho phép:

Authorize Glitch on GitHub

Sau khi đăng nhập, trang chủ sẽ thay đổi để hiển thị các dự án của bạn:

The home page once logged in

Sự nhấp chuộtDự án của bạnđưa bạn đến trang hồ sơ của bạn, trang này có tên của bạn trong URL. Của tôi làhttps://glitch.com/@flaviocopes.

The Glitch profile

Bạn có thểghimđể tìm thấy chúng dễ dàng hơn khi bạn có nhiều dự án.

Khái niệm về phối lại

Khi bạn mới bắt đầu, tất nhiên bạn sẽ không có dự án nào của riêng mình.

Glitch giúp bạn bắt đầu cực kỳ dễ dàng và bạn không bao giờ bắt đầu từ một dự án trống.Bạn luôn luônphối lạimột dự án khác.

Bạn có thể phối lại một dự án bạn thích, có thể là một dự án bạn đã tìm thấy trên Twitter hoặc được giới thiệu trên trang chủ Glitch hoặc bạn có thể bắt đầu từ một dự án là một bảng soạn sẵn để bắt đầu một cái gì đó:

Có nhiều lỗi khởi động khác trong các bộ sưu tập này:

Nếu bạn đang học viết mã ngay bây giờ,Học cách viết mã Bộ sưu tập trục trặclà rất tốt.

Tôi đã tạo một vài ứng dụng dành cho người mới bắt đầu mà tôi thường xuyên sử dụng cho các bản demo và thử nghiệm của mình và chúng là:

Glitch giúp bạn dễ dàng tạo các khối xây dựng của riêng mình và bằng cách ghim chúng vào hồ sơ của mình, bạn có thể đặt chúng luôn ở trên cùng, dễ tìm.

Phối lại một sự cố

Khi bạn có một trục trặc nào đó mà bạn muốn xây dựng, bạn chỉ cần nhấp vào nó và một cửa sổ hiện ra:

Remix glitch modal

Có 3 nút:

  • Xem trướctrục trặc là mã thực hiện một cái gì đó. Điều này cho thấy kết quả của trục trặc.
  • Chỉnh sửa dự ánhiển thị nguồn của dự án và bạn có thể bắt đầu chỉnh sửa nó
  • Phối lại cái nàysao chép trục trặc sang một cái mới

Mỗi khi bạn phối lại một lỗi, một dự án mới sẽ được tạo với một tên ngẫu nhiên.

Đây là một trục trặc ngay sau khi tạo nó bằng cách phối lại một cái khác:

A remixed glitch

Glitch đã đặt cho nó cái tênguttural-noodle. Nhấp vào tên bạn có thể thay đổi nó:

Rename a glitch

Bạn cũng có thể thay đổi mô tả.

Từ đây, bạn cũng có thể tạo một trục trặc mới từ 0, phối lại lỗi hiện tại hoặc chuyển sang một lỗi khác.

Nhập / xuất GitHub

Có một nhập / xuất dễ dàng từ / đến GitHub, rất thuận tiện:

GitHub Import export

Giữ dự án của bạn ở chế độ riêng tư

Nhấp vào khóa làm cho trục trặc riêng tư:

Keep project private

Tạo một dự án mới

Nhấp vào “Dự án mới” sẽ hiển thị 3 tùy chọn:

  • nút-ứng dụng
  • node-sqlite
  • trang web

Create a new project on Glitch

Đây là một lối tắt để đi ra ngoài để tìm các ứng dụng mới bắt đầu đó và phối lại chúng. Dưới mui xe, việc nhấp vào một trong các tùy chọn đó sẽ kết hợp lại một trục trặc hiện có.

Trong bất kỳ trục trặc nào, nhấp vào “Hiển thị” sẽ mở ra một tab mới nơi ứng dụng đang chạy:

The app running

URL ứng dụng

Lưu ý URL, đó là:

https://flavio-my-nice-project.glitch.me

Điều đó phản ánh tên ứng dụng.

URL chỉnh sửa hơi khác một chút:

https://glitch.com/edit/#!/flavio-my-nice-project

Bản xem trước chạy trên miền phụ củaglitch.me, trong khi chỉnh sửa được thực hiện trênglitch.com.

Nhận thấy những con cá ở bên phải của trang? Đó là một chút JavaScript mà Glitch khuyên bạn nên thêm vào trang, để cho phép những người khác phối lại dự án hoặc xem nguồn:

The fish on preview

Chạy ứng dụng

Bất kỳ lúc nào bạn thực hiện thay đổi đối với nguồn, ứng dụng sẽ được xây dựng lại và chế độ xem trực tiếp được làm mới.

Điều này rất tiện lợi, việc áp dụng các thay đổi theo thời gian thực sẽ đưa ra phản hồi ngay lập tức, đây là một trợ giúp tuyệt vời khi phát triển.

Bí mật

Bạn không muốn mọi người nhìn thấy bất kỳ khóa API hoặc mật khẩu nào có thể được sử dụng trong mã. Bất kỳ chuỗi bí mật nào trong số đó phải được đặt trong.envtệp có khóa bên cạnh.

Nếu bạn mời cộng tác viên, họ sẽ có thể xem nội dung, vì họ là một phần của dự án.

Nhưng bất kỳ ai phối lại nó, hoặc những người được bạn mời giúp đỡ, sẽ không nhìn thấy nội dung tệp.

Quản lý tệp

Thêm một tệp mới vào một dự án thật dễ dàng.

Bạn có thểkéo và thả các tệp và thư mục từ máy tính cục bộ của bạnhoặc nhấp vào nút “Tập tin mới”Phía trên danh sách tệp.

Cách đổi tên, sao chép hoặc xóa tệp cũng rất trực quan:

Manage the glitch

Giấy phép một cú nhấp chuột và quy tắc ứng xử

Có giấy phép trong mã là một trong những điều bị bỏ qua trong các dự án mẫu, nhưng xác định những gì người khác có thể làm hoặc không thể làm với dự án của bạn. Nếu không có giấy phép, một dự án không phải là mã nguồn mở và mọi quyền đều được bảo lưu, vì vậy mã không thể được phân phối lại và người khác không thể làm bất cứ điều gì với nó (lưu ý: đây là sự hiểu biết của tôi và IANAL - Tôi Không phải là Luật sư).

Trục trặc làm cho nósiêu dễ dàngđể thêm giấy phép, trongTập tin mớibảng điều khiển:

Add a license

View the license

Bạn cũng có thể dễ dàng thay đổi nó:

Change the license

Quy tắc ứng xử là một phần rất quan trọng khác đối với bất kỳ dự án và cộng đồng nào. Nó làm cho những người đóng góp cảm thấy được chào đón và bảo vệ khi họ tham gia vào cộng đồng.

CácThêm quy tắc ứng xửnút thêm quy tắc ứng xử mẫu cho các dự án nguồn mở mà bạn có thể bắt đầu từ đó.

Thêm một gói npm

Nhấn vàopackage.jsonvà nếu bạn chưa có, hãy tạo một tệp trống.

Nhấn vàoThêm góibây giờ xuất hiện ở trên cùng và bạn có thể thêm gói mới.

Add an npm package

Ngoài ra, nếu bạn có một gói cần được cập nhật, Glitch sẽ hiển thị số lượng gói cần cập nhật và bạn có thể cập nhật chúng lên bản phát hành mới nhất bằng một cú nhấp chuột đơn giản:

Update dependencies

Sử dụng phiên bản tùy chỉnh của Node.js

Bạn có thể đặt phiên bản Node.js thànhbất kỳ cái nào trong số nàytrong của bạnpackage.json. Sử dụng.xsẽ sử dụng bản phát hành mới nhất của một phiên bản chính, đây là điều hữu ích nhất, như sau:

{
  //...
  "engines": {
    "node": "8.x"
  }
}

Lưu trữ

Glitch có một hệ thống tệp liên tục. Các tệp được lưu trên đĩa ngay cả khi ứng dụng của bạn bị dừng hoặc bạn không sử dụng nếu trong một thời gian dài.

Điều này cho phép bạn lưu trữ dữ liệu trên đĩa, sử dụng cơ sở dữ liệu cục bộ hoặc lưu trữ dựa trên tệp (tệp phẳng).

Nếu bạn đưa dữ liệu của mình vào.datathư mục, tên đặc biệt này cho biết nội dung sẽ không được sao chép vào một dự án mới với trục trặc được phối lại.

Nhúng lỗi vào một trang

Chìa khóa để sử dụng Glitch để tạo hướng dẫn là khả năng nhúng mã và chế độ xem bản trình bày vào một trang.

Nhấp chuộtChia sẻDự án nhúngđể mở dạng xem Dự án nhúng. Từ đó, bạn có thể chọn chỉ nhúng mã, ứng dụng hoặc tùy chỉnh chiều cao của tiện ích con - và lấy mã HTML của nó để đặt trên trang web của bạn:

Embed glitch

Cộng tác khi gặp trục trặc

Từ bảng điều khiển Chia sẻ,Mời cộng tác viên chỉnh sửaliên kết cho phép bạn mời bất kỳ ai chỉnh sửa lỗi trong thời gian thực với bạn.

Bạn có thể thấy những thay đổi của họ khi họ thực hiện. Nó khá tuyệt!

Yêu cầu giúp đỡ

Được liên kết với tính năng cộng tác này, có một tính năng tuyệt vời: bạn có thể yêu cầu trợ giúp từ bất kỳ ai trên thế giới, chỉ bằng cách chọn một số văn bản trong trang và nhấp vào biểu tượng giơ tay:

Ask for help on a line

Thao tác này sẽ mở ra một bảng nơi bạn có thể thêm thẻ ngôn ngữ và mô tả ngắn gọn về những gì bạn cần:

Describe your problem

Sau khi hoàn tất, yêu cầu của bạn sẽ được hiển thị trên trang chủ Glitch để mọi người có thể nhận.

Khi một người nhảy vào trợ giúp, họ sẽ thấy dòng bạn đã đánh dấu và tôi thấy rằng các nhận xét là một cách tốt để giao tiếp như một cuộc trò chuyện:

Help out someone

Xem nhật ký

Nhấp chuộtNhật kýđể có quyền truy cập vào tất cả nhật ký của ứng dụng:

The project logs

Truy cập bảng điều khiển

Từ bảng Nhật ký, có mộtBảng điều khiểncái nút. Nhấp vào nó để mở bảng điều khiển tương tác trong một tab riêng biệt trong trình duyệt:

The project console

Trình gỡ lỗi

Nhấp vàoTrình gỡ lỗitrong bảng Nhật ký, một phiên bản của Công cụ dành cho nhà phát triển của Chrome sẽ mở ra trong một tab khác với liên kết đến URL trình gỡ lỗi.

The debugger

Lịch sử thay đổi

Một tính năng tuyệt vời là khả năng kiểm tra tất cả các thay đổi của bạn trong lịch sử dự án.

Nó rất giống cách hoạt động của Git - trên thực tế, dưới lớp vỏ bọc là Git cung cấp năng lượng cho giao diện thực sự dễ sử dụng này, mở ra khi nhấp vào nút ⏪:

The history of changes

Glitch khác với Codepen hoặc JSFiddle như thế nào?

Một điểm khác biệt lớn tách biệt Glitch với các công cụ khác là khả năng chạy mã phía máy chủ.

Codepen và JSFiddle chỉ có thể chạy mã giao diện người dùng, trong khi Glitch thậm chí có thể được sử dụng như một máy chủ nhẹ cho các ứng dụng của bạn - hãy ghi nhớ các giới hạn sử dụng.

Ví dụ: tôi đã thiết lập một máy chủ Express.js được kích hoạt bởi Webhook vào những thời điểm cụ thể trong ngày để thực hiện một số nhiệm vụ. Tôi không cần phải lo lắng về việc nó chạy trên một máy chủ khác, tôi chỉ cần viết nó trên Glitch và chạy trực tiếp từ đó.

Đó là nó!

Tôi hy vọng bạn thích hướng dẫn nhỏ của tôi về cách sử dụng Glitch và tôi hy vọng tôi đã giải thích hầu hết các tính năng sát thủ của nó.

Thêm câu hỏi?

Tôi khuyên bạn chỉ nên thử nó và xem nó có phù hợp với bạn không.

CácCâu hỏi thường gặp về trục trặclà một nơi tuyệt vời để bắt đầu.

Chúc vui vẻ!


Các hướng dẫn dịch vụ khác: