Δημιουργία μιας εφαρμογής Web με μετάφραση που παρέχεται από τη Microsoft μεταφράστρια.
Δημιουργία μιας εφαρμογής Web με μετάφραση που παρέχεται από τη Microsoft μεταφράστρια.
Σε αυτήν την αναλυτική παρουσίαση, θα μάθετε πώς μπορείτε να δημιουργήσετε μια εφαρμογή Web που χρησιμοποιεί το API μετάφρασης της Microsoft για να μεταφράσει το κείμενο που είχε εισαχθεί από το χρήστη. Θα δημιουργήσετε τη σελίδα χρησιμοποιώντας το ASP.NET και το δωρεάν Visual Studio Express 2012 για το Web. Εάν έχετε ήδη μια εγκατάσταση του Visual Studio, θα εξακολουθείτε να είστε σε θέση να ακολουθήσετε το φροντιστήριο, απλά παραλείψτε το βήμα 1.
Πριν από την έναρξη, θα πρέπει να εγγραφείτε για το API μετάφρασης της Microsoft στο Azure. Υπάρχουν μια σειρά από διαφορετικές προσφορές, συμπεριλαμβανομένου ενός ελεύθερου, και μπορείτε να δείτε πώς να εγγραφείτε για τη δωρεάν υπηρεσία, να καταχωρήσετε την εφαρμογή σας και να πάρετε τα διαπιστευτήριά σας εδώ:
http://blogs.msdn.com/b/translation/p/gettingstarted1.aspx
Το Αναγνωριστικό υπολογιστή-πελάτη και το μυστικό πελάτη που δημιουργείτε εδώ θα χρησιμοποιηθεί στο βήμα 4, επομένως, κρατήστε μια σημείωση από αυτά.
Βήμα 1. Λήψη του Visual Studio Express 2012 για το Web.
Ο καλύτερος τρόπος για να ξεκινήσετε είναι να επισκεφτείτε http://www.asp.net/downloads και επιλέξτε το κουμπί ' εγκατάσταση τώρα ' στην ενότητα ' λήψη όλων με μία απλή εγκατάσταση '.
Αυτό θα ξεκινήσει το πρόγραμμα εγκατάστασης Web Platform που θα εγκαταστήσει το Visual Studio, ASP.NET, MVC και μια ολόκληρη σειρά από άλλα καλούδια που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε ιστοσελίδες.
Βήμα 2. Δημιουργία της εφαρμογής Web
Εκτελέστε το Visual Studio και από το μενού αρχείο, επιλέξτε ' νέο έργο '. Θα δείτε ένα παράθυρο διαλόγου που περιέχει μια λίστα με διαφορετικά έργα που είναι διαθέσιμα για να δημιουργήσετε ιστότοπους με. Επιλέξτε ' Visual C# ' στα αριστερά και, στη συνέχεια, επιλέξτε ' εφαρμογή φορμών Web ASP.NET ' από τη λίστα.
Δώστε στην εφαρμογή Web ένα όνομα, όπως "Μεταφραστής" και πατήστε "OK". Το Visual Studio θα δημιουργήσει τώρα όλα όσα χρειάζεστε για να δημιουργήσετε και να εκτελέσετε την εφαρμογή Web. Πατήστε F5 για να δημιουργήσετε και να εκτελέσετε την εφαρμογή και θα δείτε κάτι τέτοιο:
Βήμα 3. Δημιουργία ΠΕΡΙΒΆΛΛΟΝΤΟς εργασίας χρήστη για μετάφραση κειμένου
Σε αυτήν την ενότητα, θα προσθέσετε στοιχεία ελέγχου στην τοποθεσία που επιτρέπουν στους τελικούς χρήστες να πληκτρολογούν σε κάποιο κείμενο, να κάνουν κλικ σε ένα κουμπί μετάφρασης και στη συνέχεια να βλέπουν τη μετάφραση του κειμένου που καταχωρούν. Αυτός ο τύπος λειτουργικότητας είναι χρήσιμος για την αλληλεπίδραση με τους πελάτες σας όταν μιλάτε σε διαφορετικές γλώσσες, για παράδειγμα.
Από την Εξερεύνηση λύσεων, βρείτε τη σελίδα "σχετικά με. aspx". Ανοίξτε το στο σχεδιαστή, και θα δείτε κάτι σαν αυτό:
Delete the 3 <p> tags that say ‘Use this area to provide additional information’, and replace with some controls to provide a basic translation UI, like this:
Για τη διευκόλυνσή σας, εδώ είναι η πηγή για αυτήν τη σελίδα:
<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="Translator.About" %> <ASP: περιεχόμενο RUNAT= "διακομιστής" ΑΝΑΓΝΩΡΙΣΤΙΚΌ= "Περιεκτικότητα σε σώμα" Περιεχομέν= "MainContent"> <ο Όμιλος Κατηγορία= "Τίτλος"> <h1><%: Τίτλος %>.</h1> <h2>Η σελίδα περιγραφής της εφαρμογής σας.</h2> </ο Όμιλος> <Άρθρο> Πληκτρολογήστε το κείμενο που θέλετε να μεταφράσετε:<Br /> <ASP: πλαίσιο κειμένου ΑΝΑΓΝΩΡΙΣΤΙΚΌ= "TextBox1" RUNAT= "διακομιστής" Ύψος= "25px" Πλάτος= "342px"></ASP: πλαίσιο κειμένου> <Πλήκτρο ASP: κουμπί ΑΝΑΓΝΩΡΙΣΤΙΚΌ= "Button1" RUNAT= "διακομιστής" Ύψος= "37 px" Onclick= "Button1_Click" Κείμενο= "Μετάφραση" /> <Br /> Το μεταφρασμένο κείμενο είναι:<Br /> <ASP: κυριολεκτική ΑΝΑΓΝΩΡΙΣΤΙΚΌ= "Literal1" RUNAT= "διακομιστής"></ASP: κυριολεκτική> </Άρθρο> <Εκτός> <h3>Εκτός τίτλου</h3> <P> Χρησιμοποιήστε αυτήν την περιοχή για να παρέχετε πρόσθετες πληροφορίες. </P> <Ul> <Li><A RUNAT= "διακομιστής" Href="~/">Σπίτι</A></Li> <Li><A RUNAT= "διακομιστής" Href= "~/CES.PMA">Για</A></Li> <Li><A RUNAT= "διακομιστής" Href= "~/Επαφε.LCI">Επικοινωνία</A></Li> </Ul> </Εκτός> </ASP: περιεχόμενο>
Σημειώστε ότι στο σχεδιαστή θα πρέπει να κάνετε διπλό κλικ στο κουμπί για να δημιουργήσετε τον κωδικό "Button1_Click". Θα γράψετε αυτόν τον κώδικα στο επόμενο βήμα.
Βήμα 4. Γραφή κώδικα για τη μετάφραση κειμένου χρήστη
Στην προηγούμενη ενότητα, δημιουργήσατε ένα βασικό περιβάλλον εργασίας χρήστη για μετάφραση κειμένου. Θα επέτρεπε στο χρήστη να γράψει κάποιο κείμενο και να πιέσει ένα κουμπί. Σε αυτήν την ενότητα, θα γράψετε τον κωδικό πίσω από αυτό το κουμπί που θα μεταφράσει το επιθυμητό κείμενο του χρήστη στα Ισπανικά και θα το αποδώσει στη σελίδα.
Πρώτα, θα πρέπει να προσθέσετε μια νέα κλάση στη λύση σας. Πες το. Αξεσουάρ και να του δώσει τον ακόλουθο κώδικα:
Χρησιμοποιώντας Σύστημα Χρησιμοποιώντας Σύστημα. συλλογές. Γενική; Χρησιμοποιώντας System. LINQ; Χρησιμοποιώντας System. Web; Χώρο ονομάτων μεταφραστής { Δημόσια Κατηγορία AdmΆκισσαΤοκεν { Δημόσια Συμβολοσειρά access_token { get; set; } Δημόσια Συμβολοσειρά token_type { get; set; } Δημόσια Συμβολοσειρά expires_in { get; set; } Δημόσια Συμβολοσειρά scope { get; set; } } }
Σημειώστε ότι τα ονόματα των 4 συμβολοσειρών πρέπει να ταιριάζουν με αυτό που είναι εδώ ακριβώς ή θα λάβετε αργότερα σφάλματα στον κώδικά σας.
Στη συνέχεια, στο Visual Studio, στην Εξερεύνηση λύσεων, κάντε δεξί κλικ στο φάκελο "αναφορές" και επιλέξτε "Προσθήκη αναφοράς". Χρησιμοποιήστε αυτό το παράθυρο διαλόγου που ακολουθεί για να προσθέσετε αναφορές σε
– Σύστημα. χρόνου εκτέλεσης. σειριοποίηση
– System. XML. LINQ
– Σύστημα.
Στο επάνω μέρος του κώδικά σας για το About.aspx.cs, θα δείτε μια σειρά από δηλώσεις "χρήσης". Προσθέστε το System. XML. LINQ σε αυτά, ώστε να μοιάζει με αυτό:
Χρησιμοποιώντας Σύστημα Χρησιμοποιώντας Σύστημα. συλλογές. Γενική; Χρησιμοποιώντας System. LINQ; Χρησιμοποιώντας System. Web; Χρησιμοποιώντας System. Web. UI; Χρησιμοποιώντας System. Web. UI. WebControls. Χρησιμοποιώντας System. XML. LINQ; Χώρο ονομάτων μεταφραστής { Δημόσια Μερική Κατηγορία About : Page { Προστατεύεται Κενό Page_Load (Αντικείμενο αποστολέας, EventArgs ε) { } Προστατεύεται Κενό Button1_Click (Αντικείμενο αποστολέας, EventArgs ε) { } } }
Θα δείτε ότι ο κωδικός Button1_Click είναι κενός. Προσθέστε τον ακόλουθο κώδικα σε αυτό. Αυτός ο κωδικός θα λάβει το διακριτικό πρόσβασής σας για την υπηρεσία μετάφρασης, χρησιμοποιώντας το Αναγνωριστικό υπολογιστή-πελάτη και το απόρρητο πελάτη που δημιουργήσατε προηγουμένως.
Συμβολοσειρά Κλίτιντ = "<Your ClientID>"; Συμβολοσειρά Απόρρητο πελάτη = "<Your Client Secret>"; Αξεσουάρ "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13"; Πληροφορίες για τη συμβολοσειρά = Συμβολοσειρά. Μορφή"grant_type=client_credentials&client_id={0}&client_secret={1} &scope=http://api.microsofttranslator.com", HttpUtility. UrlEncode (clientID), HttpUtility. UrlEncode (απόρρητος πελάτης)); Σύστημα .NET. WebRequest WebRequest = System .NET. WebRequest. Create Τύπος αιτήματος Web. περιεχομέ = "εφαρμογή/x-www-μορφή-urlencoded"; Μέθοδος webRequest = ΜΕΤΆ; byte[] byte = σύστημα. Text. κωδικοποίηση. ASCII. GetBytes (πληροφορίες Χρονικό διάστημα αίτησης Web = byte. Μήκος Χρησιμοποιώντας (System.IO.Stream outputStream = webRequest.GetRequestStream()) { outputStream.Write(bytes, 0, bytes.Length); } System.Net.WebResponse webResponse = webRequest.GetResponse(); System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = Nwe System. χρόνου εκτέλεσης. σειριοποίησης. JSONtypeof(Admmy) · Βοηθητικό πρότυπο = (Admmy) σειριοποίησης. Αναανάγνωσηαντικείμενο (webResponse. Getαπάντηση ()); Συμβολοσειρά Τιμή κεφαλής = Κομιστή + Διακριτικό. ACCESS_TOKEN;
Αυτός ο κωδικός σχηματίζει μια POST στην υπηρεσία αγοράς δεδομένων, περνώντας την ταυτότητά σας και το μυστικό σας και να πάρει πίσω ένα αντικείμενο JSON. Στη συνέχεια, αποσειριοποίηση αυτό το αντικείμενο σε ένα βοηθητικό. Στη συνέχεια, μπορείτε να αντλείτε το ACCESS_TOKEN από αυτό.
Αυτό το διακριτικό προστίθεται στη συνέχεια σε μια συμβολοσειρά, προσταθερή με "κομιστή" (μην ξεχάσετε το χώρο) για να δημιουργήσετε μια τιμή κεφαλίδας που θα σταλεί στην υπηρεσία μετάφρασης.
Για να καλέσετε στη συνέχεια την υπηρεσία μετάφρασης με αυτήν την τιμή κλήσης και να διαβιβάσεις το κείμενο του χρήστη, θα χρησιμοποιήσετε κώδικα όπως αυτός:
Συμβολοσειρά Μετάφραση: TextBox1. Text; Συμβολοσειρά URI = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text =" + System. Web. HttpUtility. UrlEncode (μετάφραση "& από = EN & To = ES"; Σύστημα .NET. WebRequest Μεταφράσηwebαίτηση = System .NET. WebRequest. Create (URI); μετατροπή translationWebRequest. κεφαλίδες. Add (Άδεια, τιμή κεφαλής) · Απόκριση συστήματος .NET. WebResponse = Null; απόκριση = translationWebRequest. GetResponse (); System. IO. Stream ροή = απόκριση. Η ανταπόκριση (). Σύστημα. Text. κωδικοποιώντας κωδικοποίηση = System. Text. κωδικοποίηση. GetEncoding ("UTF-8"); Σύστημα. IO. Κυματογραφίσιροή = Nwe Σύστημα. IO. Κυματοσυσκευής (ροή, κωδικοποίηση); System. XML. XmlDocument xTranslation = Nwe System. XML. XmlDocument (); xTranslation. Load XML (μεταφρασμένη ροή. ()). Literal1. Text = xTranslation.
Το πλαίσιο κειμένου ονομαζόταν ' TextBox1 ', έτσι ώστε το κείμενο που πληκτρολόγησε ο χρήστης να μπορεί απλά να προέλθει από αυτό. Μετά από αυτό, δημιουργείται ένα URI για την υπηρεσία μετατροπής HTTP και το ίδιο το κείμενο είναι Urlenκωδικοποιημένος και προστέθηκε στο URI.
Σημειώστε ότι η γλώσσα «EN» χρησιμοποιείται για το «από» (δηλαδή, υποθέτω ότι πληκτρολογείτε στα Αγγλικά) και το «ES» χρησιμοποιείται για το «To» (δηλ. θα μεταφραστεί στα Ισπανικά). Η πλήρης λίστα αυτών των κωδικών για τις υποστηριζόμενες γλώσσες είναι εδώ: http://msdn.microsoft.com/en-us/library/hh456380.aspx
Η υπηρεσία μετάφρασης επιστρέφει XML, έτσι ο κώδικας καλεί την υπηρεσία, λαμβάνει την απόκριση ως XML και στη συνέχεια την αποκωδικοποιεί σε κείμενο. Στη συνέχεια, φορτώνει το αποτέλεσμα στην κυριολεκτική που δημιουργήσατε σχετικά με το. aspx που ονομάζεται Literal1.
Μπορείτε να το δείτε σε δράση εδώ:
Και αυτό είναι! Τώρα χρησιμοποιήσατε το API μετάφρασης της Microsoft για να προσθέσετε μηχανική μετάφραση στην εφαρμογή ASP.NET.
Περίληψη
Σε αυτήν την αναλυτική παρουσίαση, είδατε πώς να δημιουργήσετε μια εφαρμογή Web χρησιμοποιώντας το ASP.NET και πώς να προσθέσετε μηχανική μετάφραση σε αυτήν. Χρησιμοποιήσατε το widget μετάφρασης της Microsoft για να παρέχετε τη μετάφραση του περιεχομένου της σελίδας σας και είδατε πώς να προγραμματίσετε το API μετάφρασης της Microsoft χρησιμοποιώντας την C# για να μεταφράσετε περιεχόμενο που δημιουργείται από το χρήστη.