Skip to content

Commit

Permalink
Added the docs for customize-ui.mdx #1
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenFaruna
BenFaruna committed Aug 10, 2023
1 parent 9175517 commit 0e5a281
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 8 deletions.
188 changes: 181 additions & 7 deletions docs/10-django-generaror/customize-ui.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,192 @@ sidebar_label : Customize the UI

# Customize the UI

This article needs to explain:
## Introduction
Rocket generator is an app generator application that allows you to choose your favourite design, customize, and generate Apps and APIs on top of Django, a leading Python framework. It is built to provide pixel-perfect kits and designs crafted by well-known agencies like Creative-Tim, CodedThemes, and others. It also supports DB Models customization, Authentication, Docker, and CI/CD flow. Applications that are generated can be cloned from a GitHub repository, where they are stored for future use and assistance.

- How to generate an app using Rocket-Generator
- Clone the generated repo
- Customize the HOMEpage
- Create a new page using the Library
## How to generate an app from Rocket-Generator
- To start generating applications with Rocket-Generator, visit the website [https://app-generator.dev/](https://app-generator.dev/). You can sign in or generate applications without an account on the platform, you can check out the optional payments plan that unlocks additional features and support.

@ToDO
- Once the homepage is loaded, click on `Generate Apps` to open the page that brings up the menu that will be used to generate the application.

![Rocket Generator 1](https://github.com/app-generator/dummy/assets/57325382/8f42e02d-6dbf-4eec-88c0-59617c9ebfaa)

- The page that generates the applications has different sections that perform various functions.

![Rocket Generator 2](https://github.com/app-generator/dummy/assets/57325382/51f2fab7-6649-4a13-91e5-457727fba459)

![Rocket Generator 3](https://github.com/app-generator/dummy/assets/57325382/7d6e4dac-034b-4630-b97a-4e859d9385cd)

1. The Design section allows you to select your preferred layout, you can change the design using the arrow keys.
2. In the Database and Tables section, you can modify the default database and connection used by the application, and the default tables created with it. You can add new fields to the user table and create new tables using the `Add model` button.

![Rocket Generator 4](https://github.com/app-generator/dummy/assets/57325382/0a002d5c-0c1f-4a04-a0ba-c20a13652d9c)

![Rocket Generator 5](https://github.com/app-generator/dummy/assets/57325382/c8704216-ba2b-4c3e-9a31-2d8f308c83cf)

3. The Misc Settings section allows you to make changes to the Authentication method and the deployment settings of the application.
4. Product section shows an overview of the features that you selected and enabled for the application.

- Click on the `Generate` button to generate your application. After the click, a popup informs you that you can get the application on the `tasks` page. Use the button to visit the `tasks` page.

![Rocket Generator 6](https://github.com/app-generator/dummy/assets/57325382/81dbebb0-652e-4690-91d2-a86fca5c9354)

- If the task is not completed, wait for a few seconds, and your application will be ready for you to work on. The application can be downloaded as a zip file, or you can use the button to visit the GitHub repository where the application is hosted after being generated.

![Rocket Generator 7](https://github.com/app-generator/dummy/assets/57325382/75b79e92-e5ed-447e-bfd3-85dbed62e918)

## Clone the generated repo
- Once the application has been generated, it can be cloned from the GitHub repository. Use the GitHub link on the tasks page to visit the repository where the application is stored.

- Copy the repository link from your browser URL or use the dropdown menu from the `code` button. After copying the repository URL, open your terminal and run the following command.

```sh
$ git clone <the-link-you-copied>
$ cd <the-generated-application-folder>
```
After the application is cloned, it is time to set up the application for further development on your local machine.

- Create a virtual environment and activate it using the command.
```shell
$ virtualenv env
$ source env/bin/activate # on Linux/Mac
$
$
$ .\env\Scripts\activate # on Windows
```

- After creating and activating the virtual environment, install all the dependencies for the application using the command.
```shell
(env) $ pip install -r requirements.txt
```

- Running the following command will set up the database, and the application will be ready to be executed and modified.
```shell
(env) $ python manage.py makemigrations
(env) $ python manage.py migrate
```

- Run the application using the command below and visit [http://127.0.0.1:8000/](http://127.0.0.1:8000/) on your browser to view the application.

![Rocket Generator 8](https://github.com/app-generator/dummy/assets/57325382/48a78e7f-7f64-46ef-8198-45ed7726add9)

## Customizing the homepage
To customize the homepage, we need to copy the original file that needs an update (from the virtual environment) and place it in the template folder using the same path. To customize the application homepage, we will use context variables. Here are the steps you need to follow to make the necessary changes:

- Create the `templates` directory inside the `home` app
- Copy `index.html` from `<PROJECT_ROOT>/env/LIB/admin_soft/pages/` into `<PROJECT_ROOT>/home/templates/pages/`.
- Update `home/views.py` by adding context.
```py
# home/views.py
...
def index(request):
data = {'heading': 'Tutorial Dashboard'} # <-- NEW
# Page from the theme
return render(request, 'pages/index.html', context=data) # <-- UPDATED
```

- Update the code in `home/templates/pages/index.html` by adding this code to render the heading on the homepage.
```html
<!--home/templates/pages/index.html-->
...
{% block content %}

<div class="container-fluid py-4">
<h1>Context Data: {{heading}}</h1>
...
```

Using the context data can be sent from the backend of the application to be rendered on the frontend.

## Creating a new page using the Library
Django provides a simple way to create and manage pages on your website while utilizing the default original layout of the application. For this section of the tutorial, we will be creating a new page containing a table, to demonstrate how we can create a new page for the application.

- To create a new page using the Library, you first need to create a new template file in the `templates/pages` directory of your project. Create a new file `authors.html` in the `templates/pages/` directory and add the following content.
```html
<!-- templates/pages/authors.html -->
{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}
<h1>Authors' Table</h1>
<div class="container-fluid py-4">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@cat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
{% endblock content %}
```
The new page can be customised to suit its purpose.

- After the creation of the page, create a controller in `home/views.py` that renders the page just created. Make the following changes to `home/views.py`
```py
# home/views.py
...
def authors(request):
return render(request, 'pages/authors.html')
```

- Now that there is a controller for the author's page, the next step is to create a route that utilizes the controller just created. Modify the code in `home/urls.py`
```py
# home/urls.py
...
urlpatterns = [
path('', views.index, name='index'),
path('authors', views.authors, name='authors'), # <-- NEW
]
```

- The last step that is needed for the new page to be accessible from the `authors` route, is to register a route that points to the `home` app on the list of URLs in the `core` project. This way routes created in the `home` application can be accessible when their routes are visited.
```py
# core/urls.py
...
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("home.urls")), # <-- NEW
path("", include("admin_soft.urls")),
]
...
```
The home route is placed before the `admin_soft` library route to give precedence to routes present in the `home` app since `home` and `admin_soft` are both accessible from the same base route.

- Restart your Django server and visit [http://127.0.0.1:8000/authors](http://127.0.0.1:8000/authors) to see the new page just created.

![Rocket Generator 9](https://github.com/app-generator/dummy/assets/57325382/612dcab1-57c1-407c-9268-75dd55a6cb4b)

## Conclusion
In conclusion, this tutorial has provided a guide to get you started on generating, customizing, and expanding your app using Rocket-Generator. We began by exploring the efficient process of generating an app, which laid the foundation for our project. The step-by-step instructions on cloning the generated repository enabled us to seamlessly transition into the project environment. The tutorial equipped us with the knowledge to expand our app's functionality by creating new pages using the UI Library. This dynamic feature empowers us to continually enhance the app's capabilities, ensuring that it remains relevant and adaptable to changing user needs.

By combining these subtopics, we've covered the entire process of creating, personalizing, and extending an app using Rocket-Generator. With this newfound understanding, you're now equipped to embark on your app development journey with confidence. Remember that the world of app development is ever-evolving, so don't hesitate to explore further, experiment with new features, and continue learning to stay at the forefront of innovation. Happy app building!

<br />

## Resources

- 👉 [Generate Django Apps](https://app-generator.dev/) using `Rocket Generator`
- 👉 Join the [Community](https://discord.gg/fZC6hup) and chat with the `support` team
- 👉 Join the [Community](https://discord.gg/fZC6hup) and chat with the `support` team
2 changes: 1 addition & 1 deletion docs/20-deployment/django-aws.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ This article needs to explain:
- Clone the generated repo

Once you’re on GitHub, find the main page of the repository.
Once you’re there, click <> Code. There, you should see an option to clone.
Once you’re there, click <></> Code. There, you should see an option to clone.
Next, copy the URL.
Depending on your system, you’ll use Terminal (with Mac) or Command line (with Windows git bash) to move it to your local directory.
Use your Git clone command and the copied URL.
Expand Down

0 comments on commit 0e5a281

Please sign in to comment.