๐ฉ Quickstart 0: Hello World
๐ซ Deploy a simple HelloWorld contract to learn the basics of the Flow blockchain and Cadence. Youโll use:
- The Flow CLI & local Flow emulator to deploy smart contracts.
- The local Flow dev wallet to log into test accounts.
- A template Swift iOS/iPadOS app with sample scripts and transactions to interact with your contract.
๐ The final deliverable is a Mobile DApp that lets users read and change a greeting field on Flow testnet. (๐งจ WalletConnect has not been configured so DapperSC
and Lilico
wallets will crash the application)
๐ฌ Meet other builders working on this challenge and get help in the Emerald City Discord!
Video Walkthrough
Coming Soon!โฆhopefully..
๐ฆ Checkpoint 0: Install && Deploy
Required:
- Git
- Xcode
- Flow CLI (๐งจ Make sure to install the correct link for your system ๐งจ). You know you have installed it if you type
flow version
in your terminal and it prints a version.
First open a terminal ๐ฑ and clone this repository. After switching to the project directory open the project in Xcode.
git clone https://github.com/BoiseITGuru/0-hello-world-ios.git
cd 0-hello-world-ios
open Hello\ World.xcodeproj/
Next we need to copy or rename
flow.json.example
toflow.json
.
mv flow.json.example flow.json
in a second terminal window, start your ๐ทโ local emulator:
cd 0-hello-world
flow emulator start -v
Note: the -v
flag means to print transaction and script output to your local emulator
in a third terminal window, ๐พ deploy your contract and ๐ธ start your local wallet:
cd 0-hello-world
flow project deploy
flow dev-wallet
You can
flow project deploy --update
to deploy a new contract any time.
Once the emulator and dev-wallet have been started, use Xcode to run your app on the iOS simulator. (๐งจ FCL-Swift does not currently support using the dev-wallet on a physical iOS device.)
๐ Checkpoint 1: Wallets
Weโll be using the local Flow dev wallet.
Click the โLog Inโ button and notice a pop up asking you to connect a wallet. Select
Dev Wallet
then wait for the authentication page to load. Notice a window appears with one or more accounts to select, each with their own Flow Token balance. Select the first account to log in to it.
๐ Checkpoint 2: Reading the Greeting
๐ Press the
Get Greeting
button to see your greeting:
โ๏ธ Checkpoint 3: Changing the Greeting
โ๏ธ Change the greeting! Type a new greeting into the input and press the
Change Greeting
button or theSend
button on the keyboard. You should see a transaction pop up:
๐ Click โAPPROVEโ and then click the
Get Greeting
button to see your new greeting:
๐พ Checkpoint 4: Deploy it to testnet!?
Now ๐ Generate a deployer address by typing
flow keys generate --network=testnet
into a terminal. Make sure to save your public key and private key somewhere, you will need them soon.
๐ Create your deployer account by going to https://testnet-faucet.onflow.org/, pasting in your public key from above, and clicking
CREATE ACCOUNT
:
After it finishes, click
COPY ADDRESS
and make sure to save that address somewhere. You will need it!
โฝ๏ธ Add your new testnet account to your
flow.json
by modifying the following lines of code. Paste your address you copied above to where it says โYOUR GENERATED ADDRESSโ, and paste your private key where it says โYOUR PRIVATE KEYโ.
"accounts": {
"emulator-account": {
"address": "f8d6e0586b0a20c7",
"key": "5112883de06b9576af62b9aafa7ead685fb7fb46c495039b1a83649d61bff97c"
},
"testnet-account": {
"address": "YOUR GENERATED ADDRESS",
"key": {
"type": "hex",
"index": 0,
"signatureAlgorithm": "ECDSA_P256",
"hashAlgorithm": "SHA3_256",
"privateKey": "YOUR PRIVATE KEY"
}
}
},
"deployments": {
"emulator": {
"emulator-account": [
"HelloWorld"
]
},
"testnet": {
"testnet-account": [
"HelloWorld"
]
}
}
๐ Deploy your HelloWorld smart contract:
flow project deploy --network=testnet
You can use
flow project deploy --update
to deploy a new contract any time.
๐ฑ Open Hello World.xcodeproj
in Xcode and update line 13 of `Hello World > Flow > FlowManager.swift with the newly created Testnet account so we can interact with your new contract.
import UIKit
let testAccount = "YOUR TESTNET ACCOUNT"
class FlowManager: ObservableObject {
...
}
You will also need to change the first to lines of the setup()
function inside FlowManager to switch over to the Flow testnet, as shown below. REMINDER: ๐งจ WalletConnect has not been configured so DapperSC
and Lilico
wallets will crash the application.
class FlowManager: ObservableObject {
...
func setup() {
let defaultProvider: FCL.Provider = .blocto
let defaultNetwork: Flow.ChainID = .testnet
...
}
...
}
Lastly, run the app in the simulator or on your iOS/iPadOS Device.
๐ Make Edits
๐ You can also check out your smart contract HelloWorld.cdc
in cadence/HelloWorld.cdc
.
๐ผ Take a quick look at how your contract gets deployed in flow.json
.
๐ The app is written in SwiftUI, and implements a โNo View Modelโ design. With the exception of the FlowManager service and a few UI helpers in the Misc directory, the design and direct functions can all be modified in the Views directory.
โ๏ธ Side Quests
๐ Head to your next challenge here.
๐ฌ Meet other builders working on this challenge and get help in the ๐ Emerald City Discord!
๐ Problems, questions, comments on the stack? Post them to the ๐ Emerald City Discord.