Penyegar Javascript Biasa untuk mereka yang berasa ketinggalan atau tidak tahu di mana hendak bermula dengan Fungsi, Tatasusunan, Gelung, JSON & NoSQL

Di sini kita akan mempelajari Plain Vanilla JS tanpa menggunakan NodeJS atau perpustakaan luaran. Kami akan bermula terus dari kotak dengan kes penggunaan dengan menukar beberapa data helaian Google kepada JSON dan menyimpannya dalam baldi AWS S3, kemudian mengambilnya menggunakan js biasa. Kebanyakan pelajaran bermula dengan program hello world dan tidak banyak lagi tetapi di sini kita sebenarnya mempunyai sesuatu untuk diprogramkan dengan segera supaya kita boleh mempraktikkan tatasusunan dan gelung kita yang merupakan tonggak utama dalam mana-mana bahasa pengaturcaraan. Selain itu, anda boleh menceburi dunia Sains Data di sini dan mungkin membuat kerjaya daripadanya seperti yang saya lakukan.

Apabila kami mula-mula mengkaji data, kami memikirkan SQL tetapi terdapat banyak apl yang SQL berlebihan dan tidak diperlukan. Dalam papan pemuka dengan beberapa metrik, kami boleh lari menggunakan fail rata JSON yang ringkas sebagai sumber data kami tanpa hubungan dengan data lain. Papan pemuka boleh menggunakan format NoSQL ini dan merupakan pilihan popular untuk keperluan pelaporan kumpulan Pemasaran.

Untuk menyediakan persekitaran kami, kami hanya memerlukan Google Chrome dan sambungan json chrome untuk menukar data hamparan kepada json. Kemudian kami memerlukan AWS percuma dan baldi S3 sebagai tapak web generik kami. Untuk IDE kami hanya akan menggunakan notepad windows. Kami juga memerlukan rangkaian tempatan untuk mengambil data kami kerana mengambil data daripada pemacu C tidak akan berfungsi kerana javascript fetch api menggunakan protokol http jadi pelayan web diperlukan untuk ini. Sebelum didedahkan kepada AWS percuma, kami akan menyediakan pelayan web tempatan terlebih dahulu untuk menguji data kami. Kami akan menggunakan Python mudah untuk ini.

sediakan persekitaran
langkah untuk menyediakan pelayan Python tempatan dan fail indeks

Sebelum mencipta pelayan jauh AWS, kami perlu menyediakan pelayan web tempatan menggunakan Python dahulu..berikut ialah cara untuk melakukannya

Mula-mula ketahui jika Python dipasang... buka command prompt yang akan lalai ke folder rumah anda c:Usersyourname dan taipkan python. Jika maklumat versi menunjukkan maka ia dipasang dan anda boleh pergi ke langkah 6 di bawah (tetapi pastikan bahawa fail indeks disimpan dalam folder rumah anda dahulu)
jika anda tidak memasang python ikut arahan ini

Pelayan Python dalam tingkap
1 pergi ke kawasan carian dan taip cmd kemudian tekan command prompt, skrin hitam akan dibuka dengan laluan ke folder rumah anda (biasanya C:UsersyourName)
2 taip python, jika dipasang ia akan menunjukkan nombor versi
3 jika tidak dipasang maka butang dapatkan muncul, tekan ini dan muat turun akan dipasang dalam beberapa minit (atau muat turun sahaja python dari chrome)
4 setelah dipasang sepenuhnya buka semula cmd prompt dan taip python sekali lagi
Maklumat versi 5 akan dipaparkan....di sinilah kita bermula jika python sudah dipasang
6 taipkan python -m http.server dan ini memulakan pelayan (pastikan tetingkap cmd ini terbuka)
7 pastikan anda menyimpan fail indeks dalam folder rumah (dalam fail explorer klik c: kemudian Pengguna kemudian nama anda untuk membuka folder rumah)
7a pastikan cmd terbuka semasa anda pergi ke localhost dalam langkah 8...menutup cmd memerlukan pembukaan semula dan mulakan semula
8 pergi ke chrome dan taip localhost:8000 dan halaman indeks lalai anda akan muncul....lihat di bawah untuk membuat fail indeks

Pelayan Python pada Mac
pada mac buka terminal dan mulakan dengan langkah 2 di atas ....kecuali mungkin perlu mencuba 3 pilihan berbeza di atas bergantung pada versi python yang telah dipasang. Folder rumah kita mestilah folder yang dipasang Python dan sama dengan folder terminal tempat kita memulakan pelayan.

cuba ini dahulu

1. taip python -m http.server atau
2. taip python3 -m http.server jika di atas tidak berfungsi Tekan kembali dan Python 3 akan serta-merta memulakan pelayan HTTP mudah dari direktori di mana arahan itu dilaksanakan..dir ini juga harus mempunyai fail indeks atau pilihan 3 jika yang lain tidak berfungsi
3. taip python -m SimpleHTTPServer 8000 untuk versi lama

Cara mencipta fail indeks (rumah) dalam laluan Python kami..simpan ke folder yang sama di mana pelayan web berada. Salin kod ini dan simpan sebagai index.html

     

<header>
</header>

   <p> hi there, this is our first html page </p>

sediakan beberapa data

1 salin data ini dan tampalkannya ke dalam helaian google kosong
ini adalah syarikat rekaan kami dengan pangkalan data pesanan

order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0

SANGAT PENTING - selepas menampal data dan semasa ia masih diserlahkan, dalam helaian google, tekan data kemudian bahagikan teks kepada lajur

2 dapatkan sambungan krom json
dayakan chrome untuk menyimpan sebagai json sebelum membuat helaian.
Saya dapati pintasan mudah ini yang menambahkan ikon JSON pada bar alat helaian google...ini ialah sambungan krom
mula-mula pergi ke pautan ini https://chromewebstore.google.com/detail/sheets-to-json/enmkalgdnmcaljdfkojckdbhkjmffmoa
kemudian tekan tambah pada chrome, ke hujung sebelah kanan halaman
kemudian buka helaian google kosong dan anda akan melihat ikon JSON sebagai item terakhir dalam bar alat berhampiran bahagian atas halaman

3 mengubah data anda menjadi json
tampal data di atas ke dalam helaian, kemudian teks ke lajur, kemudian tekan ikon json dan pergi ke muat turun untuk mendapatkan fail json anda

4 simpan fail json ini dalam folder yang sama di mana python dan fail indeks anda berada...saya simpan sebagai orders.json

laksanakan program kami

5 ambil data daripada fail indeks anda...menguji konfigurasi pelayan dan fail kami

tukar fail index.html anda untuk mengandungi kod berikut yang berbeza daripada kod yang akan kami gunakan di bawah untuk mengakses data daripada pelayan awam

     

<header>
</header>

   <p> hi there, this is our first html page </p>

6 hubungi localhost:8000 dan lihat data
7 selepas bermain-main dengan json pada pelayan tempatan, kami kemudian boleh mencipta baldi S3 awam dalam AWS

Mengkonfigurasi Baldi AWS S3 sebagai Pelayan Awam kami

Cara paling mudah untuk menyimpan fail JSON dari jauh ialah dalam AWS S3. Dengan tidak mencipta skema dalam pelayan data tradisional, kami menjadi tanpa pelayan. Kami berada di luar dalam awan AWS dengan S3 di mana kami boleh menyambung ke pautan baldi kami dari mana-mana sahaja. Seperti yang dikatakan sebelum ini pendekatan noSQL S3 mempunyai beberapa batasan. Tetapi ia juga mempunyai faedah yang besar. Apabila bekerja dengan data, sifat manusia cenderung hanya mahu menggunakan satu jadual yang serupa dengan hari ole di mana kita sangat bergantung pada satu jadual excel. Format fail rata yang satu ini boleh mengendalikan beberapa metrik supaya kami tidak membebankan khalayak kami dengan kerumitan. Kes penggunaan yang sesuai untuk fail rata ialah papan pemuka yang ringkas.

Mula-mula kami mencipta baldi AWS s3 kemudian kami memuat naik fail JSON. Begini cara kami melakukannya:

1 Daftar untuk AWS peringkat percuma, pergi ke S3 dari konsol AWS dan buat nama baldi yang unik

2 jadikan ia umum, dengan pergi ke tab kebenaran baldi untuk mematikan sekat akses awam - pergi ke sekat bahagian akses awam, edit, nyahtanda dan simpan

3 kekal dalam tab kebenaran kemudian edit dasar baldi, padamkan apa yang ada dan gantikan dengan berikut, kemudian simpan perubahan (ingat untuk menggantikan nama baldi anda di bawah dengan nama sebenar)

order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0

4 kemudian, semasa masih dalam tab kebenaran pergi ke asal silang (kor), edit dan ganti dengan di bawah dan simpan

    <div id="myData"></div> <!--data result displays in this html div-->

    <script type="text/javascript">
convert();  //run the convert function..this converts json to html and displays to the front end in the myData div
                 // async is needed to run await which is the newest way to return a promise..await must be used inside a function
    //When you then put await in front of a function you're instructing the program to wait until that operation is complete before moving on.
async function convert() {
                //let response = await fetch('https://rickd.s3.us-east-2.amazonaws.com/orders4.json'); //get data from rickd s3 bucket in aws
                      //replace rickd with your bucket name
   let response = await fetch('orders.json'); //get data locally instead of from s3..orders.json is in same folder where python is installed
                let data = await response.json(); //getting data array in json format...waiting for all the data to come in

                    //then iterate over javascript array for as many times as there are js objects inside the array
            for (var i = 0; i < data.length; i++) {
                data[i].product1 = parseInt(data[i].product1); //this converts from string to int just the val for product1
              } //end for loop
         //we are rendering the array and not data in table format
myData.innerHTML = JSON.stringify(data, null, "\t"); //first stringify json object then render result inside html div tag
console.log(JSON.stringify(data, null, "\t")) //this is more readable, this is the pretty print..press ctrl-shift-J to view
  //console.log(JSON.stringify(data)) //prints all as one line / a string, this is the record format

} //end function
    </script>


<!-- next up..we need to return this data in table format-->

Atas ialah kandungan terperinci Penyegar Javascript Biasa untuk mereka yang berasa ketinggalan atau tidak tahu di mana hendak bermula dengan Fungsi, Tatasusunan, Gelung, JSON & NoSQL. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!