Skip to content

Commit

Permalink
Merge pull request #1847 from kewtree1408/move-away-from-Cloud9
Browse files Browse the repository at this point in the history
Move away from Cloud9 and change the instruction for Chromebook
  • Loading branch information
das-g committed Sep 29, 2024
2 parents 4ab5fdb + 5a29cbb commit f2689ab
Show file tree
Hide file tree
Showing 10 changed files with 34 additions and 174 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added en/chromebook_setup/images/codespace-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added en/chromebook_setup/images/create-new-repo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
189 changes: 17 additions & 172 deletions en/chromebook_setup/instructions.md
Original file line number Diff line number Diff line change
@@ -1,187 +1,32 @@
You can [skip right over this section](http://tutorial.djangogirls.org/en/installation/#install-python) if you're not using a Chromebook. If you
are, your installation experience will be a little different. You can ignore the
rest of the installation instructions.
For people using a Chromebook or those with limited memory on their laptops, we recommend using a cloud IDE environment. This allows you to interact with the command line, Python, and Django directly through your browser, where a code editor is already installed. In case you using this instruction, some steps of the tutorial don't have to be done again ("Deploy/Git" [part](https://tutorial.djangogirls.org/en/deploy/#installing-git) ). You’ll find a more detailed explanation in the “Deploy/Git” section.

### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com)
Your installation experience will be a little different.

Cloud IDE is a tool that gives you a code editor and access to a computer running
on the Internet where you can install, write, and run the software. For the duration
of the tutorial, cloud IDE will act as your _local machine_. You'll still be
running commands in a terminal interface just like your classmates on OS X,
Ubuntu, or Windows, but your terminal will be connected to a computer running
somewhere else that cloud IDE sets up for you.
Here are the instructions for cloud IDEs (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com).
You can choose one of the cloud IDEs, and follow the instruction of the cloud IDE.
1. **Go to [GitHub.com](https://github.com)** and sign up for a new, free user account. Be sure to remember your password (add it to your password manager, if you use one).

#### PaizaCloud Cloud IDE
2. **Create a GitHub project**. Visit [this](https://github.com/new) link, use "my-first-blog" name for your project, and make it public (needed for deployment, you can make it private later). Also, add a `README.md` and `.gitignore` file.

1. Go to [PaizaCloud Cloud IDE](https://paiza.cloud/)
2. Sign up for an account
3. Click _New Server_ and choose the Django app
4. Click Terminal button(on the left side of the window)
![](../chromebook_setup/images/create-new-repo.png)

Now you should see an interface with a sidebar, buttons at the left.
Click "Terminal" button to open terminal window with prompt like this:
3. **Start a Codespace**. Go to GitHub [Codespaces](https://github.com/codespaces/new) and select the repository you just created. Click "Create Codespace".

{% filename %}Terminal{% endfilename %}
```
$
```
![](../chromebook_setup/images/create-new-codespace.png)

The terminal on the PaizaCloud Cloud IDE is prepared for your instructions.
You can resize or maximize that window to make it a bit bigger.
Wait a little bit and you'll see something like that:

#### AWS Cloud9
Currently Cloud 9 requires you to sign up with AWS and enter credit card
information.
![](../chromebook_setup/images/codespace-preview.png)

1. Install Cloud 9 from the [Chrome web store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp)
2. Go to [c9.io](https://c9.io) and click _Get started with AWS Cloud9_
3. Sign up for an AWS account (requires credit card information, but you can
use it for free)
4. In the AWS Dashboard, enter _Cloud9_ in the search bar and click it
5. In the Cloud 9 dashboard, click _Create environment_
6. Name it _django-girls_
7. While configuring settings, select _Create a new instance for environment
(EC2)_ for "Environment Type" and the _t2.micro_ "Instance type" (it should
say "Free-tier eligible."). The default cost-saving setting is fine and you
can keep the other defaults.
8. Click _Next step_
9. Click _Create environment_
The [VSCode](https://code.visualstudio.com) editor will open for you automatically. If you see a notification that says "Install Python", please click on it. If not prompted, click the "Extensions" icon on the left sidebar in the Codespace editor. Search for "Python" and click "Install."

Now you should see an interface with a sidebar, a big main window with some
text, and a small window at the bottom that looks something like this:
![](../chromebook_setup/images/vscode-install-python.png)

{% filename %}bash{% endfilename %}
```
yourusername:~/workspace $
```
The bash terminal (similar to Linux) is at the bottom of the page.

This bottom area is your terminal. You can use the terminal to send instructions
to the remote Cloud 9 computer. You can resize that window to make it a bit
bigger.
![](../chromebook_setup/images/codespace-preview.png)

#### Glitch.com Cloud IDE
By default, the GitHub Codespace environment will be deleted after 1 month (this applies only to the environment, not your code). To prevent auto-deletion, you can adjust the settings on the page: https://github.com/codespaces

1. Go to [Glitch.com](https://glitch.com/)
2. Sign up for an account (https://glitch.com/signup) or use your GitHub account if you have one. (See GitHub instructions below.)
3. Click _New Project_ and choose _hello-webpage_
4. Click on the Tools dropdown list (at the bottom left side of the window), then on Terminal button to open terminal tab with a prompt like this:
![](../chromebook_setup/images/codespace-auto-delete-off.png)

{% filename %}Terminal{% endfilename %}
```
app@name-of-your-glitch-project:~
```

When using Glitch.com as your Cloud IDE, you don't have to create a virtual environment.
Instead, create the following files manually:

{% filename %}glitch.json{% endfilename %}
```json
{
"install": "pip3 install -r requirements.txt --user",
"start": "bash start.sh",
"watch": {
"throttle": 1000
}
}
```

{% filename %}requirements.txt{% endfilename %}
```
Django~={{ book.django_version }}
```

{% filename %}.bash_profile{% endfilename %}
```bash
alias python=python3
alias pip=pip3
```


{% filename %}start.sh{% endfilename %}
```bash
chmod 600 .bash_profile
pip3 install -r requirements.txt --user
python3 manage.py makemigrations
python3 manage.py migrate
python3 manage.py runserver $PORT
```

Once these files are created, go to the Terminal and execute the following commands to create your first Django project:

{% filename %}Terminal{% endfilename %}
```
django-admin.py startproject mysite .
refresh
```

In order to see detailed error messages, you can activate Django debug logs for your Glitch application.
Simply add the following at the end of the `mysite/settings.py` file.

{% filename %}mysite/settings.py{% endfilename %}
```python
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
'handlers': {
'file': {
'level': 'DEBUG',
'class': 'logging.FileHandler',
'filename': 'debug.log',
},
},
'loggers': {
'django': {
'handlers': ['file'],
'level': 'DEBUG',
'propagate': True,
},
},
}
```
This will create a `debug.log` file detailing Django operations and any error messages that might come up, making it much easier to fix if your website does not work.

The initial restarting of the Glitch project should fail.
(If you click on the top dropdown button `Show` then click on `In a New Window`, you will receive a `DisallowedHost` error message.)
Do not worry about it at this stage, the tutorial will fix this as soon as you update the Django settings of your project in the `mysite/settings.py` file.

### Virtual Environment

A virtual environment (also called a virtualenv) is like a private box we can
stuff useful computer code into for a project we're working on. We use them to
keep the various bits of code we want for our various projects separate so
things don't get mixed up between projects.

Run:

{% filename %}Cloud 9{% endfilename %}
```
mkdir djangogirls
cd djangogirls
python3 -m venv myvenv
source myvenv/bin/activate
pip install django~={{ book.django_version }}
```

(note that on the last line we use a tilde followed by an equal sign: `~=`).

### GitHub

Make a [GitHub](https://github.com) account.

### PythonAnywhere

The Django Girls tutorial includes a section on what is called Deployment,
which is the process of taking the code that powers your new web application
and moving it to a publicly accessible computer (called a server) so other
people can see your work.

This part is a little odd when doing the tutorial on a Chromebook since we're
already using a computer that is on the Internet (as opposed to, say, a laptop).
However, it's still useful, as we can think of our Cloud 9 workspace as a place
for our "in progress" work and Python Anywhere as a place to show off our stuff
as it becomes more complete.

Thus, sign up for a new Python Anywhere account at
[www.pythonanywhere.com](https://www.pythonanywhere.com).
4. **Continue with the tutorial**. Follow the next steps from the section [Set up virtual environment and install Django](https://tutorial.djangogirls.org/en/installation/#virtualenv).
Follow than sections for Ubuntu/Linux. Use the Codespaces command line (terminal), accessible through your browser.
17 changes: 16 additions & 1 deletion en/deploy/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,26 @@ As you learned, a website has to be located on a server. There are a lot of serv

The other external service we'll be using is [GitHub](https://www.github.com), which is a code hosting service. There are others out there, but almost all programmers have a GitHub account these days, and now so will you!

These three places will be important to you. Your local computer will be the place where you do development and testing. When you're happy with the changes, you will place a copy of your program on GitHub. Your website will be on PythonAnywhere and you will update it by getting a new copy of your code from GitHub.
These three places will be important to you. Your local computer will be the place where you do development and testing. When you're happy with the changes, you will place a copy of your program on GitHub. Your website will be on PythonAnywhere and you will update it by getting a new copy of your code from GitHub.

The deployment process can be illustrated as follows:

![](../deploy/images/deployment_local.png)

If you’re using a **Chromebook** and [GitHub Codespaces](https://github.com/codespaces), your setup will look a bit different. All code-related changes are made not locally on your **Chromebook**, but in the Cloud Environment provided by GitHub.

The deployment process on **Chromebook** and Cloud environment can be illustrated as follows:

![](../deploy/images/deployment_cloud.png)

# Git

> **Note** If you already did the [installation steps](../installation/README.md), there's no need to do this again – you can skip to the next section and start creating your Git repository.
{% include "/deploy/install_git.md" %}

> **Note** If you're using a **Chromebook** and have already completed the **Chromebook** Installation [part](../chromebook_setup/README.md), you've already created the repository and can **skip** all commands from the "Starting our Git repository" and "Ignoring files" chapters. You can continue from the "First Git commands" chapter. While you’re welcome to read these chapters, the Terminal commands can be skipped.
## Starting our Git repository

Git tracks changes to a particular set of files in what's called a code repository (or "repo" for short). Let's start one for our project. Open up your console and run these commands, in the `djangogirls` directory:
Expand Down Expand Up @@ -80,6 +92,9 @@ Instead use `ls -a` to see the `.gitignore` file.

> **Note** One of the files you specified in your `.gitignore` file is `db.sqlite3`. That file is your local database, where all of your users and posts are stored. We'll follow standard web programming practice, meaning that we'll use separate databases for your local testing site and your live website on PythonAnywhere. The PythonAnywhere database could be SQLite, like your development machine, but usually you will use one called MySQL which can deal with a lot more site visitors than SQLite. Either way, by ignoring your SQLite database for the GitHub copy, it means that all of the posts and superuser you created so far are going to only be available locally, and you'll have to create new ones on production. You should think of your local database as a good playground where you can test different things and not be afraid that you're going to delete your real posts from your blog.

### First Git commands

It's a good idea to use a `git status` command before `git add` or whenever you find yourself unsure of what has changed. This will help prevent any surprises from happening, such as wrong files being added or committed. The `git status` command returns information about any untracked/modified/staged files, the branch status, and much more. The output should be similar to the following:

{% filename %}command-line{% endfilename %}
Expand Down
Binary file added en/deploy/images/deployment_cloud.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added en/deploy/images/deployment_local.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion en/django_start_project/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ match our hostname on PythonAnywhere once we deploy our application so we will c

{% filename %}mysite/settings.py{% endfilename %}
```python
ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com']
ALLOWED_HOSTS = ['localhost', '127.0.0.1', '.pythonanywhere.com']
```

> **Note**: If you're using a Chromebook, add this line at the bottom of your settings.py file:
Expand Down

0 comments on commit f2689ab

Please sign in to comment.