SwiftUI - Create the best app of vocabulary word book by yourself for free | Apple iOS Xcode YouTube Seminar #6

Swift5.1.3 Xcode11.3 SwiftUI

- import webkit and handle favorite url
- how to create web browser
- manage and switch bookmarks

To practice and learn new languages, smart vocabulary list should be set with your own app.

* Here is the highlight of YouTube tutorial.

Why I started to learn Swift was that I wanted to create vocab list app by myself. It may sounds very difficult if you are beginner. But, don't worry. Even a strange Japanese who cannot speak English well like me could create it. You can do it.

First, you need to prepare CSV file for the vocabulary note book. Numbers or Excel file may have some unexpected line feed codes so please be careful when use it. The safer way is to use terminal to create csv file by useing the follwoing code.

cd Desktop;
echo apple,リンゴ >> file.csv;

Please use loop command if your vocab list is big with this code. Let me leave the way to add CSV file on Xcode for YouTube video.

The necessary variables are as follows;

@State var csvArr = [String]()
@State var fluits = [String]()
@State var WordBook:Dictionary<String,String> = [:]
@State var selection:String = ""
@State var showPicker = false

The following usual picker is also used.

struct SinglePicker: View {
let fluits: [String]
@Binding var selection:String

var body: some View {
GeometryReader { geometry in
Picker(" WordBook", selection: self.$selection) {
ForEach(0..<self.fluits.count) { row in
Text(verbatim: self.fluits[row]).tag(self.fluits[row])

After you start the app, the following code appending on VStack will be worked.

perform: {
let url = Bundle.main.path(forResource: "file", ofType: "csv")

do {
var csvString = try String(contentsOfFile: url!, encoding: String.Encoding.utf8)
self.csvArr = csvString.components(separatedBy: .newlines)
} catch let error as NSError {
print("Error: \(error)")

for sstr in self.csvArr {
let arrayPart = sstr.components(separatedBy: ",")
self.WordBook[arrayPart[0]] = arrayPart[1]

The CSV file will be read one line by one and csvString will become Array. The each element has comma so you need to separate it with it.

let arrayPart = sstr.components(separatedBy: ",")

The former part will be used for the other array named "fluits". On the other hand, the latter part will be used for the dictionary with the fluit key.

By using this data, place the following code in ContentView.



}) {
Text("Load CSV")

Text("\(self.WordBook[self.selection] ?? "")")

if showPicker {
SinglePicker(fluits: fluits, selection: $selection)
} else {
SinglePicker(fluits: fluits, selection: $selection)

The most difficult part was to understand how SinglePicker() acts. Before reading CSV file, SinglePicker() is created in ContentView. And, I could not refresh the picker so easily. As far as I know, there was no way to reload Picker such as reloadAllComponents() of UIPIckerView.

My solution was to create two SinglePicker()s and switch them when hitting button. In this way, you can use the loaded csv data in Xcode.

If you know the smarter way than this, I hope you to let me know.

To get the source code, check the comment of my YouTube

Back to Table List