Crawl bảng xếp hạng app nghe nhạc MP3

Chúng ta cùng nhau tìm hiểu cách để làm ra một app nghe nhạc nhé. Crawl dữ liệu từ chính website nghe nhạc mp3.zing.vn nào.

MainStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MusicAppMP3">
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
    </Style>
</ResourceDictionary>

MainWindow.xaml

<Window x:Class="MusicAppMP3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:uc="clr-namespace:MusicAppMP3"
        xmlns:local="clr-namespace:MusicAppMP3"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        FontFamily="Arial"
        Title="MainWindow" Height="650" Width="525">
    <Window.Resources>
        <ResourceDictionary Source="MainStyle.xaml"></ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid x:Name="gridTop10">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Grid Grid.Column="0">
                    <ToggleButton IsChecked="{Binding IsCheckVN}">BXH Việt Nam</ToggleButton>
                </Grid>
                <Grid Grid.Column="1">
                    <ToggleButton IsChecked="{Binding IsCheckEU}">BXH Âu Mỹ</ToggleButton>
                </Grid>
                <Grid Grid.Column="2">
                    <ToggleButton IsChecked="{Binding IsCheckKO}">BXH Hàn Quốc</ToggleButton>
                </Grid>
            </Grid>

            <Grid Grid.Row="1">
                <ListBox x:Name="lsbTopSongs" HorizontalContentAlignment="Stretch">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border VerticalAlignment="Stretch" Height="50" BorderThickness="2" BorderBrush="Black">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50"></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition Width="50"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>

                                    <Grid>
                                        <TextBlock HorizontalAlignment="Center" 
                               VerticalAlignment="Center">01</TextBlock>
                                    </Grid>

                                    <Grid Grid.Column="1">
                                        <Grid.RowDefinitions>
                                            <RowDefinition></RowDefinition>
                                            <RowDefinition></RowDefinition>
                                        </Grid.RowDefinitions>

                                        <Grid>
                                            <TextBlock HorizontalAlignment="Left">Tên bài hát</TextBlock>
                                        </Grid>

                                        <Grid Grid.Row="1">
                                            <TextBlock HorizontalAlignment="Left">Tên ca sỹ</TextBlock>
                                        </Grid>
                                    </Grid>

                                    <Grid Grid.Column="2">
                                        <Button Click="Button_Click">Play</Button>
                                    </Grid>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </Grid>
        <uc:SongInfoUC x:Name="ucSongInfo" Visibility="Hidden"></uc:SongInfoUC>
    </Grid>    
</Window>

MainWindow.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using xNet;

namespace MusicAppMP3
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private bool isCheckVN;
        private bool isCheckEU;
        private bool isCheckKO;
        private List<Song> listVN;
        private List<Song> listEU;
        private List<Song> listKO;
        public bool IsCheckVN { get => isCheckVN; set { isCheckVN = value; isCheckEU = false; isCheckKO = false; OnPropertyChanged("IsCheckVN"); OnPropertyChanged("IsCheckEU"); OnPropertyChanged("IsCheckKO"); } }
        public bool IsCheckEU { get => isCheckEU; set { isCheckEU = value; isCheckVN = false; isCheckKO = false; OnPropertyChanged("IsCheckVN"); OnPropertyChanged("IsCheckEU"); OnPropertyChanged("IsCheckKO"); } }
        public bool IsCheckKO { get => isCheckKO; set { isCheckKO = value; isCheckEU = false; isCheckVN = false; OnPropertyChanged("IsCheckVN"); OnPropertyChanged("IsCheckEU"); OnPropertyChanged("IsCheckKO"); } }

        public List<Song> ListVN { get => listVN; set => listVN = value; }
        public List<Song> ListEU { get => listEU; set => listEU = value; }
        public List<Song> ListKO { get => listKO; set => listKO = value; }

        public MainWindow()
        {
            InitializeComponent();
            ucSongInfo.BackToMain += UcSongInfo_BackToMain;

            lsbTopSongs.ItemsSource = new List<string>() {"","","","","", "", "", "", "", "" };

            this.DataContext = this;

            IsCheckVN = true;
            ListVN = new List<Song>();
            ListEU = new List<Song>();
            ListKO = new List<Song>();
            CrawlBXH();
        }      

        void CrawlBXH()
        {           
            HttpRequest http = new HttpRequest();
            string htmlBXH = http.Get(@"http://mp3.zing.vn/bang-xep-hang/index.html").ToString();            
            string bxhPattern = @"<div class=""box-chart-ov bordered non-bg-rank"">(.*?)</ul>";
            var listBXH = Regex.Matches(htmlBXH, bxhPattern, RegexOptions.Singleline);

            string bxhVN = listBXH[0].ToString();
            AddSongToListSong(ListVN, bxhVN);

            string bxhEU = listBXH[1].ToString();
            AddSongToListSong(ListEU, bxhEU);

            string bxhKO = listBXH[2].ToString();
            AddSongToListSong(ListKO, bxhKO);

        }

        void AddSongToListSong(List<Song> listSong, string html)
        {
            var listSongHTML = Regex.Matches(html, @"<li>(.*?)</li>", RegexOptions.Singleline);
            for (int i = 0; i < listSongHTML.Count; i++)
            {
                var songandsinger = Regex.Matches(listSongHTML[i].ToString(), @"<a\s\S*\stitle=""(.*?)""", RegexOptions.Singleline);

                string songString = songandsinger[0].ToString();
                int indexSong = songString.IndexOf("title=\"");
                string songName = songString.Substring(indexSong, songString.Length - indexSong - 1).Replace("title=\"", "");

                string singerString = songandsinger[1].ToString();
                int indexSinger = singerString.IndexOf("title=\"");
                string singerName = singerString.Substring(indexSinger, singerString.Length - indexSinger - 1).Replace("title=\"", "");

                int indexURL = songString.IndexOf("href=\"");
                string URL = songString.Substring(indexURL, indexSong - indexURL - 2).Replace("href=\"", "");

                listSong.Add(new Song() { SingerName = singerName, SongName = songName, SongURL = URL, STT = i + 1 });
            }
        }

        private void UcSongInfo_BackToMain(object sender, EventArgs e)
        {
            gridTop10.Visibility = Visibility.Visible;
            ucSongInfo.Visibility = Visibility.Hidden;
        }
        
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            gridTop10.Visibility = Visibility.Hidden;
            ucSongInfo.Visibility = Visibility.Visible;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string newName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(newName));
            }
        }
    }
}

SongInfoUC.xaml

<UserControl x:Class="MusicAppMP3.SongInfoUC"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MusicAppMP3"
             mc:Ignorable="d" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid>
            <Button Click="Button_Click">Back</Button>
        </Grid>

        <Grid Grid.Row="1">
            <Button>Play song</Button>
        </Grid>

        <Grid Grid.Row="2">
            <TextBlock>Lyric</TextBlock>
        </Grid>
    </Grid>
</UserControl>

SongInfoUC.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MusicAppMP3
{
    /// <summary>
    /// Interaction logic for SongInfoUC.xaml
    /// </summary>
    public partial class SongInfoUC : UserControl
    {
        public SongInfoUC()
        {
            InitializeComponent();
        }

        private event EventHandler backToMain;
        public event EventHandler BackToMain
        {
            add { backToMain += value; }
            remove { backToMain -= value; }
        }


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (backToMain != null)
                backToMain(this, new EventArgs());
        }
    }
}

Song.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MusicAppMP3
{
    public class Song
    {
        private string songName;
        private string singerName;
        private string songURL;
        private int sTT;

        public string SongName { get => songName; set => songName = value; }
        public string SingerName { get => singerName; set => singerName = value; }
        public string SongURL { get => songURL; set => songURL = value; }
        public int STT { get => sTT; set => sTT = value; }
    }
}

Download full project

xNet

Reg Test

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.