Introduction: Getting Started with Your Cooking App

Welcome to your first step in building the AI Cooking Helper! In this lesson, you will learn how to set up the foundation of your web application using a robust web framework that is designed to help developers move from concept to completion as quickly as possible. This tool follows the batteries-included philosophy, meaning it comes with many of the features you need right out of the box.

By the end of this lesson, you will have a project that is connected to a database and configured to handle cross-origin requests. This setup is essential for storing recipes and user data as you continue to develop your cooking app.

Project Structure Basics

Before we dive in, let’s look at how your project will be organized. This framework uses a specific hierarchy to keep the configuration separate from the application logic. Your project consists of a project folder (for settings) and one or more apps (for features).

For example, your project structure will look like this:

  • manage.py: A command-line utility that lets you interact with your project (starting the server, creating databases, etc.).
  • cooking_helper/ (Inner Folder): The configuration directory containing settings.py for project settings and urls.py for main routing.
  • recipes/: An application directory where you will build the specific features for your cooking helper, like recipe management.

This structure allows you to scale your project by adding more specialized apps while keeping the global configuration centralized.

This framework was chosen for this project because it offers several advantages:

  • Built-in ORM: It includes a powerful Object-Relational Mapper (ORM) that allows you to interact with your database using code objects instead of writing raw SQL.
  • One of its most popular features is a ready-to-use for managing your data models without writing any extra code.
Setting Up the Application

To get started, you need to install the framework and the tools required to handle cross-origin requests:

  • django is the core web framework.
  • django-cors-headers is an extension used to handle headers required for Cross-Origin Resource Sharing (CORS).

Note: In the CodeSignal environment, these packages are already installed for you.

Understanding CORS

CORS is a security mechanism enforced by web browsers. By default, browsers prevent a web page from making requests to a different domain (or "origin") than the one that served the page. For example, if your front-end cooking interface is running on one domain and your Django API is on another, the browser will block the connection for safety. By configuring CORS, your server explicitly tells the browser which external origins are allowed to access its data.

The heart of your application setup is the settings.py file. This is where you register your applications and configure middleware.

In cooking_helper/settings.py, you define which components are active:

  • INSTALLED_APPS tells the framework which features and custom apps are active.
  • MIDDLEWARE is a suite of plugins that process requests and responses. CorsMiddleware is placed at the top to ensure it handles headers correctly.
  • CORS_ALLOW_ALL_ORIGINS is a setting that makes your accessible to external front-end applications by relaxing the browser's same-origin restrictions.
Connecting the Database and Creating Tables

The framework makes database configuration simple by using a centralized dictionary in settings.py. By default, it is configured to use SQLite, which stores your data in a single file.

  • ENGINE: Tells the framework which database engine to use.
  • NAME: Specifies the path to the database file. In this case, it will be recipes.db in your project root.

Unlike other tools where you might manually call a function to create tables, this framework uses a migration system. You use manage.py to sync your database with your code:

This command looks at your INSTALLED_APPS and creates all the necessary tables in recipes.db automatically.

Organizing Routes with URL Configuration

The framework uses a centralized URL configuration system. The main urls.py file acts as a switchboard, routing requests to the appropriate application.

To keep things organized, the main configuration file uses include() to pull in URLs defined inside your specific apps (like recipes).

In cooking_helper/urls.py:

This approach allows each app to manage its own routes, keeping the main configuration file clean and readable.

Running the App

To run your application during development, you use the runserver command provided by manage.py. This starts a local development server.

  • python manage.py runserver is the command to start the server.
  • 0.0.0.0:3000 tells the server to listen on all network interfaces on port 3000.

Sample output when you run the app:

The server will automatically reload whenever you save changes to your code.

Summary and What’s Next

In this lesson, you learned how to:

  • Understand the structure of a project, including manage.py and the configuration directory.
  • Configure global settings in settings.py, including INSTALLED_APPS and MIDDLEWARE.
  • Set up a SQLite database and understand how management commands handle table creation.
  • Enable CORS to allow cross-origin requests by permitting external domains to interact with your API.
  • Organize your application routes using the include() function in a centralized URL configuration.
  • Launch the development server using the management script.

You now have a solid foundation for your AI Cooking Helper. In the next practice exercises, you’ll get hands-on experience setting up these configurations, ensuring your project is ready to serve data for your future recipes!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal