(SRK's DIALOGUE PLAYING)
So hello everyone! Yesterday we celebrated Arpit's birthday
and now it's time for me to show you how I am preparing
for Valentine's surprise.
I know that Katie is really amazing with her English speaking skills.
So that's why I wanted to use my coding skills.
So you know, she uses her major, which is English.
She is an English teacher
and I am a software engineer. So you can guess what I'll be making.
And the flowers are ready.
They are drying actually. I bought them two days early
due to Arpit's birthday.
I have to fix it.
So today, I'll be making an iOS app
for that reason because she uses an iPhone.
And if you are a college student,
high school student, anyone can learn easily
and the steps are- basically you need a MacBook
MacBook Air, any kind of MacBook.
If you don't have a MacBook, then you can- if you have a Windows laptop,
you can install MacOS into it
through Virtual Machine like VMware
or you can install Hackintosh
and then finally you can make iOS app.
So let's get started.
So I'm very very excited. I'll be making
an iOS app live with you all. And this video is brought to you by Surfshark
We will be talking about that later.
Let's start coding
So let's open Xcode.
Create a new project.
And on the top, I'm gonna choose iOS.
Then app, then next.
And then let's call it Valentine's...
Or just Valentine.
And interface - Swift UI. Everything default.
Now we can call your company com.
app.valentine
Anything simple is fine.
Now next.
And then create.
And when you open Xcode, you will be working on the file called
ContentView.swift
So just focus on that file.
And you can see the preview of the app
on the right side.
We can see 'Hello, world!' on our app right now.
So let's change 'Hello, world' to 'Happy Valentine's day'
Pretty simple and straightforward.
Now let's try to make this app
beautiful with a background
And now I'm gonna add a background with a linear gradient.
So linear gradient is a mixture of multiple colours.
I am gonna add colours like blue, red green and white.
Now we are gonna set the starting point to top.
And the ending to bottom trailing.
And that's it.
We have a gradient now.
Do you see a problem with this code right now?
The problem is the text is behind the background.
So we want the text to be visible.
So for that reason,
we will be using a z-stack
z-stack allows every view to be on top of each other.
Stack is basically- right- for example
phone on top of each other
So basically you are putting text above the background
so that you can see it.
So that's the idea of z-stack.
Now with z-stack
your text is finally finally visible
and I'm gonna ignore the safe area, so that
the top line is also hidden.
And now, let's make the 'Happy valentine' text beautiful.
So for that I'm gonna make it bold.
And then add a new font to it.
So the font will be called
And I am gonna add font to it. So that I can increase the size.
Size is pretty small. So I'm gonna increase the size to 32.
And the background colour to red.
So let's wait for it to load.
The preview is still loading.
So this is finally how our app looks like on iPod.
But Katie has an iPhone 13. So I'm gonna change
the iPod touch to iPhone 11 or 13 because the size is same.
So now I will be able to see how it will look on her iPhone.
So this is how the app looks. I think it looks pretty fine right now.
But I want to add a letter.
So just like she writes lots of letters for me,
I want to add a written text to this app
and we will add more creative stuff later.
So let's add some text.
And all CS students love copy-pasting. So that's why
I'm gonna copy the 'Happy Valentine's day' text format
and in the same format we will add a new text.
So this time, I don't want background colour.
Let's keep it white and simple.
So I'm gonna add-
Oh no! There's a problem.
You can see there's text on the top of each other.
So basically you want the text to be below each other.
So for that we can- there are two options.
I'm gonna use a Vstack which is very simple/
So Vstack is vertical stack.
So that way your text be above one another
and you can easily write the note on it.
So my note will be:
Uhh... It's a secret note. You can actually read it. I don't care.
So I'm gonna quickly type the note that I have for her.
So after typing the note, we have
some part of the app done.
So now, after writing some part of the Valentine's day note-
You can call it a love letter as well-
Some part of the app is done.
Now let's add some buttons.
And I really want this app to be unique
so I am gonna add two buttons.
Number one button will be 'I love you' and if you can see,
it is blue coloured
and it's not visible so let's add some background colour to it.
Padding to it.
All those housekeeping stuff -
Simple stuff just like we added before.
So let's add that features to the button.
Now after adding those features, I am gonna add another button
called I hate you
but again the problem is that both the buttons are overlapping with each other
I'm gonna fix it with horizontal stack this time.
Because I want both of them to be in the same line horizontally.
So let's add a horizontal Hstack
and now you can see both the buttons clearly.
So now let's run the app. Some part of the app is done
So let's run it.
And before running the app there's one more-
And before running the app there's one more problem.
It's that the button should be in the bottom.
Now for that I'm gonna add some padding
and with padding, the buttons will move to the bottom.
Now let's run it.
So now the app is pretty straightforward.
But there is a big problem with this app.
Do you know what?
That all the data in my app and my browsing history
can be shared with my WiFi provider.
For example, I use AT&T. Katie uses AT&T as well.
So AT&T can actually track her data, her browsing history.
And I don't want that to happen.
So that's why I'll be installing Surfshark VPN as well as a gift.
So that all her data is safe.
And- And also when you move from India to US
many shows like ZeeCinema or Zee5 might not be available in the US.
But you can use Zee5 through the VPN by changing the country to India in the US
and if you are in India as well, you can change your country.
So that you can actually access to multiple libraries of Netflix,
Amazon Prime, whatsoever streaming services you use.
You can actually unblock so many movies that you can watch.
So many TV series you can watch as well.
So definitely check it out. And if you will use my code
Singh in USA, you will get 83% off discount
and three months free on their yearly subscription
So definitely check it out and the link will be in the description below.
Now phase two of the app
I am gonna show some photos.
I am gonna show my favourite photo with Katie on the app
with a button click I love you.
So for that, I'm gonna find the photo in my gallery.
So that photo is saved in the documents folder.
So I'm gonna go to assets
In Xcode- After going to assets, I'm gonna simply drag and drop
the photos that I want to add in my app-
the app I am making-
to show that I need to have in the projects first.
So for that I'm gonna create a new asset called love.
When you click on 'I love you' button, that image will be showed
and I will create another asset called hate
So drag and drop in both.
And it's very easy to add an image to Xcode.
So now the image is added. Let's add in the app as well.
So above the linear gradient,
below it I am gonna add the image.
And let's wait on the right side.
So let's click the resume button.
It doesn't automatically load sometimes.
So let's click on the resume button.
And the gradient colour - red, blue replaced with the photo I want.
But there's a problem. I want to show it with the button click
not on the home page.
So for that we have to add some statements.
So let's take a look.
So first of all, I'm gonna add a boolean statement.
Is image shown? Or, should you show the image?
My- like the love photo or the hate photo.
So first of all, let's create the variable 'is shown'
So that will check whether you want to show the photo of Harnoor and Katie or not.
So let's create that variable.
And I'm gonna add an if statement.
If that variable is true only then
show the image.
So let's add that statement.
So now the image is not shown by default
because 'is shown' is false in the top of the program.
So now I am gonna go to the button click.
So in the button listener- when you will press the button
I want 'is shown' to be true
so that you can actually show the image when you click the button.
So let's change it.
Image = Love. So you are basically changing the variable of the image.
And change the 'is shown' to true.
So now let's test it out.
And you can print as well. To debug you can actually print the statement
on your console as well. But that's the next step.
Now let's copy paste (we love copy pasting) the same for 'I hate you' button.
But the change will be - Image will be hate and
'is shown' will be true as well because you have to show the image
Now the print will be "I hate you"
So let's run the app and see if it works.
So when I click the 'I love you' button- Image is changing
When I click the 'I hate you' button, image is changing as well.
So most of the app is done but there's a problem.
You can see the text is still visible.
So let's remove the text when you click the button.
So let's go back to the app.
I'm gonna use the same 'if statement'
And.. Now to hide the text, I am gonna use the same 'if statement'
So basically 'if' is shown. If that shown is false by default,
then you will show the text. It's the opposite.
If image is shown, text shouldn't be shown
And if text is shown, image shouldn't be shown.
So there will be a not in the beginning of 'is shown'
And that's how you will be able to remove it the moment image's shown.
So pretty straightforward.
That is second phase of the app.
Pretty much done and it's pretty simple.
Now the third phase of the app. Which is, like you can put your creativity
My creativity says that I should add my own audio.
Like asking, "Hey Katie, will you be my valentine?"
for I love you.
And for I hate you, a dialogue from my favourite movie Kal Ho Naa Ho
(SAYS DIALOGUE)
So I want to add that in my own voice.
For now, for this app, let's just download those
download those audio and add them into it.
I just downloaded those audio files.
One was I love you Naina, and the other was Will you be my valentine.
Somewhere I found those audio, right?
And now I put it into a folder.
Now I am gonna drag and drop that folder
in my project.
And I am gonna do something. You can copy-paste.
Just google how to add audio to project.
So there is two audio files.
One is love sound and one is hate sound.
I created two variables.
Now when you click the love button,
you will be showing or actually playing the audio for love.
And when you click the hate button you will be playing the audio for hate.
Which is, "I am sorry I love you Naina, I love you very much."
And when you click the love button, "Will you be my valentine?"
So basically the idea is, you have to click
when you click that button, it will play that audio.
So let's make it happen.
So there are two functions right now. You can call it method.
Method will basically play that audio.
So you just have to make your call. You just have to type
play song love or play song hate.
So the moment you tap the button, these two music will be played.
So let's install the app and see if it works.
Okay. Uhh...
There's an error..
Actually I wrote Songs ('S' capital) It's actually 's' small.
So let's change it back in the Xcode.
So now it should work.
Yes! It's working!
Now the final step of the app is
to install it on my own phone.
So my phone is right here. Let's check in my physical iPhone
if it works the same way I want to.
So that when I install in Katie's iPhone, it should work as well.
So let's do the final testing.
So I am gonna plug in the cable
To install the app on your iPhone you may need
Apple developer account.
I have bought it. It costed me 100 dollars.
So it's not 100% free to do that.
But you can get it free for 7 days. You have to Google.
You can try it out.
So let's click the pay button. So let's change
the emulator to Harnoor's iPhone.
And when I will be installing it on Katie's iPhone,
I'll be changing it to Katie's iPhone.
So now, let's install the app and see how it looks on my iPhone.
Okay, I am very excited.
It's installing!
So let's run the app.
And see.
So this is how the app looks like on my iPhone as well.
So I'm really really excited. Let's play it.
So, "I love you"
I have changed it to my own audio.
(HARNOOR SPEAKING) Will you be my Valentine?
Okay, now, I will tap on "I hate you."
(SRK's DIALOGUE PLAYING)
That's pretty much it.
So it was very exciting.
And I will be showing you how I surprise her in the next video.
So thank you so much for watching. And I'll see you guys in the next one.
I'm very excited for tomorrow.