Lưu trữ một ứng dụng Blazor trên Firebase


Võ Phương Châu
8 tháng trước
Hữu ích 6 Chia sẻ Viết bình luận 0
Đã xem 2079

Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu cách triển khai ứng dụng Blazor trên Firebase. Chúng tôi sẽ tạo một ứng dụng phía máy khách bằng Blazor và lưu trữ nó trên Firebase. Ứng dụng này sẽ không có bất kỳ logic phía máy chủ hoặc logic API web nào. Chúng tôi sẽ sử dụng Visual Studio 2017 để xây dựng và xuất bản ứng dụng.

Điều kiện tiên quyết

Bạn cần cài đặt các điều kiện tiên quyết sau đây để tạo ứng dụng Blazor.

  • Cài đặt .NET Core 2.1 trở lên SDK từ đây .
  • Cài đặt phiên bản mới nhất của Visual Studio 2017 từ đây .
  • Cài đặt phần mở rộng Dịch vụ Ngôn ngữ ASP.NET Core Blazor từ đây .

Tạo một ứng dụng Blazor

Chúng tôi sẽ tạo một ứng dụng máy tính cơ bản cho bản demo này. Vì đây là một máy tính cơ bản, nó sẽ có hai toán hạng và hỗ trợ bốn hàm số học Phép cộng, trừ, nhân và chia.

Mở Visual Studio và chọn Tệp >> Mới >> Dự án. Sau khi chọn dự án, hộp thoại của New New Project sẽ mở. Chọn .NET Core trong menu Visual C # từ bảng điều khiển bên trái. Sau đó, chọn ASP.NET Core Web Applicationtừ các loại dự án có sẵn. Đặt tên của dự án là SampleCalculatorvà nhấn OK.

Sau khi nhấp vào OK, một hộp thoại mới sẽ mở ra yêu cầu bạn chọn mẫu dự án. Bạn sẽ thấy hai menu thả xuống ở phía trên bên trái của cửa sổ mẫu. Chọn vào .NET .NET Core và và ASP.NET ASP.NET 2.1 2.1 từ các danh sách thả xuống này. Sau đó, chọn mẫu của Blazorvio và nhấn OK.

Điều này sẽ tạo ra ứng dụng Blazor của bạn. Bây giờ chúng ta sẽ tạo thành phần máy tính của chúng tôi.

Tạo thành phần máy tính

Đối với ứng dụng này, chúng tôi sẽ sử dụng cấu trúc thành phần trang đơn. Logic và giao diện người dùng sẽ nằm trong cùng một tệp.

Để tạo thành phần của chúng tôi, nhấp chuột phải vào  SampleCalculator/Pagesthư mục và sau đó chọn Thêm >> Mục mới. Hộp thoại Thêm mục mới sẽ mở ra, yêu cầu bạn chọn mẫu mục mong muốn từ danh sách các mục được cung cấp. Chọn ASP.NET Core từ bảng điều khiển bên trái, sau đó chọn Chế độ xem dao động từ bảng điều khiển mẫu. Đặt tên của tệp là Calculator.cshtmlvà nhấp vào Thêm.

Tham khảo ảnh chụp màn hình sau:

Mở Calculator.cshtmltệp và đặt mã sau vào nó:

@page "/calculator"
<h1>Basic Calculator Using Blazor</h1>
<hr />
<div>
    <div class="row">
        <div class="col-sm-3">
            <label class="control-label">First Number</label>
        </div>
        <div class="col-sm-4">
            <input class="form-control" type="text" placeholder="Enter First Number" bind="@operand1" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-3">
            <label class="control-label">Second Number</label>
        </div>
        <div class="col-sm-4">
            <input class="form-control" type="text" placeholder="Enter Second Number" bind="@operand2" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-3">
            <label class="control-label">Result</label>
        </div>
        <div class="col-sm-4">
            <input readonly class="form-control" bind="@finalResult" />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-3">
            <button onclick="@AddNumbers" class="btn btn-primary">
                Add
                (+)
            </button>
        </div>
        <div class="col-md-3">
            <button onclick="@SubtractNumbers" class="btn btnwarning">Subtract (−)</button>
        </div>
        <div class="col-md-3">
            <button onclick="@MultiplyNumbers" class="btn btn-success">Multiply (X)</button>
        </div>
        <div class="col-md-3">
            <button onclick="@DivideNumbers" class="btn btn-info">Divide (/)</button>
        </div>
    </div>
</div>
@functions {
double operand1 { get; set; }
double operand2 { get; set; }
string finalResult { get; set; }
void AddNumbers()
{
    finalResult = (operand1 + operand2).ToString();
}
void SubtractNumbers()
{
    finalResult = (operand1 - operand2).ToString();
}
void MultiplyNumbers()
{
    finalResult = (operand1 * operand2).ToString();
}
void DivideNumbers()
{
    if (operand2 != 0)
    {
        finalResult = (operand1 / operand2).ToString();
    }
    else
    {
        finalResult = "Cannot Divide by Zero";
    }
}
}

Trong phần HTML của mã, chúng tôi đã xác định hai hộp văn bản để đọc đầu vào toán hạng từ người dùng và hộp văn bản để hiển thị kết quả của các phép toán số học. Chúng tôi cũng đã xác định bốn nút, một nút cho mỗi thao tác số học. Sự  onclick kiện của các nút sẽ gọi các phương thức sẽ cung cấp đầu ra, một khi nó đã thực hiện thao tác tương ứng trên cả hai toán hạng.

Trong  @functions phần này, chúng tôi đã xác định hai thuộc tính để liên kết với giá trị đầu vào của người dùng và một thuộc tính khác để hiển thị kết quả tính toán. Để xử lý các hoạt động số học của chúng tôi, chúng tôi đã xác định bốn phương thức sẽ thực hiện các hoạt động mong muốn trên các toán hạng và đặt giá trị của  finalResult điều đó sau đó sẽ liên kết với trường Kết quả trên giao diện người dùng.

Thêm liên kết điều hướng cho thành phần này trong Shared/NavMenu.cshtmltập tin. Nhấn F5 để chạy ứng dụng và bạn có thể thấy màn hình đầu ra như trong pháp sư bên dưới:

Ứng dụng này vẫn còn trong môi trường phát triển. Trước khi lưu trữ nó trên Firebase, chúng tôi cần xuất bản nó.

Xuất bản ứng dụng Blazor

Nhấp chuột phải vào dự án và nhấp vào xuất bản. Tham khảo hình ảnh dưới đây:

Bạn sẽ thấy một màn hình tương tự như ảnh chụp màn hình bên dưới. Chọn 'Thư mục' từ menu bên trái và cung cấp đường dẫn thư mục. Bạn có thể cung cấp bất kỳ đường dẫn thư mục nào mà bạn muốn xuất bản ứng dụng của mình.

Nhấp vào 'Xuất bản.' Visual Studio sẽ bắt đầu xuất bản ứng dụng của bạn. Nếu không có lỗi xây dựng thì ứng dụng của bạn sẽ được xuất bản thành công vào thư mục bạn đã chọn.

Sau khi xuất bản thành công, chúng tôi sẽ tiến hành lưu trữ ứng dụng này trên Firebase.

Thêm một dự án trên Firebase

Bước đầu tiên để lưu trữ bất kỳ ứng dụng nào trên Firebase là thêm một dự án mới trên bảng điều khiển Firebase.

Điều hướng đến https://console.firebase.google.com và đăng nhập bằng tài khoản Google của bạn. Nhấp vào Add Projectliên kết. Một cửa sổ bật lên sẽ mở ra như trong hình bên dưới. Cung cấp tên dự án của bạn và bấm vào  Create projectnút ở phía dưới.

Lưu ý id dự án ở đây. Id dự án Firebase là duy nhất trên toàn cầu. Bạn có thể chỉnh sửa id dự án của bạn trong khi tạo một dự án mới. Khi dự án được tạo, bạn không thể thay đổi id dự án. Chúng tôi sẽ sử dụng id dự án này trong phần tiếp theo trong khi khởi tạo ứng dụng của chúng tôi.

Triển khai với Firebase

Mở thư mục nơi bạn đã xuất bản ứng dụng Blazor của mình. Tại đây, bạn có thể thấy một thư mục Cấm MẫuCalculator và một tệp web.config. Bên trong các mẫu của ELC, chúng tôi sẽ có một thư mục khác có tên là dist dist. Chúng tôi sẽ xuất bản nội dung từ thư mục dist dist này.

Mở một dấu nhắc lệnh / cửa sổ PowerShell bên trong thư mục của mẫu SampleCalculator. Bây giờ hãy làm theo các bước được đề cập dưới đây:

Bước 1 : Đăng nhập bằng Firebase

Thực hiện lệnh sau

firebase login

Nó sẽ mở một cửa sổ trình duyệt và yêu cầu bạn đăng nhập vào Firebase. Đăng nhập bằng tài khoản Google của bạn. Sau khi đăng nhập thành công, điều hướng trở lại CLI của bạn.

Bước 2 : Khởi tạo ứng dụng của bạn.

Thực hiện lệnh sau:

firebase init 

Lệnh này sẽ khởi tạo một dự án căn cứ hỏa lực. Bạn sẽ được hỏi một bộ câu hỏi. Trả lời chúng như hình dưới đây:

  • Bạn đã sẵn sàng để tiến hành? - Nhấn Y
  • Những tính năng Firebase CLI nào bạn muốn thiết lập cho thư mục này? - chọn Hosting
  • Chọn một dự án Firebase mặc định cho thư mục này - nếu dự án bạn đã thêm trong phần cuối cùng xuất hiện trong danh sách, hãy chọn nó, nếu không hãy chọn, đừng thiết lập một dự án mặc định.
  • Bạn muốn sử dụng gì làm thư mục công cộng của bạn? - xa
  • Định cấu hình dưới dạng một ứng dụng một trang (viết lại tất cả các url thành /index.html)? - Y
  • Tệp dist / index.html đã tồn tại. Ghi đè? - N

Bạn sẽ nhận được một thông báo khởi tạo Firebase hoàn thành!

Bước 3 : Thêm một dự án mặc định.

Nếu bạn đã chọn một dự án mặc định trong Bước 2 thì bạn có thể bỏ qua bước này.

Nếu bạn chưa chọn một dự án mặc định thì bạn cần thêm nó thủ công ở đây. Chạy lệnh sau:

firebase use --add yourProjectId 

Trong trường hợp này, nó sẽ là:

firebase use --add blazorcalc 

Bạn sẽ nhận được một thông báo thành công giống như: Hiện tại đang sử dụng dự án blazorcalc.

Bước 4 : Triển khai trên Firebase.

Cuối cùng, chạy lệnh sau để triển khai ứng dụng của bạn trên Firebase.

firebase deploy 

Lệnh này sẽ triển khai ứng dụng Blazor của bạn trên Firebase và sau khi thành công, nó sẽ cung cấp cho bạn một URL lưu trữ.

Tất cả các bước được đề cập ở trên được hiển thị trong GIF bên dưới:

Demo thực hiện

Mở URL lưu trữ. Bạn có thể thấy ứng dụng trong trình duyệt của mình như trong hình bên dưới:

Điều mở rộng

Chúng ta có thể làm theo các bước tương tự để lưu trữ ứng dụng Angular trên Firebase.

Chạy lệnh sau để xây dựng ứng dụng Angular để lưu trữ.

ng build --prod 

Nó sẽ tạo thư mục dist distem trong thư mục gốc của ứng dụng của bạn. Khi bạn nhận được thư mục dist distem, hãy làm theo các bước tương tự như đã đề cập ở trên.

Phần kết luận

Chúng tôi đã học cách tạo một ứng dụng máy tính mẫu bằng Blazor. Chúng tôi cũng đã học cách triển khai ứng dụng này lên Firebase.

Bạn có thể tìm mã cho ứng dụng máy tính mẫu này trên  GitHub .

Hữu ích 6 Chia sẻ Viết bình luận 0
Đã xem 2079