[1 hour challenge] J'ai essayé de créer un site de bonne aventure qui soit trop adapté à Python
Site de bonne aventure trop adapté
Il n'y a pas si longtemps, j'ai créé un site de bonne aventure trop adapté.
J'ai fait quelques corrections après l'avoir créé, mais le temps de travail est en fait d'environ 1 heure.
Technologie utilisée
La technique utilisée était Bottle, un framework Web Python.
La base de données utilisait SQLite3 et le framework CSS utilisait Bulma.
La destination du déploiement est Heroku.
Créer une base de données
Tout d'abord, j'ai créé une base de données (SQLite3).
Le nom de la base de données est database.db.
set_fortune.py
# -*- coding: utf-8 -*-
import sqlite3
from contextlib import closing
dbname = 'database.db'
with closing(sqlite3.connect(dbname)) as conn:
c = conn.cursor()
create_table = '''create table fortune (id int, text varchar(256))'''
c.execute(create_table)
insert_sql = 'insert into fortune (id, text) values (?,?)'
fortune = [
(1, 'Boire de la mayonnaise à l'ombre peut être décevant.'),
(2, 'Boire du café vous fait sentir.'),
(3, 'Quand je parle au sexe opposé avec mes yeux, 50%Vous pouvez sortir avec une probabilité de.'),
(4, 'Il peut être bon de manger des nouilles aux fruits de mer avec du Tabasco.'),
(5, 'Si vous mangez du curry, votre QI sera de 150.'),
(6, 'Il y a de bonnes choses à faire lorsque vous essayez d'éliminer la fumée de cigarette de votre nez.'),
(7, 'Même si vous faites un contrecoup au milieu de la route, il sera ignoré.'),
(8, 'J'ai du sang nasal quand je mange une barre de chocolat.'),
(9, 'Tournez le robinet d'eau et faites-le couler jusqu'à ce qu'il déborde.'),
(10, 'Je suis fatigué de penser à la bonne aventure.'),
]
c.executemany(insert_sql, fortune)
conn.commit()
select_sql = 'select * from fortune'
for row in c.execute(select_sql):
print(row)
Je crée une table appelée fortune et crée des colonnes d'identifiant et de texte.
Après cela, j'ai inséré 10 données.
Pour insérer des données ultérieurement, vous pouvez les insérer comme suit.
$sqlite3 database.db
sqlite> insert into fortune values(11, 'Je veux devenir bon à Qiita');
Code source
Regardons le code source.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta name="application-name" content="Bonne aventure appropriée">
<meta name="description" content="Faites fortune.">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sloppy fortune-telling</title>
<link rel="stylesheet" href="../static/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Kosugi&display=swap" rel="stylesheet">
</head>
<body>
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
Sloppy fortune-telling
</h1>
<h2 class="subtitle">
Bonne aventure appropriée
</h2>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="field">
<div class="control">
<div class="select is-primary is-rounded is-medium">
<select>
<option>bélier</option>
<option>Taureau</option>
<option>Gémeaux</option>
<option>Siège de crabe</option>
<option>Leo</option>
<option>Vierge</option>
<option>Balance</option>
<option>Scorpion</option>
<option>Teza</option>
<option>Chèvre</option>
<option>Mizugame</option>
<option>Poissons</option>
</select>
</div>
</div>
</div>
<input class="input is-primary is-rounded is-medium" type="text" placeholder="Input your name">
<div class="columns is-mobile is-centered">
<button class="button is-primary is-rounded is-large" id="open">Fortune!</button>
</div>
<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">La fortune d'aujourd'hui</p>
</header>
<section class="modal-card-body">
{{result}}
</section>
<footer class="modal-card-foot">
<button class="button" id="close">Close</button>
</footer>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
$("#open").on("click", function() {
$("div.modal").addClass("is-active");
})
$("#close, div.modal-background").on("click", function() {
$("div.modal").removeClass("is-active");
})
});
</script>
</body>
</html>
Bulma est lu par CDN et l'affichage est organisé.
Lorsque vous appuyez sur le bouton avec id = open, Modal apparaît et le résultat de la bonne aventure s'affiche.
Par souci d'apparence, il existe une sélection de constellation et un champ de saisie de nom, mais je ne l'utilise pour rien: D
app.py
# -*- coding: utf-8 -*-
from bottle import Bottle, template, static_file, url
import os
import random
import sqlite3
app = Bottle()
@app.route('/static/:path#.+#', name='static')
def static(path):
return static_file(path, root='static')
@app.route('/')
def index():
con = sqlite3.connect('database.db')
cur = con.cursor()
num = str(random.randint(1,16))
sql = 'select * from fortune where id = ' + num + ';'
cur.execute(sql)
for row in cur:
result = row[1]
con.close()
return template('index', result=result)
@app.error(404)
def error404(error):
return "Error 404. Try again later."
@app.error(500)
def error500(error):
return "Error 500. Try again later."
# local test
app.run(host='localhost', port=8080, debug=True)
# heroku
# app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))
Connectez-vous à une base de données appelée databese.db et générez un nombre aléatoire.
Puisque la table de fortune a une colonne d'id, nous obtenons le résultat de la bonne aventure (texte) où le nombre aléatoire généré et l'ID correspondent.
Déployer sur Heroku
Il a été achevé dans une certaine mesure, alors je l'ai déployé sur Heroku.
Tout d'abord, créez les fichiers nécessaires au déploiement.
$ pip3 freeze > requirements.txt
$ echo web: python3 app.py > Procfile
Il existe plusieurs façons de se déployer sur Heroku.
Personnellement, je trouve plus facile de travailler avec le référentiel GitHub.
Après avoir obtenu un compte Heroku, sélectionnez Créer une nouvelle application et définissez le nom de l'application, etc.
Après cela, vous pouvez déployer en sélectionnant simplement GitHub dans la méthode de déploiement «Deploy» et en le liant.
finalement
J'ai créé un site de bonne aventure qui est trop adapté.
S'il s'améliore, il prendra forme dans une certaine mesure. Je pense.
Si cela ne vous dérange pas, essayez le défi pendant une heure! !!
référence
Links
Site de bonne aventure trop adapté: https://sloppy-fortune-telling.herokuapp.com/
GitHub: https://github.com/ShogoMurakami/sloppy-fortune-telling
Thanks, @shogo
Recommended Posts