Latihan - Menulis kode untuk mengimplementasikan aplikasi web

5 menit

Di unit ini, Anda akan menggunakan alat pengembang untuk membuat kode untuk aplikasi web pemula.

Buat proyek aplikasi web baru

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

Pertama, mari kita instal versi yang sesuai dari dotnet ke Cloud Shell. Untuk latihan ini, kita akan menggunakan SDK versi 3.1.102.

Jalankan perintah berikut di Azure Cloud Shell di sebelah kanan untuk mengunduh dan menginstal dotnet:

wget -q -O - https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh | bash -s -- --version 6.0.404
export PATH="~/.dotnet:$PATH"
echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc

Selanjutnya, jalankan perintah berikut untuk membuat aplikasi ASP.NET Core MVC baru bernama "BestBikeApp":
```
dotnet new mvc --name BestBikeApp
```

Perintah akan membuat folder baru bernama "BestBikeApp" untuk menahan proyek Anda.

Uji aplikasi web Anda secara opsional

Buka sesi shell perintah kedua dengan menelusuri https://shell.azure.com/ di tab baru. Anda dapat menguji aplikasi Anda secara lokal di Azure. Untuk melakukannya, gunakan langkah-langkah berikut:

Dari sesi shell perintah utama Anda, jalankan perintah berikut untuk membangun dan menjalankan aplikasi web Anda:

cd BestBikeApp
dotnet run

Anda harus mendapatkan output seperti berikut:

info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
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/user/BestBikeApp

Output menjelaskan situasi setelah memulai aplikasi Anda: aplikasi berjalan dan mendengarkan di port 5000.

Dari sesi shell perintah kedua Anda, jalankan perintah berikut untuk menelusuri ke aplikasi web Anda:

curl -kL http://127.0.0.1:5000/

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 class="border-top footer text-muted">
         <div class="container">
             &copy; 2021 - 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=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>

 </body>
 </html>

Dari sesi shell perintah utama Anda, tekan Ctrl+C untuk keluar dari aplikasi web Anda.

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

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.4

Sekarang, jalankan perintah ini untuk mengubah ke direktori aplikasi "helloworld" baru dan paket aplikasi untuk penyebaran:
```
cd helloworld
mvn package
```
Ketika perintah selesai berjalan, jalankan perintah ini untuk membuka direktori target dan mencantumkan kontennya:
```
cd target
ls
```

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

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

Jalankan perintah berikut di Azure Cloud Shell untuk membuat yang baru package.json yang akan menjelaskan aplikasi Node.js kami:
```
cd ~
mkdir helloworld
cd helloworld
npm init -y
```

Ini membuat file baru package.json di folder saat ini. Anda harus menemukannya di folder saat ini jika Anda memasukkannya ls di jendela terminal. Kita akan membutuhkan file JavaScript untuk menjalankan logika situs web kita. Karena ini hanya contoh dasar, kita hanya perlu satu file: index.js.

Jalankan perintah berikut di terminal untuk membuat file:
```
touch index.js
```
Sekarang kita harus membuat beberapa editan untuk kedua file kami. Jalankan perintah berikut di terminal untuk membuka editor interaktif:
```
code .
```
package.json Pilih file dan lakukan pengeditan berikut ke scripts bagian untuk menggunakan Node.js untuk meluncurkan aplikasi web:
```
{
  "name": "helloworld",
  ...
  "scripts": {
    "start": "node index.js"
  },
  ...
}
```
Simpan file dengan memilih menu ... , atau tekan Ctrl+S di Windows dan Linux atau Command+S di macOS.

Penting

Setiap kali Anda mengedit file di editor, pastikan untuk menyimpan setelahnya dengan memilih menu ... di sudut kanan atas editor, atau dengan menekan Ctrl+S di Windows dan Linux atau Command+S di macOS. Untuk keluar dari editor, tekan Ctrl+Q di Windows dan Linux atau klik sudut kanan atas editor dan pilih Keluar di MacOS.

Beralih ke index.js file, dan tambahkan konten berikut ke file tersebut. Ini adalah program Node.js kecil yang selalu merespons dengan "Halo Dunia!" ketika ada permintaan GET yang dibuat ke server.

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}`);

Simpan file Anda dan keluar dari editor dengan memilih ikon ... di kanan atas dan memilih Simpan dan Tutup Editor dari menu konteks, atau dengan menggunakan tombol akselerator Ctrl+S dan Ctrl+Q di Windows dan Linux.

Uji aplikasi web Anda secara opsional

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

Dari tab browser baru, telusuri ke https://shell.azure.com/.
Dari sesi shell perintah utama Anda, jalankan perintah berikut untuk memulai aplikasi web Anda:
```
cd ~/helloworld
npm start
```
Dari sesi shell perintah kedua Anda, jalankan perintah berikut untuk menelusuri ke aplikasi web Anda:
```
curl http://127.0.0.1:1337/
```
Anda akan menemukan output berikut:
```
<html><body><h1>Hello World!</h1></body></html>
```
Dari sesi shell perintah utama Anda, tekan Ctrl+C untuk keluar dari aplikasi web Anda, lalu tutup tab browser sesi shell kedua.

Untuk membuat aplikasi web pemula, kita akan menggunakan kerangka kerja aplikasi web Flask.

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
```
Jalankan perintah ini untuk membuat dan beralih ke direktori aplikasi web baru Anda:
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```
Buat file baru untuk aplikasi web Anda dengan membuka application.py di editor interaktif python:
```
code application.py
```

Salin dan tempel kode Python berikut untuk membuat fungsionalitas aplikasi web utama:

from flask import Flask
app = Flask(__name__)

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

Simpan file Anda dan keluar dari editor dengan memilih menu ... di kanan atas, lalu pilih Simpan>Tutup Editor, atau dengan menekan Ctrl+S dan Ctrl+Q di Windows dan Linux.
Untuk menyebarkan aplikasi Anda ke Azure, Anda harus menyimpan daftar persyaratan aplikasi yang Anda buat di 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.

Buka sesi shell perintah kedua di tab browser baru https://shell.azure.com/.
Dari sesi shell perintah utama Anda (ke kanan), jalankan perintah berikut untuk mengaktifkan lingkungan virtual:
```
cd ..
source venv/bin/activate
```
Dari sesi shell perintah utama Anda (di sebelah kanan), jalankan perintah berikut untuk memulai aplikasi web Anda:
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run
```
Dari sesi shell perintah kedua Anda, jalankan perintah berikut untuk menelusuri ke aplikasi web Anda:
```
curl http://127.0.0.1:5000/
```
Anda harus mendapatkan output HTML berikut:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Dari sesi shell perintah utama Anda, tekan Ctrl+C untuk keluar dari aplikasi web Anda, lalu tutup Azure Cloud Shell sekunder.

Lanjutkan

Latihan - Menulis kode untuk mengimplementasikan aplikasi web

Buat proyek aplikasi web baru

Uji aplikasi web Anda secara opsional

Uji aplikasi web Anda secara opsional

Uji aplikasi web Anda secara opsional

Saran dan Komentar