Download Swift E-Learning App Project<\/h3>\n
Please download the source code of Swift E-Learning App Project: Swift E-Learning App Project Code.<\/strong><\/a><\/p>\n Step 1:<\/strong> Create a new SwiftUI project in Xcode.<\/p>\n Step 2:<\/strong> Create a Model to store Course and Videos data.<\/p>\n Step 3:<\/strong> Designing the CourseRowView view.<\/p>\n Step 4:<\/strong> Designing the CourseListView view<\/p>\n Step 5:<\/strong> Designing the VideoRowView view.<\/p>\n Step 6:<\/strong> Designing the VideoListView view<\/p>\n Step 7:<\/strong> Designing the VideoPlayerView view<\/p>\n Step 8:<\/strong> Creating the WebView<\/p>\n Step 9:<\/strong> Creating View Model for loading Courses<\/p>\n Step 10:<\/strong> Integrating the ContentView with CourseListView<\/p>\n a.<\/strong> Open Xcode and Click on the \u201cCreate a new Xcode Project\u201d option.<\/p>\n b.<\/strong> Now select the platform as \u201ciOS\u201d and the application type as \u201cApp\u201d.<\/p>\n c.<\/strong> Now, Enter the name of the app, and organization identifier, and select SwiftUI interface for building the UI of the app. Also, select Swift as the language for creating the app.<\/p>\n d.<\/strong> Select the folder where you want to save the app and click on Create.<\/p>\n e.<\/strong> Now your project is ready for development, and you will see something like below.<\/p>\n a.<\/strong> Create a new swift file called \u201cModel.swift\u201d.<\/strong> This view will display a single course item in a list format, including the thumbnail and name. This view will display all the course items in a list format. This view will display a single video item in a list format, including the thumbnail and name. This view will display all the video items in a list format. a.<\/strong> Create a new swift view file called \u201cVideoRowView.swift\u201d.<\/strong> a.<\/strong> Create a new swift view file called \u201cVideoRowView.swift\u201d.<\/strong> a.<\/strong> Create a new swift file called \u201cCourseViewModel.swift\u201d.<\/strong> a.<\/strong> Open \u201cContentView.swift\u201d<\/strong> file. Output<\/strong><\/p>\n Congratulations! You have successfully created an E-learning app using SwiftUI. You’ve learned how to build the user interface, navigate between views, display thumbnail images, and play videos using the WebView component. This is just the beginning, and you can continue to enhance the app by adding more features based on your needs. Keep exploring SwiftUI and have fun building amazing E-learning experiences!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Welcome to this project on building an E-learning app using SwiftUI. In this project, we’ll walk you through the process of creating a simple E-learning app that allows users to browse different courses and...<\/p>\n","protected":false},"author":581,"featured_media":115819,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27789],"tags":[27821,27822,27823,27820,27791,27790,27824],"class_list":["post-115718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-swift-tutorials","tag-e-learning-app-project","tag-e-learning-project","tag-swift-e-learning-app","tag-swift-e-learning-app-project","tag-swift-project-ideas","tag-swift-projects","tag-swift-projects-for-practice"],"yoast_head":"\nSteps to Create an E-Learning App Project Using Swift<\/h3>\n
Step 1: Create a new SwiftUI project in Xcode.<\/h4>\n
![\"welcome](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/welcome-to-xcode.webp\")
<\/a><\/p>\n![\"choose](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/choose-a-template.webp\")
<\/a><\/p>\n![\"swift](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/swift-as-language-scaled.webp\")
<\/a><\/p>\n![\"project](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/project-is-raedy-for-development-1-scaled.webp\")
<\/a><\/p>\nStep 2: Create a Model to store Course and Videos data.<\/h4>\n
\nb.<\/strong> This file defines the data models used in the app, namely Course<\/strong> and Video.<\/strong>
\nc.<\/strong> The Course struct represents a course and contains properties like course_thumbnail,<\/strong> course_name,<\/strong> and course_videos.<\/strong>
\nd.<\/strong> The Video struct represents a video within a course and contains properties like video_link, video_thumbnail,<\/strong> and video_title.<\/strong><\/p>\nimport Foundation\r\n\r\n\r\nstruct Course: Codable {\r\n let course_thumbnail: String\r\n let course_name: String\r\n let course_videos: [Video]\r\n}\r\nstruct Video: Codable {\r\n let video_link: String\r\n let video_thumbnail: String\r\n let video_title: String\r\n}<\/pre>\nStep 3: Designing the CourseRowView view.<\/h4>\n
\na.<\/strong> Create a new swift view file called \u201cCourseRowView.swift\u201d.<\/strong>
\nb.<\/strong> This file contains the CourseRowView<\/strong> view, which represents a single course in the course list.
\nc.<\/strong> The view displays the course’s thumbnail image, name, and other relevant details.
\nd.<\/strong> The CachedAsyncImage<\/strong> component is used to asynchronously load and cache the course thumbnail image.<\/p>\nimport SwiftUI\r\nimport CachedAsyncImage\r\n\r\n\r\nstruct CourseRowView: View {\r\n let course: Course\r\n \r\n var body: some View {\r\n VStack(alignment: .leading) {\r\n Spacer(minLength: 5)\r\n CachedAsyncImage(url: URL(string: course.course_thumbnail),transaction: Transaction(animation: .easeInOut)) { phase in\r\n if let image = phase.image {\r\n image\r\n .resizable()\r\n .scaledToFit()\r\n .clipShape(RoundedRectangle(cornerRadius: 10))\r\n .transition(.opacity)\r\n } else {\r\n HStack {\r\n Spacer()\r\n Image(systemName: \"photo\")\r\n .imageScale(.large)\r\n Spacer()\r\n }\r\n }\r\n }\r\n Text(course.course_name)\r\n .font(.headline)\r\n Spacer(minLength: 2)\r\n \r\n }\r\n }\r\n}<\/pre>\nStep 4: Designing the CourseListView view<\/h4>\n
\na.<\/strong> Create a new swift view file called \u201cCourseListView.swift\u201d.<\/strong>
\nb. This file contains the CourseListView<\/strong> view, which displays a list of courses.
\nc. The CourseListView view is embedded in a NavigationView<\/strong> and shows a list of courses using the SwiftUI List<\/strong> view.
\nd. Each course in the list is represented by a CourseRowView<\/strong> view.
\ne. Tapping on a course navigates the user to the VideoListView<\/strong> view, passing the corresponding course’s videos.<\/p>\nimport SwiftUI\r\n\r\n\r\nstruct CourseListView: View {\r\n @ObservedObject var viewModel: CourseViewModel\r\n \r\n var body: some View {\r\n NavigationView {\r\n List(viewModel.courses, id: \\.course_name) { course in\r\n NavigationLink(destination: VideoListView(videos: course.course_videos)) {\r\n CourseRowView(course: course)\r\n }\r\n }\r\n .navigationBarTitle(\"Courses\")\r\n }\r\n }\r\n}<\/pre>\nStep 5: Designing the VideoRowView view.<\/h4>\n
\na.<\/strong> Create a new swift view file called \u201cVideoRowView.swift\u201d.<\/strong>
\nb.<\/strong> This file contains the VideoRowView<\/strong> view, which represents a single video in the video list.
\nc.<\/strong> The view displays the video’s thumbnail image, title, and eye icon, indicating whether the video has been watched or not.
\nd.<\/strong> The eye icon’s color is determined based on the value stored in UserDefaults.<\/strong>
\ne.<\/strong> Tapping on a video row marks the video as watched by updating the corresponding value in UserDefaults.<\/strong><\/p>\nimport SwiftUI\r\nimport CachedAsyncImage\r\n\r\n\r\nstruct VideoRowView: View {\r\n let video: Video\r\n \r\n var body: some View {\r\n VStack(alignment: .leading) {\r\n Spacer(minLength: 5)\r\n CachedAsyncImage(url: URL(string: video.video_thumbnail),transaction: Transaction(animation: .easeInOut)) { phase in\r\n if let image = phase.image {\r\n image\r\n .resizable()\r\n .scaledToFit()\r\n .clipShape(RoundedRectangle(cornerRadius: 10))\r\n .transition(.opacity)\r\n } else {\r\n HStack {\r\n Spacer()\r\n Image(systemName: \"photo\")\r\n .imageScale(.large)\r\n Spacer()\r\n }\r\n }\r\n }\r\n HStack{\r\n Text(video.video_title)\r\n .font(.headline)\r\n .multilineTextAlignment(.leading)\r\n \r\n Image(systemName: UserDefaults.standard.bool(forKey: video.video_title) ? \"eye.fill\" : \"eye.slash.fill\")\r\n .foregroundColor(UserDefaults.standard.bool(forKey: video.video_title) ? .green : .red)\r\n .frame(alignment: .trailing)\r\n .scaledToFit()\r\n \r\n }\r\n }\r\n .onAppear {\r\n if !UserDefaults.standard.bool(forKey: video.video_title) {\r\n UserDefaults.standard.set(false, forKey: video.video_title)\r\n }\r\n }\r\n .onTapGesture {\r\n UserDefaults.standard.set(true, forKey: video.video_title)\r\n }\r\n }\r\n}<\/pre>\nStep 6: Designing the VideoListView view<\/h4>\n
\na.<\/strong> Create a new swift view file called \u201cVideoRowView.swift\u201d.<\/strong>
\nb.<\/strong> This file contains the VideoListView<\/strong> view, which displays a list of videos for a selected course.
\nc.<\/strong> Similar to the CourseListView<\/strong>, the VideoListView<\/strong> is embedded in a NavigationView<\/strong> and uses the SwiftUI List view to show the videos.
\nd.<\/strong> Each video in the list is represented by a VideoRowView<\/strong> view.
\ne.<\/strong> Tapping on a video navigates the user to the VideoPlayerView<\/strong> view, passing the video link and title.<\/p>\nimport SwiftUI\r\n\r\n\r\nstruct VideoListView: View {\r\n let videos: [Video]\r\n \r\n var body: some View {\r\n List(videos, id: \\.video_title) { video in\r\n NavigationLink(destination: VideoPlayerView(videoLink: video.video_link, title: video.video_title)) {\r\n VideoRowView(video: video)\r\n }\r\n }\r\n .navigationBarTitle(\"Videos\")\r\n }\r\n}<\/pre>\nStep 7: Designing the VideoPlayerView view<\/h4>\n
\nb.<\/strong> This file contains the VideoPlayerView<\/strong> view, which displays the web view to play the selected video.
\nc.<\/strong> The WebView<\/strong> component is used to load the video link and show it in the web view.
\nd.<\/strong> The video’s title is displayed in the navigation bar.<\/p>\nimport SwiftUI\r\n\r\n\r\nstruct VideoPlayerView: View {\r\n let videoLink: String\r\n let title: String\r\n \r\n var body: some View {\r\n WebView(urlString: videoLink)\r\n .navigationBarTitle(title)\r\n }\r\n}<\/pre>\nStep 8: Creating the WebView<\/h4>\n
\nb.<\/strong> This file contains the WebView<\/strong> struct, which is a UIViewRepresentable<\/strong> that wraps the WKWebView<\/strong> component.
\nc.<\/strong> The WebView<\/strong> struct is responsible for loading the provided URL<\/strong> string into the web view.<\/p>\nimport SwiftUI\r\nimport WebKit\r\n\r\n\r\nstruct WebView: UIViewRepresentable {\r\n let urlString: String\r\n \r\n func makeUIView(context: Context) -> WKWebView {\r\n guard let url = URL(string: urlString) else {\r\n return WKWebView()\r\n }\r\n let request = URLRequest(url: url)\r\n let webView = WKWebView()\r\n webView.load(request)\r\n return webView\r\n }\r\n \r\n func updateUIView(_ uiView: WKWebView, context: Context) {\r\n \r\n }\r\n}<\/pre>\nStep 9: Creating View Model for loading Courses<\/h4>\n
\nb.<\/strong> This file contains the CourseViewModel class<\/strong>, which is responsible for loading the course data from a JSON<\/strong> file.
\nc.<\/strong> The CourseViewModel class is an ObservableObject<\/strong> that publishes the loaded courses using the @Published property wrapper.
\nd.<\/strong> The course data is loaded from the courses.json<\/strong> file included in the app bundle.<\/p>\nimport Foundation\r\n\r\n\r\nclass CourseViewModel: ObservableObject {\r\n @Published var courses: [Course] = []\r\n \r\n init() {\r\n if let url = Bundle.main.url(forResource: \"courses\", withExtension: \"json\") {\r\n do {\r\n let data = try Data(contentsOf: url)\r\n let decoder = JSONDecoder()\r\n self.courses = try decoder.decode([Course].self, from: data)\r\n } catch {\r\n print(\"Error decoding JSON: \\(error)\")\r\n }\r\n }\r\n }\r\n}<\/pre>\nStep 10: Integrating the ContentView with CourseListView<\/h4>\n
\nb.<\/strong> Inside the ContentView<\/strong> struct, create an instance of the CourseViewModel<\/strong> and
\npass it in the CourseListView<\/strong> inside the ContentView view.<\/p>\nimport SwiftUI\r\n\r\n\r\nstruct ContentView: View {\r\n let viewModel = CourseViewModel()\r\n \r\n var body: some View {\r\n CourseListView(viewModel: viewModel)\r\n }\r\n}\r\nstruct ContentView_Previews: PreviewProvider {\r\n static var previews: some View {\r\n ContentView()\r\n }\r\n}<\/pre>\n![\"integrating](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/integrating-content-view-scaled.webp\")
<\/a><\/p>\n![\"e](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/e-learning-app-output.webp\")
<\/a><\/p>\n![\"swift](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/swift-e-learning-app-output.webp\")
<\/a><\/h3>\n![\"swift](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/swift-e-learning-app-project-output.webp\")
<\/a><\/h3>\nSummary<\/h3>\n