Cloud Platform Programming Project

5. User Flow

Here’s how a user will interact with the application:

Step 1: Login or Register

 User visits the website.

 If not logged in, they can:

o Log in to their account.

o Register for a new account.

Step 2: Browse or Search Items

 User can:

o Browse recent lost and found items on the home page.

o Search for specific items using keywords, location, or filters.

Step 3: View Item Details

 User clicks on an item to view its details:

o Title, description, location, date, image.

o Detected labels and extracted text (if available).

Step 4: Post an Item

 User clicks "Post Item" to report a lost or found item.

 Fills out the form and uploads an image.

 AWS Rekognition analyzes the image and suggests tags.

Step 5: Manage Posted Items

 User can view, edit, or delete their posted items from the dashboard.

Step 6: Contact Poster

 User can contact the poster of an item (if logged in).

Step 7: Logout

 User logs out of their account.

6. Example User Journey

1. John visits whops.ie.

2. He logs in to his account.

 3. He searches for "lost wallet in Central Park."

4. He finds a matching item and clicks to view details.

5. He contacts the poster to inquire about the wallet.

6. He posts a found item (a phone) and uploads an image.

7. AWS Rekognition detects labels like "Phone," "Black," and "Samsung."

8. John edits the item details and saves it.

9. He logs out of his account.

7. Summary of Functionalities

Functionality Description

User Authentication Login, registration, and logout.

Browse Items View a list of lost and found items.

Search Items Search by keyword, location, or category.

Post Item Report a lost or found item with details and image.

AWS Rekognition Automatically detect labels and extract text from images.

Contact Poster Contact the user who posted an item.

Notifications Receive email notifications for new matches or messages.

Profile
Edit profile details and change password.
Management

Admin Dashboard Manage users, items, and view analytics.

Creating a full-fledged web application like whops.ie involves multiple steps, from setting up the
project to deploying it. Below is a step-by-step guide with code snippets for each step. Follow these
steps sequentially to build your application.

Step 1: Set Up Your Development Environment

1. Install Python:

o Download and install Python from python.org.

 o Verify installation:

bash

Copy

python --version

2. Install Django:

bash

Copy

pip install django

3. Install Required Packages:

bash

Copy

pip install boto3 django-storages pillow

Step 2: Create the Django Project

1. Create the Project:

bash

Copy

django-admin startproject whops

cd whops

2. Create the App:

bash

Copy

python manage.py startapp lf_box

3. Add the App to INSTALLED_APPS:

In whops/settings.py:

python

Copy

INSTALLED_APPS = [

...

'lf_box',

]
Step 3: Set Up the Database

1. Define Models:
In lf_box/models.py:

python

Copy

from django.db import models

from django.contrib.auth.models import User

class Item(models.Model):

STATUS_CHOICES = [('lost', 'Lost'), ('found', 'Found')]

title = models.CharField(max_length=100)

description = models.TextField()

location = models.CharField(max_length=100)

date = models.DateField()

image = models.ImageField(upload_to='item_images/')

status = models.CharField(max_length=10, choices=STATUS_CHOICES)

user = models.ForeignKey(User, on_delete=models.CASCADE)

labels = models.CharField(max_length=255, blank=True, null=True)

def __str__(self):

return self.title

2. Run Migrations:

bash

Copy

python manage.py makemigrations

python manage.py migrate

Step 4: Set Up AWS S3 for Image Storage

1. Create an S3 Bucket:

o Go to the AWS S3 console and create a bucket.

 2. Update settings.py:

python

Copy

AWS_ACCESS_KEY_ID = 'your-access-key'

AWS_SECRET_ACCESS_KEY = 'your-secret-key'

AWS_STORAGE_BUCKET_NAME = 'your-bucket-name'

AWS_S3_REGION_NAME = 'your-region'

DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

Step 5: Create Views and Templates

1. Create Views:
In lf_box/views.py:

python

Copy

from django.shortcuts import render, redirect

from .models import Item

from .forms import ItemForm

from .utils import detect_labels

def home(request):

items = Item.objects.all()

return render(request, 'lf_box/home.html', {'items': items})

def post_item(request):

if request.method == 'POST':

form = ItemForm(request.POST, request.FILES)

if form.is_valid():

item = form.save(commit=False)

item.user = request.user

image_bytes = item.image.read()

labels = detect_labels(image_bytes)
 item.labels = ", ".join([label['Name'] for label in labels])

item.save()

return redirect('home')

else:

form = ItemForm()

return render(request, 'lf_box/post_item.html', {'form': form})

2. Create Forms:
In lf_box/forms.py:

python

Copy

from django import forms

from .models import Item

class ItemForm(forms.ModelForm):

class Meta:

model = Item

fields = ['title', 'description', 'location', 'date', 'image', 'status']

3. Create Templates:

o lf_box/templates/lf_box/home.html:

html

Copy

<h1>whops.ie</h1>

<p>It's Never a Lost Cause</p>

<a href="{% url 'post_item' %}">Post Item</a>

{% for item in items %}

<div>

<h2>{{ item.title }}</h2>

<img src="{{ item.image.url }}" alt="{{ item.title }}">

<p>{{ item.description }}</p>

<p>Labels: {{ item.labels }}</p>

</div>
{% endfor %}

Run HTML

o lf_box/templates/lf_box/post_item.html:

html

Copy

<h1>Post an Item</h1>

<form method="post" enctype="multipart/form-data">

{% csrf_token %}

{{ form.as_p }}

<button type="submit">Submit</button>

</form>

Run HTML

Step 6: Set Up AWS Rekognition

1. Create a Utility Function:

In lf_box/utils.py:

python

Copy

import boto3

from django.conf import settings

def detect_labels(image_bytes):

rekognition = boto3.client(

'rekognition',

aws_access_key_id=settings.AWS_ACCESS_KEY_ID,

aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,

region_name=settings.AWS_REGION

response = rekognition.detect_labels(

Image={'Bytes': image_bytes},

MaxLabels=10,
 MinConfidence=70

return response['Labels']

Step 7: Set Up URLs

1. Update lf_box/urls.py:

python

Copy

from django.urls import path

from . import views

urlpatterns = [

path('', views.home, name='home'),

path('post-item/', views.post_item, name='post_item'),

2. Include App URLs in Project:

In whops/urls.py:

python

Copy

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path('admin/', admin.site.urls),

path('', include('lf_box.urls')),

Step 8: Test the Application

1. Run the Development Server:

bash

Copy
python manage.py runserver

2. Access the Application:

o Open http://127.0.0.1:8000/ in your browser.

o Test posting items, viewing labels, and searching.

Step 9: Deploy to AWS Elastic Beanstalk

1. Install AWS CLI:

bash

Copy

pip install awscli

2. Initialize Elastic Beanstalk:

bash

Copy

eb init -p python-3.8 whops-app

3. Create an Environment:

bash

Copy

eb create whops-env

4. Deploy the Application:

bash

Copy

eb deploy

Step 10: Add Additional Features

1. User Authentication:

o Use Django's built-in authentication system.

2. Search Functionality:

o Add a search form and filter items by title, location, or labels.

3. Notifications:

o Use AWS SES to send email notifications.

By following these steps, you can build and deploy your whops.ie application. Let me know if you
need further assistance!

QnA

Purpose of lf_box in whops project:

✅ Models (models.py) → Defines database structure (items, users, etc.).

✅ Views (views.py) → Handles requests & responses (show items, post items, etc.).
✅ Templates (templates/lf_box/) → HTML files for frontend pages.
✅ Forms (forms.py) → Defines item submission forms.
✅ URLs (urls.py) → Manages app-specific routes (/post-item/, /search/).
✅ Utilities (utils.py) → AWS Rekognition integration for image processing.

How does this work in models.py

image = models.ImageField(upload_to='item_images/')

When a use uploads an image, Django saves that file in upload to “DESTINATION_PATH”, and saves
the path of the image to database.

user = models.ForeignKey(User, on_delete=models.CASCADE)

This links each item to a specific user who posted it. Creates a relationship between the Item model
and User model. And if the user is deleted, the items associated with the user will be deleted.

We run python manage.py makemigrations everytime we make a change to models.py. so Django

can know about the changes.

And then we run python manage.py migrate, so python can apply these changes to database.

Things new in views.py file in lf_box

 render: A Django shortcut for rendering HTML templates.

 redirect: A Django shortcut for redirecting to a specific URL.

 Item: The model representing a lost or found item (imported from models.py).

 ItemForm: A form for creating or updating an Item (imported from forms.py).

 detect_labels: A utility function for detecting labels in an image using AWS Rekognition (imported
from utils.py).
  def home(request):
 items = Item.objects.all()
 return render(request, 'lf_box/home.html', {'items' : items})

This is home function for listing al the objects present on home page. Render specifies the template
as home.html file. And passess items (list of all objects) to items in the home.html file.

In home.html, we have a for loop which prints info for each item.

{% for item in items %}

<li>

<h2>{{ item.title }}</h2>

<p>{{ item.description }}</p>

</li>

{% endfor %}

Need to properly understand how the media files are being shown on the
home page in this process. Which parts of urls.py are and settings,py are
responsible. And how media is referencing the media directory inside the
whops folder in the the whole process.

THINGS TO KEEP IN MIND

Need to update path in models.py image = models.ImageField(upload_to='item_images/')