[PYTHON] Spielen Sie, indem Sie den japanischen Dialektkorpus in eine Datenbank umwandeln. (4) Legen Sie das Gesamtbild des Dienstes fest
Dies ist ein serialisierter Artikel. Beim vierten Mal wird die in der vorherigen Testversion erstellte Laravel-App ** einmal rebelliert **, das gesamte Bild des Dienstes wird festgelegt und das Routing erstellt. Es ist ein Arbeitsmemo für mich und ich glaube nicht, dass es genug Erklärungen gibt, aber bitte vergib mir.
--Teil 1: Spielen durch Konvertieren des japanischen Dialektkorpus in eine Datenbank (1) Nachdenken über die Konfiguration --Teil 2: Mit japanischem Dialektkorpus als DB spielen (2) Mit SQLite3 in DB konvertieren
- Drittens: Spielen Sie mit dem japanischen Dialektkorpus als DB (3) Arbeiten Sie mit PHP Laravel ――Das 4: Spielen Sie, indem Sie den japanischen Dialektkorpus in eine Datenbank umwandeln. (4) Legen Sie das Gesamtbild des Dienstes fest. ← Jetzt hier
- Fünftens: Spielen durch Konvertieren des japanischen Dialektkorpus in eine DB (5) -Datenbankmigration und Modellerstellung
- The 6th: Spielen durch Konvertieren des japanischen Dialektkorpus in eine DB (6) Erstellen einer Äußerungsliste für jeden Diskurs
- The 7th: Spielen durch Konvertieren des japanischen Dialektkorpus in eine Datenbank (7) Erstellen einer Liste von Reden für jeden Sprecher
- The 8th: Spielen durch Konvertieren des japanischen Dialektkorpus in eine Datenbank (8) Hinzufügen einer Dateiformatkonvertierungsfunktion
- The 9th: Japanisches Dialektkorpus als DB (9) Deploy with Heroku spielen
Funktionen, die Sie erreichen möchten
COJADS ist derzeit als Monitorversion in Corpus-Suchanwendung "Nakano" verfügbar, unterscheidet sich also funktional davon. Ich will es schaffen.
Übersicht der Äußerungen für jeden "Diskurs / Sprecher"
Die "Chunagon" -Version konzentriert sich hauptsächlich auf die Suchfunktion und liefert keine Textdaten als Gruppe wie "Diskurs" oder "Sprecher". Darüber hinaus werden, wie oben erwähnt, die auf der offiziellen Website von COJADS bereitgestellten Rohdaten vollständig mit dem "Diskurs" als Achse kombiniert, was unpraktisch zu handhaben ist. Daher ist es von gewissem Wert, eine Funktion bereitzustellen, die dies für jede Entität trennt, damit sie auf der Site angezeigt werden kann, um beispielsweise die Rede sowohl nach "Sprecher" als auch nach "Diskurs" anzuzeigen. Es gilt als.
Bearbeiten von "Sprache"
Sie können die Datenbank von der Site aus bedienen und die Funktion zum Bearbeiten der Äußerung hinzufügen, ohne SQL schreiben zu müssen. Es protokolliert auch [^ log]. Ich habe nicht das Bedürfnis, dies zu tun, aber ich möchte es nach dem Studium der Datenbank implementieren.
[^ log]: Ich habe auch eine Protokolllistenseite erstellt, aber da die Erklärung nichts Neues enthält, habe ich sie in dieser Artikelserie weggelassen.
Gegenseitige Konvertierung zwischen Excel und TextGrid
In COJADS werden Sprache, Dialekttext und Standardsprachentext in Äußerungseinheiten verknüpft. Auf der offiziellen Website werden jedoch nur Rohdaten im CSV-Format sowie Sprachdaten und das TextGrid-Format (Sprachanalyse-Software Praat-Format) verteilt. Textdaten werden nicht verteilt. Es ist die TextGrid-Datei, die direkt mit dem Audio verknüpft ist, und es ist nicht möglich, die Korrespondenz genau dort zu beobachten, wo sich die CSV und die Audiodatei befanden.
Selbst wenn TextGrid verteilt wird und Sie die CSV-Daten selbst bearbeiten, wird die Korrespondenz unterbrochen und die Sprachanalyse wird schwierig. Daher möchte ich eine Funktion zum Konvertieren zwischen Excel-Datei und TextGrid-Datei hinzufügen.
** Ich habe bereits ein Python-Skript, das Excel und TextGrid ineinander konvertiert **, um das Beste daraus zu machen
- Laden Sie die Datei hoch
- Konvertieren Sie, indem Sie ein Python-Skript auf dem Server ausführen --Lade es herunter
Ich werde es zu einem Mechanismus machen.
Technologie verwendet
Es ist nicht so viel wie die Verwendung von AWS, daher verwenden wir dieses Mal Herokus kostenlosen Plan, um die oben genannten Funktionen völlig kostenlos zu implementieren. Wie oben erwähnt, verwenden Sie ** PHP Laravel ** als Webframework. Da Heroku SQLite in der Produktionsumgebung [^ sqlite] nicht verwenden kann, verwenden wir den kostenlosen Plan von ** Heroku PostgreSQL ** als Datenbank.
[^ sqlite]: Es scheint, dass es nur wenige Dienste gibt, die SQLite in der Produktionsumgebung verwenden können.
Heroku ist ein Dienst, der sehr einfach gestartet werden kann, aber es gibt viele Teile, die nach dem Erstellen nicht mit Root-Rechten verwendet werden können, insbesondere im kostenlosen Plan, und es gibt einige schwierige Punkte für Anfänger, daher gibt es einige Punkte. Ich werde versuchen, es in Teil 9 zu erklären.
Da es eine große Sache ist, werde ich es auch ** SPA (Single Page Application) ** machen. Es gibt verschiedene Frameworks, die SPA ermöglichen, aber dieses Mal werden wir den Vue-Router verwenden, der anscheinend geringe Lernkosten verursacht. Das folgende Tutorial war sehr hilfreich.
Bildschirmübergangsdiagramm
Zählen Sie die benötigten Seiten auf und erstellen Sie ein einfaches Bildschirmübergangsdiagramm. Ich werde es in mehreren Teilen zeichnen, damit es nicht unangenehm ist, es auf Qiita anzuzeigen.
Es ist nicht elegant, aber ich habe draw.io verwendet, weil es eine Ikone ist, leicht zu verstehen ist und die Zeichnungskosten niedrig sind.
Lassen Sie uns die Äußerungsliste und die Bearbeitungsfunktion für jeden "Diskurs" wie folgt erstellen. Die Tabelle "Diskurs" enthält viele Informationen (Dateisymbol, Datenname, Aufnahmedatum, Aufzeichnungsort, Aufzeichnungspersonal, Redaktion, Thema, Diskursgenre), also ist dies alles eine. Es stört, wenn es auf dem Bildschirm angezeigt wird. Daher sollten auf der Seite "Diskursliste" keine Elemente angezeigt werden, die sich nicht auf die Art der Daten auswirken (Rekorder, Editoren usw.), damit sie nur auf der Seite "Sprachdetails" bestätigt werden können. Wechseln Sie nach dem Aktualisieren auf der Seite "Sprechen sprechen" zur Seite "Detailliertes Sprechen".
Die Äußerungsliste für jeden "Sprecher" ist langweilig, wenn Sie einfach die Äußerungen zusammenfassen. Lassen Sie uns also eine einfache Zeichenfolgenverarbeitung durchkauen und sie für jeden Satz anstelle jeder Äußerung präsentieren.
Der Dateikonvertierungsbildschirm sollte vorerst hochgeladen, konvertiert, heruntergeladen und gelöscht werden. Bereiten Sie daher einen einfachen Bildschirm vor.
Projektvorbereitung
Lass es uns schaffen. Lassen Sie uns zunächst ein Laravel-Projekt erstellen. Die Dinge, die zu tun sind, sind im Grunde die gleichen wie auf der obigen Referenzseite. Lassen Sie den Komponisten ein Projekt in einem geeigneten Ordner erstellen und die erforderlichen Pakete usw. mit Hilfe von Laravel ("php artisan") und "npm" einführen. Ich werde fortsetzen.
composer create-project laravel/laravel --prefer-dist cojads
composer require laravel/ui
php artisan ui vue
npm install
npm install --save vue-router
Von nun an werden wir den Inhalt des Projekts erstellen, aber wir werden dem Verfahren folgen, mit dem Fluss zu beginnen (Routing und Vorlage) und den Inhalt (Komponenten und Controller) später zu erstellen.
Erstellen Sie eine SPA-Vorlage
Dieses Mal erstellen wir ein SPA, also erstellen wir die einzige Seite "app.blade.php" als Fluss (Vorlage). Im Laravel-Projekt ist das Routing für den normalen Zugriff als Website in "web.php" angegeben. Bearbeiten Sie dies also zuerst und leiten Sie einen beliebigen Pfad zu "app.blade.php" weiter. Dieser Dienst muss jedoch später direkt auf "/ storage" zugreifen. Wenden Sie daher kein spezielles Routing nur unter "/ storage" an.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/{any}', function() {
return view('app');
})->where('any', '^(?!storage).*');
Erstellen Sie dann einen SPA-Fluss app.blade.php. Der Vue Router-Prozess lädt den Header an der Position "
Da der feste Header von Bootstrap erstellt wird, gibt es entsprechende Ränder über und unter "
html:resources/views/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<base href="/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'COJADS App') }}</title>
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<header-component></header-component>
<div class="px-5 py-5"><div class="py-3">
<router-view></router-view>
</div></div>
<footer-component></footer-component>
</div>
<script src="{{ mix('/js/app.js') }}" defer></script>
</body>
</html>
Komponenten-Routing
Anschließend werden die Komponenten weitergeleitet, die in die Vorlage eingefügt werden. Die Registrierung von Komponenten und deren Routing wird von app.js verwaltet. Bearbeiten Sie sie daher hier. Im Folgenden werden die Elemente der Kopf-, Fuß-, Deckblatt- und Diskurslistenseite gelesen und das entsprechende Routing durchgeführt.
resources/js/app.js
import VueRouter from "vue-router";
// register components
import HeaderComponent from "./components/HeaderComponent";
import FooterComponent from "./components/FooterComponent";
import HomeComponent from "./components/HomeComponent";
import DiscourseIndexComponent from "./components/DiscourseIndexComponent";
require("./bootstrap");
window.Vue = require("vue");
Vue.use(VueRouter);
// routing
const router = new VueRouter({
mode: "history",
routes: [
{
//Laden Sie HomeComponent, wenn Sie auf root zugreifen
path: "/",
name: "home",
component: HomeComponent
},
{
// /Laden Sie DiscourseIndexComponent, wenn Sie auf den Diskurs zugreifen
path: "/discourse",
name: "discourse.index",
component: DiscourseIndexComponent
}
]
});
//Definieren Sie ein benutzerdefiniertes Element für die Kopf- / Fußzeile und laden Sie die Komponente
Vue.component("header-component", HeaderComponent);
Vue.component("footer-component", FooterComponent);
const app = new Vue({
el: "#app",
router
});
Jede Komponente erstellen
Sobald Sie ein Routing-Konzept haben, können Sie den Inhalt der Seite erstellen. Erstellen Sie die vier Komponenten (.vue-Dateien), die Sie zuvor in app.js unter / resources / js / components verwendet haben (diskurs wird das nächste Mal sein).
Erstellen Sie die folgende Datei
+ resources/js/components/HeaderComponent.vue
+ resources/js/components/FooterComponent.vue
+ resources/js/components/HomeComponent.vue
+ resources/js/components/DiscourseIndexComponent.vue
Header
Erstellen Sie einen Headertyp, der mit Bootstrap oben auf der Seite festgelegt wird. Lassen Sie uns vorsichtshalber einen Link zu jeder Komponente mit "
resources/js/components/HeaderComponent.vue
<template>
<header class="navbar fixed-top navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">COJADS APP</span>
<div>
<span>
<router-link v-bind:to="{ name: 'home' }">
<button class="btn btn-success btn-sm">Top Page</button>
</router-link>
<router-link v-bind:to="{ name: 'discourse.index' }">
<button class="btn btn-success btn-sm">Discourse List</button>
</router-link>
<router-link v-bind:to="{ name: 'speaker.index' }">
<button class="btn btn-success btn-sm">Speaker List</button>
</router-link>
<router-link v-bind:to="{ name: 'convert' }">
<button class="btn btn-success btn-sm">Toolkits</button>
</router-link>
</span>
</div>
</header>
</template>
<script>
export default {};
</script>
Fusszeile
Stellen Sie die Fußzeile entsprechend ein.
resources/js/components/FooterComponent.vue
<template>
<footer class="navbar fixed-bottom navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">(c) 2020 @a_eau_</span>
</footer>
</template>
<script>
export default {};
</script>
Startbildschirm
Ich muss nichts Besonderes schreiben, also werde ich nur das Minimum machen.
resources/js/components/HomeComponent.vue
<template>
<div>
Welcome to COJADS App!
</div>
</template>
<script>
export default {};
</script>
Kompilieren / Überprüfen auf lokalem Server
Nachdem Sie den obigen Code geschrieben haben, kompilieren Sie ihn einmal und überprüfen Sie ihn. Wenn Sie den folgenden Befehl ausführen, wird alles, was Sie benötigen, aufgenommen und gut kompiliert.
cmd
npm run dev oder npm run produktion
Starten Sie nach dem Kompilieren den lokalen Server mit dem folgenden Laravel-Befehl und greifen Sie auf localhost: 8000 zu. Wenn die Seite wie erwartet ohne 404- oder 500-Fehler angezeigt wird, ist sie erfolgreich.
cmd
php artisan serve
nächstes Mal
Dies ist die Zeit, um zu PostgreSQL zu wechseln, nachdem Sie erfahren haben, dass SQLite nicht mit Heroku verwendet werden kann.