创建第一个Web应用程序的技巧

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

创建第一个Web应用程序的技巧作为一个开发网页应用的人(为自己和客户),我从我的经历中学到了一些东西,这些东西帮助我在我所拥有的时间和资源中获得了最好的结果。这些建议来自一个一开始并不熟悉Web编程的人。当我第一次开始开发我的第一个网页应用时,我还不是一个网页开发人员。

我是个商人。(如果你想读我的故事,关于我如何在短短几个月内用Ruby on Rails开发了我的第一个web应用程序,请查看我的文章:为什么用Rails制作web应用程序是了不起的。)我假设你,也就是读这篇文章的人,已经是一名网页开发者了,或者你将为自己的第一款网页应用雇佣一名网页开发者。我将讨论适用于所有网页应用的实用且普遍的建议网络技术你使用。

因此,请不要期望本文中有一些深层次的web编程技术,因为您将一无所获。我所做的另一个假设是,你将创建自己的第一款网页应用,而不是在1.0版本上投入数十万美元。我假设你们预算在5000美元左右很大程度上是因为这就是我的经验所在。在我的前言说完了之后,让我分享基于我自己的web应用开发经验的7个建议。

1.从数据关系的角度考虑

无论复杂程度、大小或功能集如何,你都可以将任何web应用分解为以下简单的操作机制:

  1. web应用程序需要在数据用户
  2. web应用程序处理并决定如何处理数据
  3. web应用程序类生成一些输出用户

所有的网页应用都是这样工作的,所以在一开始,最好将你的网页应用的核心功能分解成数据关系:

  • 你的网页应用应该如何构建
  • 你的web应用如何处理用户数据和演示
  • 你需要优先考虑哪些功能
  • 您需要获取和熟悉哪些web服务和web技术

等等。举个例子,我们来看看Instagram-在照片分享服务上发布照片-并将其分解为上面的基本操作机制:

  1. web应用程序需要在一个照片用户
  2. web应用程序处理照片放大或缩小到Instagram的布局,以及用户想要应用到照片上的照片效果
  3. web应用程序控件生成修改后的图像并将其显示用户

所以,如果你雇我为你创建一个Instagram的克隆,我可能会创建一个数据关系的分解,像这样:

用户
拥有2个权限角色(用户而且管理
一个用户可以上传照片
一个用户可以操纵照片
一个用户可以喜欢也可以不喜欢照片其他的用户
一个用户可以评论照片
照片
照片均由用户
一个照片可以得到一个过滤器用户谁拥有照片
一个照片可以喜欢/不喜欢的
一个照片可以得到一个评论
一个照片可以删除/编辑/更新吗
一个照片可以是私人的还是公共的
过滤器
一个过滤器可应用于照片
一个过滤器可以由管理
评论
一个评论属于一个照片
一个评论可以通过用户谁的评论
一个评论可以通过用户谁拥有照片在哪里评论是在

我知道当你开始看网页应用的时候你可能不能自然地这样想,但你使用其他网页应用越多,你越想它们在所有这些小的数据关系中,你就越容易概念化和构建你的网页应用。

2.跟踪那些能激发你灵感的ui和网站

你有喜欢的网络应用程序和网站的例子吗?从小到交互组件(如按下按钮时的感觉或web应用程序如何处理图像上传功能),大到整个网站的配色方案和总体设计主题和敏感性,你应该有一些方法来记录这些鼓舞人心的例子。你在网上遇到的任何你喜欢的东西,都要记下来。

Pinterest上的UI灵感板你可以使用多媒体笔记工具,比如Evernote或者一个书签服务形象就像Pinterest对于这个。有了这些网页用户界面和网站设计的集合,将会在你开始开发你的网页应用程序的界面时帮助你——你可以从你的集合中寻找想法。同时,要熟悉自己的日常用语用户界面设计模式确保你的UI组件是给定任务的最佳解决方案。

3.保持第一个版本尽可能简单

构建一个最小可行产品(MVP)是在线创业公司的流行概念。最小可行产品是指拥有网页应用最基本的核心功能,仅此而已的产品。制作MVP有很多好处,但最主要的原因是尽可能快、尽可能便宜地验证你的网页应用创意。

如果你让网页应用拥有非常严格且明确的核心功能,你便能够测试这些核心功能是否是用户所需要的。你还记得谷歌的第一个版本吗?谷歌的核心功能是搜索。

对于这个核心功能,您所需要的只是一个用于用户搜索词的文本输入字段,以及一个执行搜索的按钮。它不需要很漂亮。不需要比这更复杂。

它只需要很好地履行承诺。MVP允许谷歌向公众发布产品,以便公司在进一步开发之前验证他们的想法。MVP还允许他们开始收集用户搜索行为,梳理出产品未来版本的新功能和改进机会。

快进到今天,谷歌已经不仅仅是一家搜索公司了。与第一个版本相比,它们的核心功能也更加复杂。但正是第一个版本让他们走上了现在的道路。

我从未见过一款网页应用因为功能太少或功能不足而失败。对我来说,网页应用失败的原因是没有人对它们想要解决的问题有需求,或者是因为网页应用没有有效地执行问题的解决方案。

4.关注行为,少关注观感

通常情况下,人们对网页应用的不满来自于它的运行方式,而不是它的外观。我并不是说你应该忽略你的网页应用的整体外观,但我认为一旦你确定你的解决方案是用户真正想要的,你就可以在这方面进行改进、优化和投入。我的建议是将你的时间和资源投入到网页应用中价值主张——对于网页应用来说,这通常是它旨在为用户解决的基本问题。

为此,我鼓励您使用可靠的HTML/CSS框架或样板,例如Twitter引导骨架而且基金会在开发你的MVP的前端界面时。CSS/HTML框架和样板可以加速前端设计和开发,这样你就可以有更多的时间专注于你的web应用的行为。这样,你就可以把大部分的时间和资源花在开发新的和新奇的东西上,而不是花在已经解决的问题上。

没有必要做无谓的工作。Kippt是一款试图增强人们搜索、阅读、存储、搜索和分享网络内容的网络应用,它使用了Twitter Bootstrap:Kippt的目标是解决一个复杂而雄心勃勃的问题——有数十亿个网页,他们意识到网站的外观并不是他们获得更多网页应用注册的主要原因。因此,对于前端设计,他们依赖于一个可靠而漂亮的前端框架来帮助他们完成响应式网页设计、内容布局、CSS重置、跨浏览器兼容性,以及其他在任何web项目中都非常关键、但在他们之前已经被其他人解决的无数事情。

在你验证了你的网页应用并确信它值得开发之后,你就可以投资你的退休基金去设计那个完美的网页应用了的图标如果你愿意的话。

5.尽可能使用免费或负担得起的Web服务

即使你刚刚中了彩票,有很多钱要花,也不要轻率地使用你的资金。有许多为现代web应用程序构建的功能强大的web服务都有免费(或非常实惠)的定价计划。Heroku(我最喜欢的Rails主机)Amazon S3(用于存储图像和其他内容)SendGrid(用于处理您的事务性邮件)条纹(处理您的支付,只收取交易费用)谷歌分析(对于相对强大的网络分析)-通过一点在线研究和自我教育,你可以为自己节省很多钱。

一旦你的应用像下一个Facebook一样成功,如果需要的话,你可以投资更强大的web服务替代,或者扩大现有的解决方案。我上面提到的web服务不需要任何替代品;它们会随着你的成长而增长。我想指出的另一点是,现在没有必要考虑可伸缩性。

如果你选择了正确的解决方案,它们会在你需要的时候随你一起扩展。因此,如果你在推出MVP之前就考虑购买托管在自己数据中心的专用服务器架,那你的担忧和时间就花错地方了。

6.慎用第三方api

一个API是开发人员访问外部web服务数据的一种方法。例如,Twitter的API允许任何开发人员构建一个应用程序来访问公共tweet和Twitter用户的帐户信息。并非所有的api都是相同的。

最好的api是那些宁静的(即,它们符合关于数据交互方式的最佳实践和行业标准),并为多种流行语言(PHP、Ruby、Python、Java等)提供包装器。他们还应该提供良好的文档。

您想要对使用的api非常挑剔的原因是您的web应用程序的性能可能会受到这些第三方web服务的显著影响。即使您选择了一个良好的高性能API,您也无法逃脱API所有者公司方向的变化无常。例如,Twitter的API一直受到批评因为该公司选择限制访问他们的API,并强制执行新的使用条款,这些变化严重削弱了一些web应用程序。

要特别注意那些核心功能严重依赖或完全依赖第三方api的web应用程序想法。外部api随时都可能发生变化,这些变化会极大地影响你的网页应用的方向和成功。

7.专注于你的想法的出色执行

我想不出哪款网页应用的成功仅仅是因为它是“第一”。而不是花时间和金钱请律师起草你的保密协议(nda),而不是害怕别人“窃取”你的想法,你最好考虑如何有效地执行你的想法。用一位非常成功和受人尊敬的企业家德里克·西弗斯的话来说:想法。不执行就一文不值对西弗斯来说,想法只是实际成功的倍增器。。单独的想法不会产生任何成果:换句话说:想法不会让你富有。

正确地执行想法才是关键。伟大的产品之所以伟大,不在于你的一个大创意,而在于成千上万个被很好执行的小创意。这是一个使用“刷新”接口,以避免用户重新加载页面。

它将使图片上传变得更简单和容易的想法概念化。是你有效执行的大量小想法让你与众不同。

结论

以我的经验来看,我所创建的最成功的项目以及与我合作过的最好的客户往往都包含了这些内容。我希望我能在某种程度上启发你思考如何开发你的第一个网页应用。你对开发网页应用有什么建议?

你不同意我说的话吗?请在评论中分享你的想法,让我们开始讨论。

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!