So far in this homework series, we've installed and talked about a number of software packages - Docker, Visual Studio Code, and Expo Go. On their own, none of these packages do much for us, but in the next two homework assignments, we are going to combine their use.

First thing - you'll need to have Docker running. Once it is loaded and you see a green bar in the bottom left corner, click the search bar at the top (green arrow) and type 'dubway' (purple) . Under the search results for Images (blue), there should be one called dubway4201/expo_test (red). Once you've clicked this, an option to pull this image should come available (yellow). This will load a Docker image that I have created especially for this homework assignment.

Next, load up Visual Studio Code. Ensure you have the Docker and Remote Explorer Extensions installed. They should appear as buttons on the left hand side (highlighted in red below). If you can't see them both, simply install them using the Extensions button (yellow).

Clicking on the Docker extension button, we should now see the image we just downloaded. Click it, and the 'latest' option should appear. Right click it, and the option to 'Run Interactive' should appear (green) - chose that.

If everything has gone to plan, we should have a container running based on our image we just downloaded - this is a virtual computer within your computer that has all the required software packages and configurations needed to run an app. You should see the container running above the list of images we just used. Right click it and choose 'Attach Visual Studio Code'. This will open another instance of Visual Studio Code within this container. You should now move to working in this new VS Code window.

Let's take a look around this new window - there's not much to see just yet. One thing we can do is open a command line terminal by selecting the menu items highlighted in the following image. A terminal should now appear at the bottom of the screen. You might have guessed that the container is running a version of Linux. Some of you reading this might be totally unfamiliar with a command line interface and Linux - that's totally fine, we will learn how to use it step by step. At this stage, you might want to have a mess around with the command line interface, try out a few commands.

There are loads of resources online for learning Linux command line. If this confuses the hell out of you or a lot of stuff comes up that you don't understand, don't worry - all will be explained.

In the next homework, we will be learning how to make a rudimentary app and loading it up on our devices using Expo Go. Well done and thanks a lot.

Go to the Docker Hub Website and create an account. Once your account is created, you should be able to now log in via the Docker application.

Now we've installed Visual Studio Code, we're going to customise it a bit to our needs. You might want to adjust the colour theme or a few other settings. Once you've done that, we're going to add some extensions

Click on the Extensions button and start searching for a few that we might find useful. I recommend:

• Docker (allows use functions from Docker without it open)
• Babel Javascript (aids in our writing of JavaScript)
• Dev Containers (allows us to use some features of Docker from within VS Code)
• Any other extension you like the look of or might find useful!

Once you've done this, you're ready for the next assignment!

Now we have a code editor set up, let's edit some code!

There are two types of project in software development:

• Greenfield Projects: where we start completely from scratch, we have no existing files to edit or work from.

• Brownfield Projects: where there is some existing code that we are going to work from and build on. This might be an existing project that isn't yet complete, or a project that we want to add some functionality to

The project we are working on here is of the latter variety - we have some existing code that does various things, we are going to finish it by adding more features.

Where are you going to get this existing code from? You might have already guessed by looking around this website - it is right here!

If you look on the Code tab of this page, you will see the files that already exist for this project. You'll see a number of files with the .js extension, maybe have a click on a few and look at the code within. Don't worry if these looks an indecipherable mess at this point, we will be going through it bit by bit.

The task of this assignment is going to be to load the code from this project into Visual Studio Code so that we can read and edit it. We could just download it and open it up, but there's actually a much better way - using Git!

Git is known as a version control system (VCS). Version control can be thought of as like save game files when playing a computer game - if we keep all the save games and don't override, we can jump back through the history of our playthrough and carry on from any point.

We shouldn't just think of Git as a progress saving feature, it also enables collaboration. You might have guess why this website is called Github - because it is one of several online repositories for Git projects, just like this one. With all of us having access to this central repository, we can each work on different bits of the code and then retain them in the same place.

Now, lets use Git to load the code from this project into VS Code. Click on either the Explorer button (top left) or source control. You should now see the option to Clone Repository - click this and a menu should drop down from the top centre.

You should see an option to "Clone from GitHub" click on this and a dropdown menu should show an option of this project - dubway420/express-accounts-native. Clicking on this should see you prompted to choose a location on your computer (this can be anywhere).

The repository should now be loaded onto your machine, How a browse through the files and folders, don't worry about messing anything up. As we shall learn in the next assignment, permanently messing anything up in a Git repository is literally impossible!

Now we've cloned the repository to our local computers, it is time to start doing something with it.

The first thing we are going to do is explore branches. You can probably guess what a branch is from the name - it's a splitting off of the code along another path. To go back to our gaming analogy from the previous assignment, different branches can be thought of as different play throughs of the same game. Of course we can go back to an earlier saved game and start a new branch from there, maybe going a completely different direction. The big difference is that diverging Git branches can be merged together again later, but we'll talk about that later.

Git branches allow us to do a few useful things which you can probably guess a few of. They allow us to:

1. Test out different approaches to a problem
2. Work on separate issues without them causing conflicts
3. Allow us to do some exploration and try out "what ifs"

The project repository already has several branches, lets take a look at what they are. Load up Visual Studio Code on your computer and make sure the folder is open for our repository. Take a look in the bottom left hand side of the screen - you should see a small but that says 'master' - this indicates you are on the master branch (circled in red). If all of the other paths are for development, testing and so on, the master branch can be though of as "finished work" or the closest to the final product we have at the present time.

Click on the 'master' button and you should see the branches that already exist in this repository (green) and you should see some options regarding new branches. Let's click "create new branch from" to create a new branch of our own. We'll then select 'signup' as the branch to create it from - this means that all of the files currently in the signup branch will be copied to our branch. You'll then need to enter a name for the branch which you should just put your name or something else easy to identify.

Once you've created your branch, it now only exists on your computer. We need to send (or push) our changes to the remote server. To borrow once again from the analogy of computer games, we need to sync our same games with the cloud. There should be a prompt to enter a message and a Publish button. It is very good Git practice to think up something meaningful to enter when adding these messages. It's good to be concise yet meaningful so that you can tell someone reading this in the future - possibly yourself - exactly what you've done here. For now, lets just enter "creating my branch" and hit Publish.

Now, if all has gone well, you should be able to head back over to the <> code tab, click on the branches button (should say 'master' by default) and now see your branch in the list. Congratulations! You've just hit some very important milestones in your software engineering journey. You've:

1. Learn what Git branches are and how they are useful
2. Created your own branch from another existing branch
3. Committed changes along with a meaningful commit message
4. Pushed those changes to the remote repository

These might all seem like little things, but in the grand scheme of computer programming, these are fundamental skills to have. Knowing how to version control your work is almost as important as doing the work in the first place.

In the next lesson, we will be modifying the code and committing your changes. See you then.

In this homework assignment, we are going to be making a rudimentary app and loading it onto an iOS or Android device with Expo Go. If you've followed homework assignments 1 - 9, you already have your computer set up to do this and have learned all the skills you need to do it. We are going to be using a framework called React Native to do this. React Native, as well as its predecessor React, has been developed by the company behind Facebook. A number of apps you use every day were created using React Native - Microsoft Teams and Outlook, Discord, as well as the Facebook app itself.

If you are coming to this homework assignment straight from the end of homework 9, you currently have an image downloaded called "expo_test", you have it running as an container and you have that container loaded in a dedicated VS Code window. If not, go back to the end of homework assignment 9 and get back to this point.

Now we are going to generate a simple app. With the terminal open, enter the following command and press enter:

npx create-react-native-app my-app

Lets break this down - we are running software called npx, we are using the command create-react-native-app and we are creating an app called my-app. By the way, we can change my-app to anything else we want, but you'll need to change it in all subsequent commands too.

Upon entering the command we discussed above, we are presented with some options:

Let's go with "Template from expo/examples". We are then given a list of example apps that we can chose from. You are free to chose any of the templates that you want and I recommend trying out a few different ones after you finish this tutorial. However, for now I recommend navigation as it is nice and simple. When you press enter, the system will start installing all the required packages you need for this app to work which might take about 5 minutes. Eventually you should see a message saying that it was successfully installed.

A folder has now been created in this directory that contains all the files for this app. Do you know how to move the terminal into this folder? As a little test, I want you to figure it out. It's very simple: either search online how to change directory in a Linux terminal or ask someone you know. The command might be right there on the terminal already. If you get stuck, message me or write a reply in the comments below.

Once you you're in the directory for the app, you are going to run the app and load it onto a device. Type and enter the following command:

yarn start --tunnel

You might be asked to install some extra packages associated with Expo. This is fine and you should press the Y key to accept. Once all that is done, we now have a server running which allows you to access the app via our devices. You should be presented with something similar to the below which includes a QR code.

Don't worry about the warning regarding the version of React Native being slightly out of date. You can either safely ignore it or try to fix it using the commands it offers.

Now, pick up your Android or iOS device - it needs to be connected to the same network as your computer that VS Code is running on. Also, if you are using a VPN, now might be a good time to temporarily disable it. f you are using Android you should load up the Expo Go app and use the QR scanner option. If you are using iOS, simply scan the QR code with your camera and follow the link. Either way, a loading screen should appear on your device followed by the app being loaded up. If you went with the navigation example, you should see something like this:

You now have your very own very simple app! Congratulations, you've just taken a huge leap towards becoming an app developer. To close it down, click on the terminal and press Ctrl+c. To make another app, perhaps using one of the other examples, navigate to the parent directory of the current one and repeat the above process again.

In the next homework assignment, we will be editing parts of the code in order to customise our app.

During this project we will be reading, writing and reviewing a lot of source code. What is source code? Code is just a series of text commands that tell the computer what to do. It is meant to be understandable by both humans and the computer.

Just like for natural communication, source code comes in several different languages. However, unlike natural language, you can't mix programming languages!

How do we write code? Source code is written in text files with an extension associated with the programming language we are using. In this project, we will mostly be using JavaScript, so we will save our files in .js files, for example main.js or intro.js, whereas Python uses .py files.

You can open up and edit a source code file with any text editor on your computer - Wordpad, Notepad and so on. There also exists a range of specially designed software packages designed specifically for reading and writing code. These packages make the process easier by highlighting various parts of the code, making suggestions whilst you type, or highlighting potential errors.

These packages are often referred to as integrated development environments (IDEs) and there are a few to chose from. As your experience with reading and writing code develops, you might decide that a particular IDE suits your style better, or you just prefer the layout and look of one.

The IDE I recommend is Visual Studio Code. I've used a few IDEs in my time and I have found this one to be the easiest and feature rich. Go ahead and download Visual Studio Code from the website and then load it up. When you've started the application, have a mess around with the interface. This is your only challenge for this assignment!

We're almost ready to start developing our app! Before we can do that, we need a way to test out our app whilst it is being developed. Eventually, it will be released onto the app stores and we can download it like any other app we might use. Until then, we need Expo Go - this is an app that let's us run apps which we are building.

Pick up an Android or Apple device - it can be a tablet or phone. Browse the app store for the Expo Go app. Install it and load it up.

That's it for today's lesson! A nice easy one. Next week we will be creating a demonstration app and loading it up on our devices through Expo Go.

Go to the Docker website, install and run it. When it is running, you should see a yellow bar in the bottom left corner with the Docker symbol on it - this means Docker is running.

The next thing you are going to do is download a Docker image to your computer. Think of a Docker image as like a copy of an entire computer - all the same files and programmes will be on this image. It will allow us to produce our application in the exact same computer environment.

On Docker Hub, there are thousands of images which are used for all sorts of things. Take a browse through the images on Docker Hub - you can do this via the webiste or the Docker application. Pick an image you like the look of, maybe one with something to do with JavaScript.

One you've picked a Docker image, your task is to pull this image to your computer. This is quite a simple thing to do, but might be a bit of a challenge if you've never done anything like this before.

You might be able to figure out how to do it by messing around in the Docker application, or you can look it up on a website.

Hint: there's more than one way to do it. You can do it via the Docker application or via a command line interface such as Windows Powershell.