DEV Community: lebePage

Building My First iOS Application

lebePage — Thu, 30 May 2024 22:29:59 +0000

Welcome to the wild, wild, wonderful world of iOS app development, where dreams are coded into reality, and caffeine fuels our relentless pursuit of innovation. Imagine yourself in a tech startup's open office, buzzing with the low hum of creativity, the rhythmic click-clack of mechanical keyboards, and the occasional expletive-laden outburst as someone battles with building the next Tim Cook-level application.

In this article, we're diving headfirst into the adventure of creating a basic two-player card game. Get ready to turn lines of code into an engaging, interactive experience that will bring your vision to life on the screen.

THE SETUP

Before we can start coding, we need to get our development environment up and running. This involves a few key steps to ensure we have everything in place to build and test our iOS application. Here’s what you need to do:

Install Xcode: Xcode is Apple’s integrated development environment (IDE) for macOS. It includes everything you need to create apps for all Apple devices. Head over to the Mac App Store and download the latest version of Xcode. Once it's installed, open it up and take a moment to familiarize yourself with the interface.
Create a New Project:
Launch Xcode and create a new project by selecting "Create a new Xcode project" from the welcome screen. Choose the "App" template under the iOS tab, and click "Next." Fill in the project details:
- Product Name: Give your game a name (e.g., "CardGame").
- Team: Select your Apple ID or team if you’re part of one.
- Organization Name: Your company or personal name.
- Organization Identifier: A unique identifier, typically a reverse domain name (e.g., com.yourname).
- Language: Swift.
- User Interface: SwiftUI.
Set Up Version Control:

Version control is essential for any development project. Xcode integrates seamlessly with Git, allowing you to track changes and collaborate with others. Initialize a Git repository by selecting the "Create Git repository on my Mac" option when setting up your project.
Familiarize Yourself with SwiftUI:

SwiftUI is Apple’s framework for building user interfaces across all Apple platforms. Spend some time exploring the basics of SwiftUI if you're not already familiar with it. Apple’s official documentation and tutorials are great resources.
Set Up Your Simulator:

Xcode comes with a built-in simulator that allows you to test your app on various virtual devices. Select the iPhone model you want to use from the device toolbar and launch the simulator to ensure everything is working correctly.
Prepare Your Assets:

Gather all the necessary assets for your card game. This includes images for the cards, backgrounds, and any other graphical elements you'll need. Make sure your assets are appropriately sized and formatted for iOS.

With everything set up, we’re now ready to dive into the coding phase. In the next section, we'll start by laying out the basic structure of our card game and implementing the core functionality. So, roll up your sleeves, fire up Xcode, and let’s bring this game to life!

THE BUILD

Now that we have our development environment ready, it's time to jump into the fun part: building our game. We're going to create a simple yet engaging card game with a deck of 13 cards, where each card ranks from 2 to 14. Here's the plan:

Two sets of cards are placed on the board.
A random function generates a card for each player.
The player with the higher card wins the round and earns a point.
The game continues until all cards are played, and the player with the most points wins.

Let's get started!

Step 1: Define the Player variable

Create a rewrite Swift file named ContentView.swift and define a variable for our card player:

//    player card
    @State var player_card:String = "back"
    @State var player_card2:String = "back"

//  player score value
    @State var player_scorevalue:Int = 0
    @State var player_scorevalue2:Int = 0

//    player rounds
    @State var player_rounds:Int = 0

Step 2: Create the Random deck function

In the same file, add a function to generate and shuffle a deck of cards:

func Deal(){

//     Player Random number generator
        var PlayerScoreValue:Int = Int.random(in: 2...14)
        var PlayerScoreValue2:Int = Int.random(in: 2...14)

//        Card generator
        player_card = "card" + String(PlayerScoreValue)
        player_card2 = "card" + String(PlayerScoreValue2)

        if PlayerScoreValue > PlayerScoreValue2 {
            player_scorevalue += 1
        }else{
            player_scorevalue2 += 1
        }

        player_rounds += 1;

    }

Step 3: Set Up the Game Board

Create a Game UI. This view will display the cards and the scores for each player:

var body: some View {
        ZStack {
            Image("background-plain")
            VStack{
                Image("logo")
                HStack{
                    Image(player_card)
                    Image(player_card2)
                }
                Button{
                    Deal()
                }label: {
                    Image("button")
                }
                .padding(.all)
                HStack{
                    VStack{
                        Text("Player 1")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        Text(String(player_scorevalue))
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                            .padding(.all, 3.0)
                    }
                    .padding(.all)
                    VStack{
                        Text("Player 2")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        Text(String(player_scorevalue2))
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                            .padding(.all, 3.0)
                    }
                    .padding(.all)
                }
                .padding(.all, 18.0)

                Text(String(player_rounds))
                    .font(.title)
                    .fontWeight(.heavy)
                    .foregroundColor(Color.red)
                    .padding(.all)
                    .frame(width: nil)
                    .border(Color.white, width: 3)
                    .cornerRadius(10.0)


            }
        }
        .padding()

Step 4: Final Code

Finally, the code :

import SwiftUI

struct ContentView: View {

//    player card
    @State var player_card:String = "back"
    @State var player_card2:String = "back"

//  player score value
    @State var player_scorevalue:Int = 0
    @State var player_scorevalue2:Int = 0

//    player rounds
    @State var player_rounds:Int = 0

    var body: some View {
        ZStack {
            Image("background-plain")
            VStack{
                Image("logo")
                HStack{
                    Image(player_card)
                    Image(player_card2)
                }
                Button{
                    Deal()
                }label: {
                    Image("button")
                }
                .padding(.all)
                HStack{
                    VStack{
                        Text("Player 1")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        Text(String(player_scorevalue))
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                            .padding(.all, 3.0)
                    }
                    .padding(.all)
                    VStack{
                        Text("Player 2")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        Text(String(player_scorevalue2))
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                            .padding(.all, 3.0)
                    }
                    .padding(.all)
                }
                .padding(.all, 18.0)

                Text(String(player_rounds))
                    .font(.title)
                    .fontWeight(.heavy)
                    .foregroundColor(Color.red)
                    .padding(.all)
                    .frame(width: nil)
                    .border(Color.white, width: 3)
                    .cornerRadius(10.0)


            }
        }
        .padding()
    }

    func Deal(){

//     Player Random number generator
        var PlayerScoreValue:Int = Int.random(in: 2...14)
        var PlayerScoreValue2:Int = Int.random(in: 2...14)

//        Card generator
        player_card = "card" + String(PlayerScoreValue)
        player_card2 = "card" + String(PlayerScoreValue2)

        if PlayerScoreValue > PlayerScoreValue2 {
            player_scorevalue += 1
        }else{
            player_scorevalue2 += 1
        }

        player_rounds += 1;

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Thank you for taking the time to read this article! I hope you found it informative and useful.

👍 If you appreciated this post, please give it a like!

🔄 Feel free to share this with anyone who might benefit from it.

💬 I’d love to hear your thoughts and any tips you might have — drop a comment below!

👤 Follow me for more insightful blogs in the future!

Support my work with a coffee ☕ — thank you for your generosity!

Make Me A Container: The Docker Guide

lebePage — Thu, 23 May 2024 18:25:58 +0000

Absolutely dread setting up applications — the relentless pain of choosing libraries, tweaking environments, and all the headaches of making stuff work on your machine. But thank goodness for Docker, because those days are now just a crappy memory!

If you’ve been living under a rock, you might not have heard of Docker, but no worries — now that you’re here, I can fill you in on all the details.

So what is Docker?

Docker is an open-source platform that uses containerization technology to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package.
Check the site: Docker website for more information.

Why Docker

There are plenty of reasons to get familiar with Docker, not least because it’s downright cool — and yes, it even has a charming whale as its mascot! But Enough jokes, let’s get technical.

Docker has revolutionized the way developers deploy and manage software applications. Here are several reasons why Docker has become an indispensable tool in modern development environments:

Consistency Across Environments: Docker containers ensure that applications run the same way on any system. This eliminates the “it works on my machine” problem, where applications behave differently across environments due to varying configurations and dependencies.
Rapid Deployment: Docker containers can be created and deployed in seconds, making the process of pushing changes or rolling out new features significantly faster compared to traditional methods of software deployment.
Efficiency: Containers utilize system resources more efficiently than virtual machines, as they share the host system’s kernel and require less overhead. This makes Docker an economical choice for both development and production environments.
Scalability and Modularity: Docker makes it easy to scale applications up or down with its orchestration capabilities. Containers can be replicated, managed, and monitored at scale, which is ideal for microservices architectures where components are loosely coupled and independently scalable.

Enough talk let’s get down to business the real reason you came here is to “LEARN DOCKER!”

Here’s a fascinating approach to understanding the power of Docker: We’re going to set up a full-stack Node.js application that handles basic CRUD operations, using MongoDB as the database. We’ll tackle this setup in two distinct ways — first, through a manual setup process without Docker, and then by utilizing Docker. This will illustrate the differences and advantages that Docker brings to the table.

Note: I had the pleasure of contributing to the Docker repository for this application. If you find the application helpful or impressive, please consider giving it a star⭐ on GitHub.

Setup without Docker:

Environment Preparation:

Install Node.js: Ensure that Node.js is installed on your system. You can download it from nodejs.org.
Install MongoDB: Follow the installation guide on the official MongoDB documentation.

Application Setup:

Initialize the repository: npm init -y
Navigate into the directory: cd your-repository-name
Install dependencies: npm install

Database Configuration:

Ensure MongoDB is running on your system.
Configure your MongoDB URI in your application to connect to your local database instance. check MongoDB website for more information

Run the Application:

Start the server: npm start
Your application should now be running on localhost:3000.

By following these steps, you can manually configure and run your Node.js application linked to a MongoDB database. However, consider the scenario where you need to replicate this setup across different machines and operating systems. It’s a daunting task, isn’t it? Now imagine scaling this process to 50 machines. The complexity and potential for errors multiply, making such a setup exceedingly challenging and stressful. But don’t worry docker is here for the rescue.

Let’s try replicating this step again but with Docker.

Setup with Docker:

Using Docker simplifies and streamlines the setup process, ensuring consistency regardless of the local development environment. Below, we’ll explore how to set up the same full-stack Node.js application using Docker, which includes the database and server environment.

Prerequisites:
Install Docker: Ensure Docker is installed on your system. You can download it from the official Docker website.
Docker Configuration:
Dockerfile: Create a Dockerfile in your project directory. This file will define the environment for your Node.js application. Here’s a basic example of what it might look like:


FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

Docker Compose: Optionally, you can use Docker Compose to manage both your application and MongoDB services together. Create a docker-compose.yml file:

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    depends_on:
      - mongo
    environment:
      - MONGO_URI=mongodb://mongo:27017/mydatabase
  mongo:
    image: mongo
    ports:
      - "27017:27017"

Build and Run the Docker Container:

From the directory containing your Dockerfile and docker-compose.yml, run:

docker-compose up --build

This command builds the Docker images for your application and MongoDB, and starts the containers as defined in your Docker compose file.

Verify the Setup:

After the containers are up and running, you can access your application by visiting http://localhost:3000 in your web browser.
You should see your application running, connected to MongoDB running in another container.

By using Docker, you eliminate the need for manual environment setup and ensure that your application runs in an isolated and consistent environment. This method greatly reduces setup time and increases the reliability of your application across different machines. Docker encapsulates the application and its dependencies, making the deployment and scaling process straightforward and less prone to errors.

You can also eliminate this process by cloning the GitRepo on your machine and making your edits. Also, check out Awesome-Compose for more template.

Conclusion

In conclusion, the contrasting experiences of setting up and managing applications manually versus using Docker highlight the immense value Docker brings to development workflows. With its containerization technology, Docker simplifies the deployment process, enhances consistency across various environments, and significantly reduces the potential for errors associated with manual setups. Whether you’re developing locally or scaling across multiple platforms, Docker provides a reliable and efficient solution, making it an essential tool for developers aiming to streamline their development processes and focus more on innovation than infrastructure.

Thank you for taking the time to read this article! I hope you found it informative and useful.

👍 If you appreciated this post, please give it a like!

🔄 Feel free to share this with anyone who might benefit from it.

💬 I’d love to hear your thoughts and any tips you might have — drop a comment below!

👤 Follow me for more insightful blogs in the future!

Support my work with a coffee ☕ — thank you for your generosity!