Jouer en convertissant le corpus de dialectes japonais en DB (4) Décidez de l'image globale du service
Ceci est un article sérialisé. Dans la 4ème fois, l'application Laravel créée lors de la version d'essai précédente est ** une fois rebellée **, l'image complète du service est décidée et le routage est créé. C'est un mémo de travail pour moi, et je ne pense pas qu'il y ait suffisamment d'explications, mais pardonnez-moi s'il vous plaît.
--Partie 1: Jouer en convertissant le corpus de dialectes japonais en DB (1) Réflexion sur la configuration --Partie 2: Jouer avec le corpus de dialectes japonais en tant que DB (2) Convertir en DB avec SQLite3
- Troisième: Jouez avec le corpus de dialectes japonais comme DB (3) fonctionne avec PHP Laravel ――Le 4: Jouez en convertissant le corpus de dialectes japonais en DB (4) Décidez de l'image globale du service ← Maintenant ici
- Cinquième: Lecture en convertissant le corpus de dialectes japonais en DB (5) Migration de base de données et création de modèle
- Le 6: Jouer en convertissant le corpus de dialectes japonais en DB (6) Faire une liste d'énoncés pour chaque discours
- Le 7: Jouer en convertissant le corpus de dialectes japonais en DB (7) Créer une liste d'énoncés pour chaque locuteur
- Le 8: Lecture en convertissant le corpus de dialectes japonais en DB (8) Ajout d'une fonction de conversion de format de fichier --Le 9: Lire le corpus de dialectes japonais en tant que DB (9) Deploy with Heroku
Fonctions que vous souhaitez réaliser
COJADS est actuellement disponible en tant que version moniteur dans Application de recherche Corpus "Nakano", donc il est fonctionnellement différent de cela. Je veux y arriver.
Vue d'ensemble des énoncés pour chaque "discours / locuteur"
La version "Chunagon" se concentre principalement sur la fonction de recherche, et ne fournit pas de données textuelles en tant que groupe tel que "discours" ou "locuteur". De plus, comme mentionné ci-dessus, les données brutes fournies sur le site officiel de COJADS sont entièrement combinées avec le «discours» comme axe, ce qui est peu pratique à gérer. Par conséquent, il est intéressant de fournir une fonction qui sépare cela pour chaque entité afin qu'il puisse être visualisé sur le site, par exemple, pour visualiser le discours par «locuteur» ainsi que par «discours». C'est considéré.
Édition de "discours"
Vous pouvez exploiter la base de données à partir du site et ajouter la fonction pour modifier l'énoncé sans avoir à écrire SQL. Il enregistre également [^ log]. Je n'en ressens pas le besoin, mais j'aimerais l'implémenter après avoir étudié la base de données.
[^ log]: J'ai également créé une page de liste de journaux, mais comme il n'y a rien de nouveau dans l'explication, je l'ai omis de cette série d'articles.
Conversion mutuelle entre Excel et TextGrid
Dans COJADS, la voix, le texte en dialecte et le texte en langue standard sont liés en unités d'énoncés, mais sur le site officiel, seules les données brutes au format CSV sont distribuées, et les données vocales et le format TextGrid (logiciel d'analyse vocale au format dédié Praat) Les données textuelles ne sont pas distribuées. C'est le fichier TextGrid qui est directement lié à l'audio, et il n'est pas possible de bien observer la correspondance où se trouvaient le CSV et le fichier audio.
Même si TextGrid est distribué, si vous modifiez les données CSV vous-même, la correspondance sera interrompue et l'analyse vocale sera difficile. Par conséquent, je voudrais ajouter une fonction pour convertir entre le fichier Excel et le fichier TextGrid.
** J'ai déjà un script Python qui convertit Excel et TextGrid l'un à l'autre **, donc pour en tirer le meilleur parti
--Téléchargez le fichier --Convertir en exécutant un script Python sur le serveur --Télécharge le
Je vais en faire un mécanisme.
Technologie utilisée
Ce n'est pas autant d'utiliser AWS, donc cette fois, nous utiliserons le plan gratuit de Heroku pour implémenter les fonctionnalités ci-dessus de manière totalement gratuite. Comme mentionné ci-dessus, utilisez ** PHP Laravel ** comme framework Web. De plus, comme Heroku ne peut pas utiliser SQLite dans l'environnement de production [^ sqlite], nous utiliserons le plan gratuit de ** Heroku PostgreSQL ** comme base de données.
[^ sqlite]: Il semble que peu de services puissent utiliser SQLite dans l'environnement de production.
Heroku est un service qui peut être démarré très facilement, mais il y a de nombreuses parties qui ne peuvent pas être utilisées avec les privilèges root après la construction, en particulier dans le plan gratuit, et il y a quelques points difficiles pour les débutants, donc il y a quelques points. Essayera d'expliquer dans la partie 9.
De plus, comme c'est un gros problème, je le ferai ** SPA (Application à une seule page) **. Il existe plusieurs frameworks qui activent SPA, mais cette fois nous utiliserons le Vue Router, qui semble avoir un faible coût d'apprentissage. Le didacticiel suivant a été très utile.
Diagramme de transition d'écran
Comptez les pages dont vous avez besoin et créez un simple diagramme de transition d'écran. Je vais le dessiner en plusieurs parties pour qu'il ne soit pas désagréable de l'afficher sur Qiita.
Ce n'est pas élégant, mais j'ai utilisé draw.io car c'est emblématique, facile à comprendre et le coût de dessin est faible.
Faisons la liste d'énoncés et la fonction d'édition pour chaque "discours" comme suit. Le tableau "Discours" contient de nombreuses informations (symbole du fichier, nom des données, date d'enregistrement, lieu d'enregistrement, personnel d'enregistrement, rédaction, sujet, genre de discours), donc tout cela est un. Il gêne lorsqu'il s'affiche à l'écran. Par conséquent, la page "Liste des discours" ne doit pas afficher d'éléments qui n'affectent pas la nature des données (enregistreurs, éditeurs, etc.) afin qu'ils ne puissent être confirmés que sur la page "Détails de la parole". De plus, après la mise à jour de la page "Modifier la prononciation", passez à la page "Parole détaillée".
La liste d'énoncés pour chaque "locuteur" est ennuyeuse si vous résumez simplement les énoncés, alors essayons un simple traitement de chaîne de caractères et présentons-le pour chaque phrase au lieu de chaque énoncé.
L'écran de conversion de fichier doit être téléchargé, converti, téléchargé et supprimé pour le moment, alors préparez-en un simple.
Préparation du projet
Créons-le. Commençons par créer un projet Laravel. Les choses à faire sont fondamentalement les mêmes que sur le site de référence ci-dessus, demander à composer de créer un projet dans un dossier approprié, et d'introduire les packages nécessaires, etc. avec l'aide de Laravel ( php artisan) et npm. Je vais continuer.
composer create-project laravel/laravel --prefer-dist cojads
composer require laravel/ui
php artisan ui vue
npm install
npm install --save vue-router
A partir de maintenant, nous créerons le contenu du projet, mais nous suivrons la procédure de démarrage par la rivière (routage et modèle) puis de création du contenu (composants et contrôleurs) plus tard.
Créer un modèle SPA
Cette fois, nous allons créer un SPA, nous allons donc créer la seule page ʻapp.blade.phpcomme rivière (modèle). Dans le projet Laravel, le routage pour un accès normal en tant que site Web est spécifié dansweb.php, alors éditez-le d'abord et acheminez tout chemin vers ʻapp.blade.php. Cependant, ce service devra accéder directement à / storage plus tard, donc n'appliquez pas de routage spécial uniquement sous / storage.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/{any}', function() {
return view('app');
})->where('any', '^(?!storage).*');
Créez ensuite une rivière SPA ʻapp.blade.php`. Le processus Vue Router charge l'en-tête à la position «
En raison du fait qu'un en-tête fixe est créé avec bootstrap, il y a des marges appropriées au-dessus et en dessous de <rooter-view> (dirty).
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>
Routage des composants
Il achemine ensuite les composants qui seront insérés dans le modèle. L'enregistrement des composants et leur routage sont gérés dans ʻapp.js`, alors éditez-le ici. Dans ce qui suit, les éléments de l'en-tête, du pied de page, de la page de garde et de la page de liste de discours sont lus et un routage approprié est effectué.
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: [
{
//Charger HomeComponent lors de l'accès à root
path: "/",
name: "home",
component: HomeComponent
},
{
// /Charger DiscourseIndexComponent lors de l'accès au discours
path: "/discourse",
name: "discourse.index",
component: DiscourseIndexComponent
}
]
});
//Définissez un élément personnalisé pour l'en-tête / pied de page et chargez le composant
Vue.component("header-component", HeaderComponent);
Vue.component("footer-component", FooterComponent);
const app = new Vue({
el: "#app",
router
});
Création de chaque composant
Une fois que vous avez un concept de routage, vous pouvez créer le contenu de la page. Créez les quatre composants (fichiers .vue) que vous avez décidé d'utiliser dans ʻapp.js plus tôt sous / resources / js / components ( discourse` sera la prochaine fois).
Créez le fichier suivant
+ resources/js/components/HeaderComponent.vue
+ resources/js/components/FooterComponent.vue
+ resources/js/components/HomeComponent.vue
+ resources/js/components/DiscourseIndexComponent.vue
entête
Créez un type d'en-tête qui est fixé en haut de la page avec bootstrap. Par précaution, mettons un lien vers chaque composant avec <router-link> dans l'en-tête. Cependant, je n'ai pas encore fourni de lien, donc si vous souhaitez compiler à ce stade, vous devez commenter de manière appropriée.
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>
bas de page
Créez le pied de page de manière appropriée.
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>
Écran d'accueil
Je n'ai rien à écrire en particulier, donc je ne ferai que le minimum.
resources/js/components/HomeComponent.vue
<template>
<div>
Welcome to COJADS App!
</div>
</template>
<script>
export default {};
</script>
Compiler / vérifier sur le serveur local
Après avoir écrit le code ci-dessus, compilez-le une fois et vérifiez-le. Si vous exécutez la commande suivante, elle prendra tout ce dont vous avez besoin et la compilera bien.
cmd
npm run dev ou npm run production
Après la compilation, démarrez le serveur local avec la commande Laravel suivante et accédez à localhost: 8000. Si la page s'affiche comme prévu sans aucune erreur 404 ou 500, elle réussit.
cmd
php artisan serve
la prochaine fois
C'est le moment de passer à PostgreSQL après avoir appris que SQLite ne peut pas être utilisé avec Heroku.