Mobile App Development & AI

In Module 1 you built your foundation. You now understand what mobile apps are, how AI has transformed the way they are built, what tools exist, and what career opportunities await you. That knowledge is your compass — it tells you where you are going and why.

Module 2 is where you pick up your tools and begin. This is the most practical module in the entire course — because by the time you finish it, you will have every tool set up, tested and ready to use on your own device. Whether you are working from an Android phone, an iPhone, or a laptop — this module has a clear, step by step path for you.

Do not rush through this module. Every step matters. Every tool you set up here will be used repeatedly throughout the rest of the course. A properly set up environment means smooth, frustration-free building in every module that follows. A poorly set up environment means constant interruptions and confusion later. Take your time here and do every step properly the first time.

One very important thing before we begin — you do not need to set up every tool on this list today. This module is structured so that each section covers one tool at a time. Read the section, follow the steps, confirm the tool is working, then move to the next. By the end of Module 2 everything will be in place and you will be ready to build your first real app in Module 3.

By the end of this module you will have the following fully set up and working on your device:

✅ A Bolt.new account — your primary AI app builder, accessible from your phone or laptop browser. Ready to build your first app from a description.

✅ A FlutterFlow account — your visual AI-powered Flutter app builder. Set up, explored and ready to use on phone or laptop.

✅ Gemini AI — your personal AI development assistant. Downloaded or bookmarked and ready to answer every question you have as you build.

✅ ChatGPT — your second AI assistant for code help, explanations and problem solving. Set up and ready.

✅ A GitHub account — your code storage and backup system. Created, configured and linked to your projects so your work is always safe.

✅ Sketchware Pro (Android phone users only) — downloaded, installed and explored. Ready for native Android development directly on your phone.

✅ Acode (Android phone users) — your phone code editor. Installed, configured with syntax highlighting and ready to open and edit your project files.

✅ Cursor AI (laptop users) — downloaded, installed and configured with your first Flutter project open and visible.

✅ Firebase — your app database and backend. Account created, first project set up and ready to connect to your app in Module 6.

Bolt.new is the first tool we set up in this course and for very good reason — it is the fastest way to go from an idea to a working app. No installation. No complicated configuration. No code to write before you can see results. You open it in your browser, describe your app, and within minutes you are looking at a real, functioning application that AI has built for you from your words alone.

Bolt.new works on any device that has a browser and an internet connection. It does not matter whether you are on an Android phone, an iPhone, a tablet, a laptop or a desktop computer — Bolt.new works the same way on all of them. This is one of the reasons it is the perfect starting tool for every student in this course regardless of what device they have.

In this section we will set up your Bolt.new account step by step, explore the interface together so you know exactly what you are looking at, and then you will build your very first AI-generated app — right here, right now, before this section is over. By the time you finish 2.1 you will have already built something real.

Follow every step below carefully. Do not skip any step. Each one is there for a reason and skipping even one can cause confusion later.

📱 Phone Users — Follow These Steps:

Step 1 — Open the browser on your phone. This can be Chrome, Firefox, Opera Mini or any browser you have installed. Any of them will work.

Step 2 — In the address bar at the top of the browser type exactly this address: bolt.new and press Go or Enter on your keyboard.

Step 3 — The Bolt.new homepage will load. You will see a large text box in the centre of the screen with the words "What would you like to build?" or similar. This is the prompt box — this is where you describe your app to AI.

Step 4 — Before you type anything, look for a Sign In or Get Started button — usually in the top right corner of the page. Tap it.

Step 5 — You will be given options to sign in. Choose Continue with Google — this is the fastest and easiest option. Select the Google account you want to use for your development work.

Step 6 — Once signed in you will be returned to the Bolt.new main screen. You will now see your account icon or initial in the top right corner. This confirms you are logged in and your account is active.

Step 7 — Write down in your "My Dev Tools" note: Bolt.new — logged in with [your Google account email]. This is important for future reference.

💻 Laptop Users — Follow These Steps:

Step 1 — Open your browser on your laptop. Chrome or Firefox is recommended for the best experience with Bolt.new.

Step 2 — In the address bar type: bolt.new and press Enter.

Step 3 — The Bolt.new homepage loads. On a laptop screen you will see the full interface — the prompt box in the centre, example prompts below it, and navigation options at the top.

Step 4 — Click Sign In or Get Started in the top right.

Step 5 — Choose Continue with Google and select your Google account.

Step 6 — Once signed in, confirm your account icon appears in the top right. You are now logged in and ready.

Step 7 — Write down in your "My Dev Tools" note: Bolt.new — logged in with [your Google account email].

Before you build anything, spend two minutes understanding what you are looking at on the Bolt.new screen. Knowing the interface means you never waste time searching for things — you know exactly where everything is and what it does.

The Prompt Box — This is the large text input area in the centre of the screen. This is where you type your app description. It is the most important part of the entire interface — because everything Bolt.new builds starts from what you type here. The better and more detailed your description, the better and more accurate the app AI builds for you.

The Send Button — After typing your prompt, you press the Send button — usually an arrow icon — to submit it to AI. AI immediately begins reading your description and generating your app.

The Preview Panel — Once AI has built your app, a preview appears on the right side of the screen on laptop, or below the prompt area on phone. This shows you exactly how your app looks and you can interact with it — tapping buttons, navigating between screens — just like a real app on your device.

The Code Panel — On the left side of the screen you will see the files and code that AI has generated. Do not be intimidated by this. You do not need to read or edit this code manually — but it is useful to know it is there and that AI manages it for you automatically.

The Chat Area — Below the preview you will see a chat input where you can continue giving AI instructions. This is where you type your refinement prompts — telling AI what to change, add or fix in the app it has already built.

The Project History — On the left panel or in the menu you will find all the projects you have previously built. Every app you create in Bolt.new is saved here automatically so you can come back to it at any time.

This is the moment you have been building towards. You are about to build your first real app using AI. It will not be perfect. It will not be finished. But it will be real — and completing it will prove to you that everything you have learned in Module 1 is true. You can build apps. AI makes it possible. And it starts right now.

Follow every step below exactly as written. Do not change the prompt yet — use the exact prompt given so that your first experience is smooth and successful. Once you have seen it work, you will know exactly how to use your own prompts going forward.

Step by Step — Build Your First App Now:

Step 1 — Make sure you are logged into Bolt.new on your phone or laptop browser.

Step 2 — Click or tap inside the prompt box — the large text input area in the centre of the screen.

Step 3 — Type the following prompt exactly as written:

"Build me a mobile app for a school notice board. The app should have a Home screen that displays a list of announcements. Each announcement should show a title, a date, and a short description. There should be an Add Announcement button at the bottom of the screen. Use a dark blue and gold colour scheme. The app should look clean, modern and professional."

Step 4 — Press the Send button and wait. Do not close the browser or navigate away. AI is now reading your prompt and building your app. This usually takes between one and three minutes.

Step 5 — Watch the screen as AI works. You will see code appearing in the left panel and the app preview building up on the right — or below on phone. This is AI generating your app in real time. Every line of code you see appearing is AI building your app from your description.

Step 6 — When AI finishes, your app preview will appear. Tap or click on the preview to interact with it. Try tapping the Add Announcement button. Scroll through the announcement list. Navigate between any screens that were generated. You are using an app that did not exist ten minutes ago — and you built it.

Step 7 — Now make your first refinement. In the chat box below the preview, type: "Change the header text colour to gold and make the announcement cards slightly rounded with a subtle border." Press Send and watch AI update the app instantly.

Step 8 — Take a screenshot of your completed app preview on your phone or laptop. This is your first app. Save it — it is the beginning of your portfolio.

What you just did is not small. Let us be very clear about what actually happened in those few minutes so you fully appreciate what you have just accomplished.

You wrote a description of an app in plain English. AI read that description, understood what you wanted, generated the complete user interface — every screen, every button, every colour, every layout — and wrote all the code that makes it work. You did not write a single line of code. You did not install any software. You did not need a powerful computer. You had an idea, you described it, and AI built it. That is the power you now have access to.

In the old world of app development, what you just built in three minutes would have taken an experienced developer at least two to three days — writing code, designing layouts, testing and fixing errors, over and over again. You did it in minutes. That is not luck. That is the AI way. And you now know how to do it.

Every app you build from this point forward follows the same process — describe clearly, review carefully, refine precisely, and repeat. The more you practise this process, the faster and better your apps become.

During your first experience with Bolt.new you may encounter one or more of the following issues. Each one is common, each one is normal, and each one has a simple solution. Read through all of them now so that if they happen to you, you already know what to do.

Issue 1 — The page loads slowly or times out. This is usually a network speed issue. Solution: Check your internet connection. If you are on mobile data, move to an area with better signal or connect to WiFi if available. Reload the page and try again. Bolt.new requires a stable internet connection to communicate with AI and generate your app.

Issue 2 — AI generates something different from what you described. This happens when the prompt is not detailed enough. Solution: Do not delete the project and start again. Instead use the chat box to give AI more specific instructions about what needs to change. For example — if the colours are wrong, type exactly what colours you want. If a screen is missing, describe it and ask AI to add it. Refining is always faster than starting over.

Issue 3 — The preview does not appear or shows an error. Solution: Look at the error message in the preview panel. Copy it and paste it into the Bolt.new chat box with the message: "I am seeing this error in the preview. Please fix it." AI will read the error and fix it automatically.

Issue 4 — The free plan runs out of credits. Bolt.new offers a limited number of free generations per day on the free plan. Solution: If you reach the daily limit, note down what you were working on and return the next day when your credits reset. Alternatively, use FlutterFlow — which we set up in section 2.2 — to continue building while you wait.

Issue 5 — The app preview works in the browser but looks different on a real phone. This is normal in early development. Solution: In Module 7 we cover testing on real devices in full detail. For now, focus on building and refining in the browser preview. The real device testing comes later when your app is more complete.

FlutterFlow is one of the most powerful tools you will use throughout this course. While Bolt.new is excellent for quickly generating a complete app from a description, FlutterFlow gives you a deeper level of control — you can see every element of your app visually, click on anything to change it, connect it to a real database, and export professional Flutter code that can be published directly to the Google Play Store and Apple App Store.

FlutterFlow is used by professional developers and startups around the world to build and launch real apps that real people pay for and use every day. The apps you build in FlutterFlow are not demos or student projects — they are production-ready, professional applications. That is the level of tool you are working with in this course.

FlutterFlow works in a browser — which means it runs on your phone, your tablet, your laptop or your desktop. No installation required. Open the browser, log in, and you are building. Follow every step in this section carefully and by the end of it you will have your FlutterFlow account set up, the interface explored, and your first FlutterFlow project created and ready to build on.

📱 Phone and 💻 Laptop Users — Follow These Steps:

Step 1 — Open your browser on your phone or laptop. In the address bar type: flutterflow.io and press Go or Enter.

Step 2 — The FlutterFlow homepage loads. You will see a professional-looking website with examples of apps built using FlutterFlow. Take a moment to scroll through and see the quality of apps this tool produces. These are the kinds of apps you will be building.

Step 3 — Look for the Get Started or Sign Up button — usually in the top right corner or the centre of the page. Tap or click it.

Step 4 — Choose Continue with Google — use the same Google account you used for Bolt.new. Using the same account across all your development tools keeps everything organised and easy to manage.

Step 5 — After signing in you will be taken to the FlutterFlow dashboard. This is your home base inside FlutterFlow — where all your projects live and where you create new ones.

Step 6 — You may be asked to choose a plan. Select the Free plan for now. The free plan gives you enough features to complete this entire course and build multiple real apps. You can upgrade later when you are ready to publish to the app stores.

Step 7 — Write in your "My Dev Tools" note: FlutterFlow — logged in with [your Google account email].

The FlutterFlow dashboard is the first screen you see after logging in. It is clean, organised and straightforward. Here is what you will see and what each part does:

My Projects — This is the main area of the dashboard. Every app project you create in FlutterFlow appears here as a card with the project name and a thumbnail. When you are returning to work on an existing project, you click its card here to open it.

Create New Project Button — This is the button you tap or click to start building a new app. It is usually a large prominent button — either a plus icon or the words "New Project." Every new app you build starts here.

Templates — FlutterFlow provides a library of ready-made app templates that you can use as a starting point. Instead of building from a blank screen, you choose a template that is close to what you want and then customise it. This can save significant time especially for common app types like e-commerce, social, or education apps.

Account and Settings — In the top right corner you will find your account icon. Clicking it gives you access to your profile, billing, and account settings.

Now we create your first FlutterFlow project. This project will be your practice space — the place where you explore the interface, try things, make mistakes, and learn without any pressure. Follow every step carefully.

Step by Step — Create Your First Project:

Step 1 — From the FlutterFlow dashboard tap or click the Create New Project button.

Step 2 — You will be asked to give your project a name. Type: MyFirstApp — no spaces, exactly as written. FlutterFlow project names cannot contain spaces.

Step 3 — You will be asked to choose a starting point. Select Blank App — this gives you a completely empty canvas to build on. This is the best starting point for learning because you build everything yourself and understand every part of what you are creating.

Step 4 — You may be asked to choose your target platform. Select Android and iOS — this tells FlutterFlow you want your app to work on both types of devices. This is the cross-platform approach we learned about in Module 1.

Step 5 — Click or tap Create Project. FlutterFlow will now set up your blank project. This takes about 10 to 30 seconds. Wait for it to finish without closing the browser.

Step 6 — When it finishes you will be taken directly into the FlutterFlow editor — the main building interface where you design and build your app. This is a significant moment. You are now inside a professional app builder. Take a breath and look around before doing anything.

The FlutterFlow editor is where all the building happens. It has several panels and areas — each with a specific purpose. Spend time understanding this interface now because you will be using it in every module from this point forward.

The Left Panel — Widget Tree and Pages: On the left side of the editor you will see a list of pages in your app and a widget tree showing every element on the current page. A widget in Flutter is any visual element — a button, a text label, an image, a card, a column of items. Everything you see in your app is a widget. The widget tree shows you how all these widgets are organised and nested inside each other — like a family tree of your app's visual elements.

The Centre Canvas — Your App Preview: The large area in the centre of the editor shows you a live preview of your app screen. This is what your app looks like right now. When you add a widget, change a colour, or move an element — the canvas updates immediately so you can see the result. What you see on the canvas is very close to what users will see on their phones.

The Right Panel — Properties: When you click on any widget in the canvas or widget tree, its properties appear in the right panel. Properties are the settings for that widget — its colour, size, font, padding, alignment, and more. This is where you make detailed changes to individual elements of your app without touching any code.

The Top Toolbar — Actions and Settings: At the top of the editor you will find buttons for running your app preview, accessing Firebase settings, managing your app's theme and colours, and other project-wide settings. The most important button here for now is the Run or Preview button — which lets you see and interact with your app as if it were running on a real phone.

The Widget Library — Add Elements: There is a panel or button that gives you access to the full library of widgets you can add to your app — buttons, text fields, images, lists, maps, icons and hundreds more. You drag a widget from the library and drop it onto your canvas to add it to your screen. This drag and drop approach means you are building visually — seeing exactly what you are adding before you commit to it.

Before moving to the next section do the following exercise inside your MyFirstApp FlutterFlow project. These steps are designed to make you comfortable with the editor so that when we start building seriously in Module 3, the interface already feels familiar.

Exercise Steps — Do These Now:

Step 1 — Look at the centre canvas. You will see a blank phone screen. This is your first empty app page. Tap or click anywhere on it to select the page itself.

Step 2 — Look at the right panel. You will see the page properties — background colour, name, and other settings. Find the background colour setting and change it to dark blue — approximately #060D24. Type that value into the colour field and press Enter. Watch the canvas update immediately.

Step 3 — Now add your first widget. Find the widget library — look for a plus button or a Components panel. Find the Text widget and drag it onto your canvas. A text label will appear on your screen saying something like "Hello World" or "Text."

Step 4 — Click on the text widget you just added. In the right panel find the text content field and change the text to: "Welcome to My First App". Watch the canvas update with your new text.

Step 5 — Still in the right panel, find the font colour setting and change it to gold — #D4AF37 . Find the font size and change it to 24. Find the alignment and set it to Centre.

Step 6 — Now add a Button widget from the widget library. Drag it onto the canvas below your text. Change the button label to "Get Started" . Change the button colour to #FF6B6B — coral red. Change the text colour to white.

Step 7 — Click the Preview or Run button at the top of the editor. Your app will open in a preview window showing you exactly how it looks on a phone screen. You will see your dark blue background, your gold welcome text, and your coral Get Started button. That is your first FlutterFlow screen. You built it.

Step 8 — Take a screenshot of the preview. Add it to your portfolio folder alongside your Bolt.new screenshot from section 2.1.

Issue 1 — FlutterFlow loads slowly on my phone. FlutterFlow is a powerful tool that uses significant browser resources. On a phone with limited RAM it may load slowly or occasionally freeze. Solution: Close all other browser tabs before opening FlutterFlow. Close any other apps running in the background on your phone. If it continues to be slow, try using it during times when your phone is not doing other tasks simultaneously.

Issue 2 — I cannot find the widget library or the add button. The FlutterFlow interface may look slightly different depending on your screen size and the version of FlutterFlow that is currently live. Solution: Look for a plus icon anywhere on the screen — it is usually in the left panel or at the top of the canvas area. If you cannot find it, open Gemini on your phone and ask: "Where is the widget library in FlutterFlow? How do I add a new widget to my page?" AI will give you the current and accurate answer immediately.

Issue 3 — My preview shows an error instead of the app. Solution: Go back to the editor and look at the widget tree on the left. If any widget has a red error indicator next to it, click on it to select it and check its properties in the right panel. Usually the error is caused by a required property that has not been set — like a missing image source or an empty required text field. Set the missing property and the error will clear.

Issue 4 — I accidentally deleted something and cannot undo it. Solution: Use the keyboard shortcut Ctrl + Z on laptop or look for an undo button in the top toolbar. FlutterFlow keeps a history of your recent actions and allows you to undo multiple steps. If you are on a phone, look for the undo arrow in the toolbar at the top of the editor.

Every professional developer in the modern world has AI assistants they turn to when they are stuck, when they need code explained, when they want to explore options, or when they need a problem solved fast. In this course your two primary AI assistants are Gemini AI and ChatGPT. Both are free. Both work on your phone and your laptop. And both are available to you 24 hours a day, 7 days a week — ready to answer any development question you have, explain any concept you do not understand, and help you fix any problem you encounter.

Think of Gemini and ChatGPT as the most patient, most knowledgeable tutors you have ever had access to. They never get tired of your questions. They never make you feel bad for not knowing something. They explain things in plain English at whatever level of detail you need. And they are always available — even at midnight when you are working on your app and something is not working. Setting them up properly now means they are ready to help you the moment you need them.

In this section we set up both tools step by step, learn exactly how to use them for development work, and practise asking the kinds of questions that will help you most throughout this course.

Gemini is Google's AI assistant. Because most students already have a Google account — which they used to set up Bolt.new and FlutterFlow — setting up Gemini is fast and straightforward. Follow these steps:

📱 Phone Users — Setting Up Gemini:

Step 1 — Open the Google Play Store on your Android phone or the App Store on your iPhone.

Step 2 — In the search bar type: Gemini and search. Look for the app by Google — it has a blue, purple and pink star-shaped icon. Tap Install or Get and wait for it to download and install.

Step 3 — Once installed, open the Gemini app. You will be asked to sign in. Sign in with the same Google account you have been using for your other development tools.

Step 4 — After signing in you will see the Gemini chat interface. There is a text input at the bottom of the screen where you type your questions or requests. This is where you communicate with AI.

Step 5 — Type your first test message: "I am a beginner learning mobile app development using FlutterFlow and Bolt.new. I will be asking you questions about app development throughout my course. Are you ready to help me?" Press Send and read Gemini's response. You now have an AI assistant that understands your context and is ready to help.

Step 6 — Add Gemini to your phone's home screen for quick access. You will be opening it regularly throughout this course.

💻 Laptop Users — Setting Up Gemini:

Step 1 — Open your browser and go to: gemini.google.com

Step 2 — Click Sign In and use your Google account.

Step 3 — Once signed in you will see the Gemini chat interface. Bookmark this page in your browser for quick access.

Step 4 — Type the same test message as above and press Enter. Confirm Gemini responds clearly and helpfully.

Step 5 — Write in your "My Dev Tools" note: Gemini AI — set up and ready.

Having Gemini set up is only valuable if you know how to use it well. Many students open AI tools, ask vague questions, get vague answers, and then conclude that AI is not helpful. The truth is — the quality of AI's answer is directly determined by the quality of your question. Here is exactly how to ask questions that get you precise, useful, actionable answers every time.

Always give Gemini context first. Before asking your question, tell Gemini what you are working on. For example — do not just ask "How do I add a button?" Instead ask: "I am building a school notice board app in FlutterFlow. I want to add a button at the bottom of the home screen that opens a new page where a teacher can type and submit an announcement. How do I do this step by step?" The second question gives Gemini everything it needs to give you a precise, relevant answer.

Use Gemini to explain code you do not understand. When AI generates code for you in Bolt.new or FlutterFlow and you see something you do not recognise, copy that code, paste it into Gemini, and ask: "Can you explain what this code does in very simple English? I am a beginner." Gemini will break it down line by line in plain language. Do this consistently and your understanding of code grows naturally without ever feeling forced.

Use Gemini to fix errors. When something in your app breaks and shows an error message, copy the entire error message and paste it into Gemini with the message: "I am building an app in FlutterFlow and I am getting this error. What does it mean and how do I fix it step by step?" Gemini will read the error, explain what caused it in plain English, and give you the exact steps to fix it.

Use Gemini to generate prompts for Bolt.new. If you have an app idea but you are not sure how to write a good prompt for Bolt.new, ask Gemini first: "I want to build a mobile app for a local market where sellers can list their products and buyers can browse and contact them. Can you write me a detailed Bolt.new prompt for this app?" Gemini will write the prompt for you. Then copy it and paste it into Bolt.new. AI helping you prompt AI — that is the modern developer's superpower.

ChatGPT is made by OpenAI and is one of the most widely used AI tools in the world. It works very similarly to Gemini — you type a question or instruction and AI responds in plain English. Having both ChatGPT and Gemini available gives you a significant advantage — when one gives you an answer you are not sure about, you can check it with the other. Two AI perspectives are always better than one.

📱 Phone Users — Setting Up ChatGPT:

Step 1 — Open the Play Store or App Store on your phone.

Step 2 — Search for ChatGPT — look for the app by OpenAI. It has a simple black and white logo. Install it.

Step 3 — Open ChatGPT. You will be asked to create an account or log in. Tap Sign Up and create a free account using your email address. You can also continue with your Google account if that option is available.

Step 4 — Once logged in you will see the ChatGPT chat interface — very similar to Gemini. Type your first test message: "I am a beginner learning to build mobile apps using AI tools like FlutterFlow and Bolt.new. I will be asking you questions about app development. Please explain things in simple English." Press Send and confirm ChatGPT responds clearly.

Step 5 — Add ChatGPT to your home screen next to Gemini. Having both one tap away means you never have to search for them when you need help urgently.

💻 Laptop Users — Setting Up ChatGPT:

Step 1 — Open your browser and go to: chatgpt.com

Step 2 — Click Sign Up and create a free account or continue with Google.

Step 3 — Once inside, bookmark the page for quick access.

Step 4 — Send the same test message as above and confirm it responds clearly.

Step 5 — Write in your "My Dev Tools" note: ChatGPT — set up and ready.

Do not move to section 2.4 until you have completed this exercise. It is short but it is important — because it builds the habit of turning to AI immediately when you have a question, rather than sitting stuck and frustrated alone.

Exercise Steps — Do These Now:

Step 1 — Open Gemini on your phone or browser. Ask it this question exactly: "I am building a mobile app in FlutterFlow for a church. The app should let the pastor post announcements and members read them. Can you write me a detailed prompt I can use in Bolt.new to build this app?" Read the prompt Gemini writes for you carefully.

Step 2 — Copy the prompt Gemini gave you. Open Bolt.new in your browser. Paste the prompt into the Bolt.new prompt box and press Send. Watch AI build the church app from the prompt that another AI wrote for you. That is AI working with AI — guided by you.

Step 3 — Now open ChatGPT. Ask it this question: "What are the five most important screens every church mobile app should have? Explain each one briefly." Read the answer and compare it to what Bolt.new generated. Are all five screens in your app? If not, go back to Bolt.new and ask it to add any missing screens.

Step 4 — Write in your notes: What did you learn from using Gemini and ChatGPT together? How did they help you build a better app than you would have built alone?

Imagine spending three days building an app — adding screens, connecting a database, designing the interface, refining every detail — and then your phone crashes, your laptop is stolen, or a file gets accidentally deleted. Everything you built is gone. Every hour of work, every decision, every line of code — vanished. That is the nightmare every developer fears. And it is completely preventable.

GitHub is the tool that makes sure that nightmare never happens to you. GitHub is the world's most widely used platform for storing, managing and backing up code. Every time you make progress on your app you save it to GitHub. Your code is then stored safely in the cloud — accessible from any device, at any time, from anywhere in the world. Even if your phone breaks tomorrow, your code is safe and you can continue building from any other device without losing a single line.

GitHub does more than just back up your code. It keeps a complete history of every change you have ever made to your project. If you make a change today that breaks something that was working yesterday — you can go back to yesterday's version in seconds. This ability to go back in time through your project's history is one of the most powerful features any developer has access to — and GitHub gives it to you for free.

GitHub is also your professional portfolio. When a client or employer wants to see your work, you send them your GitHub profile link. They can see every project you have built, how actively you work, and the quality of your code. In the professional world of development, a strong GitHub profile is worth more than most certificates.

📱 Phone and 💻 Laptop Users — Follow These Steps:

Step 1 — Open your browser and go to: github.com and press Go or Enter.

Step 2 — On the GitHub homepage click or tap Sign Up — usually a green button in the top right or centre of the page.

Step 3 — You will be asked to enter your email address. Use the same email you have been using for your other development tools. Enter it and click Continue.

Step 4 — Create a password. Make it strong — at least 8 characters with a mix of letters and numbers. Write it in your "My Dev Tools" note immediately. Click Continue.

Step 5 — Choose a username. This is your public GitHub identity — the name that will appear on your profile and your projects. Choose something professional. Your own name or a variation of it works well — for example felixdev or felixbuilds. Avoid random numbers or unprofessional names — this is your developer identity that clients and employers will see. Click Continue.

Step 6 — GitHub will ask if you want to receive product updates by email. This is optional — choose based on your preference and click Continue.

Step 7 — GitHub will send a verification code to your email address. Open your email app, find the email from GitHub, copy the code, and enter it on the GitHub page. This confirms your email address is real and active.

Step 8 — You will be asked a few questions about how you plan to use GitHub. Answer them honestly — you are a student learning app development. Select the free plan when asked about pricing.

Step 9 — Your GitHub account is now created. You will be taken to your GitHub dashboard — your home page on GitHub. Write in your "My Dev Tools" note: GitHub — username: [your chosen username] — email: [your email].

GitHub has its own language — specific words that mean specific things. You will hear and see these words constantly as you develop. Understanding them now means you will never be confused when someone uses them or when you see them in tutorials or documentation.

Repository — A repository — commonly called a repo — is a folder on GitHub that contains all the files for one project. Every app you build gets its own repository. Think of a repository as the home for one app's complete code. When someone says "share your repo" they mean share the link to that project's folder on GitHub.

Commit — A commit is the action of saving your current work to GitHub. Every time you make meaningful progress on your app — you added a new screen, fixed a bug, connected a database — you commit your changes. Each commit is saved with a message describing what you changed. For example: "Added login screen and connected to Firebase" — that is a commit message. Good commit messages make it easy to find specific versions of your app in the future.

Push — When you commit changes on your device, those changes are first saved locally — on your phone or laptop. Pushing means sending those locally saved changes up to GitHub so they are stored safely in the cloud. The full workflow is: make changes → commit → push. After pushing, your code is safely backed up.

Pull — Pulling is the opposite of pushing. When you want to bring the latest version of your code from GitHub down to your device — for example when switching from your phone to your laptop — you pull. This downloads all the latest changes to your current device so you are always working on the most up-to-date version.

Branch — A branch is a separate version of your project where you can make experimental changes without affecting the main working version of your app. Think of it as a safe space to try new things. If the experiment works, you merge it into the main version. If it does not work, you simply delete the branch and your main app is completely unaffected. Branches are a professional developer's safety net.

Clone — Cloning means downloading a complete copy of a repository from GitHub to your device. When you want to work on your project on a new device for the first time, you clone the repository and the entire project is downloaded to that device — ready to work on immediately.

Now we create your first GitHub repository. This will be the home for all the practice work you do during this course. Follow every step carefully and do not skip anything.

Step by Step — Create Your First Repository:

Step 1 — From your GitHub dashboard look for a green button that says New or Create Repository. On phone it may be in a menu or at the top of the page. Tap or click it.

Step 2 — You will see a form to create your new repository. In the Repository Name field type: my-app-development-journey — use hyphens between words, not spaces. GitHub repository names cannot contain spaces.

Step 3 — In the Description field type: "My mobile app development projects — IT International Academy course" This description appears on your profile and helps anyone who views your GitHub understand what this repository is for.

Step 4 — Under visibility select Public. A public repository can be seen by anyone — which means potential clients and employers can find and view your work. This is how your GitHub becomes a portfolio.

Step 5 — Check the box that says Add a README file. A README is a text file that appears on your repository's home page and describes the project. It is the first thing anyone sees when they visit your repository.

Step 6 — Leave all other settings at their defaults and click the green Create Repository button at the bottom of the form.

Step 7 — Your repository is now created. You will be taken to its home page on GitHub. You will see your repository name, your description, and the README file. Copy the URL from your browser's address bar — this is your repository link. Save it in your "My Dev Tools" note. This is the link you will share with clients and employers as your portfolio.

GitHub Mobile is the official GitHub app for phones. It lets you view your repositories, review changes, manage issues and stay updated on your projects — all from your phone. While the full GitHub experience is best on a browser, the mobile app is excellent for quick checks, reviewing your project history, and staying connected to your work when you are on the move.

📱 Phone Users — Install GitHub Mobile:

Step 1 — Open the Play Store or App Store on your phone.

Step 2 — Search for GitHub — look for the official app by GitHub Inc. It has a black cat-octopus logo called Octocat. Install it.

Step 3 — Open the app and sign in with the GitHub account you just created.

Step 4 — Once inside tap on Repositories and you will see your newly created repository listed there. Tap on it to open it and explore how it looks in the mobile app.

Step 5 — Add GitHub Mobile to your home screen next to Gemini and ChatGPT. You now have your core development toolkit on your home screen — always one tap away.

Your README file is the first thing anyone sees when they visit your GitHub repository. A well-written README makes a powerful first impression. Let us update it right now to make your repository look professional from day one.

Exercise Steps — Do These Now:

Step 1 — Open your repository on github.com in your phone or laptop browser.

Step 2 — Find the README.md file listed in your repository. Click or tap on it to open it.

Step 3 — Look for a pencil or edit icon on the right side of the page. Tap or click it to edit the README file.

Step 4 — Delete the existing content and replace it with the following — editing the details to match your own information:

# My App Development Journey

Student: [Your Full Name]
Institution: IT International Academy
Course: Mobile App Development and AI

## About This Repository
This repository contains all the mobile apps I am building as part of my course at IT International Academy. Each project folder contains one complete app built using AI tools including Bolt.new, FlutterFlow, and Firebase.

## Tools I Am Using
- Bolt.new — AI app builder
- FlutterFlow — Visual Flutter app builder
- Gemini AI — AI development assistant
- ChatGPT — AI development assistant
- Firebase — App database and backend
- GitHub — Code storage and version control

Step 5 — Scroll down and find the Commit Changes button. In the commit message field type: "Updated README with course information" Click Commit Changes.

Step 6 — Go back to your repository home page. You will now see your updated README displayed beautifully on the repository page. This is what your portfolio looks like to the world. Professional. Clear. Ready.

Sketchware Pro is one of the most powerful tools available specifically for students who are building apps using only their Android phone. It is a complete Android app development environment that runs entirely on your phone — no laptop, no desktop, no expensive equipment required. You design screens, add logic, write code, and test your app — all without leaving your phone.

This tool is especially important because it proves something that many people still do not believe — that you can build a real, publishable Android application using nothing but the phone in your hand. Many developers around the world have built apps with thousands of users using Sketchware Pro alone. Your phone is not a limitation. In the right hands it is a complete development studio.

Note that Sketchware Pro is specifically for Android phone users. If you are using an iPhone, skip this section and move directly to section 2.6. iPhone users will use FlutterFlow and Bolt.new as their primary building tools — both of which work excellently on iPhone browsers.

📱 Android Phone Users — Follow These Steps:

Step 1 — Open the Google Play Store on your Android phone.

Step 2 — In the search bar type: Sketchware Pro and search. Look for the app with a blue and white icon. It is the most feature-rich version of Sketchware available. Tap Install and wait for it to download and install. It may take a few minutes depending on your internet speed.

Step 3 — Once installed open Sketchware Pro. The first time you open it, it may ask for certain permissions — allow all permissions it requests. These are needed for the app to function correctly and to build and test apps on your phone.

Step 4 — You will see the Sketchware Pro home screen showing your projects. It will be empty for now since you have not created any projects yet. This is your Sketchware Pro dashboard — where all your Android app projects will live.

Step 5 — Write in your "My Dev Tools" note: Sketchware Pro — installed and ready.

Sketchware Pro has a straightforward interface that is designed specifically for phone screens. Before you build anything, spend a few minutes understanding what each area does so you are never lost or confused when you start building.

The Projects Screen — This is the first screen you see when you open Sketchware Pro. It lists all your app projects. Each project appears as a card showing the app name and icon. Tapping a project card opens it so you can continue building. The plus button — usually in the bottom right corner — creates a new project.

The Project Editor — When you open a project you enter the project editor. This is where all building happens. The editor has several sections accessible from a bottom navigation bar or a menu — View, Logic, Resource, Library and File Manager. Each section handles a different part of your app.

View Section — This is where you design your app screens visually. You see a phone-sized canvas representing your app screen. You add components — buttons, text labels, images, input fields — by tapping the plus icon and selecting from the component library. Each component can be positioned, resized and styled from this section.

Logic Section — This is where you add behaviour to your app — what happens when a button is tapped, how data is stored, how screens connect to each other. Sketchware Pro uses a visual block system for logic — you connect blocks together like puzzle pieces instead of typing code manually. This makes adding logic accessible even for complete beginners. As you grow more confident you can also view and edit the actual Java code that the blocks generate.

Resource Section — This is where you manage your app's assets — images, sounds, fonts and other files your app uses. Any image you want to display in your app must first be added to the Resource section.

Library Section — This is where you add extra functionality to your app through libraries — pre-built packages of code that add features like image loading, database connections, and more. Sketchware Pro has a built-in library manager that makes adding these very straightforward.

Now we create your first Sketchware Pro project. This will be a simple one-screen app that displays a welcome message and a button. It is simple by design — the goal right now is not to build something complex but to learn the process of creating, designing and running a project from start to finish. Once you know the process, building complex apps is simply a matter of repeating and expanding on it.

Step by Step — Create Your First Project:

Step 1 — Open Sketchware Pro on your phone. From the projects screen tap the Plus button in the bottom right corner to create a new project.

Step 2 — You will see a form asking for your project details. Fill them in as follows:

App Name: MyFirstAndroidApp
Package Name: com.itacademy.myfirstapp
The package name is a unique identifier for your app — it follows the format com.yourname.appname. Use the one provided above for now. You will customise this for real projects later.

Step 3 — Choose a colour for your app theme. Select dark blue — tap the colour selector and enter #060D24 or choose the darkest blue available. Tap Create Project.

Step 4 — Your project opens in the editor. You will see the View section by default with an empty phone screen canvas. This is your blank app — ready to be built.

Step 5 — Tap the plus icon to add your first component. Select TextView from the component list — this is a text label. It will appear on your canvas. Tap on it to select it and look at the properties panel that appears. Change the text to: "Welcome to IT Academy" Change the text colour to gold #D4AF37 and the text size to 24sp.

Step 6 — Add a second component — select Button from the component list. It will appear below your text. Change the button text to: "Get Started" Change the button background colour to coral #FF6B6B and the text colour to white.

Step 7 — Tap the Run button — usually a play triangle icon at the top of the editor. Sketchware Pro will compile your app and install it directly on your phone. Wait for the compilation to finish — this takes about 30 to 60 seconds the first time.

Step 8 — Your app will open automatically on your phone. You will see your dark blue screen, your gold welcome text, and your coral Get Started button. This is a real Android app running on your real phone — and you built it entirely from your phone using Sketchware Pro.

Step 9 — Take a screenshot of your running app. Add it to your portfolio folder. This is your first native Android app.

Sketchware Pro does not have AI built directly into it the way FlutterFlow and Bolt.new do. However this does not mean you build alone — you use Gemini and ChatGPT alongside Sketchware Pro to give you the same AI-powered advantage. Here is exactly how to do this effectively:

Use AI to plan your screens before you build them. Before opening Sketchware Pro, open Gemini and describe the screen you want to build. Ask Gemini: "I am building a school notice board app in Sketchware Pro. What components do I need on the home screen and how should they be arranged?" Gemini will give you a clear list of components and a layout suggestion. Use that plan when you go into Sketchware Pro to build — you already know exactly what to add and where.

Use AI to write logic blocks for you. When you need to add logic to your app in Sketchware Pro — like what happens when a button is tapped or how data is stored — open Gemini and ask: "In Sketchware Pro, how do I make a button that opens a new activity when tapped? Show me the logic blocks I need step by step." Gemini will walk you through the exact blocks to use and the order to connect them.

Use AI to fix errors. When Sketchware Pro shows an error during compilation — which happens occasionally — take a screenshot of the error or note down the error message. Open Gemini and type: "I am using Sketchware Pro on Android and I am getting this error when I try to compile my app: [paste the error here]. What does this mean and how do I fix it?" Gemini will explain the error in plain English and give you the exact fix.

Use AI to understand the Java code Sketchware generates. Sketchware Pro allows you to view the actual Java code it generates from your blocks. When you want to understand what that code does, copy a section of it, open Gemini, paste it and ask: "Can you explain what this Java code does in very simple English? I am a beginner." This is an excellent way to gradually build your understanding of real code while still building apps visually. You are learning code through building — which is the fastest and most natural way to learn it.

Issue 1 — Sketchware Pro is not on the Play Store in my region. In some regions Sketchware Pro may not appear in the Play Store search results. Solution: Open your phone browser and go to sketchware.io — the official website. Look for the download link for Sketchware Pro and download the APK file directly. Before installing it you may need to enable installation from unknown sources in your phone settings. To do this go to Settings, then Security or Privacy, then enable Install Unknown Apps or Unknown Sources. Then open the downloaded APK file to install.

Issue 2 — Compilation fails with an error message. This is very common especially for first projects. Solution: Read the error message carefully. If you do not understand it — copy it and paste it into Gemini with the context: "I am using Sketchware Pro and getting this compilation error. How do I fix it?" Gemini will give you the solution immediately.

Issue 3 — The app installs but immediately crashes when opened. This usually means there is an error in the logic section — a block is connected incorrectly or a required value is missing. Solution: Go back to the Logic section in Sketchware Pro and check every block carefully. Look for any block that has a red or orange warning indicator. Fix that block first. If you cannot identify the problem, describe what your app is supposed to do to Gemini and ask it to tell you the correct logic block sequence.

Issue 4 — My phone says it does not have enough storage to install the compiled app. Solution: Free up storage on your phone by deleting unused apps, photos or files. As a minimum you need about 500MB of free storage to compile and install apps comfortably in Sketchware Pro. If storage is consistently a problem, use FlutterFlow or Bolt.new in your browser instead — they do not use your phone's local storage for compilation.

Every real app needs a place to store and retrieve information. When a user creates an account, that account must be saved somewhere. When they post a message, that message must be stored so other users can see it. When they close the app and reopen it the next day, their data must still be there — exactly as they left it. That somewhere is called a backend — and Firebase is the backend we use in this course.

Firebase is a platform created and maintained by Google. It provides everything your app needs to store data, manage user accounts, send notifications, and host your app online — all in one place, all connected, all free to start using. It is the most widely used backend platform for Flutter and FlutterFlow apps in the world — which means there is enormous support, documentation and community knowledge available to you whenever you need help.

You do not need to understand how Firebase works deeply right now. In Module 6 we connect Firebase to your app in full practical detail — step by step. What we do in this section is simply create your Firebase account and set up your first project so that when we get to Module 6 everything is already in place and ready to connect.

Firebase works in a browser — which means it is fully accessible on your phone, tablet, laptop or desktop. No installation required. Open the browser, log in, and your backend is ready.

Firebase is not just one tool — it is a collection of services that work together to power your app. Here are the Firebase services we will use in this course and exactly what each one does for your app:

Firebase Authentication — This handles everything related to user accounts in your app. When a user signs up with their email and password, Firebase Authentication stores their account securely. When they log in, Firebase Authentication verifies their credentials and grants them access. It also supports login with Google, Facebook, and phone number — giving your users multiple convenient ways to access your app. You do not write any of this security code yourself — Firebase handles it all, and AI helps you connect it to your app in minutes.

Cloud Firestore — This is Firebase's main database — where your app stores and retrieves all its data. It stores data in a structured format called collections and documents — similar to folders and files. For example in a school app, you might have a collection called "announcements" where each document is one announcement containing its title, content, date and the name of the teacher who posted it. Firestore updates in real time — meaning when a teacher posts a new announcement, it appears instantly on every student's screen without them needing to refresh the app.

Firebase Storage — This is where your app stores files — images, documents, audio files and videos that users upload. For example if your app allows users to set a profile picture, that image is stored in Firebase Storage. If your app lets teachers upload PDF documents for students to download, those files live in Firebase Storage.

Firebase Cloud Messaging — This is the service that sends push notifications to your users. When you want to notify all users of something important — a new announcement, a reminder, an update — Firebase Cloud Messaging delivers that notification to every user's phone instantly, even when they are not actively using your app.

Firebase Hosting — This allows you to publish your Progressive Web App online with a real web address so anyone can access it through their browser. It is fast, secure and free for basic usage.

📱 Phone and 💻 Laptop Users — Follow These Steps:

Step 1 — Open your browser on your phone or laptop. Go to: firebase.google.com and press Go or Enter.

Step 2 — The Firebase homepage loads. You will see a professional website showcasing Firebase's features. Look for the Get Started button — usually in the top right corner or the centre of the page. Tap or click it.

Step 3 — You will be asked to sign in with a Google account. Use the same Google account you have been using for all your other tools. Sign in.

Step 4 — You are now inside the Firebase Console — your Firebase dashboard. This is where you manage all your Firebase projects. It will be empty for now. Look for the Add Project or Create a Project button and tap or click it.

Step 5 — You will be asked to name your project. Type: it-academy-app-project Use lowercase letters and hyphens — no spaces. This will be the Firebase project you connect your course app to in Module 6. Click Continue.

Step 6 — Firebase will ask if you want to enable Google Analytics for your project. For now toggle this off — we do not need analytics at this stage of learning. Click Create Project.

Step 7 — Firebase will take about 30 seconds to set up your project. A progress screen will show. Wait for it to complete without closing the browser or navigating away.

Step 8 — When the project is ready you will see a "Your new project is ready" message. Click Continue. You will be taken to your project's Firebase Console — the dashboard for this specific project.

Step 9 — Look around the Firebase Console. On the left side you will see a menu with all the Firebase services — Authentication, Firestore Database, Storage, Hosting and more. You do not need to set any of these up right now. Simply knowing where they are is enough for this section.

Step 10 — Copy the URL of your Firebase Console from the browser address bar and save it in your "My Dev Tools" note under: Firebase Console — [paste URL here]. This gives you quick access to your Firebase project whenever you need it.

Now that your Firebase project is created, spend five minutes exploring the Firebase Console so you know where everything lives before we start using it in Module 6. Follow these steps:

Exploration Steps — Do These Now:

Step 1 — In the left menu of the Firebase Console find and tap Authentication. You will see the Authentication overview page. Tap Get Started if prompted. You will see a list of Sign-in methods — Email and Password, Google, Phone and others. Do not enable any of them yet. Just observe what is available and close this section.

Step 2 — In the left menu find and tap Firestore Database. You will see the Firestore overview. Tap Create Database if prompted. When asked about security rules select Start in test mode — this allows your app to read and write data freely during development without security restrictions getting in the way. Click Next then Enable. Your Firestore database is now active and ready to store data.

Step 3 — You will see the Firestore interface — a panel showing Collections on the left and Documents on the right. It is currently empty. This is where all your app's data will be stored when you connect it in Module 6. Close this section for now.

Step 4 — In the left menu find and tap Storage. Tap Get Started if prompted. Select Start in test mode again and click through to enable it. Firebase Storage is now active and ready to store files your app uploads.

Step 5 — Write in your notes: Firebase Console explored. Authentication, Firestore Database and Storage are all active and ready. These three services will power my app's backend in Module 6.

Firebase is powerful but it can feel technical the first time you encounter it. The good news is that connecting Firebase to your app — which used to require significant coding knowledge — is now made straightforward by AI. Here is exactly how AI helps you with Firebase throughout this course:

FlutterFlow connects to Firebase automatically. Inside FlutterFlow there is a built-in Firebase integration. You simply enter your Firebase project details and FlutterFlow connects to your database, authentication and storage automatically — generating all the connection code for you. No manual coding required.

Gemini explains Firebase concepts instantly. Whenever you encounter a Firebase concept you do not understand — a security rule, a data structure, a query — open Gemini and ask. For example: "In Firebase Firestore, what is the difference between a collection and a document? Can you give me a simple real-world example?" Gemini will explain it clearly in plain English with a practical example you can immediately understand and apply.

ChatGPT writes Firebase queries for you. When you need to retrieve specific data from your Firestore database — for example all announcements posted in the last 7 days — you describe what you need to ChatGPT and it writes the query code for you. You copy the code, paste it into your project, and your app retrieves the data exactly as specified. You describe the need. AI writes the technical solution. You focus on building.