Latihan - Menulis kode untuk mengimplementasikan aplikasi web

  • 5 menit

Di pelajaran ini, Anda menggunakan alat pengembang untuk membuat kode untuk aplikasi web awal.

Buat proyek aplikasi web baru

Jantung alat .NET CLI adalah alat dotnet baris perintah. Dengan menggunakan perintah ini, Anda membuat proyek web ASP.NET Core baru.

Jalankan perintah berikut untuk membuat aplikasi ASP.NET Core Model-View Cotroller (MVC) baru bernama "BestBikeApp":

dotnet new mvc --name BestBikeApp

Perintah membuat folder baru bernama "BestBikeApp" untuk menyimpan proyek Anda.

Uji aplikasi web Anda secara opsional

Anda dapat menguji aplikasi Anda secara lokal di Azure. Untuk melakukannya, gunakan langkah-langkah berikut:

  1. Jalankan perintah berikut untuk membangun dan menjalankan aplikasi web Anda di latar belakang:

    cd BestBikeApp
dotnet run &

    Anda harus mendapatkan output seperti contoh berikut:

    [1] <process-number>
<username> [ ~/BestBikeApp ]$ Building...
warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
      No XML encryptor configured. Key {b4a2970c-215c-4eb2-92b4-c28d021158c6} may be persisted to storage in unencrypted form.
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:<port>
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /home/cephas_lin/BestBikeApp

    Dalam output, perhatikan nilai <nomor> proses dan< port.>

  2. Jalankan perintah berikut untuk menelusuri ke aplikasi web Anda, mengganti <port> dengan port yang Anda catat di langkah terakhir.

    curl -kL http://localhost:<port>/

    Anda akan melihat beberapa HTML muncul, diakhiri dengan baris berikut:

    <div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

        </main>
    </div>

    <footer b-b5g3qljvtd class="border-top footer text-muted">
        <div b-b5g3qljvtd class="container">
            &copy; 2024 - BestBikeApp - <a href="/Home/Privacy">Privacy</a>
        </div>
    </footer>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js?v=hRQyftXiu1lLX2P9Ly9xa4gHJgLeR1uGN5qegUobtGo"></script>

</body>
</html>

  3. Menggunakan <nomor> proses yang Anda catat sebelumnya, hentikan dotnet:

    kill <process-number>

Untuk membuat aplikasi web pemula, kami menggunakan Maven, alat manajemen proyek dan build yang umum digunakan untuk aplikasi Java. Kami menggunakan maven-archetype-webapp templat untuk menghasilkan kode untuk aplikasi web kami.

  1. Jalankan perintah berikut di Azure Cloud Shell sekarang untuk membuat aplikasi web baru:

    cd ~
mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.5

  2. Sekarang, jalankan perintah ini untuk mengubah ke direktori aplikasi "helloworld" baru dan paket aplikasi untuk penyebaran:

    cd helloworld
mvn package

  3. Ketika perintah selesai berjalan, jalankan perintah ini untuk membuka direktori target dan mencantumkan kontennya:

    cd target
ls

Anda sekarang memiliki file yang disebut helloworld.war paket aplikasi web yang akan kami sebarkan ke App Service.

Untuk membuat aplikasi web Node.js starter, kami menggunakan Node Package Manager (npm) bersama dengan beberapa kode JavaScript untuk menjalankan pemrosesan halaman web yang sebenarnya.

  1. Jalankan perintah berikut di terminal untuk membuat file baru package.json yang menjelaskan aplikasi Node.js kami:

    cd ~
mkdir helloworld
cd helloworld
cat >package.json <<EOL
{
  "name": "helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}
EOL

File baru package.json dibuat di folder saat ini. Anda harus menemukannya di folder saat ini jika Anda memasukkannya ls di jendela terminal. Kami memerlukan file JavaScript untuk menjalankan logika situs web kami. Untuk contoh dasar ini, kita hanya memerlukan satu file: index.js.

  1. Buat file dengan menjalankan perintah berikut di terminal:

    cat >index.js <<EOL
const http = require('http');

const server = http.createServer(function(request, response) { 
    response.writeHead(200, { "Content-Type": "text/html" });
    response.end("<html><body><h1>Hello World!</h1></body></html>");
});

const port = process.env.PORT || 1337;
server.listen(port);

console.log(\`Server running at http://localhost:\${port}\`);
EOL

Uji aplikasi web Anda secara opsional

Saat Anda menjalankan aplikasi web helloworld, Anda dapat memverifikasinya berjalan secara lokal dengan membuka sesi shell perintah kedua.

  1. Dari tab browser baru, telusuri ke https://shell.azure.com/.

  2. Dari sesi shell perintah utama Anda, jalankan perintah berikut untuk memulai aplikasi web Anda di latar belakang:

    cd ~/helloworld
npm start &

    Anda harus mendapatkan output seperti contoh berikut:

    [1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337

    Dalam output, perhatikan nilai <nomor> proses.

  3. Dalam sesi Cloud Shell yang sama, jalankan perintah berikut untuk menelusuri aplikasi web Anda.

    curl -kL http://localhost:1337/

    Anda akan menemukan output berikut:

    <html><body><h1>Hello World!</h1></body></html>

  4. Menggunakan <nomor> proses yang Anda catat sebelumnya, hentikan simpul:

    kill <process-number>

Untuk membuat aplikasi web pemula, kami menggunakan kerangka kerja aplikasi web Flask.

  1. Jalankan perintah berikut di Azure Cloud Shell untuk menyiapkan lingkungan virtual dan menginstal Flask di profil Anda:

    python3 -m venv venv
source venv/bin/activate
pip install flask

  2. Jalankan perintah ini untuk membuat dan beralih ke direktori aplikasi web baru Anda:

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. Buat file baru yang disebut application.py dengan respons HTML dasar:

    cat >application.py <<EOL
from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
EOL

  4. Untuk menyebarkan aplikasi ke Azure, Anda perlu menyimpan daftar persyaratan aplikasi yang Anda buat untuk aplikasi tersebut dalam file requirements.txt . Untuk melakukannya, jalankan perintah berikut:

    pip freeze > requirements.txt

Uji aplikasi web Anda secara opsional

Anda dapat menguji aplikasi Anda secara lokal di Azure saat sedang berjalan.

  1. Jalankan perintah berikut untuk memulai aplikasi web Anda di latar belakang:

    cd ~/BestBikeApp
export FLASK_APP=application.py
flask run &

    Anda harus mendapatkan output seperti contoh berikut:

    [1] <process-number>
 * Serving Flask app 'application.py'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit

    Dalam output, perhatikan nilai <nomor> proses. Karena proses berjalan di latar belakang, Anda tidak dapat keluar dengan CTRL+C. Anda harus menghentikannya dengan nomor prosesnya.

  2. Jalankan perintah berikut untuk menelusuri aplikasi web Anda.

    curl -kL http://localhost:5000/

    Anda harus mendapatkan output HTML berikut:

    <html><body><h1>Hello Best Bike App!</h1></body></html>

  3. Menggunakan <nomor> proses yang Anda catat sebelumnya, hentikan Flask:

    kill <process-number>