12 Days Of Digitalocean (day 7) - Building And Deploying The Email-based Receipt Processor

Welcome to Day 7 of nan 12 Days of DigitalOcean! Today, we’re kicking disconnected nan 2nd task successful this series: an Email-Based Receipt Processing Service. This app is designed to make your life a mini easier by organizing your emailed receipts into a database. No overmuch endless scrolling done your inbox to find that 1 receipt you need.

If you enjoyed nan Birthday Reminder Service, you’ll emotion this adjacent step. It’s different practical, production-ready app that highlights really DigitalOcean tin thief you move ideas into real, moving solutions. By nan extremity of this tutorial, your Flask app will beryllium unrecorded connected nan web and caller to process receipt accusation for illustration a pro.

✨ Why This App?

We’ve each been there—scrambling to find a circumstantial receipt for taxation play aliases reimbursements. It’s not fun. This app intends to lick that by automating nan afloat process.

How nan App Works

1. You guardant a receipt to a circumstantial email address.
2. The app extracts details for illustration nan vendor, amount, and time utilizing smart tools.
3. Those specifications are stored successful a database, for illustration PostgreSQL, wherever they’re neatly organized.
4. You get a confirmation—via email aliases SMS—once nan receipt is processed.

It’s simple, efficient, and takes a tedious task disconnected your plate. Today, we’re focusing connected building nan backend strategy pinch Flask, mounting it up for accumulation pinch Gunicorn, and deploying it to DigitalOcean’s App Platform.

🚀 What You’ll Learn

Here’s what we’ll surface today:

1. Set up a Flask app to work arsenic nan instauration of your receipt processor.
2. Configure Gunicorn to grip accumulation workloads smoothly.
3. Use GitHub for type powerfulness and collaboration.
4. Deploy nan app to DigitalOcean’s App Platform truthful it’s unrecorded and caller to use.

This tutorial will springiness you hands-on acquisition pinch deploying a real-world Flask app while keeping things manageable and fun.

🛠 What You’ll Need

Before diving in, make judge you have:

• A DigitalOcean account. If you don’t personification one, you tin motion up here.
• Python 3.8+ installed connected your conception machine.
• Git installed and caller to use.

🧑‍🍳 Recipe for Day 7: Building and Deploying a Flask App

Step 1: Set Up Your Flask App

Flask will work arsenic nan backbone of this project, handling each incoming requests and processing nan receipt data. Let’s get started by mounting up nan basics.

1. Create Your Project Directory:
   Keeping everything successful a dedicated files makes managing your task easier arsenic it grows. Run nan pursuing commands to group up nan directory:

   mkdir email-receipt-processor cd email-receipt-processor

2. Set Up a Virtual Environment:
   A virtual business is for illustration a sandbox for your project. It keeps your limitations isolated, truthful you don’t accidentally break different Python projects aliases your system’s Python setup.

   pip install virtualenv virtualenv -p python3 venv

3. Activate nan Virtual Environment: Activate your virtual business to instal limitations locally for nan project:

   source venv/bin/activate

4. Install Flask and Gunicorn:
   Flask will beryllium your web framework, and Gunicorn will grip accumulation server duties.

   pip install Flask gunicorn

5. Save Your Dependencies:
   A requirements.txt grounds ensures everyone (and each machine) moving your task has nan aforesaid setup.

   pip frost > requirements.txt

6. Write Your Flask App:
   Let’s commencement pinch a elemental Flask app. Create a grounds called app.py and adhd nan pursuing code:

   from flask import Flask app = Flask(__name__) @app.route('/') def home(): return "Welcome to nan Email-Based Receipt Processor!" if __name__ == "__main__": app.run()

7. Test It Locally:
   Fire up nan app and cheque it successful your browser:

   python app.py

   

   Open your browser and navigate to http://localhost:5000. You should see: “Welcome to nan Email-Based Receipt Processor!”

   

Step 2: Add Gunicorn Configuration

Flask’s built-in server is awesome for development, but it’s not designed to grip nan postulation and capacity needs of a accumulation app. That’s wherever Gunicorn comes in.

1. Create a Gunicorn Config File:
   Gunicorn needs a configuration grounds to cognize really to tally your app. Create 1 with:

   touch gunicorn_config.py

2. Configure Gunicorn:
   Open gunicorn_config.py and add:

   bind = "0.0.0.0:8080" workers = 2
   • bind: Makes nan app accessible complete nan web connected larboard 8080
   • workers: Sets nan number of simultaneous requests nan app tin handle. Two is simply a bully starting constituent for mini apps.

Step 3: Push to GitHub

GitHub is wherever nan magic happens—it’s really we’ll type powerfulness nan app and merge it pinch DigitalOcean.

1. Initialize a Git Repository:
   A .gitignore grounds prevents unnecessary files (like your virtual environment) from being tracked by Git. Run:

   git init echo "venv/" > .gitignore echo "*.pyc" >> .gitignore git add . git perpetrate -m "Initial Flask app pinch Gunicorn"

   

   Here’s what your task should look for illustration successful VS Code, for example:

   

2. Create a GitHub Repository:
   Head to GitHub, create a caller repo called email-receipt-processor, and recreation nan steps to group it up.

   

3. Push Your Code to GitHub:

   Back successful your terminal, type:

   git branch -M main git distant add guidelines https://github.com/<your-github-username>/email-receipt-processor.git git push -u guidelines main

Replace <your-github-username> pinch your GitHub username

Step 4: Deploy to DigitalOcean’s App Platform

Now it’s clip to deploy your app! DigitalOcean makes this easy pinch its App Platform.

Create a New App connected DigitalOcean

1. Log successful to your DigitalOcean dashboard and spell to Apps.

2. Click Create App, premier GitHub, and nexus your email-receipt-processor repo.

   

3. Click “Connect GitHub Account”: You will beryllium redirected to GitHub to authorize DigitalOcean. If prompted, log into GitHub and assistance DigitalOcean entree to your repositories.

4. Select nan Repository: Choose nan email-receipt-processor repository you created earlier from nan database of disposable repositories. <$>[note] Tip: Ensure that you personification selected nan correct branch (e.g., main) for deployment. <$>

   

5. Click Save and Continue: This redirects you backmost to nan DigitalOcean App Platform configuration screen.

Configure Deployment Settings

1. Select nan Repository from nan Dropdown: Once backmost successful nan App Platform, you’ll spot a dropdown listing your connected repositories. Select email-receipt-processor.

   

2. Choose Resources: You tin group nan assets allocations (RAM, CPU, and bandwidth) for your app.

   • Click Edit to modify these settings. For this tutorial, we impulse nan pursuing configuration:
     • RAM: 512 MB
     • CPU: 1vCPU
     • Bandwidth: 50 GB

   

   

Set nan Run Command

1. Scroll Down to nan Run Command Section: This measurement ensures DigitalOcean knows really to commencement your app successful nan accumulation environment.

2. Click “Edit”: Replace nan default bid pinch nan following:

   gunicorn --worker-tmp-dir /dev/shm -c gunicorn_config.py app:app

   • This bid uses Gunicorn to work your Flask app.

   • The --worker-tmp-dir /dev/shm emblem optimizes capacity successful containerized environments.

   

3. Review Configuration: On nan past screen, reappraisal your app’s settings. Ensure nan assets allocations and tally bid are correct. Then click Back to get backmost to Resources.

   

Finalize Deployment Settings

1. Environment Variables: On nan adjacent screen, you’ll spot an action to group business variables. For now, clip disconnected everything arsenic default and click Next.

   

2. App Region: Choose a deployment region adjacent to your target assemblage aliases clip disconnected it arsenic nan default.

   

3. Create Resources: On nan past screen, reappraisal your app’s settings. Then click connected Create Resources. This starts nan deployment process. Sit backmost while DigitalOcean sets everything up!

   

Verify nan Deployment

1. Deployment Status: Once your app is deployed, you’ll spot a confirmation aboveground pinch a nexus to your app’s nationalist URL.

   

2. Test Your App: Visit nan URL successful your browser. You should spot nan message: “Welcome to nan Email-Based Receipt Processor!”

   

🎁 Wrap-Up

You did it! Here’s what you accomplished today:

1. Built a Flask app to kickstart your receipt processor.
2. Configured Gunicorn to make it production-ready.
3. Deployed your app to DigitalOcean’s App Platform, making it unrecorded and caller to use.

Your app is now up and running—an important milestone successful this series. In nan adjacent tutorial, you’ll return things further by integrating Postmark to grip email forwarding. Get caller to level up your app—it will beryllium awesome! 🚀