Menghubungkan Sebuah Aplikasi Web API-Driven dengan Javascript

Kami memiliki kami app kecil yang tampak persis seperti yang kita inginkan, tetapi tidak benar-benar melakukan apa-apa lagi. Jadi, mari kita bekerja pada menambahkan beberapa JavaScript untuk membuat aplikasi interaktif.

Ini bagian dari seri akan memerlukan beberapa konsentrasi dari Anda, tetapi bahkan jika Anda tidak berpengalaman pengembang JavaScript, aku berjanji Anda akan berjalan pergi telah belajar beberapa keahlian yang berharga.

Konfigurasi awal

Pertama, kita akan membuat kami javascript file assets/js/main.js dan dalam bahwa kita akan menciptakan sebuah objek yang disebut Gimmie (dinamai setelah app kami). Ini adalah di mana kita akan menyimpan variabel dan fungsi kita perlu sehingga mereka tidak pada window objek. Kami akan menaruhnya di jQuery's "dokumen siap" panggilan yang kita akan juga menggunakan.

1

var Gimmie = {     $content: $('.content'),     $form: $('form'), };  $(document).ready(function(){     // On page load, execute this... }); 

Perhatikan bahwa kita menambahkan beberapa variabel dalam objek Gimmie: $content, $form. Ini adalah obyek jQuery, jadi kami nama mereka dengan $ di depan untuk mengingatkan kita tentang itu. Karena mereka DOM node tertentu yang kita akan referensi lebih dari sekali kami akan menyimpan mereka dalam variabel untuk penggunaan masa depan yang lebih cepat.

Form Submission

Hal pertama yang kita butuhkan untuk menangani adalah ketika pengguna memasukkan sesuatu ke dalam formulir dan menyampaikannya. Jadi, di dalam kami "dokumen siap" kami akan melampirkan acara pendengar untuk formulir. Kita bisa melakukan $('form').on() tetapi karena kita sudah tersimpan elemen form dalam variabel, kita akan hanya referensi yang sebaliknya, dengan melakukan Gimmie.$form.on(). Kemudian kita akan mencegah aksi default bentuk (sehingga laman tidak disegarkan):

1

$(document).ready(function(){     Gimmie.$form.on('submit', function(e){         e.preventDefault();         // Do more stuff here...     }); }); 

Loading

Sekarang, kami ingin menunjukkan keadaan "loading" ketika pengguna mengirimkan formulir. Dengan cara itu mereka tahu sesuatu yang terjadi. Jika Anda ingat, kami merancang ini di sketsa:

Untuk mencapai hal ini, kita akan menciptakan sebuah fungsi dalam objek Gimmie disebut toggleLoading dan kami dapat mengeksekusi ketika pengguna mengirimkan formulir dengan menelepon Gimmie.toggleLoading() di dalam kami form submission listener. Kita menamakannya toggleLoading karena kita akan beralih keadaan pemuatan saat ini di UI, yaitu kita jalankan sekali pada mengirimkan, kemudian kami akan menjalankan sekelompok kode, dan ketika kami selesai, kami akan menjalankan lagi untuk mengambil negara loading.

1

var Gimmie = {     /* our other code here */      toggleLoading: function(){         // Toggle loading indicator         this.$content.toggleClass('content--loading');                  // Toggle the submit button so we don't get double submissions         // https://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery         this.$form.find('button').prop('disabled', function(i, v) { return !v; });     }, } $(document).ready(function(){     Gimmie.$form.on('submit', function(e){         e.preventDefault();         Gimmie.toggleLoading(); // call the loading function     }); }); 

Perhatikan bahwa kita adalah toggling kelas pada elemen .content yang disebut content--loading. Kita perlu membuat beberapa gaya CSS di sekitar itu. Jadi, dalam file CSS kami, mari kita tambahkan:

1

.content--loading:before {     content: '';     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     background: #fff;     opacity: .9;     z-index: 10; }  .content--loading:after {     content: url('../img/loading.gif');     position: absolute;     left: 50%;     top: 3em;     margin-left: -16px;     margin-top: -16px;     z-index: 11; } 

Di sini kita menggunakan elemen palsu untuk menciptakan negara loading di daerah konten kami. Elemen sebelum kami digunakan untuk membuat hamparan putih yang agak buram di area konten. Kemudian kita menggunakan elemen setelah untuk menampilkan animasi loading gif di dalam kotak kami. Ketika kelas ini ditambahkan ke bagian konten kami, akan muncul seolah-olah sesuatu sedang loading.

Pada titik ini, jika Anda memasukkan sesuatu ke dalam input field dan menyerahkan formulir, negara loading akan menampilkan dan Anda akan hanya terjebak pada saat itu.

Validasi form

Sebelum kita Kirim permintaan ke iTunes API, mari kita pastikan bahwa data yang dimasukkan oleh pengguna benar.

Jadi apa sebenarnya merupakan data yang benar? Nah, jika kita melihat dokumentasi API iTunes ada beberapa cara yang berbeda untuk mendapatkan konten. Salah satu cara adalah untuk melakukan pencarian berdasarkan kata kunci. Tapi apa yang akan kita lakukan disebut "pencarian". Dari docs:

Anda juga dapat membuat permintaan pencarian untuk mencari konten di toko-toko yang berdasarkan iTunes ID

Kemudian memberikan beberapa contoh, seperti mencari menyalak perangkat lunak aplikasi yang iTunes ID: https://itunes.apple.com/lookup?id=284910350. Perhatikan bahwa nomor ID aplikasi adalah apa yang dibagi antara URL ini. Itulah apa yang akan kita butuhkan dari pengguna.

Dari perspektif UX, meminta pengidentifikasi untuk aplikasi di app store mungkin membuktikan menjadi agak sulit (terutama untuk pemula). Jadi bukan mengajar orang bagaimana untuk mendapatkan ID app, kami akan meminta untuk toko app link. Semua orang tahu bagaimana untuk menyalin dan menyisipkan link! App link tersedia untuk siapa pun dengan hanya menyalin mereka dari halaman app individu di app store (di iTunes, di web, atau di Mac App store).

Jadi, setelah pengguna memasukkan link, kita perlu memvalidasi itu:

1. Pastikan itu adalah url yang valid yang diawali dengan http://itunes
2. Pastikan berisi ID

Untuk melakukan ini, kita akan membuat fungsi validasi dalam variabel Gimmie kami dan menjalankannya pada formulir kirim pendengar acara.

1

var Gimmie = {     /* our prior code here */     userInput: '',     userInputIsValid: false,     appId: '',     validate: function(input) {         // validation happens here     }, }  Gimmie.$form.on('submit', function(e){     /* our previous code here */     Gimmie.userInput = $(this).find('input').val();     Gimmie.validate();     if( Gimmie.userInputIsValid ) {         /* make API request */     } else {         /* throw an error */     } }); 

Perhatikan apa yang kita lakukan dalam kode di atas:

• Kami menambahkan beberapa variabel dan salah satu fungsi untuk Gimmie
  • userInput adalah sebuah string dan ditetapkan sebagai masukan dari pengguna
  • userInputIsValid adalah boolean yang akan menjadi true atau false tergantung pada apakah masukan dari pengguna sah (kita akan menulis tes itu dalam sekejap)
  • appId adalah string digit yang akan diambil dari userInput jika berlaku
  • validate adalah fungsi di mana kami akan memvalidasi input pengguna ketika disebut
• Di form submit, kami:
  • Mengatur Gimmie.userInput ke nilai dari field input formulir
  • Melaksanakan fungsi validasi di Gimmie.validate()
  • Menjalankan if/else statement. Jika pengguna memasukkan berlaku (sesuatu Gimmie.validate kami akan menentukan) maka kita akan melanjutkan dan membuat permintaan iTunes API. Jika hal ini tidak berlaku, kita akan menampilkan kesalahan menginformasikan pengguna bahwa data yang mereka dimasukkan tidak benar.

Sekarang mari kita menulis kode yang memvalidasi apakah atau tidak pengguna masukan benar. Catatan bahwa dalam HTML kami kami mengkonfigurasi jenis input kami ke url <input type="url">. Ini berarti beberapa browser akan Native melakukan beberapa jenis validasi pada yang input, namun tidak akan konsisten atau seragam di seluruh browser. Di beberapa browser, itu bahkan tidak akan berhasil. Jadi, jika pengguna jenis "bla", browser akan menerimanya dan formulir akan menyerahkan. Peramban lain, mereka akan setidaknya harus ketik sesuatu yang dimulai dengan "http://" sebelum browser akan membiarkan mereka menyerahkan formulir. Tapi apa yang kita inginkan adalah URL yang dimulai dengan "http://itunes", jadi kita akan menangani hal itu dalam JavaScript.

1

var Gimmie = {     /* our prior code */     validate: function() {         // Use regex to test if input is valid. It's valid if:         // 1. It begins with 'http://itunes'         // 2. It has '/id' followed by digits in the string somewhere         var regUrl = /^(http|https):\/\/itunes/;         var regId = /\/id(\d+)/i;         if ( regUrl.test(this.userInput) && regId.test(this.userInput) ) {             this.userInputIsValid = true;             var id = regId.exec(this.userInput);             this.appId = id[1];         } else {             this.userInputIsValid = false;             this.appId = '';         }     } } 

Di sini kami menggunakan ekspresi reguler untuk menguji apakah input memenuhi kondisi kami. Mari kita berjalan melalui ini dalam sedikit lebih detail:

1

var regUrl = /^(http|https):\/\/itunes/i; var regId = /\/id(\d+)/i; 

Berikut adalah dua kalimat biasa literal kita mendefinisikan (Baca lebih lanjut tentang persamaan reguler). Berikut adalah ringkasan singkat dari apa kalimat biasa mereka lakukan:

• regUrl adalah regex harfiah untuk menentukan apakah input pengguna adalah URL yang dimulai dengan "http://itunes"
  • /^ mengatakan "mulai regex dan mulai melihat awal dari string"
  • (http|https): mengatakan "mencari 'http' atau 'https' diikuti dengan tanda titik koma':'"
  • \/\/ mengatakan "mencari ' //'" (karena miring karakter khusus dalam ekspresi reguler, seperti cara kami menggunakannya pada permulaan regex, kita harus menggunakan tanda garis miring terbalik sebelum garis miring maju untuk memberitahu regex untuk tidak menafsirkan miring sebagai cha khusus racter, tapi bukan hanya sebagai sebuah slash)
  • iTunes/i mengatakan "mencari 'itunes' maka mengakhiri regex" sementara i pada akhir menunjukkan pencocokan harus dilakukan peka (karena seseorang mungkin paste 'HTTP://ITUNES' itu masih berlaku)

• regId adalah regex harfiah untuk menentukan apakah input pengguna memiliki ID yang cocok dengan iTunes store link URL pola angka. Semua berlaku iTunes store link akan memiliki /id di dalamnya, diikuti oleh urutan nomor.
  • /\/id mengatakan "mulai regex dan melihat di mana saja dalam string untuk ' / id'" (Lihat contoh sebelumnya untuk miring melarikan diri Deskripsi)
  • (\d+) mengatakan "mencari urutan digit (0 sampai 9) 1 atau lebih kali dan menangkap mereka". Tanda kurung menunjukkan bahwa kita ingin mengingat apapun pertandingan didefinisikan di dalam, yaitu dalam kasus kami kita ingat urutan angka yang mewakili app ID. /d adalah karakter khusus di regex menunjukkan kita ingin digit [0-9] dan + mengatakan pertandingan mereka [0-9] 1 atau lebih kali.
  • /i mengatakan "akhir regex" dan i menunjukkan case-sensitive pencocokan (karena URL dengan /ID938491 masih berlaku)

Bit berikutnya dari kode kita terlihat seperti ini:

1

if ( regUrl.test(this.userInput) && regId.test(this.userInput) ) {     this.userInputIsValid = true;     var id = regId.exec(this.userInput);     this.appId = id[1]; } else {     this.userInputIsValid = false;     this.appId = ''; } 

Metode .test() pada regex harfiah tampak untuk pertandingan dari string tertentu dan kembali true atau false, tergantung pada jika pertandingan tertentu ditemukan. Jadi, dalam kasus kami, kami menguji input pengguna terhadap regUrl dan regID untuk memastikan bahwa masukan baik dimulai dengan "http://itunes" dan memiliki "/ id" diikuti oleh jumlah digit.

Jika tes kedua kembali benar, kita menetapkan userInputIsValid bendera untuk true dan kemudian kita ekstrak ID dari URL dan mengaturnya sebagai appId. Untuk melakukan ini, kami menjalankan .exec() metode masukan. Ini akan mengembalikan sebuah array dari dua item: satu pencocokan regex seluruh, dan satu pencocokan hanya serangkaian angka setelah /id (ini adalah karena kita menggunakan kurung di regex (/d+) untuk mengatakan "ingat apa yang membuat menangkap di sini"). Jadi, sebagai contoh .exec() metode akan kembali sesuatu seperti ["/ id12345", "12345"] dan kami ingin hanya item kedua dalam array, jadi kita harus memberikan appId yang.

Jika tes kedua kembali palsu, kami mengatur userInputIsValid ke false dan appId untuk string kosong.

Sekarang semua yang kita butuhkan untuk menentukan apakah pengguna masukan sah adalah di tempat. Jadi kita dapat melanjutkan dengan sisa script kami.

Throwing Errors

Saat ini kami berada di titik sekarang di skrip kami di mana kami dapat menentukan apakah masukan pengguna adalah yang kami butuhkan. Jadi kami berhenti dengan ini:

1

if( Gimmie.userInputIsValid ) {     /* make API request */ } else {     /* throw an error */ } 

Untuk saat ini, kita akan menangani bagian 'melemparkan kesalahan'. Karena akan ada tempat lain dalam eksekusi skrip kami di mana kesalahan dapat terjadi, kami akan membuat fungsi kesalahan umum yang akan menampilkan kesalahan kepada pengguna, tergantung pada apa yang salah. Jika Anda ingat, kami merancang apa yang ini akan terlihat seperti di sketsa:

Perhatikan bagaimana negara kesalahan kita memiliki pada dasarnya dua item: "header" yang teks tebal, dan "tubuh" yang biasa menetapkan teks. Jadi kita akan menciptakan sebuah fungsi generik kesalahan yang menerima ini. "header" umumnya akan menyatakan kesalahan dan "tubuh" akan menjelaskan bagaimana memperbaiki kesalahan. Jadi, dalam kasus khusus ini, jika masukan dari pengguna tidak valid kita perlu memberitahu mereka apa tipe masukan yang tepat. Jadi, mari kita membuat sebuah fungsi generik yang dapat menunjukkan kesalahan berdasarkan teks kami melewati itu:

1

if( Gimmie.userInputIsValid ) {     /* make API request */ } else {     Gimmie.throwError(         'Invalid Link',         'You must submit a standard iTunes store link with an ID, i.e. <br> <a href="https://itunes.apple.com/us/app/twitter/id333903271?mt=8">https://itunes.apple.com/us/app/twitter/<em>id333903271</em>?mt=8</a>'     ); } 

Di sini, kita memanggil fungsi Gimmie.throwError() dan menyebarkannya dua parameter: "header" teks dan teks "tubuh". Karena kami hanya menampilkan HTML, kita dapat melewati elemen HTML di dalam parameter jika kita ingin. Dalam kasus ini, "tubuh" kita lulus dalam contoh toko iTunes link dan kami menyoroti id/ bagian dengan tag penekanan (<em>) untuk membantu menunjukkan kepada pengguna, "Hei, kita perlu iTunes menyimpan link, dan pastikan telah ID di dalamnya".

Kita dapat mengatur kami CSS untuk menyoroti apa pun yang terbungkus <em> tag, serta memberi kami kesalahan negara warna:

1

.content--error {     color: #196E76; } .content em {     font-style: normal;     background-color: lightyellow; } 

Sekarang, kita akan membuat fungsi throwError di objek Gimmie:

1

var Gimmie = {     /* prior code here */     throwError: function(header, text){         this.$content             .html('<p><strong>' + header + '</strong> ' + text + '</p>')             .addClass('content--error');          this.toggleLoading();     } } 

Perhatikan bahwa kita meraih this.$content. Ini adalah sama dengan melakukan $('.content') tetapi kita diselamatkan pilihan itu sebagai variabel dalam objek Gimmie, karena kita akan menggunakan lebih dari sekali. Jadi kami merujuknya dengan melakukan this.$content. Sekarang kami mengatur konten HTML dari elemen $content ke teks yang kami berikan, dengan teks “header” dicetak tebal. Lalu kami menambahkan kelas content--error ke elemen konten kami dengan cara itu kami dapat mengubah kesalahan seperti yang kami inginkan. Akhirnya, kami menjalankan fungsi toggleLoading() Gimmie untuk menghapus kelas pemuatan dan berhenti menampilkan loading gif.

Pada titik ini, jika Anda mengetikkan URL yang salah seperti http://google.com, atau jika Anda mengetikkan URl tepat iTunes yang tidak memiliki ID seperti https://itunes.apple.com/us/app/twitter/ Anda akan melihat pesan kesalahan ditampilkan:

Untuk meningkatkan formulir sedikit, mari kita menambahkan animasi yang bagus yang "pop" yang kecil yang berjalan ketika terjadi kesalahan (dalam browser yang didukung). Untuk melakukan ini, kita akan menambahkan/menghapus sebuah kelas CSS yang berisi animasi. Jadi, dalam file CSS kami, mari kita lakukan:

1

.content--error-pop {     -webkit-animation: pop .333s;     -moz-animation: pop .333s;     -o-animation: pop .333s;     animation: pop .333s; }  @-webkit-keyframes pop {     0%   {-webkit-transform: scale(1);}     50%  {-webkit-transform: scale(1.075);}     100% {-webkit-transform: scale(1);} }  @-moz-keyframes pop {     0%   {-webkit-transform: scale(1);}     50%  {-webkit-transform: scale(1.075);}     100% {-webkit-transform: scale(1);} }  @-o-keyframes pop {     0%   {-webkit-transform: scale(1);}     50%  {-webkit-transform: scale(1.075);}     100% {-webkit-transform: scale(1);} }  @keyframes pop {     0%   {-webkit-transform: scale(1);}     50%  {-webkit-transform: scale(1.075);}     100% {-webkit-transform: scale(1);} } 

Itu akan membuat skala wilayah konten naik dan turun dalam ukuran, sehingga "pop" ketika sebuah kesalahan terjadi. Sekarang kita hanya perlu menambahkan/menghapus kelas dengan JavaScript. Jadi kembali dalam fungsi throwError kami:

1

throwError: function(header, text){         // Remove animation class         this.$content.removeClass('content--error-pop');          // Trigger reflow         // https://css-tricks.com/restart-css-animation/         this.$content[0].offsetWidth = this.$content[0].offsetWidth;          // Add classes and content         this.$content             .html('<p><strong>' + header + '</strong> ' + text + '</p>')             .addClass('content--error content--error-pop');          this.toggleLoading();     }, 

Di sini kita menghapus kelas pertama, maka kami memicu "reflow" untuk memastikan bahwa animasi dimulai lagi ketika kita menambahkan kelas pada langkah berikutnya (bersama dengan konten yang content--error class). Sekarang kita memiliki animasi pop yang bagus pada keadaan kesalahan kita juga:

Membuat API Request

Kami semakin dekat finishing sekarang. Kami telah memeriksa untuk memastikan bahwa masukan dari pengguna benar dan kami telah menyediakan sebuah cara untuk menampilkan kesalahan, jadi sekarang kita hanya perlu untuk membuat permintaan API kami.

Kami akan melakukan ini dalam pernyataan if() kami yang memvalidasi input pengguna.

1

if( Gimmie.userInputIsValid ) {     $.ajax({         url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId,         dataType: 'JSONP'     })     .done(function(response) {         // when finished     })     .fail(function(data) {         // when request fails     }); } else {     /* our other code here */ } 

Seperti yang Anda lihat dari kode di atas, kita sudah setup AJAX request ke iTunes API. Seperti yang mungkin Anda ingat dari sebelumnya, iTunes API memiliki URL "pencarian" kita dapat menekan untuk mendapatkan data kembali. Ini mengikuti format ini: https://itunes.apple.com/lookup?id= diikuti oleh ID dari hal yang Anda ingin untuk mencari. API memberikan contoh lookup aplikasi perangkat lunak yang menggunakan Yelp app: https://itunes.apple.com/lookup?id=284910350. Jika Anda pergi ke URL di browser Anda, Anda akan melihat berantakan JSON:

Jika Anda menjalankan yang melalui linter, seperti JSON lint, hasilnya akan diformat dan akan mulai membuat lebih banyak pengertian:

Jika Anda melihat dokumentasi API, Anda akan melihat bahwa API memberikan hasil untuk semua jenis konten di iTunes store, segala sesuatu dari musik untuk film untuk aplikasi. Itu menguntungkan bagi kita karena itu berarti kita bisa ambil ikon seni tidak hanya untuk aplikasi iOS, tapi Mac apps juga! Aplikasi Mac menggunakan jenis struktur URL yang sama sebagai aplikasi iOS. Sebagai contoh, Final Cut Pro memiliki link dari https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12. Perhatikan bahwa URL dimulai dengan https://itunes dan memiliki /id424389933, yang adalah hanya apa yang kami butuhkan!

Menggunakan fungsi kesalahan kita dari sebelumnya, mari kita melempar kesalahan jika/ketika permintaan API kami gagal:

1

if( Gimmie.userInputIsValid ) {     $.ajax({         url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId,         dataType: 'JSONP'     })     .done(function(response) {         // when finished     })     .fail(function(data) {         Gimmie.throwError(             'iTunes API Error',             'There was an error retrieving the info. Check the iTunes URL or try again later.'         );     }); } else {     /* our other code here */ } 

Seperti kami disarikan kami metode untuk menampilkan kesalahan ke fungsi tunggal, menampilkan kesalahan lain mudah!

Respon

Sekarang mari kita khawatir tentang apa yang terjadi ketika permintaan selesai dengan sukses:

1

$.ajax({     /* other code here */ }) .done(function(response) {     // Get the first response and log it     var response = response.results[0];     console.log(response); }) .fail(function(data) {     /* other code here */ }); 

Perhatikan di sini bahwa kita mendapatkan respon dan log hasil pertama ke konsol. Jika Anda melihat contoh API request yang Anda akan melihat bahwa di atas tingkat yang paling objek JSON, Anda mendapatkan resultCount yang memberitahu Anda berapa banyak hasil yang ada (di sebuah lookup harus hanya ada satu) dan kemudian results yang merupakan array (dengan objek tunggal dalam hal ini) yang mewakili hasil.

Jadi, kami mengatur respon terhadap item pertama dalam hasil dan kemudian login ke konsol. Jika Anda membuka kami sedikit app di browser dan masukkan URL (misalnya, URL menyalak https://itunes.apple.com/lookup?id=284910350) Anda akan melihat UI terjebak dalam negara loading, tetapi jika Anda melihat alat-alat pengembangan dan pergi ke konsol, Anda akan melihat respon API kami login. Kita sekarang dapat mengakses salah satu properti-properti di JavaScript!

Seperti yang Anda lihat, API kembali banyak informasi tentang aplikasi: namanya, pengembang, deskripsi, genre, harga, dan banyak lagi! Kami benar-benar hanya perlu beberapa hal-hal, seperti ikon apl. Jadi, kita akan memeriksa hanya memastikan permintaan kami berisi potongan-potongan informasi yang kita butuhkan.

1

$.ajax({     /* other code here */ }) .done(function(response) {     // Get the first response and log it     var response = response.results[0];     console.log(response);      // Check to see if request is valid & contains the info we want     // If it does, render it. Otherwise throw an error     if(response && response.artworkUrl512 != null){         Gimmie.render(response);     } else {         Gimmie.throwError(             'Invalid Response',             'The request you made appears to not have an associated icon. <br> Try a different URL.'         );     } }) .fail(function(data) {     /* other code here */ }); 

Di sini kita memeriksa untuk memastikan response yang ada dan kita periksa untuk memastikan response.artworkUrl512 adalah bagian dari respons. artworkUrl512 adalah kunci yang menyediakan API untuk link ke ikon app ukuran penuh. Jika hal-hal hadir, kami akan menampilkan ikon apl pada laman. Untuk itu, kami memiliki fungsi lain disebut render yang kita akan menulis dalam sekejap. Jika karena alasan tertentu hal yang kita butuhkan hilang, kita membuang kesalahan lain dengan fungsi baik kami kami sudah dibuat.

Render API Results

Sekarang bahwa kita memiliki API kembali data yang kita inginkan, mari kita membuat hasil pada halaman. Setelah kita tahu bahwa kita memiliki segala sesuatu yang kita butuhkan dari API, kita memanggil Gimmie.render(response) dan lulus respon API itu, yang hanya objek kunci/nilai pasangan. Jadi, kembali di objek Gimmie, mari kita membuat fungsi render:

1

var Gimmie = {     /* our other code here */     render: function(response){         var icon = new Image();         icon.src = response.artworkUrl512;         icon.onload = function() {             Gimmie.$content                 .html(this)                 .append('<p><strong>' + response.trackName + '</strong></p>')                 .removeClass('content--error');             Gimmie.toggleLoading();         }     } } 

Berikut adalah apa yang kita lakukan dalam kode ini:

• Untuk membuat gambar dari awal, kami menciptakan sebuah variabel yang bernama icon dan menggunakan constructor Image() yang pada dasarnya menciptakan HTMLImageElement. Berpikir itu seperti membuat <img> tag di memori menggunakan JavaScript.
• Kami kemudian menetapkan src atribut dari gambar dengan menggunakan metode icon.src tersedia untuk digunakan karena kita menggunakan Image() constructor. Kami menetapkan sumber gambar ke artworkUrl512 dari tanggapan kami. Ini akan membuat browser mulai mengambil gambar pada saat itu ditentukan URL.
• Kami menggunakan icon.onload untuk memberitahu browser "setelah selesai mengambil gambar, melakukan ini...". Ini adalah cara yang memiliki browser mendapatkan sumber gambar dan kemudian tidak benar-benar memasukkannya ke dalam DOM sampai itu 's telah diunduh.
• Dalam icon.onload kita menetapkan HTML $contents dengan gambar yang kita hanya diperoleh. Kemudian kita dapat menambahkan informasi lebih lanjut ke wilayah konten bahwa jika kita ingin. Dalam contoh ini, saya ambil trackName dari API kami menanggapi Tampilkan nama app bersama dengan ikon.
• Akhirnya mengeksekusi fungsi toggleLoading kita karena kita sudah selesai pemuatan semuanya!

Coba menjalankan ini dalam browser Anda sekarang dan Anda akan melihat ikon yang bagus muncul! Sebagai contoh, cobalah menyalak URL https://itunes.apple.com/us/app/yelp/id284910350?mt=8

Mencobanya dengan Mac app URL, seperti Final Cut Pro https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12

Loading the Icon Mask

Perhatikan bahwa ikon iOS tidak dibulatkan. Seperti diperhatikan sebelumnya, ikon-ikon kebanyakan iOS tidak dirancang dengan sudut lengkung. Mereka yang diterapkan di tingkat OS. Untuk ikon iOS, kita akan harus menerapkan topeng yang kami ciptakan dalam sketsa. Jadi, jika Anda pergi ke sketsa dan ekspor topeng yang kami ciptakan sebagai aset gambar, kami akan memuat yang ke browser ketika kita load icon:

1

var Gimmie = {     render: function(response){         var icon = new Image();         icon.src = response.artworkUrl512;         icon.onload = function() {             Gimmie.$content                 .html(this)                 .append('<p><strong>' + response.trackName + '</strong> Actual icon dimensions: ' + this.naturalWidth + '×' + this.naturalHeight + '</p>')                 .removeClass('content--error');             Gimmie.toggleLoading();              // If it's an iOS icon, load the mask too             if(response.kind != 'mac-software') {                 var mask = new Image();                 mask.src = 'assets/img/icon-mask.png';                 mask.onload = function() {                     Gimmie.$content.prepend(this);                 }             }         }     } } 

Berikut adalah apa yang kita lakukan:

• Dalam hasil API kami, ada sebuah objek yang disebut "jenis" yang mengacu pada jenis hal yang dikembalikan oleh API, seperti film atau musik, atau perangkat lunak. Mac apps akan memiliki "kind" dari "mac-software". Karena Mac apps tidak perlu sebuah topeng yang diterapkan untuk ikon mereka, kami memeriksa untuk melihat apakah jenis respon bukanlah "mac software". Jika tidak, kita tahu itu adalah aplikasi iOS dan kemudian kita dapat memuat masker
• Kita menggunakan constructor Image() sama seperti sebelum, set src gambar ke mana kita diselamatkan masker kami, dan kemudian menambahkan ini ke daerah konten kami setelah peristiwa onload kebakaran untuk gambar.

Sekarang kita hanya perlu menambahkan beberapa gaya untuk posisi topeng atas ikon:

1

.content img[src*="icon-mask.png"] {     position: absolute;     left: 0;     top: 0; } 

That's it! Jika Anda memasuki menyalak URL lagi, kali ini akan muncul dengan sudut-sudut membulat!

Selesai!

Sudah cukup perjalanan, dan saya harap Anda telah belajar banyak dari tutorial ini! Kami membahas pembuatan wireframes dan mengolok-olok untuk aplikasi kami dan negara bagian yang berbeda. Kami juga membahas penulisan HTML, CSS, dan Javascript untuk aplikasi web yang berinteraksi dengan API pihak ketiga.

Kami juga membahas penulisan HTML, CSS, dan Javascript untuk aplikasi web yang berinteraksi dengan API pihak ketiga. Anda telah belajar cara menarik konten dan aset secara dinamis dari API dan menjadikannya semua menjadi halaman web. Dengan pengetahuan dasar itu Anda sekarang dapat beralih ke pembuatan aplikasi web yang lebih dipersonalisasi yang disesuaikan dengan minat Anda.

Berikut adalah daftar beberapa api luar sana:

• YouTube
• Instagram
• GitHub
• Dribbble
• Flickr
• Twitter
• Dan banyak lagi...