DEV Community: Mert

Create Portfolio Website Using Flask and Google sheets

Mert — Sat, 12 Mar 2022 06:35:43 +0000

I have built a new project from scratch including frontend and backend and decided to make it in the simplest way so here is the steps that I made to complete it.

tutorial

1- Choose frontend design and build it using html css and some javascript

./templates/layout.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <title>Developer Website</title>
    <link rel="stylesheet" href="{{url_for('static',filename='style.css')}}">
</head>

<body>

    <div class="container">
        <!-- SITE HEADER -->
        <div class="site-header">
            <!-- Site title -->
            <div class="site-title">
                <div class="circles">
                    <div class="circle red"></div>
                    <div class="circle yellow"></div>
                    <div class="circle green"></div>
                </div>
                {% if title %}
                <p>{{title}}</p>
                {%else%}
                <p>_developer site</p>
                {%endif%}
            </div>
            <!-- Navbar -->
            <nav class="navbar">
                <a href="{{url_for('_hello')}}" class="nav-link active">_hello</a>
                <a href="{{url_for('_projects')}}" class="nav-link">_projects</a>
                <a href="{{url_for('_contact')}}" class="nav-link">_contact</a>
            </nav>
        </div>

        <!-- CONTENT -->
        <div class="inner-container">
            {% block content %}
            {% endblock %}
        </div>
        <!-- SITE FOOTER -->
        <div class="site-footer">
            <nav>
                <a href="">
                    <i class="fab fa-github"></i>
                </a>
                <a href="">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="">
                    <i class="fab fa-youtube"></i>
                </a>
            </nav>
        </div>
    </div>

    <script src="{{url_for('static',filename='index.js')}}"></script>
</body>

</html>

./templates/projects.html

{% extends 'layout.html' %}

{% block content %}
<h3 class="section-title">My projects</h3>

<div class="projects">

    {% if projects %}
    {% for project in projects %}
    <!-- Project Card -->
    <article class="project">
        <div class="project-header">
            <h4 class="project-title">{{project.title}}</h4>
            <span class="commit-count">{{project.commit}}</span>
        </div>
        <div class="project-content">
            <p class="description">
                {{project.description}}
            </p>
            <a href="{{project.url}}" target="_blank" class="project-link">View project</a>
        </div>
    </article>
    {% endfor %}
    {% endif %}
</div>

{%endblock%}

./templates/contact.html

{% extends 'layout.html' %}

{% block content %}
<h3 class="section-title">Contact me</h3>

{% if status %}
<p class="status" style="color: white;">{{status}}</p>
{% endif %}

<div class="contact-me">
    <form action="{{url_for('_contact')}}" method="post">
        <input type="text" name="fullname" id="fullname" class="input" placeholder="full name">
        <input type="email" name="email" id="email" class="input" placeholder="email">
        <textarea name="message" id="message" cols="30" rows="5" class="input" placeholder="message content"></textarea>
        <input type="submit" value="Send" class="btn">
    </form>
</div>
{% endblock %}

in the server file or app.py file

from flask import Flask,render_template, request
from database import get_all_projects,create_message
app = Flask(__name__)


@app.route('/')
def _hello():
    return render_template('index.html')

@app.route('/projects')
def _projects():
    projects = get_all_projects()
    return render_template('projects.html',title='projects',projects=projects)

@app.route('/contact',methods=['GET','POST'])
def _contact():
    status = None
    if request.method == 'POST':
        full_name = request.form.get('fullname')
        email = request.form.get('email')
        message = request.form.get('message')
        status = create_message(full_name,email,message).get('status')
    return render_template('contact.html',title='contact',status=status)



if __name__ == '__main__':
    app.run(debug=True)

to save data in google sheets I used sheety api
import requests

def get_all_projects():
URL = '...'
response = requests.get(URL)
response.raise_for_status()
if response.status_code == 200:
print('connection success')
return response.json()['projects']

def create_message(fullname,email,content):
URL = '...'
message = {'fullname':fullname,'email':email,'content':content}
response = requests.post(URL,json={'message':message})
if response.status_code == 200:
return {'status':'message has sent successfully thank you.'}

New Api application that I created

Mert — Fri, 15 Oct 2021 23:54:48 +0000

Hello everyone I am so proud that I just finished my new api application and publish it on RapidAPI The application is to get calories and joules values in some foods data.

So I want to share my story with building this app with you I hope it will help or make some difference in your learning path.

1-First Step:

I started by searching for data source that I can be use it as database to get information from it in my app so I found a csv file on kaggle contains the data that I need.
...

2-Handling data source file:

Next step was convert the data in the csv file to mongo database so I used pymongo but before I pushed it to the database I created to the system to handling the informations that contains tow main types
Category and Food.

import uuid
from abc import ABCMeta, abstractmethod, ABC
from database import Database


class Model(metaclass=ABCMeta):
    collection = "model"

    def __init__(self, _id=''):
        self._id = _id or uuid.uuid4().hex

    @abstractmethod
    def to_json(self):
        raise NotImplementedError

    @classmethod
    def all(cls):
        return [cls(**item) for item in Database.all(cls.collection)]

    def save_to_db(self):
        Database.insert_one(self.collection, self.to_json())

    @classmethod
    def fine_one_by_id(cls, _id):
        item = Database.find_one_by_id(cls.collection, _id)
        return cls(**item)

    @classmethod
    def fine_one_by_name(cls, name):
        item = Database.find_one_by_name(cls.collection, name)
        return cls(**item)

    @classmethod
    def delete_one(cls, _id):
        if cls.fine_one_by_id(_id):
            Database.delete_one(cls.collection, _id)

    @classmethod
    def filter(cls, **kwargs):
        return [cls(**item) for item in Database.filter(cls.collection, **kwargs)]


class Category(Model, ABC):
    collection = "food_category"

    def __init__(self, name='', *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.name = name
        pass

    def to_json(self):
        return {
            '_id': self._id,
            'name': self.name
        }


class Food(Model, ABC):
    collection = "food"

    def __init__(self, name='', per100grams=0, cals_per100grams=0, kj_per100grams=0, category_id='', *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.name = name
        self.per100grams = per100grams
        self.cals_per100grams = cals_per100grams
        self.kj_per100grams = kj_per100grams
        self.category_id = category_id
        pass

    def to_json(self):
        return {
            '_id': self._id,
            'name': self.name,
            'per100grams': self.per100grams,
            'cals_per100grams': self.cals_per100grams,
            'kj_per100grams': self.kj_per100grams,
            'category_id': self.category_id
        }

3-Create database.py file:

I created file to handle database functions it's contains Database class

from pymongo import MongoClient


class Database:
    url = "url_to_mongo_db"
    client = MongoClient(url)
    db = client.get_database()

    @classmethod
    def insert_one(cls, collection, item):
        cls.db[collection].insert_one(item)
        pass

    @classmethod
    def find_one_by_id(cls, collection, _id):
        return cls.db[collection].find_one({'_id': _id})

    @classmethod
    def find_one_by_name(cls, collection, name):
        return cls.db[collection].find_one({'name': name})

    @classmethod
    def delete_one(cls, collection, _id):
        cls.db[collection].delete_one({'_id': _id})

    @classmethod
    def all(cls, collection):
        return cls.db[collection].find({})

    @classmethod
    def filter(cls, collection, **kwargs):
        return cls.db[collection].find(kwargs)

after it I inserted all data from csv file to mongo database

4-Build api using flask

I used flask to create the app endpoints and tested it by postman software so every end point I created I test it

from flask import Flask, make_response, jsonify

from models import Category, Food

app = Flask(__name__)


@app.route('/')
def index():
    return 'WELCOME TO FOOD CALORIES API'


@app.route('/categories/all')
def categories():
    all_categories = [category.to_json() for category in Category.all()]
    return make_response(jsonify(all_categories))


@app.route('/categories/<category_name>')
def get_category_by_name(category_name):
    selected_category = Category.fine_one_by_name(category_name)
    return make_response(jsonify(selected_category.to_json()))


@app.route('/categories/<category_name>/foods')
def get_foods_by_category_name(category_name):
    selected_category = Category.fine_one_by_name(category_name)
    selected_foods = [food.to_json() for food in Food.filter(category_id=selected_category._id)]
    return make_response(jsonify({'category': selected_category.to_json(), 'foods': selected_foods}))


@app.route('/foods/all')
def foods():
    all_foods = [food.to_json() for food in Food.all()]
    return make_response(jsonify(all_foods))


@app.route('/foods/<food_name>')
def get_food_by_name(food_name):
    selected_food = Food.fine_one_by_name(food_name)
    return make_response(jsonify(selected_food.to_json()))


@app.route('/foods/sorted-by-kj')
def sort_food_by_kj():
    selected_food = [food for food in Food.all()]
    selected_food.sort(key=lambda food: food.kj_per100grams)
    sorted_foods = [food.to_json() for food in selected_food]
    return make_response(jsonify(sorted_foods))


@app.route('/foods/sorted-by-cals')
def sort_food_by_cals():
    selected_food = [food for food in Food.all()]
    selected_food.sort(key=lambda food: food.cals_per100grams)
    sorted_foods = [food.to_json() for food in selected_food]
    return make_response(jsonify(sorted_foods))


if __name__ == '__main__':
    app.run(debug=True)

5-Deploy app to heroku platform

after testing app endpoints I started preparing app to deploy it to heroku site first instaled gunicorn package the created requirements.txt by typing pip freeze>requirements.txt
then created app on heroku named it calories-app
and by following steps in heroku documentations finally deployed and has been live.

6-Publish app on RapidAPI:

after creating account on Rapiedapi I created new api app and after some steps I the app is done.
...

You can use it Now on foods-caloris

Please support me on my network links:
patreon
youtube
facebook
instagram

How we can fetch api using requests in python

Mert — Wed, 05 May 2021 00:01:13 +0000

Introduction

An API, or Application Programming Interface, is a server that you can use to retrieve and send data to using code. APIs are most commonly used to retrieve data, and that will be the focus of this beginner tutorial.

starting by prepare venv:

in the terminal

python3 -m venv venv
source venv/bin/activate

then we need to install requests

in the terminal

pip3 install requests

Make our first request

after creating app.py file

import requests
url ='https://animechan.vercel.app/api/random'
response = requests.get(url=url)
print(response.status_code)   # must be 200

200: Everything went okay, and the result has been returned (if any).
301: The server is redirecting you to a different endpoint. This can happen when a company switches domain names, or an endpoint name is changed.
400: The server thinks you made a bad request. This can happen when you don’t send along the right data, among other things.
401: The server thinks you’re not authenticated. Many APIs require login credentials, so this happens when you don’t send the right credentials to access an API.
403: The resource you’re trying to access is forbidden: you don’t have the right permissions to see it.
404: The resource you tried to access wasn’t found on the server.
503: The server is not ready to handle the request.

after we get checked our request we can start getting response results

import json.py
...
with open('response.json','w') as f :
    if (response.status_code == 200):
        json.dump(response.json(),f)

resources:
https://www.dataquest.io/blog/python-api-tutorial/

used api :
https://animechan.vercel.app/