Module 2

Connecting the dots!

Building a software application goes far beyond the simple idea of writing code. While the

code forms the backbone, it's the entire lifecycle and the methodology behind how

applications are developed that truly define their functionality, usability, and success. From

conceptualizing the idea to maintaining and updating the application, the process involves a

wide array of skills, tools, and frameworks.

In this module, we will dive into the world of software application development by exploring

the Software Development Life Cycle (SDLC), understanding various Programming

Paradigms and Languages, and learning about the importance of Integrated Development

Environments (IDEs) and Tools that make development efficient and effective.

Module 1 | Emerging Technologies | AMV Calo

Overview of Application Development

Application development refers to the process of creating software applications that run on
various devices or systems. This includes not only coding but also designing, testing,
deploying, and maintaining software. The process ensures that the application meets the
user’s needs and performs efficiently across its intended platforms.

Applications are categorized into:

 Web Applications – Runs on browsers and accessed via the internet. (e.g., Gmail,
Facebook)

 Mobile Applications – Designed for smartphones and tablets. (e.g., WhatsApp,

Instagram)

 Desktop Applications – Installed and run on a computer. (e.g., Microsoft Word,

Photoshop)

 Cloud-Based Applications – Hosted on cloud infrastructure for scalability. (e.g.,

Google Drive, Dropbox)

Software Development Life Cycle (SDLC)

The Software Development Life Cycle (SDLC) is a structured approach to software

development, guiding the entire process from conception to deployment and maintenance.
It includes various phases that ensure quality and efficiency.

Key stages in application development include:

The Software Development Life Cycle (SDLC) is a structured approach to developing

applications. It consists of several phases:

1. Planning & Requirement Analysis – Defining project scope and gathering user
needs.

2. Design – Creating system architecture and UI/UX design.

3. Development – Writing and structuring code based on design specifications.

4. Testing – Ensuring functionality, security, and performance.

Module 1 | Emerging Technologies | AMV Calo

 5. Deployment – Releasing the application for users.

6. Maintenance & Updates – Fixing bugs and adding improvements over time.

Programming Paradigms and Languages

Programming paradigms define the approach or style used to solve problems through code.
Different paradigms offer unique ways of organizing and solving problems.

 Procedural Programming – Uses a step-by-step approach (e.g., C, Pascal).

 Object-Oriented Programming (OOP) – Based on objects and classes (e.g., Java,

Python, C++).

 Functional Programming – Focuses on functions and immutability (e.g., Haskell,

Scala).

 Scripting Languages – Used for automation and web development (e.g., JavaScript,
PHP, Python).

Popular Programming Languages:

 JavaScript: Primarily used for web development (both front-end and back-end).

 Python: Known for simplicity and versatility in fields like data analysis, web
development, and automation.
 Java: A widely-used language for building platform-independent applications.

 C/C++: Low-level languages used for system and hardware programming.

Module 1 | Emerging Technologies | AMV Calo

Integrated Development Environments (IDEs) and Tools

IDEs and development tools are crucial in making the coding process faster, more efficient,
and less error-prone. IDEs are software applications that provide comprehensive facilities
to programmers for software development. They integrate many tools into one interface to
streamline development.

Key Features of IDEs:

 Code Editor: Helps write and modify code with syntax highlighting.

 Compiler/Interpreter: Translates code into machine-readable instructions.

 Debugger: Helps identify and fix bugs in the code.

 Version Control: Integrates with tools like Git to manage code changes.

IDEs and development tools streamline coding, debugging, and deployment. Popular
choices include:

 Visual Studio Code – Lightweight and feature-rich for multiple languages.

 Eclipse – Used mainly for Java development.
 Android Studio – Official IDE for Android app development.
 Xcode – Used for iOS application development.
 PyCharm – Optimized for Python programming.
 IntelliJ IDEA – Ideal for Java development and supports many other languages.

Development Tools:

 Version Control (Git, GitHub, GitLab) – Tracks code changes and collaboration.
 Containerization (Docker): Tool for creating and managing containers that
encapsulate applications.
 Package Managers (npm, pip, Maven) – Manages software dependencies.
 Testing Frameworks (JUnit, Selenium, Jest) – Ensures code quality.
 Database Management Tools (MySQL Workbench, MongoDB Compass) –
Handles data efficiently.

Module 1 | Emerging Technologies | AMV Calo

Learning Activities

Objective: Each group will choose one of the 8 learning activities provided in the module
and create a tutorial-style video demonstrating the steps to complete the chosen task. The
video should be clear, concise, and instructional in nature. It should guide viewers through
each step in a way that makes it easy to understand and follow.

Tasks:

Select Your Activity:

 As a group, choose one of the 8 learning activities provided in the module. Ensure
everyone in the group agrees on the activity that you want to tackle.

 Discuss who will handle which part of the tutorial, e.g., who will demonstrate the
setup, explain the theory, or show the results.

Prepare Your Content:

 Follow the instructions of the chosen activity carefully.

 Plan your video by outlining each step of the process. Be clear on how you will explain
each part and what visuals you will show.

 Organize your environment for clear and focused visuals. Ensure that the screen is
visible, and the audio is clear.

Record the Video:

 Use screen recording software (e.g., OBS Studio, Loom, or Camtasia) to capture your
actions while you demonstrate the activity. You can also record yourself talking
through the process using a microphone.

 Speak clearly and keep the pace steady. Be sure to explain what you're doing, why it's
necessary, and any challenges the viewers may face.

 Keep the video direct and to the point. Aim for a length of 5–10 minutes—don’t
add unnecessary information.

 You can add captions or annotations to reinforce key points.

Edit the Video:

 Edit your video to remove any unnecessary parts or mistakes. Ensure the video flows
smoothly.

 Add any text or diagrams that may help clarify the steps.

Module 1 | Emerging Technologies | AMV Calo

  Ensure the video is well-structured (e.g., introduction, step-by-step demonstration,
conclusion).

 Make sure that the audio is clear, and there is no background noise.

Review and Submit:

 Before submitting, review the video to make sure it covers all the necessary points
clearly and accurately.

 Double-check that the instructions are easy to follow and that you’ve demonstrated
each step properly.

 Submit the video by following your instructor’s submission guidelines (e.g., upload it
to a platform like Google Drive or YouTube, and share the link).

Recommendations for Mitigating Issues

To help ensure the success of your project and avoid common pitfalls, follow these
recommendations:

1. Clear Guidelines and Support:

o Technical Resources: Make sure everyone in your group knows how to use
the necessary tools. If you're unfamiliar with screen recording or video editing
software, review tutorials or guides. Free tools like OBS Studio, Loom, or
Camtasia are recommended.

o Instructor Support: If you run into technical issues, reach out to your
instructor for assistance with software or tools.

2. Clear Task Division:

o Split the responsibilities within your group clearly. For example, one person
can be in charge of recording, another for explaining the steps, and someone
else for editing the video. This will help avoid confusion and ensure an even
distribution of work.

o Ensure that all group members contribute meaningfully, whether it’s

recording, presenting, or editing.

3. Video Reviews Before Submission:

o Submit a draft version of your video to your instructor for feedback before
finalizing it. This gives you a chance to make any necessary revisions and
improve the clarity of your presentation.

Module 1 | Emerging Technologies | AMV Calo

4. Time for Practice:

o Give yourselves time for a practice run before recording the final version.
This allows you to make sure the process flows smoothly and gives everyone
the chance to get comfortable with their roles in the video.

5. Encourage Detailed Explanations:

o While keeping the video concise is important, ensure you provide enough
depth to properly explain the concepts. Don’t skip important steps just to keep
the video short. A good rule is to focus on clarity, not brevity alone.

o Add any context or explanations necessary to help viewers fully understand

the process, particularly when performing complex tasks.

6. Access to Learning Materials:

o Ensure all group members have access to the materials needed for the activity.
If there are any issues with access to software or tools, try using free
alternatives or reach out to your instructor for support.

o Ensure your video and tutorial content are accessible for all viewers,
including providing captions or subtitles for those who may need them.

7. Test Your Technology:

o Before you start recording, test your screen recording and audio equipment. If
the sound is unclear or the visuals aren’t high-quality, you may need to adjust
your setup.

o Ensure your screen is visible and easy to read. Avoid having too much clutter
on your desktop or screen that could distract from the demonstration.

8. Encourage Peer Review and Feedback:

o Before submitting your final video, consider showing it to a peer or another

group for feedback. This can provide valuable insights into how to improve
clarity and engagement.

Module 1 | Emerging Technologies | AMV Calo

Total Possible Points: 35

 Excellent (30-35 points): The video meets all the criteria with little to no
improvement needed. Clear, engaging, and accurate.

 Good (24-29 points): The video is generally clear and informative but may have
minor flaws that detract slightly from the learning experience.

 Fair (17-23 points): The video has some significant issues that hinder clarity,
engagement, or accuracy.

 Needs Improvement (0-16 points): The video has serious problems with clarity,
technical quality, or accuracy.

Note: Complete rubric can be found in the submission link in the Canvas Platform.

List of activities to choose from:

Learning Activity 1: Integrating Git with VS Code

Learning Activity 2: Implementing the SDLC in a Simple Web Application

Learning Activity 3: Exploring Programming Paradigms with Code

Learning Activity 4: Containerizing a Simple Application with Docker

Learning Activity 5: Exploring IDEs Beyond VS Code

Learning Activity 6: Implementing and Managing Git Branches

Learning Activity 7: Using Docker for Multi-Container Applications

Learning Activity 8: Deploying a Web Application Using Heroku

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 1: Integrating Git with VS Code

Objective: Learn how to use Git for version control within VS Code.

1. Install Git:

o If you haven't already, download and install Git.

2. Initialize a Git Repository:

o Open the project you created in Activity 1.

o Open the terminal in VS Code (you can use Ctrl+``) and run git init` to initialize
a Git repository in the project folder.

3. Create Your First Commit:

o Make changes to your code and save the file.

o In the Source Control panel in VS Code, stage the changes by clicking the "+"
icon next to the file.

o Commit the changes by adding a commit message and clicking the checkmark.

4. Create a Remote Repository on GitHub:

o Go to GitHub and create a new repository.

o Follow the instructions to connect your local repository to GitHub (via remote
URL).

5. Push Your Changes to GitHub:

o Use VS Code to push your local commits to the remote GitHub repository. You
can do this from the terminal or directly through the Source Control panel.

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 2: Implementing the SDLC in a Simple Web Application

Objective: Apply SDLC concepts by building a basic web application.

1. Requirement Analysis:

o Define the purpose of a simple web application, such as a To-Do List. Outline
its core features (e.g., adding tasks, marking them as complete).

2. Design:

o Draw a basic wireframe for the user interface (UI). Use tools like Figma,
Sketch, or even pen and paper.

o Decide on the structure of the application (e.g., HTML for layout, CSS for
styling, JavaScript for functionality).

3. Development:

o Set up a basic folder structure for your web app with an index.html file,
styles.css, and script.js.

o Write the HTML structure and link the CSS and JavaScript files. Implement the
functionality in JavaScript to allow adding and removing tasks.

4. Testing:

o Test the functionality by interacting with the web app. Check if tasks can be
added and marked as complete correctly.

5. Deployment:

o Deploy your web app on a platform like GitHub Pages or Netlify.

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 3: Exploring Programming Paradigms with Code

Objective: Understand the differences between Object-Oriented and Functional

Programming paradigms.

1. Object-Oriented Programming (OOP):

o Write a class for a Car in your chosen programming language (e.g., Python,
JavaScript). Include attributes such as color and model, and methods like
drive() and stop().

2. Functional Programming (FP):

o Create a simple pure function in your language that takes a list of numbers
and returns the sum of all even numbers in the list.

3. Compare and Contrast:

o Write a brief summary comparing OOP and FP approaches. How would you
approach a problem (like building a car simulation) in both paradigms? Which
paradigm do you prefer, and why?

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 4: Containerizing a Simple Application with Docker

Objective: Learn how to create and run a Docker container for a simple application.

1. Install Docker:

o Follow the installation instructions on Docker’s website.

2. Create a Simple Python Application:

o Create a basic Python app, like a "Hello World" script, and save it as app.py.

3. Write a Dockerfile:

o Create a Dockerfile to containerize the Python application. Example content

for the Dockerfile:
FROM python:3.9-slim
COPY app.py /app.py
CMD ["python", "/app.py"]

4. Build the Docker Image:

o In the terminal, run docker build -t hello-world . to build the

image.

5. Run the Docker Container:

o Run the container using docker run hello-world. The output should
display "Hello World" from the Python app running inside the container.

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 5: Exploring IDEs Beyond VS Code

Objective: Explore different Integrated Development Environments (IDEs) to compare and

contrast their features.

1. Install IntelliJ IDEA or PyCharm:

o Choose an IDE (IntelliJ IDEA for Java or PyCharm for Python) and install it.

2. Create a Simple Project:

o Start a new project in your chosen IDE and write a simple "Hello World"
program in the language the IDE supports.

3. Explore Features:

o Take note of features such as intellisense, refactoring tools, debugging

tools, and build systems.

4. Compare to VS Code:

o Compare your experience with using VS Code. Which IDE do you prefer, and
why? Consider aspects like speed, ease of use, integration with version control,
and debugging capabilities.

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 6: Implementing and Managing Git Branches

Objective: Learn how to manage code branches using Git to enable collaborative
development.

1. Create a New Branch:

o In your project, create a new branch using git branch <branch-name>, then
switch to it with git checkout <branch-name>.

2. Make Changes and Commit:

o Make changes to your code (e.g., add a new feature or fix a bug). After saving
the changes, use Git to stage and commit them.

3. Merge Branches:

o After testing your changes, merge your branch back into the main branch using
git merge <branch-name>.

4. Resolve Merge Conflicts:

o Create a situation where two people are working on the same file, and you both
make conflicting changes. Resolve the conflict using a merge tool or manually.

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 7: Using Docker for Multi-Container Applications

Objective: Learn how to run multiple services in Docker using Docker Compose.

1. Create a Simple Web App:

o Set up a basic web application with two components: a front-end (HTML, CSS,
JavaScript) and a back-end (Python, Node.js, or another language).

2. Dockerize Each Service:

o Create a separate Dockerfile for each service (front-end and back-end) to

containerize them.

3. Define Multi-Container Setup with Docker Compose:

o Create a docker-compose.yml file to manage the services. Define the services,

volumes, and networks to allow the front-end and back-end to communicate.

4. Run the Multi-Container App:

o Use docker-compose up to start both containers. Ensure both services are

running properly and can interact with each other.

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 8: Deploying a Web Application Using Heroku

Objective: Learn how to deploy a web application to a cloud service.

1. Create a Heroku Account:

o Sign up for a free Heroku account at https://heroku.com.

2. Prepare Your Application for Deployment:

o For a Node.js app: Ensure you have a Procfile and package.json with
dependencies listed.

o For a Python app: Ensure you have a requirements.txt file with all
dependencies.

3. Deploy to Heroku:

o Install the Heroku CLI.

o In your terminal, use the following commands to log in, create a Heroku app,
and push the code:
heroku login
git init
heroku create <your-app-name>
git push heroku master

4. Access Your Deployed App:

o Once the deployment is complete, open the URL provided by Heroku and see
your application live!

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 9: Deploying a Simple App on Kubernetes

Objective: Learn the basics of Kubernetes by deploying a simple web application.

Steps to Complete the Activity:

1. Start a Local Kubernetes Cluster

o Install Minikube (if not already installed).

o Start Minikube:
minikube start

o Verify Kubernetes is running:

kubectl get nodes

2. Deploy a Simple Web App (Nginx)

o Run the following command to create a deployment:

kubectl create deployment my-app --image=nginx

o Check the running pods:

kubectl get pods

3. Expose the Application

o Expose the deployment as a service:

kubectl expose deployment my-app --type=NodePort --port=80

o Get the service details:

kubectl get services

o Access the app in your browser:

minikube service my-app --url

Module 1 | Emerging Technologies | AMV Calo

Learning Activity 10: Using Trello for Project Management

Objective: Learn how to organize and manage tasks in a software development project using
Trello, a popular tool for visual project management.

1. Create a Trello Board: Set up a new Trello board for your project. Name it after your
project or team, and choose an appropriate background to help organize the work
visually.

2. Set Up Lists for Workflow Stages: Create several lists on your board that represent
the different stages of your project workflow, such as:

o Backlog (for tasks that need to be done but haven't been started yet)

o In Progress (for tasks that are currently being worked on)

o Testing (for tasks that are ready for review or testing)

o Completed (for finished tasks)

3. Add Cards for Individual Tasks: Add cards to the Backlog list for individual tasks
or features that need to be completed. Each card should have:

o A title (task description)

o A due date (if applicable)

o Labels or tags to categorize tasks (e.g., "bug," "feature," "UI," etc.)

o Checklist of sub-tasks to break the task into smaller steps

4. Assign Members and Set Due Dates: Assign specific team members to each card to
clarify who is responsible for each task. You can also set due dates and attach files
related to the task for easy access.

5. Move Cards through Workflow: As work progresses, move the cards through
different lists (e.g., from Backlog to In Progress) to visually track the status of tasks.
This helps everyone see what has been done, what is currently being worked on, and
what is left to complete.

6. Use Trello Power-Ups: Explore Power-Ups (integrations) for additional

functionality. For example:

o Calendar View: To visualize due dates and deadlines.

o GitHub Integration: Link Trello cards to GitHub issues or pull requests for
seamless tracking of code changes.

o Slack Integration: Receive notifications directly in Slack for task updates.

Module 1 | Emerging Technologies | AMV Calo