Nghịch ngợm Node.js với Glitch
#Glitch
1
#NodeJs
1
White

Hoàng Giang viết ngày 07/01/2020

Chào các bạn. Trong một ngày Hà Nội mưa gió bão bùng. Nổi hứng lên muốn làm một cái gì đấy có ích một tí cho bản thân nên viết một bài chia sẻ vớ vẩn. Hiện tại mình đang học về mảng web. Trong quá trình học thì mình có xem một vài clip của idol giới trẻ toidicodedao và nhìn thấy một thứ khá hay ho dành cho những bạn mới học như mình. Đó là Glitch!!! Vậy Glitch là cái quần què gì?

Giới thiệu một chút về Glitch

Glitch là 1 nền tảng mà bạn có thể xây dựng ứng dụng Node.js trên cloud. Về cơ bản nó giống github ở chỗ. Bạn có thể public hoặc private dự án của mình và có thể share nó với partner để cùng tạo ra một ứng dụng hay ho.
Trang chủ của Glitch có giới thiệu. Làm việc trên Glitch giống như làm việc cùng nhau trên Google Docs. Nhiều người cùng làm việc trên một dự án và cùng một thời điểm. Bạn có thể thấy ngay sự thay đổi trực tiếp ngay trên trang web của bạn.
Chúng ta hãy xem Glitch làm việc như thế nào nhé

Dự án đầu tiên với Glitch

alt text
Đây là giao diện trang chủ của Glitch. Trông nó hơi có gì đấy màu mè nhỉ :))) but i like this. :3
Yeah! Vậy để start một dự án mới chúng ta cần tạo một tài khoản ở đây. Có thể đăng ký account với google, github hoặc facebook của mình. Nhưng mình nghĩ nên đăng ký tài khoản bằng github thì sẽ tốt hơn cho các bạn. Tốt hơn như thế nào thì tiếp tục xem nhé.
Rồi, tạm gác Glitch sang một bên. Chúng ta hãy tạo một project cá nhân của mình nhé. Các bạn có thể tạo một repo rỗng trên github của mình sau đó clone về máy tính nhé. Thao tác với git chắc chẳng xa lạ gì đúng không
Sau khi đã clone project về máy, ta sẽ bắt đầu tạo một project Node.js mới ngay trong repo mà mình vừa clone về.

npm init
npm i express

Tiếp tục ta tạo một thư mục view.

  • views: Website của bạn sẽ có rất nhiều trang (page), chẳng hạn trang chủ, trang đăng nhập,... Thư mục này là nơi chứa tất cả các trang của bạn.

Ở folder view tạo một file index.html chứa source code của bạn.
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>First Project</title>
</head>
<body>
    <h1>Hello World</h1>
    <h2>Let's do it with Glitch</h2>
</body>
</html>

Sau khi tạo file html xong ta tiếp tục tạo một file server.js cùng cấp với file package.json. File này có tác dụng cấu hình cho project của mình.
File server.js

const express = require("express");
const app = express();

app.get("/", function(request, response) {
  response.sendFile(__dirname + "/view/index.html");
});

// listen for requests :)
const listener = app.listen(process.env.PORT, function() {
  console.log('Your app is listening on port ' + listener.address().port);
});

File package.json

{
  "name": "glitchProject",
  "version": "1.0.0",
  "description": "Create a new Node.js project on Glitch",
  "main": "server.js",
  "script": {
     "start": "node server.js"
  },
  "repository": {
     "type": "git",
     "url": "git+https://github.com/hoanggiang521999/GlitchProject.git"
  }
  "author": "",
  "license": "ISC",
  "bugs": {
     "url": "https://github.com/hoanggiang521999/GlitchProject/issues"
  },
  "hompage": "https://github.com/hoanggiang521999/GlitchProject#readme",
  "dependencies": {
     "express": "^4.17.1"
  }
}

Sau khi xong hết thì run node server.js
Phần local đã xong. Các bạn commit code và push ngược lại lên repo github đã tạo ban đầu nhé.
Sau đây, chúng ta quay lại với Glitch. Login vào Glitch với tài khoản github của mình.
Bước 1: Click New project
Sau đấy click chọn Clone from Git Repo và Paste url repo vào.
alt text
Màn hình khi bạn đã điền xong url project
Bạn có thể chỉnh sửa code trực tiếp tại đây như một IDE. Hoặc cũng có thể invite bạn bè của mình vào để phát triển code nhé.
alt text
Khi bạn click vào Share, sẽ có phần Live App, bạn sẽ nhìn thấy một url, và đó là link trang web mà mình tạo ra lúc nãy. Bạn có thể copy và gửi link này cho bạn bè :))))
alt text
Và đây là kết quả

Tổng kết

Như vậy chỉ trong vòng khoảng thời gian rất ngắn mình và các bạn đã tạo ra được một trang web so easy. Chúng ta có thể thấy

  • Glitch là một nơi khá hay ho để public/save/edit code Node.js
  • And it's FREE

Chúc các bạn thành công nhé!!! :)))))))

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Giang

1 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!