HomeLập trìnhJavaScriptCách xây dựng...

Cách xây dựng các ứng dụng gốc dành cho máy tính để bàn bằng JavaScript (Proton Native)


bởi Mohammed Salman

Khi tôi đang viết bài báo này, Luật Atwood xuất hiện trong tâm trí tôi:

Bất kỳ ứng dụng nào có thể được viết bằng JavaScript, cuối cùng sẽ được viết bằng JavaScript. – Jeff Atwood

1*XyeRix8Z-yOcpRlpubtyuA
đừng lo lắng về nó

Ban đầu được đăng trên blog của tôi!

Hôm nay chúng ta sẽ xem xét Proton Native và tạo một ứng dụng đơn giản với nó.

không giống điện tử ứng dụng, ứng dụng được xây dựng với Proton bản địa thực sự là tự nhiên (do đó có tên) và không dựa trên web dựa trên crom.

Proton bản địa giống như Phản ứng tự nhiên nhưng đối với máy tính để bàn. Nó biên dịch thành mã nền tảng gốc, do đó, nó trông và hoạt động giống như một ứng dụng gốc.

Vậy hãy bắt đầu.

các cửa sổ

Cài đặt các công cụ xây dựng bằng cách chạy:

npm install --global --production windows-build-tools

Linux

Bạn sẽ cần những thư viện này:

  • libgtk-3-dev
  • xây dựng cần thiết

Mac

Bạn không cần bất cứ điều gì.

Bây giờ hãy chạy như sau:

npm install -g create-proton-app

create-proton-app my-app

để làm một dự án mới.

Mở thư mục dự án bằng trình chỉnh sửa mã yêu thích của bạn. Thư mục sẽ trông như thế này:

 └───node_modules
 ├───.babelrc
 ├───index.js
 ├───package.json
 └───package-lock.json

index.js nên trông như thế này:

1*BUgjpvWtCCZNPJ__qrQxig
Như bạn có thể thấy nó trông giống như React/React Native File

Giống như bất kỳ Dự án gốc React hoặc React nào, chúng tôi nhập thư viện phản ứng và tạo một thành phần lớp.

Đọc thêm  Cách thao tác mảng trong JavaScript

Các App phần tử chỉ là một thùng chứa chứa Window MenuWindow có ba đạo cụ: title (tiêu đề cửa sổ), size (lấy một đối tượng chứa chiều rộng và chiều cao của cửa sổ) và menuBar (đặt thành false vì chúng tôi không muốn có thanh menu).

Trước khi bắt đầu mã hóa, hãy cài đặt crypto sử dụng npm:

npm i crypto

Chúng tôi sẽ sử dụng crypto để băm văn bản bằng thuật toán MD5.

index.js

import React, { Component } from "react";
import { render, Window, App, Box, Text, TextInput } from "proton-native";
import crypto from "crypto";

class Example extends Component {
  state = { text: "", md5: "" };

  hash = text => {
    this.setState({ text });
    
    let md5 = crypto
      .createHash("md5")
      .update(text, "utf8")
      .digest("hex");

    this.setState({ md5 });
  };
  render() {
    return (
      <App>
        <Window
          title="Proton Native Rocks!"
          size={{ w: 300, h: 300 }}
          menuBar={false}
        >
          <Box>
            <TextInput onChange={text => this.hash(text)} />
            <Text>{this.state.md5}</Text>
          </Box>
        </Window>
      </App>
    );
  }
}

render(<Example />);

lần đầu tiên tôi nhập khẩu TextTextInput để tôi có thể sử dụng chúng sau này. Sau đó trong class sau khi thiết lập textmd5 để làm trống các chuỗi trong state đối tượng, tôi đã tạo một chức năng hash mất một text tranh luận.

bên trong hash chức năng, chúng tôi đặt trạng thái thành text và tuyên bố md5 để lưu trữ văn bản được mã hóa (như bên dưới)

this.setState({ text });
let md5 = crypto.createHash("md5")
  .update(text, "utf8").digest("hex");

và đặt đối tượng trạng thái thành cập nhật md5.

this.setState({ md5 });

Các render phương thức trả về một số jsx thành phần. Các Box yếu tố giống như div trong Phản ứng, hoặc View trong React Native, chứa TextInputText . Điều này là do phần tử cửa sổ cha mẹ không cho phép có nhiều hơn một phần tử con.

Đọc thêm  Lời hứa là gì? Lời hứa JavaScript cho người mới bắt đầu

TextInput có một onChange prop sẽ được gọi mỗi khi văn bản thay đổi. Do đó, chúng tôi đặt nó thành một hàm mũi tên béo có một text đối số và trả về hash chức năng chúng tôi đã khai báo trước đó.

Vì vậy, bây giờ mỗi khi văn bản thay đổi, text được băm và đặt thành md5.

Bây giờ nếu chúng ta chạy nó với

npm run start

cửa sổ này sẽ bật lên:

1*D_fBTxyGSpUbIVPcyt3Kzw

Và nếu chúng ta nhập một số văn bản, nó sẽ được băm thành md5 như thế này:

1*azNLC0SBkJs85SK-fj15fw

Bạn có thể nói “Trông nó xấu xí – hãy thêm một số kiểu dáng cho nó.” Chà, tại thời điểm viết bài này, Proton Native vẫn còn sơ khai. Nó rất lỗi và nó không hỗ trợ kiểu dáng (chưa), nhưng đó là một dự án thú vị để chơi.

Nếu bạn muốn đóng góp cho dự án, hãy kiểm tra repo.

Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, vui lòng bình luận hoặc liên hệ với tôi trên Twitter @4msal4 và đừng quên nhấn nút vỗ tay đó 🙂

👇Xem câu chuyện trước đây của tôi👇

Cách xây dựng một ứng dụng tin tức với React Native.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status